From 9b59fd7eaedd1ccad9f5da22e1194dfe4e0cd9b4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 12 Jan 2016 18:04:09 -0800 Subject: [PATCH 01/10] [Frontend] Mods to allow plot tick labels to ellipsis to left open #337 Tick label strings are now reversed in their char order in PlotTickGenerator.js, then reversed again via CSS in _plots-main.scss. This forces the browser to clip the label at the left 'start' side, rather than the end, resulting in the least significant portion of the label getting clipped. --- .../general/res/sass/plots/_plots-main.scss | 2 ++ .../themes/espresso/res/css/theme-espresso.css | 14 ++++++++------ .../commonUI/themes/snow/res/css/theme-snow.css | 14 ++++++++------ .../plot/src/elements/PlotTickGenerator.js | 4 +++- 4 files changed, 21 insertions(+), 13 deletions(-) diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 96a11b45d5..5fee11dda1 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -243,6 +243,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi:bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 19d2d6fcb4..594bb082f6 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -6874,12 +6874,14 @@ table { /* line 244, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi: bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 251, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 253, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -6890,7 +6892,7 @@ table { width: 20%; margin-left: -10%; text-align: center; } - /* line 261, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 263, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -6900,18 +6902,18 @@ table { margin-bottom: -0.5em; text-align: right; } -/* line 272, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 68bb1eb262..3a914e488b 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -6747,12 +6747,14 @@ table { /* line 244, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { + direction: rtl; + unicode-bidi: bidi-override; font-size: 0.7rem; position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 251, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 253, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -6763,7 +6765,7 @@ table { width: 20%; margin-left: -10%; text-align: center; } - /* line 261, ../../../../general/res/sass/plots/_plots-main.scss */ + /* line 263, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -6773,18 +6775,18 @@ table { margin-bottom: -0.5em; text-align: right; } -/* line 272, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../../../../general/res/sass/plots/_plots-main.scss */ +/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 8fa957fae7..57c6f6c5cf 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -62,7 +62,9 @@ define( for (i = 0; i < count; i += 1) { result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. - label: span > 0 ? format(i * step + start) : '' + // Make the tick value have its ellipsis on the least significant left side by reversing it here, + // and then reversing it again via CSS. Relevant styling in _plots-main.scss. + label: span > 0 ? format(i * step + start).split('').reverse().join('') : '' }); } From a10f895904912aa04e675b0984c219277c72d99d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 12 Jan 2016 18:20:52 -0800 Subject: [PATCH 02/10] [Frontend] Mods to allow plot tick labels to ellipsis to left open #337 Fixing code due to circleci fail in pull request; --- platform/features/plot/src/elements/PlotTickGenerator.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 57c6f6c5cf..61f2faf827 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -57,14 +57,17 @@ define( PlotTickGenerator.prototype.generateTicks = function (start, span, count, format) { var step = span / (count - 1), result = [], + tickVal = '', i; for (i = 0; i < count; i += 1) { + tickVal = format(i * step + start).toString(); + // Make the tick value have its ellipsis on the least significant left side by reversing it here, + // and then reversing it again via CSS. + tickVal = tickVal.split('').reverse().join(''); result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. - // Make the tick value have its ellipsis on the least significant left side by reversing it here, - // and then reversing it again via CSS. Relevant styling in _plots-main.scss. - label: span > 0 ? format(i * step + start).split('').reverse().join('') : '' + label: span > 0 ? : '' }); } From f8114ba6b6bd7cee2617378e08314e96421de222 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 12 Jan 2016 18:23:30 -0800 Subject: [PATCH 03/10] [Frontend] Mods to allow plot tick labels to ellipsis to left open #337 Fixing code due to circleci fail in pull request; --- platform/features/plot/src/elements/PlotTickGenerator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 61f2faf827..2259041d54 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -67,7 +67,7 @@ define( tickVal = tickVal.split('').reverse().join(''); result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. - label: span > 0 ? : '' + label: span > 0 ? tickVal : '' }); } From 5e628b1a259b5fbe34d3d6b5c124c85ee4201d4f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jan 2016 10:05:30 -0800 Subject: [PATCH 04/10] [Frontend] Mods to allow plot tick labels to ellipsis to left open #337 Still fixing code due to circleci fail in pull request; --- .../features/plot/src/elements/PlotTickGenerator.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 2259041d54..7155c103af 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -61,10 +61,12 @@ define( i; for (i = 0; i < count; i += 1) { - tickVal = format(i * step + start).toString(); - // Make the tick value have its ellipsis on the least significant left side by reversing it here, - // and then reversing it again via CSS. - tickVal = tickVal.split('').reverse().join(''); + tickVal = format(i * step + start); + if (tickVal != undefined) { + // Make the tick value have its ellipsis on the least significant left side by reversing it here, + // and then reversing it again via CSS. + tickVal = tickVal.toString().split('').reverse().join(''); + } result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. label: span > 0 ? tickVal : '' From 8c325eb1b133f17d582ca3b983307f97e7b143ee Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jan 2016 10:11:14 -0800 Subject: [PATCH 05/10] [Frontend] Mods to allow plot tick labels to ellipsis to left open #337 Still fixing code due to circleci fail in pull request; --- platform/features/plot/src/elements/PlotTickGenerator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index 7155c103af..d916e8cf36 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -62,7 +62,7 @@ define( for (i = 0; i < count; i += 1) { tickVal = format(i * step + start); - if (tickVal != undefined) { + if (tickVal !== undefined) { // Make the tick value have its ellipsis on the least significant left side by reversing it here, // and then reversing it again via CSS. tickVal = tickVal.toString().split('').reverse().join(''); From a50410f8ed2eb77fdca9750866113d9f85590a70 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 15 Jan 2016 13:00:24 -0800 Subject: [PATCH 06/10] [Plot] Allow filters to be registered https://github.com/nasa/openmctweb/pull/477/files#r49903975 --- platform/framework/src/register/CustomRegistrars.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js index 0051105036..e47825e991 100644 --- a/platform/framework/src/register/CustomRegistrars.js +++ b/platform/framework/src/register/CustomRegistrars.js @@ -221,6 +221,13 @@ define( CustomRegistrars.prototype.services = mapUpon(customRegistrar("service")); + /** + * Register Angular filters. + * @param {Array} extensions the resolved extensions + */ + CustomRegistrars.prototype.filters = + mapUpon(customRegistrar("filter")); + /** * Register functions which will run after bootstrapping. * @param {Array} extensions the resolved extensions From 96dc055f020cd9156da871cd2f2829b07ce147f3 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 15 Jan 2016 13:05:01 -0800 Subject: [PATCH 07/10] [Plot] Add reverse filter --- platform/commonUI/general/bundle.json | 6 +++ .../general/src/filters/ReverseFilter.js | 44 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 platform/commonUI/general/src/filters/ReverseFilter.js diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index e4e0de3861..acb27422fc 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -25,6 +25,12 @@ "depends": [ "notificationService", "agentService" ] } ], + "filters": [ + { + "implementation": "filters/ReverseFilter.js", + "key": "reverse" + } + ], "stylesheets": [ { "stylesheetUrl": "css/normalize.min.css", diff --git a/platform/commonUI/general/src/filters/ReverseFilter.js b/platform/commonUI/general/src/filters/ReverseFilter.js new file mode 100644 index 0000000000..a5d65748d0 --- /dev/null +++ b/platform/commonUI/general/src/filters/ReverseFilter.js @@ -0,0 +1,44 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ + +define(function () { + 'use strict'; + + /** + * Implements the `reverse` filter, which reverses text strings. + * Useful in cases where text should be reversed for presentational + * reasons (e.g. in conjunction with CSS tricks involing text direction), + * allowing such behavior to be handled independently from the controller + * layer. + * + * @constructor + * @memberof platform/commonUI/general + */ + function ReverseFilter() { + return function reverse(value) { + return value && value.toString().split('').reverse().join(''); + }; + } + + return ReverseFilter; +}); \ No newline at end of file From a94e99af704d99ba846f3668d8c78d4af0a3924c Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 15 Jan 2016 13:09:05 -0800 Subject: [PATCH 08/10] [Plot] Use reverse filter for plot ticks ...to remove CSS-related reversal from scripts --- platform/features/plot/res/templates/plot.html | 2 +- platform/features/plot/src/elements/PlotTickGenerator.js | 9 +-------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 4ad14c7f5b..aef04ce9ca 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -153,7 +153,7 @@ class="gl-plot-tick gl-plot-x-tick-label" ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)" ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }"> - {{tick.label}} + {{tick.label | reverse}}
diff --git a/platform/features/plot/src/elements/PlotTickGenerator.js b/platform/features/plot/src/elements/PlotTickGenerator.js index d916e8cf36..8fa957fae7 100644 --- a/platform/features/plot/src/elements/PlotTickGenerator.js +++ b/platform/features/plot/src/elements/PlotTickGenerator.js @@ -57,19 +57,12 @@ define( PlotTickGenerator.prototype.generateTicks = function (start, span, count, format) { var step = span / (count - 1), result = [], - tickVal = '', i; for (i = 0; i < count; i += 1) { - tickVal = format(i * step + start); - if (tickVal !== undefined) { - // Make the tick value have its ellipsis on the least significant left side by reversing it here, - // and then reversing it again via CSS. - tickVal = tickVal.toString().split('').reverse().join(''); - } result.push({ //If data to show, display label for each tick line, otherwise show lines but suppress labels. - label: span > 0 ? tickVal : '' + label: span > 0 ? format(i * step + start) : '' }); } From 119429bc42ea2fdbcd011d42bac668d21806a4f2 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 15 Jan 2016 13:13:08 -0800 Subject: [PATCH 09/10] [Plot] Test reverse filter --- .../general/src/filters/ReverseFilter.js | 2 +- .../general/test/filters/ReverseFilterSpec.js | 45 +++++++++++++++++++ platform/commonUI/general/test/suite.json | 1 + 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 platform/commonUI/general/test/filters/ReverseFilterSpec.js diff --git a/platform/commonUI/general/src/filters/ReverseFilter.js b/platform/commonUI/general/src/filters/ReverseFilter.js index a5d65748d0..16ab9bc882 100644 --- a/platform/commonUI/general/src/filters/ReverseFilter.js +++ b/platform/commonUI/general/src/filters/ReverseFilter.js @@ -41,4 +41,4 @@ define(function () { } return ReverseFilter; -}); \ No newline at end of file +}); diff --git a/platform/commonUI/general/test/filters/ReverseFilterSpec.js b/platform/commonUI/general/test/filters/ReverseFilterSpec.js new file mode 100644 index 0000000000..91b770c5a8 --- /dev/null +++ b/platform/commonUI/general/test/filters/ReverseFilterSpec.js @@ -0,0 +1,45 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + +define( + ['../../src/filters/ReverseFilter'], + function (ReverseFilter) { + 'use strict'; + + describe("The reverse filter", function () { + var reverse; + + beforeEach(function () { + reverse = new ReverseFilter(); + }); + + it("reverses text", function () { + expect(reverse('foo')).toEqual('oof'); + }); + + it("returns undefined for undefined inputs", function () { + expect(reverse(undefined)).toBeUndefined(); + }); + }); + } +); diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json index 5f3cf8bc64..09d0bfd097 100644 --- a/platform/commonUI/general/test/suite.json +++ b/platform/commonUI/general/test/suite.json @@ -20,6 +20,7 @@ "directives/MCTScroll", "directives/MCTSplitPane", "directives/MCTSplitter", + "filters/ReverseFilter", "services/Popup", "services/PopupService", "services/UrlService", From c2207fe7ce9601669f51d4b16b293cf171ac5a6a Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 15 Jan 2016 13:14:33 -0800 Subject: [PATCH 10/10] [Plot] Use reverse filter for range ticks too --- platform/features/plot/res/templates/plot.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index aef04ce9ca..b9c76c85e9 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -55,7 +55,7 @@
- {{tick.label}} + {{tick.label | reverse}}