From cff85fbbdedbae51ae8eb5ca21c06065128c3e4a Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo <charlesh88@gmail.com> Date: Wed, 20 Sep 2017 10:09:19 -0700 Subject: [PATCH] [Frontend] Styling complete on Follow Line Fixes #1688 --- .../timeline/res/sass/_timeline-thematic.scss | 62 +++++++++++++++++-- .../timeline/res/sass/_timelines.scss | 46 -------------- .../timeline/res/sass/timeline-espresso.scss | 1 + .../timeline/res/sass/timeline-snow.scss | 1 + 4 files changed, 60 insertions(+), 50 deletions(-) diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index 7432dbb90d..09af6251f2 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -29,6 +29,44 @@ } } } + + // Follow Line + .l-follow-line { + // TODO: move before and after into l-timeline-gantt so those only render in that pane + pointer-events: none; + position: absolute; + top: 0; bottom: 0; + width: 1px; + z-index: 9; // Just below .l-hover-btns-holder + } +} + +.l-timeline-gantt { + .l-follow-line { + $d: 0.8rem; + top: $interiorMargin; + &:before, + &:after { + content: ''; + display: block; + height: $d; + width: $d; + position: absolute; + top: 0; + @include transform(translateX(-50%)); + } + &:before { + // Icon blocker + width: 2 * $d; + } + &:after { + // Icon + font-size: $d; + line-height: $d; + text-align: center; + } + } + } .s-timeline-gantt { @@ -108,10 +146,9 @@ } .s-hover-btns-holder { $bg: $timelineHeaderColorBg; - $bga: 1; $l: 5%; @include user-select(none); - @include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%)); + @include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 70%, rgba($bg, 0) 100%)); .s-button { height: 16px; line-height: 16px; @@ -131,8 +168,25 @@ } .s-follow-line { - &:before { - background: $timelineHeaderColorBg; + background: rgba($timeControllerToiLineColor, 0.5); + } + + .s-timeline-gantt { + .s-follow-line { + &:after { + // Icon + color: $timeControllerToiLineColor; + content: $glyph-icon-timer; + font-family: symbolsfont; + text-shadow: $shdwItemText; + } + &:before { + // Blocker + $bg: $timelineHeaderColorBg; + $l: 30%; + @include background-image(linear-gradient(90deg, rgba($bg, 0), rgba($bg, 1) $l, rgba($bg, 1) 100% - $l, rgba($bg, 0))); + + } } } } diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss index dfd84a2f74..0ad22dba21 100644 --- a/platform/features/timeline/res/sass/_timelines.scss +++ b/platform/features/timeline/res/sass/_timelines.scss @@ -83,9 +83,6 @@ @include scrollV(scroll); bottom: $scrollbarTrackSize; } - .l-follow-line { - - } } &.l-timeline-resource-legend { box-sizing: border-box; @@ -329,49 +326,6 @@ .l-subticks { height: 5px } - - // Follow Line - .l-follow-line { - // TODO: move before and after into l-timeline-gantt so those only render in that pane - $d: 0.8rem; - $t: $interiorMargin; - pointer-events: none; - position: absolute; - top: 0; bottom: 0; - width: 1px; - z-index: 9; // Just below .l-hover-btns-holder - &:before, - &:after { - display: block; - height: $d; - width: $d; - position: absolute; - top: $t; - @include transform(translateX(-50%)); - } - &:before { - // Icon blocker - content: ''; - width: 1.25 * $d; - } - &:after { - // Icon - font-size: $d; - line-height: $d; - text-align: center; - } - } - - .s-follow-line { - background: rgba($timeControllerToiLineColor, 0.5); - &:after { - // Icon - color: $timeControllerToiLineColor; - content: $glyph-icon-timer; - font-family: symbolsfont; - text-shadow: $shdwItemText; - } - } } .s-status-editing .l-title .rep-object-label[draggable="true"] { diff --git a/platform/features/timeline/res/sass/timeline-espresso.scss b/platform/features/timeline/res/sass/timeline-espresso.scss index e7f51e0aac..3a8e9eb7ac 100644 --- a/platform/features/timeline/res/sass/timeline-espresso.scss +++ b/platform/features/timeline/res/sass/timeline-espresso.scss @@ -24,6 +24,7 @@ $output-bourbon-deprecation-warnings: false; @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; +@import "../../../../commonUI/general/res/sass/glyphs"; @import "../../../../commonUI/themes/espresso/res/sass/constants"; @import "../../../../commonUI/themes/espresso/res/sass/mixins"; @import "constants"; diff --git a/platform/features/timeline/res/sass/timeline-snow.scss b/platform/features/timeline/res/sass/timeline-snow.scss index 0357f0263f..a99b5bdbca 100644 --- a/platform/features/timeline/res/sass/timeline-snow.scss +++ b/platform/features/timeline/res/sass/timeline-snow.scss @@ -24,6 +24,7 @@ $output-bourbon-deprecation-warnings: false; @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; +@import "../../../../commonUI/general/res/sass/glyphs"; @import "../../../../commonUI/themes/snow/res/sass/constants"; @import "../../../../commonUI/themes/snow/res/sass/mixins"; @import "constants";