From b3a4f52fe20f6670364284b235d05d23b71329c4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Jul 2016 18:30:49 -0700 Subject: [PATCH] [Frontend] Styling for Time Conductor v2 Fixes #933 WIP: Adding zoom control with HTML5 input range type; Refactored sass slightly to move display: inline-block out of mixin containerBase and into .s-btn. --- .../general/res/sass/_archetypes.scss | 3 ++ .../commonUI/general/res/sass/_mixins.scss | 7 ---- .../general/res/sass/controls/_buttons.scss | 1 + .../general/res/sass/controls/_controls.scss | 39 +++++++++++++++++++ .../res/sass/controls/_time-conductor.scss | 12 +++++- .../res/sass/user-environ/_layout.scss | 2 + .../res/templates/time-conductor.html | 5 +++ 7 files changed, 61 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index d34973bf660..0722331a1c7 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -108,6 +108,9 @@ &.grows { @include flex(1 1 auto); } + &.contents-align-right { + text-align: right; + } } .flex-container { // Apply to wrapping elements, mct-includes, etc. diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 1c04dc18d96..19d8ff5600b 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -185,21 +185,15 @@ } @mixin sliderTrack($bg: $scrollbarTrackColorBg) { - //$b: 1px solid lighten($bg, 30%); border-radius: 2px; box-sizing: border-box; @include boxIncised(0.7); background-color: $bg; - //border-bottom: $b; - //border-right: $b; } @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) { - //&:before { - //@include trans-prop-nice("border-color", 25ms); content: ''; display: block; - //height: auto; pointer-events: none; position: absolute; z-index: 2; @@ -305,7 +299,6 @@ border-radius: $controlCr; box-sizing: border-box; color: $fg; - display: inline-block; } @mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index 09c4598db76..da2e24d4440 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -33,6 +33,7 @@ $pad: $interiorMargin * $baseRatio; .s-btn { box-sizing: border-box; + display: inline-block; padding: 0 $pad; font-size: 0.7rem; vertical-align: top; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 9cc835348b1..379a05a2e0d 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -420,6 +420,45 @@ input[type="search"] { } } +@mixin sliderKnob() { + $h: 16px; + cursor: pointer; + width: floor($h/1.75); + height: $h; + margin-top: 1 + floor($h/2) * -1; + @include btnSubtle(pullForward($colorBtnBg, 10%)); + //border-radius: 50% !important; +} + +input[type="range"] { + // HTML5 range inputs + + -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ + background: transparent; /* Otherwise white in Chrome */ + &:focus { + outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ + } + + // Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + @include sliderKnob(); + } + &::-moz-range-thumb { + @include sliderKnob(); + } + &::-ms-thumb { + @include sliderKnob(); + } + + // Track + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + @include sliderTrack(); + } +} + /******************************************************** DATETIME PICKER */ .l-datetime-picker { $r1H: 15px; diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 138a97043f0..47dc3b340bf 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -20,6 +20,7 @@ height: $d !important; width: $d; position: relative; + // Icon shape: brackets &:before, &:after { @@ -76,7 +77,6 @@ z-index: 1; @include animation-duration(1s); &:before { - //background: green; height: $handH; } } @@ -181,6 +181,7 @@ font-size: 0.9em; } path { + // Line beneath ticks display: none; } line { @@ -188,6 +189,7 @@ stroke: $c; } text { + // Tick labels fill: $c; } } @@ -199,7 +201,15 @@ } .l-time-conductor-controls { + align-items: center; margin-top: $interiorMargin; + .time-conductor-zoom { + //@include test(); + min-width: 100px; + height: $r3H; + width: 25%; + } + } // Fixed &.fixed-mode { diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 670945a3ab0..1d824b2a1ac 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -129,6 +129,8 @@ } .primary-pane { + // Clip element that have min-widths + overflow: hidden; // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions z-index: 4; } diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index 81ff59abfca..b05e057f9d5 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -104,6 +104,11 @@ {name: 'SCLK', key:'sclk', glyph:'\u0043'} ]}"> + +
+ +
+ \ No newline at end of file