mirror of
https://github.com/nasa/openmct.git
synced 2025-04-07 11:26:49 +00:00
[Frontend] Update TC2 markup and sass
Fixes #933 Update markup and sass in TC2 to be in line with updates from master from #1047 glyphs to cssclass approach;
This commit is contained in:
Charles Hacskaylo
parent
753bd97c8a
commit
c5c45f0a0e
@ -73,7 +73,7 @@
|
||||
&.l-icon-link {
|
||||
&:after {
|
||||
color: $colorIconLink;
|
||||
content: '\e921'; //$glyph-icon-link;
|
||||
content: $glyph-icon-link;
|
||||
height: auto; width: auto;
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 20%;
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
color: $c;
|
||||
content: '\e624';
|
||||
content: $glyph-icon-brackets;
|
||||
font-size: $d;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
@ -99,11 +99,6 @@
|
||||
$r2H: nth($ueTimeConductorH, 2);
|
||||
$r3H: nth($ueTimeConductorH, 3);
|
||||
|
||||
// Glyphs Todo: replace with refactored CSS approach when that is merged into master
|
||||
$glyphIconFixed: '\e604';
|
||||
$glyphIconRealtime: '\43';
|
||||
$glyphIconLatest: '\44';
|
||||
|
||||
position: relative;
|
||||
|
||||
> .l-row-elem {
|
||||
@ -113,7 +108,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mode-selector .s-menu-btn,
|
||||
.mode-selector .s-menu-button,
|
||||
.time-delta {
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
@ -285,27 +280,30 @@
|
||||
background: $colorTimeCondDataVisRtBg !important
|
||||
}
|
||||
|
||||
.mode-selector .s-menu-btn {
|
||||
@include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
|
||||
.mode-selector .s-menu-button {
|
||||
$fg: $colorTimeCondKeyFg;
|
||||
@include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg);
|
||||
&:before { color: $fg !important; };
|
||||
color: $fg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed mode
|
||||
&.fixed-mode {
|
||||
$i: $glyphIconFixed;
|
||||
$i: $glyph-icon-calendar;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
.mode-selector .s-menu-button:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime mode
|
||||
&.realtime-mode {
|
||||
$i: $glyphIconRealtime;
|
||||
$i: $glyph-icon-clock;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands);
|
||||
}
|
||||
@ -315,14 +313,14 @@
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'Now';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
.mode-selector .s-menu-button:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
// LAD mode
|
||||
&.latest-mode {
|
||||
$i: $glyphIconLatest;
|
||||
$i: $glyph-icon-database;
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
@include animation-name(clock-hands-sticky);
|
||||
&.hand-big {
|
||||
@ -338,7 +336,7 @@
|
||||
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
|
||||
content: 'LAD';
|
||||
}
|
||||
.mode-selector .s-menu-btn:before {
|
||||
.mode-selector .s-menu-button:before {
|
||||
content: $i;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
@import "../../../../commonUI/general/res/sass/mobile/mixins";
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/constants";
|
||||
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/glyphs";
|
||||
@import "../../../../commonUI/general/res/sass/icons";
|
||||
@import "constants";
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
@import "../../../../commonUI/general/res/sass/mobile/mixins";
|
||||
@import "../../../../commonUI/themes/snow/res/sass/constants";
|
||||
@import "../../../../commonUI/themes/snow/res/sass/mixins";
|
||||
@import "../../../../commonUI/general/res/sass/glyphs";
|
||||
@import "../../../../commonUI/general/res/sass/icons";
|
||||
@import "constants";
|
||||
|
||||
|
||||
@ -24,21 +24,16 @@
|
||||
<ul>
|
||||
<li ng-repeat="(key, metadata) in ngModel.options"
|
||||
ng-click="ngModel.selectedKey=key">
|
||||
<a
|
||||
ng-mouseover="representation.activeMetadata = metadata"
|
||||
ng-mouseleave="representation.activeMetadata = undefined">
|
||||
<span class="ui-symbol icon type-icon">
|
||||
{{metadata.glyph}}
|
||||
</span>
|
||||
<a ng-mouseover="representation.activeMetadata = metadata"
|
||||
ng-mouseleave="representation.activeMetadata = undefined"
|
||||
class="menu-item-a {{metadata.cssclass}}">
|
||||
{{metadata.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pane right menu-item-description">
|
||||
<div class="desc-area ui-symbol icon type-icon">
|
||||
{{representation.activeMetadata.glyph}}
|
||||
</div>
|
||||
<div class="desc-area ui-symbol icon type-icon {{representation.activeMetadata.cssclass}}"></div>
|
||||
<div class="desc-area title">
|
||||
{{representation.activeMetadata.name}}
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="ClickAwayController as modeController">
|
||||
<div class="s-menu-btn"
|
||||
<div class="s-menu-button"
|
||||
ng-click="modeController.toggle()">
|
||||
<span class="title-label">{{ngModel.options[ngModel.selectedKey]
|
||||
.label}}</span>
|
||||
|
||||
@ -30,7 +30,7 @@ define(['./TickSource'], function (TickSource) {
|
||||
|
||||
this.metadata = {
|
||||
key: 'real-time',
|
||||
glyph: '\u0043',
|
||||
cssclass: 'icon-clock',
|
||||
label: 'Real-time',
|
||||
name: 'Real-time Mode',
|
||||
description: 'Monitor real-time streaming data as it comes in. The Time Conductor and displays will automatically advance themselves based on a UTC clock.'
|
||||
|
||||
@ -38,12 +38,12 @@ define([
|
||||
/**
|
||||
* Some metadata, which will be used to identify the time system in
|
||||
* the UI
|
||||
* @type {{key: string, name: string, glyph: string}}
|
||||
* @type {{key: string, name: string, cssclass: string}}
|
||||
*/
|
||||
this.metadata = {
|
||||
'key': 'utc',
|
||||
'name': 'UTC',
|
||||
'glyph': '\u0043'
|
||||
'cssclass': 'icon-clock'
|
||||
};
|
||||
|
||||
this._formats = ['utc'];
|
||||
|
||||
@ -47,22 +47,22 @@ define(
|
||||
|
||||
this.modes = {
|
||||
'fixed': {
|
||||
glyph: '\ue604',
|
||||
cssclass: 'icon-calendar',
|
||||
label: 'Fixed',
|
||||
name: 'Fixed Timespan Mode',
|
||||
description: 'Query and explore data that falls between two fixed datetimes.'
|
||||
},
|
||||
'latest': {
|
||||
glyph: '\u0044',
|
||||
label: 'LAD',
|
||||
name: 'LAD Mode',
|
||||
description: 'Latest Available Data mode monitors real-time streaming data as it comes in. The Time Conductor and displays will only advance when data becomes available.'
|
||||
},
|
||||
'realtime': {
|
||||
glyph: '\u0043',
|
||||
cssclass: 'icon-clock',
|
||||
label: 'Real-time',
|
||||
name: 'Real-time Mode',
|
||||
description: 'Monitor real-time streaming data as it comes in. The Time Conductor and displays will automatically advance themselves based on a UTC clock.'
|
||||
},
|
||||
'latest': {
|
||||
cssclass: 'icon-database',
|
||||
label: 'LAD',
|
||||
name: 'LAD Mode',
|
||||
description: 'Latest Available Data mode monitors real-time streaming data as it comes in. The Time Conductor and displays will only advance when data becomes available.'
|
||||
}
|
||||
};
|
||||
this.selectedMode = undefined;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user