Skip to content

Commit 1c3bd69

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for TOI element, some refactoring
Fixes #933 Fixes #1193 Moves some TOI styling into dedicated new scss file; Enhancements to TOI in plots to bring into parity with TOI in TC approach;
1 parent 1a93ba2 commit 1c3bd69

File tree

6 files changed

+137
-77
lines changed

6 files changed

+137
-77
lines changed

‎platform/commonUI/general/res/sass/_main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
@import "controls/lists";
4343
@import "controls/menus";
4444
@import "controls/messages";
45+
@import "controls/time-of-interest";
4546
@import "mobile/controls/menus";
4647

4748
/********************************* FORMS */

‎platform/commonUI/general/res/sass/_mixins.scss

+8
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,14 @@
392392
white-space: nowrap;
393393
}
394394

395+
@mixin reverseEllipsis() {
396+
direction: rtl;
397+
unicode-bidi:bidi-override;
398+
overflow: hidden;
399+
white-space: nowrap;
400+
text-overflow: ellipsis;
401+
}
402+
395403
@mixin scrollH($showBar: auto) {
396404
overflow-x: $showBar;
397405
overflow-y: hidden;

‎platform/commonUI/general/res/sass/controls/_time-of-interest.scss

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/*****************************************************************************
2+
* Open MCT, Copyright (c) 2014-2016, United States Government
3+
* as represented by the Administrator of the National Aeronautics and Space
4+
* Administration. All rights reserved.
5+
*
6+
* Open MCT is licensed under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
* http://www.apache.org/licenses/LICENSE-2.0.
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14+
* License for the specific language governing permissions and limitations
15+
* under the License.
16+
*
17+
* Open MCT includes source code licensed under additional open source
18+
* licenses. See the Open Source Licenses file (LICENSES.md) included with
19+
* this source code distribution or the Licensing information page available
20+
* at runtime from the About dialog for additional information.
21+
*****************************************************************************/
22+
23+
.l-toi-holder {
24+
@include trans-prop-nice($props: opacity, $dur: 200ms);
25+
&:not(.pinned) {
26+
opacity: 0; // Hide by default, only show when user hovers over container that implements this element
27+
}
28+
.l-toi {
29+
30+
}
31+
.l-toi-val {
32+
color: $toiColorFg;
33+
34+
}
35+
}
36+
37+
// TOI in tables
38+
.mct-table {
39+
tr.l-toi-holder {
40+
td.l-toi {
41+
background-color: $toiColorBg;
42+
column-span: 999;
43+
font-size: 0;
44+
}
45+
}
46+
}
47+
48+
// TOI in plots
49+
.gl-plot {
50+
.gl-plot-wrapper-display-area-and-x-axis {
51+
&:hover {
52+
.l-toi-holder {
53+
opacity: 1;
54+
}
55+
}
56+
.l-toi-holder {
57+
$toiColorBgPinned: rgba($toiColorBgPinned, 0.4);
58+
pointer-events: none;
59+
position: absolute;
60+
top: 0;
61+
bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
62+
min-width: 50px;
63+
max-width: 150px;
64+
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
65+
&:before {
66+
// Vertical line
67+
border-left: 1px dashed $toiColorBg;
68+
content: '';
69+
display: block;
70+
left: 50%;
71+
position: absolute;
72+
top: 0;
73+
bottom: 0;
74+
width: 1px;
75+
}
76+
.l-toi-val {
77+
background-color: $toiColorBg;
78+
box-sizing: border-box;
79+
padding: $interiorMarginSm $interiorMarginSm;
80+
position: absolute;
81+
text-align: center;
82+
width: 100%;
83+
bottom: -2px;
84+
border-radius: $controlCr;
85+
.val {
86+
@include reverseEllipsis();
87+
}
88+
.t-unpin-button {
89+
margin-left: $interiorMarginSm;
90+
pointer-events: auto;
91+
}
92+
}
93+
94+
&.pinned {
95+
&:before {
96+
border-left-color: $toiColorBgPinned;
97+
border-left-style: solid;
98+
}
99+
.l-toi-val {
100+
background-color: $toiColorBgPinned;
101+
border-radius: 0;
102+
border-top-left-radius: $controlCr;
103+
border-top-right-radius: $controlCr;
104+
bottom: 0px;
105+
}
106+
}
107+
108+
&:not(.pinned) {
109+
.l-toi-val {
110+
@include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
111+
}
112+
.t-unpin-button {
113+
display: none;
114+
}
115+
}
116+
z-index: 3;
117+
}
118+
}
119+
}

‎platform/commonUI/general/res/sass/plots/_plots-main.scss

-74
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@
1919
* this source code distribution or the Licensing information page available
2020
* at runtime from the About dialog for additional information.
2121
*****************************************************************************/
22-
@mixin reverseEllipsis() {
23-
direction: rtl;
24-
unicode-bidi:bidi-override;
25-
overflow: hidden;
26-
white-space: nowrap;
27-
text-overflow: ellipsis;
28-
}
29-
3022
.abs.holder-plot {
3123
// Fend off the scrollbar when less than min-height;
3224
right: $interiorMargin;
@@ -87,72 +79,6 @@
8779
width: auto;
8880
overflow: hidden;
8981
}
90-
91-
.l-toi-holder {
92-
//@include test(green);
93-
$cBg: $toiColorBg;
94-
$cBgPinnedOpacity: 0.4;
95-
$cBgPinned: rgba($toiColorBgPinned, 0.4);
96-
pointer-events: none;
97-
position: absolute;
98-
top: 0;
99-
bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
100-
min-width: 50px;
101-
max-width: 150px;
102-
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
103-
&:before {
104-
// Vertical line
105-
border-left: 1px dashed $cBg;
106-
content:'';
107-
display: block;
108-
left: 50%;
109-
position: absolute;
110-
top: 0; bottom: 0;
111-
width: 1px;
112-
}
113-
.l-toi-val {
114-
background-color: $cBg;
115-
color: $toiColorFg;
116-
box-sizing: border-box;
117-
padding: $interiorMarginSm $interiorMarginSm;
118-
position: absolute;
119-
text-align: center;
120-
width: 100%;
121-
bottom: -2px;
122-
border-radius: $controlCr;
123-
.val {
124-
@include reverseEllipsis();
125-
}
126-
.t-unpin-button {
127-
margin-left: $interiorMarginSm;
128-
pointer-events: auto;
129-
}
130-
}
131-
132-
&.pinned {
133-
&:before {
134-
border-left-color: $cBgPinned;
135-
border-left-style: solid;
136-
}
137-
.l-toi-val {
138-
background-color: $cBgPinned;
139-
border-radius: 0;
140-
border-top-left-radius: $controlCr;
141-
border-top-right-radius: $controlCr;
142-
bottom: 0px;
143-
}
144-
}
145-
146-
&:not(.pinned) {
147-
.l-toi-val {
148-
@include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
149-
}
150-
.t-unpin-button {
151-
display: none;
152-
}
153-
}
154-
z-index: 3;
155-
}
15682
}
15783

15884
.gl-plot-axis-area {

‎platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

-2
Original file line numberDiff line numberDiff line change
@@ -277,9 +277,7 @@
277277
$cPinnedHov: $toiColorBgPinned;
278278
$linesVOffset: 2px;
279279
@include transform(translateX(-50%));
280-
@include trans-prop-nice($props: opacity, $dur: 200ms);
281280
color: $c;
282-
opacity: 0; // Hide by default, only show when user hovers over .l-data-visualization
283281
top: 0px;
284282
bottom: 0px;
285283
width: $timeCondTOIIconD;

‎platform/features/plot/res/templates/plot.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,16 @@
7777

7878
<!-- new wrapper inserted here -->
7979
<div class="gl-plot-wrapper-display-area-and-x-axis">
80-
8180
<!-- TOI element -->
81+
<div class="l-toi-holder pinned"
82+
ng-class="{ active: true }"
83+
style="left: 70%">
84+
<!-- Need text val at bottom, plus vertical line -->
85+
<div class="l-toi-val l-flex-row">
86+
<span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
87+
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
88+
</div>
89+
</div>
8290
<div class="l-toi-holder"
8391
style="left: 20%">
8492
<!-- Need text val at bottom, plus vertical line -->

0 commit comments

Comments
 (0)