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;

src/plugins/timeConductor/Conductor.vue

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

src/plugins/timeConductor/ConductorAxis.vue

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

src/styles-new/_constants-espresso.scss

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

src/styles-new/_constants-snow.scss

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

src/styles-new/_mixins.scss

@@ -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) {