mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
[Frontend] Refactoring glyphs to classes
fixes #1047 Very much In-progess, s-btn and s-btn-menu refactoring
This commit is contained in:
Charles Hacskaylo
parent
f574ffed16
commit
8b29ccf3af
@ -6,4 +6,12 @@
|
||||
.icon {
|
||||
&.mobile-info { @include glyph('\e920'); }
|
||||
&.context-available { @include glyph('\e902'); }
|
||||
}
|
||||
|
||||
/*************************************** MENUS */
|
||||
.icon-menu ul li {
|
||||
&.i-layers-move-to-top { @include glyph('\e905'); }
|
||||
&.i-layers-move-up { @include glyph('\e909'); }
|
||||
&.i-layers-move-down { @include glyph('\e902'); }
|
||||
&.i-layers-move-to-bottom { @include glyph('\e908'); }
|
||||
}
|
||||
@ -54,7 +54,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
&.key-edit,
|
||||
&.key-properties {
|
||||
$bg: $colorBtnMajorBg;
|
||||
$hc: lighten($bg, 10%);
|
||||
$hc: pullForward($bg, 10%);
|
||||
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
|
||||
}
|
||||
|
||||
@ -115,8 +115,16 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .ui-symbol;
|
||||
// Color and styling additionally in _controls.scss
|
||||
$c: $colorKey;
|
||||
@extend .s-btn;
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
content: '\e901';
|
||||
color: $colorKey;
|
||||
}
|
||||
&:hover:before {
|
||||
color: pullForward($c, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop .mini-tab {
|
||||
|
||||
@ -539,8 +539,7 @@ textarea {
|
||||
}
|
||||
|
||||
/******************************************************** MISC */
|
||||
.context-available,
|
||||
.s-icon-btn {
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
&:hover {
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
font-size: 16px; //120%;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
@ -86,7 +86,8 @@
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||
color: pullForward($colorMenuBg, 60%);
|
||||
color: $colorMenuFg;
|
||||
//color: pullForward($colorMenuBg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
position: relative;
|
||||
@ -97,31 +98,46 @@
|
||||
&:hover {
|
||||
background: $colorMenuHovBg;
|
||||
color: $colorMenuHovFg;
|
||||
.icon {
|
||||
color: $colorMenuHovIc;
|
||||
}
|
||||
}
|
||||
.type-icon {
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
@extend .menu;
|
||||
ul li {
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $colorMenuHovIc;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
@extend .type-icon;
|
||||
@extend .icon;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu,
|
||||
.icon-menu,
|
||||
.context-menu,
|
||||
.super-menu,
|
||||
.s-menu-btn .menu {
|
||||
pointer-events: auto;
|
||||
ul li {
|
||||
a {
|
||||
color: $colorMenuFg;
|
||||
// TO-DO: factor this <a> out
|
||||
color: $colorMenuFg;
|
||||
display: block;
|
||||
}
|
||||
.icon {
|
||||
color: $colorMenuIc;
|
||||
}
|
||||
.type-icon {
|
||||
&:before {
|
||||
color: $colorMenuIc;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,12 +86,12 @@ table {
|
||||
color: $colorIconLink;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
content: "\ed";
|
||||
content: "\e906";
|
||||
display: inline-block;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
&.sort.desc:after {
|
||||
content: "\ec";
|
||||
content: "\e907";
|
||||
}
|
||||
}
|
||||
&.sortable {
|
||||
@ -119,19 +119,12 @@ table {
|
||||
}
|
||||
}
|
||||
&.filterable {
|
||||
thead, .thead {
|
||||
tr.s-filters, .tr.s-filters {
|
||||
th, .th {
|
||||
//border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody, .tbody {
|
||||
top: $tabularHeaderH * 2;
|
||||
}
|
||||
input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
width: 100%; //50px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,5 +195,4 @@ table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -110,26 +110,31 @@ define([
|
||||
{
|
||||
"method": "order",
|
||||
"glyph": "á",
|
||||
"cssclass": "i-layers",
|
||||
"control": "menu-button",
|
||||
"options": [
|
||||
{
|
||||
"name": "Move to Top",
|
||||
"glyph": "\u00eb",
|
||||
"cssclass": "i-layers-move-to-top",
|
||||
"key": "top"
|
||||
},
|
||||
{
|
||||
"name": "Move Up",
|
||||
"glyph": "\u005e",
|
||||
"cssclass": "i-layers-move-up",
|
||||
"key": "up"
|
||||
},
|
||||
{
|
||||
"name": "Move Down",
|
||||
"glyph": "\u0076",
|
||||
"cssclass": "i-layers-move-down",
|
||||
"key": "down"
|
||||
},
|
||||
{
|
||||
"name": "Move to Bottom",
|
||||
"glyph": "\u00ee",
|
||||
"cssclass": "i-layers-move-to-bottom",
|
||||
"key": "bottom"
|
||||
}
|
||||
]
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<a class="s-btn"
|
||||
ng-class="{ labeled: structure.text }"
|
||||
ng-class="{ labeled: structure.text, structure.cssclass }"
|
||||
ng-click="structure.click()">
|
||||
<span class="ui-symbol icon">
|
||||
{{structure.glyph}}
|
||||
|
||||
@ -19,25 +19,22 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="s-menu-btn menu-element"
|
||||
<div class="s-menu-btn menu-element {{ structure.cssclass }}"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
|
||||
<span class="ui-symbol icon">{{structure.glyph}}</span>
|
||||
<!--<span class="ui-symbol icon">{{structure.glyph}}</span>-->
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
<div class="menu icon-menu" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
<li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
|
||||
<a href="">
|
||||
<span class="ui-symbol type-icon icon">
|
||||
{{option.glyph}}
|
||||
</span>
|
||||
<li ng-click="structure.click(option.key); toggle.setState(false)"
|
||||
ng-repeat="option in structure.options"
|
||||
class="{{ option.cssclass }}">
|
||||
{{option.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user