From a9326f572f87319f773e19ce8cff51f6da26d32b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 18 Jul 2016 13:36:45 -0700 Subject: [PATCH] [Frontend] Glyph-related style changes to Timelines Fixes #1047 Timeline glyph refactoring; Resource Graph icons in swimlanes now display grayed-out version when not added to the Resource Graph; minor color tweaks --- .../general/res/sass/controls/_controls.scss | 8 ++++++++ .../themes/espresso/res/sass/_constants.scss | 1 + .../commonUI/themes/snow/res/sass/_constants.scss | 1 + .../timeline/res/sass/_timeline-thematic.scss | 6 +++--- platform/features/timeline/res/sass/_timelines.scss | 13 ++++++++++--- .../timeline/res/templates/activity-gantt.html | 4 +--- .../res/templates/tabular-swimlane-cols-tree.html | 11 ++++------- .../features/timeline/res/templates/timeline.html | 13 +++++-------- 8 files changed, 33 insertions(+), 24 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 07cf990b97..adce3fdb7e 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -72,6 +72,14 @@ } } +.s-clickable-icon { + // Clickable icon elements that have hover + @extend .ui-symbol; + &:hover { + color: $colorKeyHov; + } +} + .l-composite-control { vertical-align: middle; &:not(.l-inline) { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index bbbd0e87aa..05a36018cc 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -6,6 +6,7 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: #005177; $colorKeyFg: #fff; +$colorKeyHov: pullForward($colorKey, 20%); $colorEditAreaBg: #31363e; $colorEditAreaFg: #587ab5; $colorInteriorBorder: rgba($colorBodyFg, 0.1); diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 76fe415bad..dcb14ca0a3 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -6,6 +6,7 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: $colorKey; $colorKeyFg: #fff; +$colorKeyHov: pullForward($colorKey, 20%); $colorEditAreaBg: #eafaff; $colorEditAreaFg: #4bb1c7; //587ab5; $colorInteriorBorder: rgba($colorBodyFg, 0.2); diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index d97dc4a58b..0cca3f8b27 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -52,8 +52,8 @@ .l-pane-l { // Left pane of the tabular area .l-cols { - .s-label .ui-symbol.icon { - color: $colorGanttBarTabularFgIcon; + .t-object-label .t-item-icon { + color: pullForward($colorGanttBarBg, 10%); } } } @@ -104,7 +104,7 @@ } .s-ticks { - @include bgTicks($timelineColorAlt1); + @include bgTicks( $timelineColorAlt1); } .s-hover-btns-holder { $bg: $timelineHeaderColorBg; diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss index 62cb103e46..2ebca3e588 100644 --- a/platform/features/timeline/res/sass/_timelines.scss +++ b/platform/features/timeline/res/sass/_timelines.scss @@ -266,9 +266,6 @@ width: $timelineColIconW; text-align: center; padding: 0; - .ui-symbol { - color: $colorKey; - } } &.l-plot-resource { @@ -303,6 +300,16 @@ top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin; } + .l-swimlanes-holder .l-cols { + .l-col-icon, + .l-col-icon a { + color: $colorKey; + } + .t-toggle .inactive { + color: pullForward(rgba($colorBodyFg, 0.2)); + } + } + .l-pane-l { // Left pane of the tabular area .l-cols { diff --git a/platform/features/timeline/res/templates/activity-gantt.html b/platform/features/timeline/res/templates/activity-gantt.html index 1436ab9d6e..df8f12ef0a 100644 --- a/platform/features/timeline/res/templates/activity-gantt.html +++ b/platform/features/timeline/res/templates/activity-gantt.html @@ -29,9 +29,7 @@ } : {}">
- - {{type.getGlyph()}} - + {{model.name}} diff --git a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html index 09b798fcc1..bb3f1d8dcd 100644 --- a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html +++ b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html @@ -28,23 +28,20 @@ 'drop-after': ngModel.highlightBottom() }">
- - - é + - - è
- é - è + + Title
@@ -103,25 +103,22 @@
- - I - - X - - Y