diff --git a/index.html b/index.html
index fd12104746..1034cd506e 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,8 @@
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index 070a711cc5..20d8d30c53 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -110,7 +110,7 @@ export default {
if (clock === undefined) {
return {
key: 'fixed',
- name: 'Fixed Timespan Mode',
+ name: 'Fixed Timespan',
description: 'Query and explore data that falls between two fixed datetimes.',
cssClass: 'icon-tabular'
}
diff --git a/src/plugins/timeConductor/conductor-axis.scss b/src/plugins/timeConductor/conductor-axis.scss
index 23ded63eaf..b16a58f718 100644
--- a/src/plugins/timeConductor/conductor-axis.scss
+++ b/src/plugins/timeConductor/conductor-axis.scss
@@ -13,7 +13,7 @@
text-rendering: geometricPrecision;
width: 100%;
height: 100%;
- > g {
+ > g.axis {
// Overall Tick holder
transform: translateY($tickYPos);
path {
@@ -44,7 +44,6 @@
}
body.desktop .is-fixed-mode & {
- @include cursorGrab();
background-size: 3px 30%;
background-color: $colorBodyBgSubtle;
box-shadow: inset rgba(black, 0.4) 0 1px 1px;
@@ -55,17 +54,6 @@
stroke: $colorBodyBgSubtle;
transition: $transOut;
}
-
- &:hover,
- &:active {
- $c: $colorKeySubtle;
- background-color: $c;
- transition: $transIn;
- svg text {
- stroke: $c;
- transition: $transIn;
- }
- }
}
.is-realtime-mode & {
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index dc5c308477..4ecba9e3f2 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -57,6 +57,65 @@
}
}
+ &.is-fixed-mode {
+ .c-conductor-axis {
+ &__zoom-indicator {
+ border: 1px solid transparent;
+ display: none; // Hidden by default
+ }
+ }
+
+ &:not(.is-panning),
+ &:not(.is-zooming) {
+ .c-conductor-axis {
+ &:hover,
+ &:active {
+ cursor: col-resize;
+ filter: $timeConductorAxisHoverFilter;
+ }
+ }
+ }
+
+ &.is-panning,
+ &.is-zooming {
+ .c-conductor-input input {
+ // Styles for inputs while zooming or panning
+ background: rgba($timeConductorActiveBg, 0.4);
+ }
+ }
+
+ &.alt-pressed {
+ .c-conductor-axis:hover {
+ // When alt is being pressed and user is hovering over the axis, set the cursor
+ @include cursorGrab();
+ }
+ }
+
+ &.is-panning {
+ .c-conductor-axis {
+ @include cursorGrab();
+ background-color: $timeConductorActivePanBg;
+ transition: $transIn;
+
+ svg text {
+ stroke: $timeConductorActivePanBg;
+ transition: $transIn;
+ }
+ }
+ }
+
+ &.is-zooming {
+ .c-conductor-axis__zoom-indicator {
+ display: block;
+ position: absolute;
+ background: rgba($timeConductorActiveBg, 0.4);
+ border-left-color: $timeConductorActiveBg;
+ border-right-color: $timeConductorActiveBg;
+ top: 0; bottom: 0;
+ }
+ }
+ }
+
&.is-realtime-mode {
.c-conductor__time-bounds {
grid-template-columns: 20px auto 1fr auto auto;
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 1ea130b891..3e3bbaf2db 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -142,6 +142,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
$colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;
/************************************************** BROWSING */
$browseFrameColor: pullForward($colorBodyBg, 10%);
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index 81a9cf3eae..d72abb7f8e 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -146,6 +146,9 @@ $colorTimeHov: pullForward($colorTime, 10%);
$colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(1.2);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #226074;
/************************************************** BROWSING */
$browseFrameColor: pullForward($colorBodyBg, 10%);
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index dcc4998f1a..7f44128019 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -132,7 +132,7 @@ $colorPausedFg: #fff;
// Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
-$colorKeySubtle: pushBack($colorKey, 10%);
+$colorKeySubtle: pushBack($colorKey, 20%);
// Time Colors
$colorTime: #618cff;
@@ -142,6 +142,9 @@ $colorTimeHov: pushBack($colorTime, 5%);
$colorTimeSubtle: pushBack($colorTime, 20%);
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
+$timeConductorAxisHoverFilter: brightness(0.8);
+$timeConductorActiveBg: $colorKey;
+$timeConductorActivePanBg: #A0CDE1;
/************************************************** BROWSING */
$browseFrameColor: pullForward($colorBodyBg, 10%);
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index 22a6497c05..565295d6dd 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -462,9 +462,17 @@ select {
text-shadow: $shdwMenuText;
padding: $interiorMarginSm;
box-shadow: $shdwMenu;
- display: block;
+ display: flex;
+ flex-direction: column;
position: absolute;
z-index: 100;
+
+ > * {
+ flex: 0 0 auto;
+ //+ * {
+ // margin-top: $interiorMarginSm;
+ //}
+ }
}
@mixin menuInner() {
@@ -502,6 +510,23 @@ select {
.c-menu {
@include menuOuter();
@include menuInner();
+
+ &__section-hint {
+ $m: $interiorMargin;
+ margin: $m 0;
+ padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+
+ opacity: 0.6;
+ font-size: 0.9em;
+ font-style: italic;
+ }
+
+ &__section-separator {
+ $m: $interiorMargin;
+ border-top: 1px solid $colorInteriorBorder;
+ margin: $m 0;
+ padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+ }
}
.c-super-menu {