ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Glyphs to classes, mobile

Browse Source 
Fixes #1047
Fixes and enhancements for mobile,
particularly in tree;  Removed
`display: inline-block` from containerSubtle
mixin;
This commit is contained in:
Charles Hacskaylo 2016-07-28 17:11:52 -07:00
parent 7bca18b186
commit 69dc893b4b
11 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/items/grid-item.html
View File

@ -23,7 +23,7 @@
<div class='item grid-item' ng-click='action.perform("navigate")'> <div class='item grid-item' ng-click='action.perform("navigate")'>
<div class='contents abs'> <div class='contents abs'>
<div class='top-bar bar abs'> <div class='top-bar bar abs'>
<div class='profile icon-people' title='Shared'></div> <span class='icon-people' title='Shared'></span>
<mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation> <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
</div> </div>
<div class='item-main abs lg'> <div class='item-main abs lg'>

4
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -304,7 +304,7 @@
border-radius: $controlCr; border-radius: $controlCr;
box-sizing: border-box; box-sizing: border-box;
color: $fg; color: $fg;
display: inline-block; //display: inline-block;
} }
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) { @mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
@ -353,7 +353,7 @@
@mixin contextArrow() { @mixin contextArrow() {
text-shadow: none; text-shadow: none;
content: '\e902'; content: $glyph-icon-arrow-down;
display: inline-block; display: inline-block;
font-family: 'symbolsfont'; font-family: 'symbolsfont';
margin-left: $interiorMarginSm; margin-left: $interiorMarginSm;

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

@ -24,18 +24,16 @@ $pad: $interiorMargin * $baseRatio;
.s-button { .s-button {
@include user-select(none); @include user-select(none);
@include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: inline-block;
font-size: 0.7rem;
text-decoration: none; text-decoration: none;
height: $btnStdH; height: $btnStdH;
line-height: $btnStdH; line-height: $btnStdH;
}
.s-button {
box-sizing: border-box;
padding: 0 $pad; padding: 0 $pad;
font-size: 0.7rem;
vertical-align: top; vertical-align: top;
@include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
&.labeled:before { &.labeled:before {
// Icon when it's included // Icon when it's included

7
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -236,9 +236,11 @@ input[type="search"] {
/******************************************************** SELECTS */ /******************************************************** SELECTS */
.select { .select {
@include btnSubtle($bg: $colorSelectBg); @include btnSubtle($bg: $colorSelectBg);
@extend .icon-arrow-down; // Context arrow
@if $shdwBtns != none { @if $shdwBtns != none {
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
} }
display: inline-block;
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -256,10 +258,11 @@ input[type="search"] {
margin: $interiorMargin 0; // Firefox margin: $interiorMargin 0; // Firefox
} }
} }
&:after { &:before {
@include contextArrow(); //@include contextArrow();
pointer-events: none; pointer-events: none;
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent)); color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
display: block;
position: absolute; position: absolute;
right: $interiorMargin; top: 0; right: $interiorMargin; top: 0;
} }

5
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -88,10 +88,7 @@ body.mobile {
position: absolute; position: absolute;
top: $bodyMargin + 2; top: $bodyMargin + 2;
left: $bodyMargin; left: $bodyMargin;
&:after { @extend .icon-menu-hamburger;
content:'m' !important;
font-family: symbolsfont;
}
} }
.object-browse-bar { .object-browse-bar {

15
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -30,22 +30,21 @@ body.touch {
} }
.tree-item, .tree-item,
.search-result-item { .search-result-item {
@include containerSubtle($bg: pullForward($colorMobilePaneLeft, 2%), $gradRatio: 2%);
height: $mobileTreeItemH !important; height: $mobileTreeItemH !important;
line-height: $mobileTreeItemH !important; line-height: $mobileTreeItemH !important;
margin-bottom: 0px !important;
.view-control { .view-control {
font-size: 1.2em; font-size: 1em;
margin-right: 0; margin-right: $interiorMargin;
order: 2; width: ceil($mobileTreeItemH * 0.75);
width: $mobileTreeItemH;
&.has-children { &.has-children {
&:before { &:before {
content: "\7d"; content: $glyph-icon-arrow-down;
left: 50%; left: 50%;
@include transform(translateX(-50%) rotate(270deg)); @include transform(translateX(-50%) rotate(-90deg));
} }
&.expanded:before { &.expanded:before {
@include transform(translateX(-50%) rotate(90deg)); @include transform(translateX(-50%) rotate(0deg));
} }
} }
} }

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

@ -84,8 +84,8 @@ ul.tree {
} }
&.selected { &.selected {
background: $colorItemTreeSelectedBg; background: $colorItemTreeSelectedBg !important;
color: $colorItemTreeSelectedFg; color: $colorItemTreeSelectedFg !important;
.view-control { .view-control {
color: $colorItemTreeSelectedVC; color: $colorItemTreeSelectedVC;
} }

2
platform/commonUI/inspect/res/templates/info-button.html
View File

@ -21,4 +21,4 @@
--> -->
<!--The icon for the info button appearing in a grid item (list in folder)--> <!--The icon for the info button appearing in a grid item (list in folder)-->
<a class='ui-symbol icon icon-info'></a> <a class='s-icon-button icon-info'></a>

2
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -35,7 +35,7 @@ $colorToggleIcon: rgba($colorBodyFg, 0.5);
$colorToggleIconActive: $colorKey; $colorToggleIconActive: $colorKey;
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5); $colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%; $contrastInvokeMenuPercent: 30%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px; $shdwBtns: rgba(black, 0.2) 0 1px 2px;
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px; $shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
$sliderColorBase: $colorKey; $sliderColorBase: $colorKey;

4
platform/commonUI/themes/espresso/res/sass/_mixins.scss
View File

@ -1,6 +1,6 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
@include containerBase($bg, $fg); @include containerBase($bg, $fg);
@include background-image(linear-gradient(lighten($bg, 5%), $bg)); @include background-image(linear-gradient(pullForward($bg, $gradRatio), $bg));
@include boxShdw($shdwBtns); @include boxShdw($shdwBtns);
} }

2
platform/commonUI/themes/snow/res/sass/_mixins.scss
View File

@ -1,4 +1,4 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
@include containerBase($bg, $fg); @include containerBase($bg, $fg);
@include boxShdw($shdwBtns); @include boxShdw($shdwBtns);
} }