mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 14:07:50 +00:00
Conductor fixes (#2189)
* Conductor fixes - Restore RT update time field; - Colors tweaked; - Much better mobile layout; * Significant fixes in Conductor markup and styling - Markup/CSS simplified and clearer; - Better coloring in both Themes; - Better clarity for axis UI element; - Fixed hover and focus styles on inputs;
This commit is contained in:
Charles Hacskaylo
Pete Richards
parent
5f9f3cd8e8
commit
88bcb6078e
@ -27,65 +27,61 @@
|
||||
|
||||
<ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
|
||||
|
||||
<div class="c-conductor__start-input">
|
||||
<!-- Start input and controls -->
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start__fixed"
|
||||
v-if="isFixed">
|
||||
<!-- Fixed input -->
|
||||
<div class="c-conductor__start__fixed__label">Start</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
ref="startDate"
|
||||
v-model="formattedBounds.start"
|
||||
@change="validateBounds('start', $event.target); setBoundsFromView()" />
|
||||
<date-picker
|
||||
:default-date-time="formattedBounds.start"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="startDateSelected"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start__delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT input -->
|
||||
<div class="c-direction-indicator icon-minus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text" autocorrect="off"
|
||||
spellcheck="false"
|
||||
v-model="offsets.start"
|
||||
@change="validateOffsets($event); setOffsetsFromView()">
|
||||
</div>
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
|
||||
v-if="isFixed">
|
||||
<!-- Fixed start -->
|
||||
<div class="c-conductor__start-fixed__label">Start</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
ref="startDate"
|
||||
v-model="formattedBounds.start"
|
||||
@change="validateBounds('start', $event.target); setBoundsFromView()" />
|
||||
<date-picker
|
||||
:default-date-time="formattedBounds.start"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="startDateSelected"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-conductor__end-input">
|
||||
<!-- End input and controls -->
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end__fixed"
|
||||
v-if="isFixed">
|
||||
<!-- Fixed input -->
|
||||
<div class="c-conductor__end__fixed__label">End</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
v-model="formattedBounds.end"
|
||||
:disabled="!isFixed"
|
||||
ref="endDate"
|
||||
@change="validateBounds('end', $event.target); setBoundsFromView()">
|
||||
<date-picker
|
||||
class="c-ctrl-wrapper--menus-left"
|
||||
:default-date-time="formattedBounds.end"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="endDateSelected"></date-picker>
|
||||
</div>
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT start -->
|
||||
<div class="c-direction-indicator icon-minus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text" autocorrect="off"
|
||||
spellcheck="false"
|
||||
v-model="offsets.start"
|
||||
@change="validateOffsets($event); setOffsetsFromView()">
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end__delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT input -->
|
||||
<div class="c-direction-indicator icon-plus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
v-model="offsets.end"
|
||||
@change="validateOffsets($event); setOffsetsFromView()">
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
|
||||
<!-- Fixed end and RT 'last update' display -->
|
||||
<div class="c-conductor__end-fixed__label">
|
||||
{{ isFixed ? 'End' : 'Updated' }}
|
||||
</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
v-model="formattedBounds.end"
|
||||
:disabled="!isFixed"
|
||||
ref="endDate"
|
||||
@change="validateBounds('end', $event.target); setBoundsFromView()">
|
||||
<date-picker
|
||||
class="c-ctrl-wrapper--menus-left"
|
||||
:default-date-time="formattedBounds.end"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="endDateSelected"
|
||||
v-if="isFixed"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT end -->
|
||||
<div class="c-direction-indicator icon-plus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
v-model="offsets.end"
|
||||
@change="validateOffsets($event); setOffsetsFromView()">
|
||||
</div>
|
||||
|
||||
<conductor-axis
|
||||
@ -112,65 +108,28 @@
|
||||
grid-row-gap: $interiorMargin;
|
||||
align-items: center;
|
||||
|
||||
|
||||
// Default: fixed mode, desktop
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 20px auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-ticks tc-end"
|
||||
"tc-controls tc-controls tc-controls tc-controls";
|
||||
|
||||
.c-conductor__end-input {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
body.phone.portrait & {
|
||||
&.is-fixed-mode {
|
||||
grid-row-gap: $interiorMargin;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 20px auto;
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start"
|
||||
"tc-mode-icon tc-end"
|
||||
"tc-mode-icon tc-controls";
|
||||
|
||||
.c-conductor {
|
||||
&__mode-icon {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__ticks,
|
||||
&__zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-input [class*='__label'] {
|
||||
// Start and end are in separate columns; make the labels line up
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&__end-input {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__mode-icon {
|
||||
grid-area: tc-mode-icon;
|
||||
}
|
||||
|
||||
&__start-input,
|
||||
&__end-input {
|
||||
&__start-fixed,
|
||||
&__start-delta {
|
||||
grid-area: tc-start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__start-input {
|
||||
grid-area: tc-start;
|
||||
}
|
||||
|
||||
&__end-input {
|
||||
&__end-fixed,
|
||||
&__end-delta {
|
||||
grid-area: tc-end;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__ticks {
|
||||
@ -186,12 +145,68 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class*='__delta'] {
|
||||
[class*='-delta'] {
|
||||
&:before {
|
||||
content: $glyph-icon-clock;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-realtime-mode {
|
||||
grid-template-columns: 20px auto 1fr auto auto;
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-ticks tc-updated tc-end"
|
||||
"tc-controls tc-controls tc-controls tc-controls tc-controls";
|
||||
|
||||
.c-conductor__end-fixed {
|
||||
grid-area: tc-updated;
|
||||
}
|
||||
}
|
||||
|
||||
body.phone.portrait & {
|
||||
grid-row-gap: $interiorMargin;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 20px auto auto;
|
||||
|
||||
&__mode-icon {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&__ticks,
|
||||
&__zoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-fixed-mode {
|
||||
[class*='__start-fixed'],
|
||||
[class*='__end-fixed'] {
|
||||
[class*='__label'] {
|
||||
// Start and end are in separate columns; make the labels line up
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='__end-input'] {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-start"
|
||||
"tc-mode-icon tc-end tc-end"
|
||||
"tc-mode-icon tc-controls tc-controls";
|
||||
}
|
||||
|
||||
&.is-realtime-mode {
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-updated"
|
||||
"tc-mode-icon tc-end tc-end"
|
||||
"tc-mode-icon tc-controls tc-controls";
|
||||
|
||||
.c-conductor__end-fixed {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-conductor-input {
|
||||
@ -215,7 +230,7 @@
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
background: rgba($colorFormInvalid, 0.3);
|
||||
background: rgba($colorFormInvalid, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -235,6 +250,19 @@
|
||||
color: $colorTime;
|
||||
}
|
||||
}
|
||||
|
||||
.c-conductor__end-fixed {
|
||||
// Displays last RT udpate
|
||||
color: $colorTime;
|
||||
|
||||
input {
|
||||
// Remove input look
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
color: $colorTime;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -406,5 +434,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
@include bgTicks($c: rgba($colorBodyFg, 0.4));
|
||||
background-position: 0 50%;
|
||||
background-size: 5px 2px;
|
||||
border-radius: $controlCr;
|
||||
height: $h;
|
||||
|
||||
svg {
|
||||
@ -76,34 +77,37 @@
|
||||
body.desktop .is-fixed-mode & {
|
||||
@include cursorGrab();
|
||||
background-size: 3px 30%;
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorBodyBgSubtle;
|
||||
box-shadow: inset rgba(black, 0.2) 0 1px 1px;
|
||||
box-shadow: inset rgba(black, 0.4) 0 1px 1px;
|
||||
transition: $transOut;
|
||||
|
||||
svg text {
|
||||
fill: $colorBodyFg;
|
||||
stroke: $colorBodyBgSubtle;
|
||||
transition: $transOut;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
$c: $colorKeySubtle;
|
||||
background-color: $c;
|
||||
transition: $transIn;
|
||||
svg text {
|
||||
stroke: $c;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-realtime-mode & {
|
||||
$c: 1px solid rgba($colorTime, 0.7);
|
||||
border-left: $c;
|
||||
border-right: $c;
|
||||
svg text {
|
||||
fill: $colorTime;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -73,7 +73,7 @@ $colorOk: #33cc33;
|
||||
// Base variations
|
||||
$colorBodyBgSubtle: lighten($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: darken($colorKey, 50%);
|
||||
$colorKeySubtle: darken($colorKey, 50%);
|
||||
$colorKeySubtle: darken($colorKey, 10%);
|
||||
|
||||
// Time Colors
|
||||
$colorTime: #618cff;
|
||||
@ -152,8 +152,8 @@ $colorFormText: darken($colorBodyFg, 10%);
|
||||
$colorInputIcon: darken($colorBodyFg, 25%);
|
||||
$colorFieldHint: lighten($colorBodyFg, 40%);
|
||||
$shdwInput: inset rgba(black, 0.4) 0 0 1px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 1px;
|
||||
$shdwInputFoc: inset rgba(black, 0.7) 0 0 3px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
|
||||
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: lighten($colorBodyBg, 5%);
|
||||
|
||||
@ -151,9 +151,9 @@ $colorInputPlaceholder: lighten($colorBodyFg, 20%);
|
||||
$colorFormText: lighten($colorBodyFg, 10%);
|
||||
$colorInputIcon: lighten($colorBodyFg, 25%);
|
||||
$colorFieldHint: darken($colorBodyFg, 40%);
|
||||
$shdwInput: inset rgba(black, 0.4) 0 0 1px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 1px;
|
||||
$shdwInputFoc: inset rgba(black, 0.7) 0 0 3px;
|
||||
$shdwInput: inset rgba(black, 0.7) 0 0 1px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
|
||||
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: darken($colorBodyBg, 5%);
|
||||
|
||||
@ -188,13 +188,15 @@
|
||||
box-shadow: $shdwInput;
|
||||
color: $fg;
|
||||
|
||||
@include hover() {
|
||||
box-shadow: $shdwInputHov;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: $shdwInputFoc;
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
&:not(:focus) {
|
||||
box-shadow: $shdwInputHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user