mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
[Frontend] Time Conductor v2 styling
Fixes #933 WIP: Significant mobile and desktop style tweaks; moved constants into their own include file;
This commit is contained in:
Charles Hacskaylo
parent
ff1678435e
commit
b392633bc6
3
platform/features/conductor-v2/res/sass/_constants.scss
Normal file
3
platform/features/conductor-v2/res/sass/_constants.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$ueTimeConductorH: (25px, 15px, 20px);
|
||||
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
|
||||
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
|
||||
@ -20,7 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@import "bourbon";
|
||||
|
||||
@import "../../../../commonUI/general/res/sass/constants";
|
||||
@import "../../../../commonUI/general/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/mobile/constants";
|
||||
@ -28,8 +27,7 @@
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/constants";
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/icons";
|
||||
|
||||
$ueTimeConductorH: (25px, 6px, 20px);
|
||||
@import "constants";
|
||||
|
||||
@mixin toiLineHovEffects() {
|
||||
&:before,
|
||||
@ -158,38 +156,48 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
}
|
||||
|
||||
.l-time-conductor-inputs-holder {
|
||||
$trInputW: 180px;
|
||||
$hmInputW: 60px;
|
||||
$ticksBlockerFadeW: 50px;
|
||||
$iconCalendarW: 16px;
|
||||
$wBgColor: $colorBodyBg;
|
||||
|
||||
height: $r1H;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
.l-time-range-w {
|
||||
// Wraps a datetime text input field
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.start-w {
|
||||
@include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
|
||||
padding-right: $ticksBlockerFadeW;
|
||||
.title:before {
|
||||
content: 'Start';
|
||||
}
|
||||
}
|
||||
&.end-w {
|
||||
@include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
|
||||
padding-left: $ticksBlockerFadeW;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
.title:before {
|
||||
content: 'End';
|
||||
}
|
||||
}
|
||||
input[type="text"] {
|
||||
@include trans-prop-nice(padding, 250ms);
|
||||
}
|
||||
.time-range-input input {
|
||||
width: $trInputW;
|
||||
.time-range-input input[type="text"] {
|
||||
width: $timeCondInputTimeSysDefW;
|
||||
}
|
||||
.hrs-min-input input {
|
||||
width: $hmInputW;
|
||||
.hrs-min-input input[type="text"] {
|
||||
width: $timeCondInputDeltaDefW;
|
||||
}
|
||||
.icon-calendar {
|
||||
margin-top: 4px;
|
||||
@ -250,18 +258,13 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
color: $colorTick;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// Fixed
|
||||
&.fixed-mode {
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime, latest modes
|
||||
.l-data-visualization {
|
||||
background: $colorTimeCondDataVisRtBg !important
|
||||
}
|
||||
|
||||
// Real-time, latest modes
|
||||
&.realtime-mode,
|
||||
&.latest-mode {
|
||||
.time-conductor-icon {
|
||||
@ -297,69 +300,92 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
&.end-date {
|
||||
pointer-events: none;
|
||||
input[type="text"] {
|
||||
color: $colorTimeCondKeyBg;
|
||||
color: pullForward($colorTimeCondKeyBg, 5%);
|
||||
margin-right: $interiorMargin;
|
||||
text-align: right;
|
||||
tab-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
|
||||
&.latest-mode .time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands-sticky);
|
||||
&.hand-big { @include animation-duration(5s); }
|
||||
&.hand-little { @include animation-duration(60s); }
|
||||
}
|
||||
|
||||
.l-data-visualization {
|
||||
background: $colorTimeCondDataVisRtBg !important
|
||||
}
|
||||
.mode-selector .s-menu-btn {
|
||||
@include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed mode
|
||||
&.fixed-mode {
|
||||
$i: $glyphIconFixed;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime mode
|
||||
&.realtime-mode {
|
||||
$i: $glyphIconRealtime;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands);
|
||||
}
|
||||
.time-delta:before {
|
||||
content: $i;
|
||||
}
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'Now';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// LAD mode
|
||||
&.latest-mode {
|
||||
$i: $glyphIconLatest;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands-sticky);
|
||||
&.hand-big {
|
||||
@include animation-duration(5s);
|
||||
}
|
||||
&.hand-little {
|
||||
@include animation-duration(60s);
|
||||
}
|
||||
}
|
||||
.time-delta:before {
|
||||
content: $i;
|
||||
}
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'LAD';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-time-range-val {
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorInputBg;
|
||||
padding: 1px 1px 0 $interiorMargin;
|
||||
}
|
||||
|
||||
/******************************************************************** MOBILE */
|
||||
|
||||
//@include phoneandtablet {}
|
||||
@include phoneandtablet {
|
||||
.l-time-conductor-holder { min-width: 0 !important; }
|
||||
.super-menu.mini {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
.pane.menu-item-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
.l-time-conductor {
|
||||
min-width: 0;
|
||||
.l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
|
||||
//TODO: mode menu smaller, hide right side
|
||||
.l-time-conductor-inputs-and-ticks mct-conductor-axis {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -387,16 +413,21 @@ $ueTimeConductorH: (25px, 6px, 20px);
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
.title {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime, latest modes
|
||||
// Real-time, latest modes
|
||||
&.realtime-mode,
|
||||
&.latest-mode {
|
||||
// TODO: hide all of start-w
|
||||
.l-time-conductor-inputs-and-ticks {
|
||||
.l-time-range-w {
|
||||
.title {
|
||||
width: 30px;
|
||||
}
|
||||
&.start-w {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
ng-submit="tcController.updateBoundsFromForm(formModel)">
|
||||
<span class="l-time-range-w start-w">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<span class="title"></span>
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: timeSystemModel.format,
|
||||
@ -44,6 +45,7 @@
|
||||
<span class="l-time-range-w end-w">
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<span class="title"></span>
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: timeSystemModel.format,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user