From bb47feb517c987a69dbeeff06ce5417671f3066c Mon Sep 17 00:00:00 2001 From: Pegah Sarram Date: Fri, 8 Sep 2017 17:06:38 -0700 Subject: [PATCH 1/3] [Fixed Position] Text size control for text and telemetry objects Add a select control for text and telemetry objects to allow setting text size. Set the default size to 13px. Fixes # 1496 --- platform/features/fixed/bundle.js | 84 +++++++++++++++++-- .../res/templates/elements/telemetry.html | 2 +- .../layout/res/templates/elements/text.html | 2 +- .../features/layout/src/FixedController.js | 3 +- .../layout/src/elements/ElementFactory.js | 3 +- .../features/layout/src/elements/TextProxy.js | 9 ++ .../layout/test/elements/TextProxySpec.js | 9 +- 7 files changed, 99 insertions(+), 13 deletions(-) diff --git a/platform/features/fixed/bundle.js b/platform/features/fixed/bundle.js index 4dc01d682e..cf0d7e6a42 100644 --- a/platform/features/fixed/bundle.js +++ b/platform/features/fixed/bundle.js @@ -122,14 +122,6 @@ define([ "description": "Set border color", "control": "color" }, - { - "property": "color", - "cssClass": "icon-T", - "title": "Text color", - "description": "Set text color", - "mandatory": true, - "control": "color" - }, { "property": "url", "cssClass": "icon-image", @@ -145,6 +137,82 @@ define([ } ] }, + { + "items": [ + { + "property": "color", + "cssClass": "icon-T", + "title": "Text color", + "description": "Set text color", + "mandatory": true, + "control": "color" + }, + { + "property": "size", + "title": "Text size", + "description": "Set text size", + "control": "select", + "options": [ + { + "value": "8px", + "name": "8 px" + }, + { + "value": "9px", + "name": "9 px" + }, + { + "value": "10px", + "name": "10 px" + }, + { + "value": "11px", + "name": "11 px" + }, + { + "value": "12px", + "name": "12 px" + }, + { + "value": "14px", + "name": "14 px" + }, + { + "value": "16px", + "name": "16 px" + }, + { + "value": "20px", + "name": "20 px" + }, + { + "value": "24px", + "name": "24 px" + }, + { + "value": "30px", + "name": "30 px" + }, + { + "value": "36px", + "name": "36 px" + }, + { + "value": "48px", + "name": "48 px" + }, + { + "value": "72px", + "name": "72 px" + }, + { + "value": "96px", + "name": "96 px" + } + ] + } + ] + }, { "items": [ { diff --git a/platform/features/layout/res/templates/elements/telemetry.html b/platform/features/layout/res/templates/elements/telemetry.html index 0f5ed58f05..515c919dc4 100644 --- a/platform/features/layout/res/templates/elements/telemetry.html +++ b/platform/features/layout/res/templates/elements/telemetry.html @@ -21,7 +21,7 @@ -->
{{ngModel.element.text}}
diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index de3c5a32f6..d2db36bc1f 100644 --- a/platform/features/layout/src/FixedController.js +++ b/platform/features/layout/src/FixedController.js @@ -256,7 +256,8 @@ define( titled: true, width: DEFAULT_DIMENSIONS[0], height: DEFAULT_DIMENSIONS[1], - useGrid: true + useGrid: true, + size: "14px" }); //Re-initialize objects, and subscribe to new object diff --git a/platform/features/layout/src/elements/ElementFactory.js b/platform/features/layout/src/elements/ElementFactory.js index 8f4e0b09e2..573b7d0fbc 100644 --- a/platform/features/layout/src/elements/ElementFactory.js +++ b/platform/features/layout/src/elements/ElementFactory.js @@ -42,7 +42,8 @@ define( }, "fixed.text": { fill: "transparent", - stroke: "transparent" + stroke: "transparent", + size: "14px" } }, DIALOGS = { diff --git a/platform/features/layout/src/elements/TextProxy.js b/platform/features/layout/src/elements/TextProxy.js index 939c88c5ef..8fee025170 100644 --- a/platform/features/layout/src/elements/TextProxy.js +++ b/platform/features/layout/src/elements/TextProxy.js @@ -58,6 +58,15 @@ define( */ proxy.text = new AccessorMutator(element, 'text'); + /** + * Get and/or set the text size of this element. + * + * @param {string} [size] the new text size (if setting) + * @returns {string} the text size + * @memberof platform/features/layout.TextProxy# + */ + proxy.size = new AccessorMutator(element, 'size'); + return proxy; } diff --git a/platform/features/layout/test/elements/TextProxySpec.js b/platform/features/layout/test/elements/TextProxySpec.js index ee6c5044f9..2dd7340771 100644 --- a/platform/features/layout/test/elements/TextProxySpec.js +++ b/platform/features/layout/test/elements/TextProxySpec.js @@ -35,7 +35,8 @@ define( y: 2, width: 42, height: 24, - fill: "transparent" + fill: "transparent", + size: "20px" }; testElements = [{}, {}, testElement, {}]; proxy = new TextProxy( @@ -50,6 +51,12 @@ define( expect(proxy.fill('#FFF')).toEqual('#FFF'); expect(proxy.fill()).toEqual('#FFF'); }); + + it("provides getter/setter for text size", function () { + expect(proxy.size()).toEqual('20px'); + expect(proxy.size('12px')).toEqual('12px'); + expect(proxy.size()).toEqual('12px'); + }); }); } ); From 68abc15ed59fe9b1f84e0a94d09b6e451a56e407 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Sep 2017 09:47:18 -0700 Subject: [PATCH 2/3] [Frontend] Fix alignment and font-size issues in tool-bar Fixes #1496 --- .../general/res/sass/_fixed-position.scss | 1 + .../general/res/sass/controls/_buttons.scss | 1 - .../general/res/sass/controls/_controls.scss | 3 +-- .../general/res/sass/user-environ/_layout.scss | 4 +++- .../res/sass/user-environ/_tool-bar.scss | 3 +-- platform/features/fixed/bundle.js | 18 +++++++++--------- .../layout/src/elements/ElementFactory.js | 2 +- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index b2e10d7e72..e2fcaaedf1 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -52,6 +52,7 @@ font-size: 0.8rem; $p: 1px; line-height: 100%; + overflow: hidden; &.l-static-text { padding: $p; } diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index f3f26ddc86..d568d66ae0 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -33,7 +33,6 @@ $pad: $interiorMargin * $baseRatio; height: $btnStdH; line-height: $btnStdH; padding: 0 $pad; - vertical-align: top; &.labeled:before { // Icon when it's included diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index a84c26ea52..e1cf1ddf1d 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -309,9 +309,8 @@ textarea.lg { position: relative; height: 300px; } } } &:before { - //@include contextArrow(); pointer-events: none; - color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent)); + color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); display: block; position: absolute; right: $interiorMargin; top: 0; diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 920ba0b3e5..690b30b191 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -240,7 +240,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane { .top-bar .buttons-main .s-button, .top-bar .s-menu-button, .tool-bar .s-button, -.tool-bar .s-menu-button { +.tool-bar .s-menu-button, +.tool-bar .select, +.tool-bar .input-labeled { $h: $btnToolbarH; height: $h; line-height: $h; diff --git a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss index e8788b195d..9d9c4b0786 100644 --- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss @@ -20,6 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .tool-bar { + font-size: 0.7rem; &.btn-bar { white-space: nowrap; } @@ -30,9 +31,7 @@ input[type="search"], input[type="number"] { box-sizing: border-box; - font-size: .8em; height: $btnToolbarH; - margin-bottom: 1px; position: relative; &.sm { width: $btnToolbarH; diff --git a/platform/features/fixed/bundle.js b/platform/features/fixed/bundle.js index cf0d7e6a42..5288578373 100644 --- a/platform/features/fixed/bundle.js +++ b/platform/features/fixed/bundle.js @@ -153,10 +153,6 @@ define([ "description": "Set text size", "control": "select", "options": [ - { - "value": "8px", - "name": "8 px" - }, { "value": "9px", "name": "9 px" @@ -173,10 +169,18 @@ define([ "value": "12px", "name": "12 px" }, + { + "value": "13px", + "name": "13 px" + }, { "value": "14px", "name": "14 px" }, + { + "value": "15px", + "name": "15 px" + }, { "value": "16px", "name": "16 px" @@ -280,11 +284,7 @@ define([ "control": "numberfield", "description": "Resize object width", "min": "1" - } - ] - }, - { - "items": [ + }, { "property": "useGrid", "name": "Snap to Grid", diff --git a/platform/features/layout/src/elements/ElementFactory.js b/platform/features/layout/src/elements/ElementFactory.js index 573b7d0fbc..8567773576 100644 --- a/platform/features/layout/src/elements/ElementFactory.js +++ b/platform/features/layout/src/elements/ElementFactory.js @@ -43,7 +43,7 @@ define( "fixed.text": { fill: "transparent", stroke: "transparent", - size: "14px" + size: "13px" } }, DIALOGS = { From 740db8da75695130c14e5f27d6ce27c94713a57a Mon Sep 17 00:00:00 2001 From: Pegah Sarram Date: Wed, 13 Sep 2017 12:08:52 -0700 Subject: [PATCH 3/3] [Fixed Position] Add tests and fix checkstyle error. Fixes #1496 --- platform/features/fixed/bundle.js | 65 +------------------ .../features/layout/src/FixedController.js | 3 +- .../layout/src/elements/ElementFactory.js | 3 +- .../features/layout/src/elements/TextProxy.js | 4 ++ .../layout/test/elements/TextProxySpec.js | 8 +++ 5 files changed, 17 insertions(+), 66 deletions(-) diff --git a/platform/features/fixed/bundle.js b/platform/features/fixed/bundle.js index 5288578373..3f8e1ced07 100644 --- a/platform/features/fixed/bundle.js +++ b/platform/features/fixed/bundle.js @@ -152,68 +152,9 @@ define([ "title": "Text size", "description": "Set text size", "control": "select", - "options": [ - { - "value": "9px", - "name": "9 px" - }, - { - "value": "10px", - "name": "10 px" - }, - { - "value": "11px", - "name": "11 px" - }, - { - "value": "12px", - "name": "12 px" - }, - { - "value": "13px", - "name": "13 px" - }, - { - "value": "14px", - "name": "14 px" - }, - { - "value": "15px", - "name": "15 px" - }, - { - "value": "16px", - "name": "16 px" - }, - { - "value": "20px", - "name": "20 px" - }, - { - "value": "24px", - "name": "24 px" - }, - { - "value": "30px", - "name": "30 px" - }, - { - "value": "36px", - "name": "36 px" - }, - { - "value": "48px", - "name": "48 px" - }, - { - "value": "72px", - "name": "72 px" - }, - { - "value": "96px", - "name": "96 px" - } - ] + "options": [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96].map(function (size) { + return { "name": size + " px", "value": size + "px" }; + }) } ] }, diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js index d2db36bc1f..de3c5a32f6 100644 --- a/platform/features/layout/src/FixedController.js +++ b/platform/features/layout/src/FixedController.js @@ -256,8 +256,7 @@ define( titled: true, width: DEFAULT_DIMENSIONS[0], height: DEFAULT_DIMENSIONS[1], - useGrid: true, - size: "14px" + useGrid: true }); //Re-initialize objects, and subscribe to new object diff --git a/platform/features/layout/src/elements/ElementFactory.js b/platform/features/layout/src/elements/ElementFactory.js index 8567773576..8f4e0b09e2 100644 --- a/platform/features/layout/src/elements/ElementFactory.js +++ b/platform/features/layout/src/elements/ElementFactory.js @@ -42,8 +42,7 @@ define( }, "fixed.text": { fill: "transparent", - stroke: "transparent", - size: "13px" + stroke: "transparent" } }, DIALOGS = { diff --git a/platform/features/layout/src/elements/TextProxy.js b/platform/features/layout/src/elements/TextProxy.js index 8fee025170..a055ad3853 100644 --- a/platform/features/layout/src/elements/TextProxy.js +++ b/platform/features/layout/src/elements/TextProxy.js @@ -67,6 +67,10 @@ define( */ proxy.size = new AccessorMutator(element, 'size'); + if (proxy.size() === undefined) { + proxy.size("13px"); + } + return proxy; } diff --git a/platform/features/layout/test/elements/TextProxySpec.js b/platform/features/layout/test/elements/TextProxySpec.js index 2dd7340771..494ee76bda 100644 --- a/platform/features/layout/test/elements/TextProxySpec.js +++ b/platform/features/layout/test/elements/TextProxySpec.js @@ -57,6 +57,14 @@ define( expect(proxy.size('12px')).toEqual('12px'); expect(proxy.size()).toEqual('12px'); }); + + it("defaults to 13px for unspecified text size", function () { + testElement = {x: 1, y: 2}; + proxy = new TextProxy(testElement, 0, [testElement]); + + expect(proxy.size()).toEqual('13px'); + }); + }); } );