ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 16:36:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Mods to allow plot tick labels to ellipsis to left

Browse Source 
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.
This commit is contained in:
Charles Hacskaylo 2016-01-12 18:04:09 -08:00
parent 9cc03123b1
commit 9b59fd7eae
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -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;

14
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -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; }

14
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -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; }

4
platform/features/plot/src/elements/PlotTickGenerator.js
View File

@ -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('') : ''
});
}