ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-19 18:45:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Glyph refactoring

Browse Source 
Fixes #1047
WIP: search, toolbar buttons; mods
to flex archetypes
This commit is contained in:
Charles Hacskaylo 2016-07-19 16:20:20 -07:00
parent 28b663ce41
commit 9d9cabb760
5 changed files with 49 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
platform/commonUI/general/res/sass/_archetypes.scss
View File

@ -121,17 +121,16 @@
.l-flex-row { .l-flex-row {
@include flex-direction(row); @include flex-direction(row);
&.flex-elem { @include flex(1 1 auto); } &.flex-elem { @include flex(1 1 auto); }
.flex-elem { > .flex-elem {
height: inherit;
line-height: inherit;
min-width: 0; min-width: 0;
&.holder:not(:last-child) { margin-right: $interiorMargin; }
} }
.flex-container { @include flex-direction(row); } .flex-container { @include flex-direction(row); }
} }
.l-flex-col { .l-flex-col {
@include flex-direction(column); @include flex-direction(column);
.flex-elem { > .flex-elem {
min-height: 0; min-height: 0;
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; } &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
} }

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

@ -43,7 +43,7 @@
} }
&:before, &:before,
.clear-icon, .clear-input,
.menu-icon { .menu-icon {
// :before is magnify glass icon // :before is magnify glass icon
box-sizing: border-box; box-sizing: border-box;
@ -51,9 +51,9 @@
height: $iconD; height: $iconD;
width: $iconD; width: $iconD;
line-height: $iconD; line-height: $iconD;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: $iconEdgeM; top: $iconEdgeM;
} }
.search-input { .search-input {
@ -81,7 +81,8 @@
color: pullForward($colorInputIcon, 10%); color: pullForward($colorInputIcon, 10%);
} }
.clear-icon { .clear-input {
// Hiding for now with addition of Cancel button
right: $iconD + $interiorMargin; right: $iconD + $interiorMargin;
// Icon is visible only when there is text input // Icon is visible only when there is text input
@ -116,20 +117,25 @@
} }
} }
.results-msg {
font-size: 0.8rem;
}
.active-filter-display { .active-filter-display {
$s: 0.7em; $s: 0.7em;
$p: $interiorMargin; $p: $interiorMargin;
box-sizing: border-box; box-sizing: border-box;
line-height: 130%; line-height: 130%;
padding-left: $s * 2.25; //padding-left: $s * 2.25;
font-size: $s; font-size: $s;
.clear-filters-icon { .clear-filters {
color: $colorInputIcon; color: $colorInputIcon;
opacity: 1; opacity: 1;
font-size: 0.8em; font-size: 0.9em;
position: absolute; margin-right: $interiorMarginSm;
left: 1px; //position: absolute;
//left: 1px;
cursor: pointer; cursor: pointer;
} }
} }

5
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -45,6 +45,11 @@ ul.tree {
padding: 0 $interiorMarginSm; padding: 0 $interiorMarginSm;
position: relative; position: relative;
.flex-elem {
height: inherit !important;
line-height: inherit !important;
}
.view-control { .view-control {
color: $colorItemTreeVC; color: $colorItemTreeVC;
font-size: 0.75em; font-size: 0.75em;

26
platform/features/layout/bundle.js
View File

@ -82,6 +82,8 @@ define([
"cssclass": "icon-plus", "cssclass": "icon-plus",
"control": "menu-button", "control": "menu-button",
"text": "Add", "text": "Add",
"title": "Add",
"description": "Add new items",
"options": [ "options": [
{ {
"name": "Box", "name": "Box",
@ -113,6 +115,8 @@ define([
"method": "order", "method": "order",
"cssclass": "icon-layers", "cssclass": "icon-layers",
"control": "menu-button", "control": "menu-button",
"title": "Layering",
"description": "Move the selected object above or below other objects",
"options": [ "options": [
{ {
"name": "Move to Top", "name": "Move to Top",
@ -140,18 +144,24 @@ define([
"property": "fill", "property": "fill",
"glyph": "", "glyph": "",
"cssclass": "icon-paint-bucket", "cssclass": "icon-paint-bucket",
"title": "Fill color",
"description": "Set fill color",
"control": "color" "control": "color"
}, },
{ {
"property": "stroke", "property": "stroke",
"glyph": "â", "glyph": "â",
"cssclass": "icon-line-horz", "cssclass": "icon-line-horz",
"title": "Border color",
"description": "Set border color",
"control": "color" "control": "color"
}, },
{ {
"property": "color", "property": "color",
"glyph": "ä", "glyph": "ä",
"cssclass": "icon-T", "cssclass": "icon-T",
"title": "Text color",
"description": "Set text color",
"mandatory": true, "mandatory": true,
"control": "color" "control": "color"
}, },
@ -161,6 +171,7 @@ define([
"cssclass": "icon-image", "cssclass": "icon-image",
"control": "dialog-button", "control": "dialog-button",
"title": "Image Properties", "title": "Image Properties",
"description": "Edit image properties",
"dialog": { "dialog": {
"control": "textfield", "control": "textfield",
"name": "Image URL", "name": "Image URL",
@ -170,8 +181,10 @@ define([
{ {
"property": "text", "property": "text",
"glyph": "G", "glyph": "G",
"cssclass": "icon-gear",
"control": "dialog-button", "control": "dialog-button",
"title": "Text Properties", "title": "Text Properties",
"description": "Edit text properties",
"dialog": { "dialog": {
"control": "textfield", "control": "textfield",
"name": "Text", "name": "Text",
@ -181,14 +194,18 @@ define([
{ {
"method": "showTitle", "method": "showTitle",
"glyph": "ç", "glyph": "ç",
"cssclass": "icon-two-parts-both",
"control": "button", "control": "button",
"description": "Show telemetry element title." "title": "Show title",
"description": "Show telemetry element title"
}, },
{ {
"method": "hideTitle", "method": "hideTitle",
"glyph": "å", "glyph": "å",
"cssclass": "icon-two-parts-one-only",
"control": "button", "control": "button",
"description": "Hide telemetry element title." "title": "Hide title",
"description": "Hide telemetry element title"
} }
] ]
}, },
@ -197,7 +214,10 @@ define([
{ {
"method": "remove", "method": "remove",
"control": "button", "control": "button",
"glyph": "Z" "glyph": "Z",
"cssclass": "icon-trash",
"title": "Delete",
"description": "Delete the selected item"
} }
] ]
} }

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

@ -27,7 +27,7 @@
type="text" type="text"
ng-model="ngModel.input" ng-model="ngModel.input"
ng-keyup="controller.search()"/> ng-keyup="controller.search()"/>
<a class="clear-icon icon-x-in-circle" <a class="clear-icon clear-input icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}" ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a> ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon context-available" <a class="menu-icon context-available"
@ -42,7 +42,7 @@
<div class="active-filter-display flex-elem holder" <div class="active-filter-display flex-elem holder"
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}" ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
ng-controller="SearchMenuController as menuController"> ng-controller="SearchMenuController as menuController">
<a class="clear-icon clear-filters-icon" <a class="clear-icon clear-filters icon-x-in-circle"
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }} ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
</div> </div>
<div class="search-results flex-elem holder grows vscroll" <div class="search-results flex-elem holder grows vscroll"