mirror of
https://github.com/nasa/openmct.git
synced 2025-01-21 03:55:31 +00:00
[Frontend] Glyph refactoring
Fixes #1047 WIP: search, toolbar buttons; mods to flex archetypes
This commit is contained in:
Charles Hacskaylo
parent
28b663ce41
commit
9d9cabb760
@ -121,17 +121,16 @@
|
||||
.l-flex-row {
|
||||
@include flex-direction(row);
|
||||
&.flex-elem { @include flex(1 1 auto); }
|
||||
.flex-elem {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
> .flex-elem {
|
||||
min-width: 0;
|
||||
&.holder:not(:last-child) { margin-right: $interiorMargin; }
|
||||
}
|
||||
.flex-container { @include flex-direction(row); }
|
||||
}
|
||||
|
||||
.l-flex-col {
|
||||
@include flex-direction(column);
|
||||
.flex-elem {
|
||||
> .flex-elem {
|
||||
min-height: 0;
|
||||
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
&:before,
|
||||
.clear-icon,
|
||||
.clear-input,
|
||||
.menu-icon {
|
||||
// :before is magnify glass icon
|
||||
box-sizing: border-box;
|
||||
@ -51,9 +51,9 @@
|
||||
height: $iconD;
|
||||
width: $iconD;
|
||||
line-height: $iconD;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $iconEdgeM;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: $iconEdgeM;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@ -81,7 +81,8 @@
|
||||
color: pullForward($colorInputIcon, 10%);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
.clear-input {
|
||||
// Hiding for now with addition of Cancel button
|
||||
right: $iconD + $interiorMargin;
|
||||
|
||||
// Icon is visible only when there is text input
|
||||
@ -116,20 +117,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.results-msg {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
$s: 0.7em;
|
||||
$p: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
line-height: 130%;
|
||||
padding-left: $s * 2.25;
|
||||
//padding-left: $s * 2.25;
|
||||
font-size: $s;
|
||||
|
||||
.clear-filters-icon {
|
||||
.clear-filters {
|
||||
color: $colorInputIcon;
|
||||
opacity: 1;
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
font-size: 0.9em;
|
||||
margin-right: $interiorMarginSm;
|
||||
//position: absolute;
|
||||
//left: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,11 @@ ul.tree {
|
||||
padding: 0 $interiorMarginSm;
|
||||
position: relative;
|
||||
|
||||
.flex-elem {
|
||||
height: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
.view-control {
|
||||
color: $colorItemTreeVC;
|
||||
font-size: 0.75em;
|
||||
|
||||
@ -82,6 +82,8 @@ define([
|
||||
"cssclass": "icon-plus",
|
||||
"control": "menu-button",
|
||||
"text": "Add",
|
||||
"title": "Add",
|
||||
"description": "Add new items",
|
||||
"options": [
|
||||
{
|
||||
"name": "Box",
|
||||
@ -113,6 +115,8 @@ define([
|
||||
"method": "order",
|
||||
"cssclass": "icon-layers",
|
||||
"control": "menu-button",
|
||||
"title": "Layering",
|
||||
"description": "Move the selected object above or below other objects",
|
||||
"options": [
|
||||
{
|
||||
"name": "Move to Top",
|
||||
@ -140,18 +144,24 @@ define([
|
||||
"property": "fill",
|
||||
"glyph": "",
|
||||
"cssclass": "icon-paint-bucket",
|
||||
"title": "Fill color",
|
||||
"description": "Set fill color",
|
||||
"control": "color"
|
||||
},
|
||||
{
|
||||
"property": "stroke",
|
||||
"glyph": "â",
|
||||
"cssclass": "icon-line-horz",
|
||||
"title": "Border color",
|
||||
"description": "Set border color",
|
||||
"control": "color"
|
||||
},
|
||||
{
|
||||
"property": "color",
|
||||
"glyph": "ä",
|
||||
"cssclass": "icon-T",
|
||||
"title": "Text color",
|
||||
"description": "Set text color",
|
||||
"mandatory": true,
|
||||
"control": "color"
|
||||
},
|
||||
@ -161,6 +171,7 @@ define([
|
||||
"cssclass": "icon-image",
|
||||
"control": "dialog-button",
|
||||
"title": "Image Properties",
|
||||
"description": "Edit image properties",
|
||||
"dialog": {
|
||||
"control": "textfield",
|
||||
"name": "Image URL",
|
||||
@ -170,8 +181,10 @@ define([
|
||||
{
|
||||
"property": "text",
|
||||
"glyph": "G",
|
||||
"cssclass": "icon-gear",
|
||||
"control": "dialog-button",
|
||||
"title": "Text Properties",
|
||||
"description": "Edit text properties",
|
||||
"dialog": {
|
||||
"control": "textfield",
|
||||
"name": "Text",
|
||||
@ -181,14 +194,18 @@ define([
|
||||
{
|
||||
"method": "showTitle",
|
||||
"glyph": "ç",
|
||||
"cssclass": "icon-two-parts-both",
|
||||
"control": "button",
|
||||
"description": "Show telemetry element title."
|
||||
"title": "Show title",
|
||||
"description": "Show telemetry element title"
|
||||
},
|
||||
{
|
||||
"method": "hideTitle",
|
||||
"glyph": "å",
|
||||
"cssclass": "icon-two-parts-one-only",
|
||||
"control": "button",
|
||||
"description": "Hide telemetry element title."
|
||||
"title": "Hide title",
|
||||
"description": "Hide telemetry element title"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -197,7 +214,10 @@ define([
|
||||
{
|
||||
"method": "remove",
|
||||
"control": "button",
|
||||
"glyph": "Z"
|
||||
"glyph": "Z",
|
||||
"cssclass": "icon-trash",
|
||||
"title": "Delete",
|
||||
"description": "Delete the selected item"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
type="text"
|
||||
ng-model="ngModel.input"
|
||||
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-click="ngModel.input = ''; controller.search()"></a>
|
||||
<a class="menu-icon context-available"
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="active-filter-display flex-elem holder"
|
||||
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
|
||||
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 }}
|
||||
</div>
|
||||
<div class="search-results flex-elem holder grows vscroll"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user