ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-05 02:29:21 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Refactoring glyphs to classes

Browse Source 
Fixes #1047
In-progress; overlay close, search inputs,
messages and message banners,
ui-symbol removal in-progress.
This commit is contained in:
Charles Hacskaylo 2016-06-28 17:16:18 -07:00
parent 4e2a01ad85
commit 26b30d96db
14 changed files with 17 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/back-arrow.html
View File

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information.
-->
<a class='type-icon icon ui-symbol s-back'
<a class='icon icon-pointer-left'
ng-show="context.getPath().length > 2"
ng-click="context.getParent().getCapability('action').perform('navigate')">
</a>

2
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class='type-icon ui-symbol flex-elem {{type.getCssClass()}}'></span>
<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
<span class="l-elem-wrapper l-flex-row flex-elem grows">
<span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>

3
platform/commonUI/dialog/res/templates/overlay-message-list.html
View File

@ -2,7 +2,8 @@
<div class="message-contents">
<div class="abs top-bar">
<div class="title">{{ngModel.dialog.title}}</div>
<div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1">s</span>
<div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
ngModel.dialog.messages.length == 0">s</span>
</div>
</div>
<div class="abs message-body">

2
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -24,7 +24,7 @@
<div class="abs holder">
<a ng-click="ngModel.cancel()"
ng-if="ngModel.cancel"
class="clk-icon icon ui-symbol close">x</a>
class="close icon-x"></a>
<div class="abs contents" ng-transclude></div>
</div>
</div>

2
platform/commonUI/edit/res/templates/create/create-menu.html
View File

@ -32,7 +32,7 @@
</ul>
</div>
<div class="pane right menu-item-description">
<div class="desc-area ui-symbol icon type-icon {{ representation.activeMetadata.cssclass }}"></div>
<div class="desc-area icon {{ representation.activeMetadata.cssclass }}"></div>
<div class="desc-area title">
{{representation.activeMetadata.name}}
</div>

14
platform/commonUI/general/res/sass/_icons.scss
View File

@ -30,12 +30,6 @@
.ui-symbol {
font-family: 'symbolsfont';
&.type-icon {
color: $colorObjHdrIc;
}
&.icon-calendar:after {
content: "\e605";
}
}
.ui-symbol.icon {
@ -69,14 +63,6 @@
position: absolute;
}
.l-icon-alert {
display: none !important;
&:before {
color: $colorAlert;
content: "!";
}
}
.t-item-icon {
// Used in grid-item.html, tree-item, inspector location
@extend .ui-symbol;

10
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@ -233,7 +233,7 @@
@mixin messageBlock($iconW: 32px) {
.type-icon.message-type {
@include txtShdw($shdwStatusIc);
&:before { content:"\e920"; }
@extend .icon-bell;
color: $colorStatusDefault;
font-size: $iconW;
padding: 1px;
@ -241,15 +241,15 @@
}
.message-severity-info .type-icon.message-type {
&:before { content:"\e920"; }
@extend .icon-info;
color: $colorStatusInfo;
}
.message-severity-alert .type-icon.message-type {
&:before { content:"\e911"; }
@extend .icon-bell;
color: $colorStatusAlert;
}
.message-severity-error .type-icon.message-type {
&:before { content:"\e900"; }
@extend .icon-alert-rect;
color: $colorStatusError;
}
}
@ -272,12 +272,10 @@
@include flex-direction(row);
@include align-items(stretch);
.type-icon.message-type {
//@include test(red);
@include flex(0 1 auto);
position: relative;
}
.message-contents {
//@include test(blue);
@include flex(1 1 auto);
margin-left: $overlayMargin;
position: relative;

7
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@ -144,11 +144,4 @@
&:hover:before {
color: pullForward($colorInputIcon, 10%);
}
.clear-icon {
// 'x' in circle icon
&:before {
content: '\e607';
}
}
}

2
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -25,7 +25,7 @@
background: $colorOvrBlocker;
z-index: 100;
}
.clk-icon.close {
.close {
font-size: 0.8rem;
position: absolute;
top: $interiorMarginLg;

8
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -23,15 +23,9 @@
.clear-icon,
.menu-icon {
cursor: pointer;
font-family: symbolsfont;
@include trans-prop-nice((opacity, color), 150ms);
}
.clear-icon {
// 'x' in circle icon
@extend .icon-x-in-circle;
}
.holder-search {
$iconWidth: 20px;
@ -51,6 +45,7 @@
&:before,
.clear-icon,
.menu-icon {
// :before is magnify glass icon
box-sizing: border-box;
color: $colorInputIcon;
height: $iconD;
@ -104,7 +99,6 @@
.menu-icon {
// 'v' invoke menu icon
&:before { content: '\e902'; }
font-size: 0.8em;
padding-right: $iconEdgeM;
right: $iconEdgeM;

2
platform/commonUI/general/res/templates/controls/input-filter.html
View File

@ -25,7 +25,7 @@
<input type="search"
class="t-filter-input"
ng-model="getterSetter.value"/>
<a class="clear-icon"
<a class="clear-icon icon-x-in-circle"
ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
ng-click="getterSetter.value = ''">
</a>

2
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -22,7 +22,7 @@
<div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
ng-submit="trCtrl.updateBoundsFromForm()">
<span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
<span class="l-time-range-inputs-elem flex-elem icon-clock"></span>
<span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
<span class="l-time-range-input-w flex-elem">
<mct-control key="'datetime-field'"

3
platform/commonUI/general/res/templates/message-banner.html
View File

@ -16,6 +16,5 @@
ng-click="action(active.notification.model.primaryOption.callback, $event)">
{{active.notification.model.primaryOption.label}}
</a>
<a class="banner-elem ui-symbol close" ng-click="dismiss(active.notification, $event)">
&#x78;</a>
<a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
</div>

4
platform/search/res/templates/search.html
View File

@ -27,10 +27,10 @@
type="text"
ng-model="ngModel.input"
ng-keyup="controller.search()"/>
<a class="clear-icon"
<a class="clear-icon icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon"
<a class="menu-icon context-available"
ng-click="toggle.toggle()"></a>
<mct-include key="'search-menu'"
class="menu-element search-menu-holder"