ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-22 17:08:57 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Glyph-related style changes to Timelines

Browse Source 
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
This commit is contained in:
Charles Hacskaylo
2016-07-18 13:36:45 -07:00
parent d6e1737803
commit a9326f572f
8 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/general/res/sass/controls/_controls.scss
View File

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

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

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

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

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

6
platform/features/timeline/res/sass/_timeline-thematic.scss
View File

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

13
platform/features/timeline/res/sass/_timelines.scss
View File

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

4
platform/features/timeline/res/templates/activity-gantt.html
View File

@ -29,9 +29,7 @@
} : {}">
<div class="bar">
<span class="s-activity-type ui-symbol">
{{type.getGlyph()}}
</span>
<span class="s-activity-type {{type.getCssClass()}}"></span>
<span class="s-title">
{{model.name}}
</span>

11
platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
View File

@ -28,23 +28,20 @@
'drop-after': ngModel.highlightBottom()
}">
<div class="l-cols">
<span class="l-col l-col-icon l-plot-resource"
<span class="l-col l-col-icon l-plot-resource t-toggle"
ng-click="ngModel.toggleGraph(); parameters.commit()"
title="Click to enable or disable inclusion in Resource Graphing">
<span class="ui-symbol"
ng-show="ngModel.graph()"
>
&#x00e9;
<span class="icon-plot-resource s-clickable-icon"
ng-class="{ inactive: !ngModel.graph() }">
</span>
</span>
<span class="l-col l-col-icon l-link">
<a class="ui-symbol"
<a class="icon-chain-links"
target="_blank"
ng-href="{{ngModel.link()}}"
ng-if="ngModel.link().length > 0"
title="{{ngModel.link()}}"
>
&#x00e8;
</a>
</span>
<span class="l-col l-title"

13
platform/features/timeline/res/templates/timeline.html
View File

@ -35,8 +35,8 @@
<div class="t-header l-header s-header">
<div class="l-cols">
<span title="Resource Graphing: click a row to toggle" class="l-col l-col-icon l-plot-resource ui-symbol">&#x00e9;</span>
<span title="Activity Links" class="l-col l-col-icon l-col-link ui-symbol">&#x00e8;</span>
<span title="Resource Graphing: click a row to toggle" class="l-col l-col-icon l-plot-resource icon-plot-resource"></span>
<span title="Activity Links" class="l-col l-col-icon l-col-link icon-chain-links"></span>
<span class="l-col l-title">Title</span>
</div>
</div>
@ -103,25 +103,22 @@
<!-- TOP PANE GANTT BARS -->
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
<div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
<a class="t-btn l-btn s-btn"
<a class="t-btn l-btn s-btn icon-arrows-out"
ng-click="zoomController.fit()"
ng-show="true"
title="Zoom to fit">
<span class="ui-symbol icon zoom-in">I</span>
</a>
<a class="t-btn l-btn s-btn"
<a class="t-btn l-btn s-btn icon-magnify-in"
ng-click="zoomController.zoom(-1)"
ng-show="true"
title="Zoom in">
<span class="ui-symbol icon zoom-in">X</span>
</a>
<a class="t-btn l-btn s-btn"
<a class="t-btn l-btn s-btn icon-magnify-out"
ng-click="zoomController.zoom(1)"
ng-show="true"
title="Zoom out">
<span class="ui-symbol icon zoom-out">Y</span>
</a>
</div>