alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Sanding of mobile styles continues, in progress

Browse Source 
open #74
CSS and markup changes for split pane holders;
drop shadow added to tree area;
Tree item cleanups;
This or earlier commit broke treeview nav action;
TO-DO: fix treeview nav action to hide menu;
This commit is contained in:
Charles Hacskaylo
2015-08-20 18:36:44 -07:00
parent 67592def90
commit da8eb334e3
13 changed files with 202 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
// Tree
$treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconW: 20px;
$treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey;

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

@@ -328,7 +328,7 @@
}
@mixin verticalCenterBlock($holderH, $itemH) {
top: floor(($holderH - $itemH) / 2) !important;
top: floor(($holderH - $itemH) / 2);
bottom: auto;
height: $itemH;
}

4
platform/commonUI/general/res/sass/items/_item.scss
View File

@@ -60,7 +60,7 @@
top: $m; right: $m; bottom: $m; left: $m;
}
.bar {
&.top-bar.abs {
&.top-bar {
bottom: auto;
height: $ueBrowseGridItemTopBarH;
line-height: $ueBrowseGridItemTopBarH;
@@ -76,7 +76,7 @@
}
}
}
&.bottom-bar.abs {
&.bottom-bar {
top: auto;
height: $ueBrowseGridItemBottomBarH;
}

10
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobile-treeHeight: 38px;
$mobileTreeItemH: 35px;
$mobile-startingTreeLeft: 3px;
$mobile-runningTreeLeft: 7px;
$mobile-treeRight: 13px;
$mobileTreeItemIndent: 20px;
$mobileTreeRightArrowW: 30px;
/************************** WINDOW DIMENSIONS FOR RWD */
$phoMaxW: 514px;
@@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$phoneRepSizePortrait: 19px;
$phoneRepSizeLandscape: 66%;
$phoneRepSizeLandscape: 60%;
$tabletRepSizePortrait: 500px;
$tabletRepSizeLandscape: 78%;
$tabletRepSizeLandscape: 70%;
$desktopMenuSize: 25%;

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

@@ -27,9 +27,27 @@
.mobile-pane {
@include phoneandtablet {
position: absolute;
left: 0; top: 0;
right: 0;
white-space: nowrap;
top: 0 !important; right: 0; bottom: 0; left: 0;
//white-space: nowrap; // CH CO
}
}
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
@include phoneandtablet {
//@include test(red);
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
}
.holder.l-mobile {
@include phoneandtablet {
//@include test();
top: $bodyMargin !important;
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
}
}
@@ -39,8 +57,8 @@
@include desktop {
min-width: 150px;
max-width: 800px;
width: $desktopMenuSize;
}
width: $desktopMenuSize;
}
}
// When the tree is hidden, these are the
@@ -56,7 +74,7 @@
@include user-select(none);
}
// Sets the left tree menu when the tree
// is hidden.
// is hidden.
.mobile-pane.left-menu {
@include phoneandtablet {
@include trans-prop-nice(opacity, .4s);
@@ -64,19 +82,19 @@
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden;
overflow-x: hidden;
}
}
// Sets the right represenation when
// the tree is hidden.
.mobile-pane.right-repr {
@include phoneandtablet {
// the tree is hidden.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
left: auto !important;
width: 100% !important;
}
}
}
}
.mobile-tree-holder {
@@ -86,7 +104,7 @@
// When the tree is shown, these are
// the classes used for the left menu
// and the right menu (for each device &
// orientation combination, separate
// orientation combination, separate
// parameters are used)
.browse-showtree {
// NOTE: DISABLED SELECTION
@@ -98,10 +116,11 @@
@include user-select(none);
}
// Sets the left tree menu when the tree
// is shown.
// is shown.
.mobile-pane.left-menu {
@include phoneandtablet {
@include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1;
display: block !important;
width: auto !important;
@@ -121,8 +140,7 @@
right: $tabletRepSizeLandscape !important;
}
}
// Sets the right represenation when
// the tree is shown.
// Sets the right representation when the tree is shown.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
@@ -137,19 +155,19 @@
width: $phoneRepSizeLandscape !important;
}
@include tabletPortrait {
//@include test(green);
width: $tabletRepSizePortrait !important;
}
@include tabletLandscape {
//@include test(orange);
width: $tabletRepSizeLandscape !important;
}
}
}
// Button position is set as absolute with transitions
.button-pos {
@include phoneandtablet {
position: absolute;
}
.mobile-menu-icon {
position: absolute;
top: $bodyMargin; left: $bodyMargin;
}
// Object header must be moved

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

@@ -24,21 +24,20 @@
ul.tree {
// Only applies to phones and tablets
@include phoneandtablet {
@include menuUlReset();
//@include menuUlReset();
li {
//border-top: 1px solid $colorInteriorBorder; // TEMP
span.tree-item {
// Adds some space to the top of each tree item
height: $mobile-treeHeight;
line-height: $mobile-treeHeight;
padding-top: $interiorMarginSm;
padding-bottom: $interiorMarginSm;
height: $mobileTreeItemH;
line-height: $mobileTreeItemH;
margin-bottom: 0px;
.view-control {
//@include test(red);
position: absolute;
right: $mobile-treeRight;
font-size: 1.8em;
font-size: 1.1em;
right: 0px;
width: 35px;
width: $mobileTreeRightArrowW;
text-align: center;
}
@@ -46,13 +45,13 @@ ul.tree {
// Designates the starting left margin
// (indentation) of 'My Items'
// Also adds right space for selection button
left: $mobile-startingTreeLeft;
right: 45px;
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
font-size: 1.2em;
// Allows tree item name to stop prior
// to the arrow
.type-icon {
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
}
.title-label {
right: $mobile-treeRight * 1.3;
}
}
}
@@ -61,7 +60,7 @@ ul.tree {
// Sets the margin on the left, which causes the
// running indentation after each folder is made
ul.tree {
margin-left: $mobile-runningTreeLeft;
margin-left: $mobileTreeItemIndent;
}
}
}

2
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@@ -26,7 +26,7 @@
display: inline-block;
@include phoneandtablet {
font-size: 21px;
padding-top: $imageThumbPad;
//padding-top: $imageThumbPad;
}
@include desktop {
display: none;

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

@@ -27,6 +27,7 @@ ul.tree {
position: relative;
span.tree-item {
$runningItemW: 0;
@include box-sizing(border-box);
@include border-radius($basicCr);
@include single-transition(background-color, 0.25s);
display: block;
@@ -59,7 +60,7 @@ ul.tree {
.type-icon {
//@include absPosDefault(0, false);
$d: 16px; // 16px is crisp size
$d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle(0.6);
font-size: $d;
color: $colorItemTreeIcon;