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='contents 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>
</div>
<div class='item-main abs lg'>

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

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

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

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

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

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

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

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

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

@ -30,22 +30,21 @@ body.touch {
}
.tree-item,
.search-result-item {
@include containerSubtle($bg: pullForward($colorMobilePaneLeft, 2%), $gradRatio: 2%);
height: $mobileTreeItemH !important;
line-height: $mobileTreeItemH !important;
margin-bottom: 0px !important;
.view-control {
font-size: 1.2em;
margin-right: 0;
order: 2;
width: $mobileTreeItemH;
font-size: 1em;
margin-right: $interiorMargin;
width: ceil($mobileTreeItemH * 0.75);
&.has-children {
&:before {
content: "\7d";
content: $glyph-icon-arrow-down;
left: 50%;
@include transform(translateX(-50%) rotate(270deg));
@include transform(translateX(-50%) rotate(-90deg));
}
&.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 {
background: $colorItemTreeSelectedBg;
color: $colorItemTreeSelectedFg;
background: $colorItemTreeSelectedBg !important;
color: $colorItemTreeSelectedFg !important;
.view-control {
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)-->
<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;
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
$colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%;
$contrastInvokeMenuPercent: 30%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
$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 background-image(linear-gradient(lighten($bg, 5%), $bg));
@include background-image(linear-gradient(pullForward($bg, $gradRatio), $bg));
@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 boxShdw($shdwBtns);
}