mirror of
https://github.com/nasa/openmct.git
synced 2025-02-01 08:48:28 +00:00
[Frontend] Refactoring glyphs to classes
Fixes #1047 In-progress; plot options, imagery buttons, cleanups in buttons.scss, edit-action buttons, .s-btn .no-label class added.
This commit is contained in:
Charles Hacskaylo
parent
8bb8db69e6
commit
521db3c3fe
@ -208,6 +208,7 @@ define([
|
||||
"category": "conclude-editing",
|
||||
"implementation": SaveAction,
|
||||
"name": "Save",
|
||||
"cssclass": "icon-save",
|
||||
"description": "Save changes made to these objects.",
|
||||
"depends": [
|
||||
"dialogService"
|
||||
@ -218,7 +219,8 @@ define([
|
||||
"key": "save",
|
||||
"category": "conclude-editing",
|
||||
"implementation": SaveAsAction,
|
||||
"name": "Save",
|
||||
"name": "Save As...",
|
||||
"cssclass": "icon-save",
|
||||
"description": "Save changes made to these objects.",
|
||||
"depends": [
|
||||
"$injector",
|
||||
@ -234,6 +236,7 @@ define([
|
||||
"category": "conclude-editing",
|
||||
"implementation": CancelAction,
|
||||
"name": "Cancel",
|
||||
"cssclass": "icon-x no-label",
|
||||
"description": "Discard changes made to these objects.",
|
||||
"depends": []
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
-->
|
||||
<span ng-controller="EditActionController">
|
||||
<span ng-repeat="currentAction in editActions">
|
||||
<a class='s-btn t-{{currentAction.getMetadata().key}}'
|
||||
<a class='s-btn {{currentAction.getMetadata().cssclass}}'
|
||||
title='{{currentAction.getMetadata().name}}'
|
||||
ng-click="currentAction.perform()"
|
||||
ng-class="{ major: $index === 0 }">
|
||||
|
||||
@ -38,6 +38,11 @@ $pad: $interiorMargin * $baseRatio;
|
||||
vertical-align: top;
|
||||
@include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
|
||||
|
||||
&:before {
|
||||
// Icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -56,45 +61,19 @@ $pad: $interiorMargin * $baseRatio;
|
||||
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
|
||||
}
|
||||
|
||||
&.t-save {
|
||||
@extend .icon-save;
|
||||
}
|
||||
&.t-save-as:before {
|
||||
content:'\e612';
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.t-cancel {
|
||||
@extend .icon-x;
|
||||
.title-label { display: none; }
|
||||
&.no-label {
|
||||
.label, .title-label { display: none; }
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
// TO-DO: glyph refactoring
|
||||
.icon:before {
|
||||
content: "\0000F1";
|
||||
}
|
||||
@extend .icon-pause;
|
||||
&.paused {
|
||||
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
|
||||
.icon {
|
||||
@include pulse($dur: 1000ms);
|
||||
:before {
|
||||
content: "\0000EF";
|
||||
}
|
||||
}
|
||||
@extend .icon-play;
|
||||
&:before { @include pulse($dur: 1000ms); }
|
||||
}
|
||||
}
|
||||
|
||||
&.show-thumbs {
|
||||
.icon:before {
|
||||
content: "\000039";
|
||||
}
|
||||
}
|
||||
|
||||
&.t-export {
|
||||
@extend .icon-download;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@ -105,7 +84,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
// TO-DO: glyph refactoring
|
||||
// TODO: glyph refactoring
|
||||
$c: $colorKey;
|
||||
@extend .s-btn;
|
||||
&:before {
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.menu {
|
||||
// TO-DO: reduce size of icons
|
||||
// TODO: reduce size of icons
|
||||
@extend .s-menu;
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
@ -42,6 +42,7 @@ define([
|
||||
"name": "Imagery",
|
||||
"key": "imagery",
|
||||
"glyph": "ã",
|
||||
"cssclass": "icon-image",
|
||||
"template": imageryTemplate,
|
||||
"priority": "preferred",
|
||||
"needs": [
|
||||
|
||||
@ -5,18 +5,16 @@
|
||||
<div
|
||||
class="l-local-controls s-local-controls"
|
||||
ng-show="false && showLocalControls">
|
||||
<a class="s-btn"
|
||||
<a class="s-btn icon-arrow-left"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="1"
|
||||
title="Restore previous pan/zoom">
|
||||
<span class="ui-symbol icon"><</span>
|
||||
</a>
|
||||
|
||||
<a class="s-btn"
|
||||
<a class="s-btn icon-arrows-out"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="1"
|
||||
title="Reset pan/zoom">
|
||||
<span class="ui-symbol icon">I</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -27,8 +25,8 @@
|
||||
|
||||
<div class="l-image-main-controlbar flex-elem l-flex-row">
|
||||
<div class="left flex-elem grows">
|
||||
<a class="s-btn show-thumbs sm hidden"
|
||||
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"><span class="ui-symbol icon"></span></a>
|
||||
<a class="s-btn show-thumbs sm hidden icon-thumbs-strip"
|
||||
ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></a>
|
||||
<span class="l-timezone">{{imagery.getZone()}}</span>
|
||||
<span class="l-time">{{imagery.getTime()}}</span>
|
||||
<span class="l-date">{{imagery.getDate()}}</span>
|
||||
@ -36,15 +34,15 @@
|
||||
<div class="right flex-elem">
|
||||
<a class="s-btn pause-play"
|
||||
ng-click="imagery.paused(!imagery.paused())"
|
||||
ng-class="{ paused: imagery.paused() }"><span class="ui-symbol icon"></span></a>
|
||||
ng-class="{ paused: imagery.paused() }"></a>
|
||||
<a href="{{imagery.getImageUrl()}}"
|
||||
ng-if="imagery.getImageUrl()"
|
||||
target="_blank"
|
||||
title="Open image in new tab."
|
||||
class="s-btn">
|
||||
<span class="ui-symbol icon">y</span></a>
|
||||
class="s-btn icon-new-window">
|
||||
</a>
|
||||
<a href=""
|
||||
class="s-btn l-mag s-mag ui-symbol vsm"
|
||||
class="s-btn l-mag s-mag ui-symbol vsm icon-arrows-out"
|
||||
ng-click="clipped = false"
|
||||
ng-show="clipped === true"
|
||||
title="Not all of image is visible; click to reset."></a>
|
||||
|
||||
@ -87,33 +87,27 @@
|
||||
<!-- TODO: Move into correct position; make part of group; infer from set of actions -->
|
||||
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
|
||||
ng-if="$first">
|
||||
<a class="s-btn"
|
||||
<a class="s-btn icon-arrow-left"
|
||||
ng-click="plot.stepBackPanZoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Restore previous pan/zoom">
|
||||
<span class="ui-symbol icon"><</span>
|
||||
</a>
|
||||
<a class="s-btn"
|
||||
<a class="s-btn icon-arrows-out"
|
||||
ng-click="plot.unzoom()"
|
||||
ng-show="plot.isZoomed()"
|
||||
title="Reset pan/zoom">
|
||||
<span class="ui-symbol icon">I</span>
|
||||
</a>
|
||||
<div class="menu-element s-menu-btn menus-to-left"
|
||||
<div class="menu-element s-menu-btn menus-to-left {{plot.getMode().cssclass}}"
|
||||
ng-if="plot.getModeOptions().length > 1"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
<span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
|
||||
<span>{{plot.getMode().name}}</span>
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-repeat="option in plot.getModeOptions()">
|
||||
<a href="" ng-click="plot.setMode(option); toggle.setState(false)">
|
||||
<span class="ui-symbol type-icon icon">
|
||||
{{option.glyph}}
|
||||
</span>
|
||||
<li ng-repeat="option in plot.getModeOptions()"
|
||||
ng-click="plot.setMode(option); toggle.setState(false)"
|
||||
class="{{option.cssclass}}">
|
||||
{{option.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -28,12 +28,14 @@ define(
|
||||
key: "stacked",
|
||||
name: "Stacked",
|
||||
glyph: "m",
|
||||
cssclass: "icon-menu-hamburger",
|
||||
Constructor: PlotStackMode
|
||||
},
|
||||
OVERLAID = {
|
||||
key: "overlaid",
|
||||
name: "Overlaid",
|
||||
glyph: "6",
|
||||
cssclass: "icon-sine",
|
||||
Constructor: PlotOverlayMode
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<a class="t-btn l-btn s-btn t-export"
|
||||
<a class="t-btn l-btn s-btn t-export icon-download"
|
||||
ng-click="exportAsCSV()"
|
||||
title="Export This View's Data">
|
||||
Export
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user