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

[Frontend] Converting tree items and labels to flex-box

Browse Source 
open #431
In-progress fixing mobile;
Mostly done, link icon in mobile needs
better positioning;
This commit is contained in:
Charles Hacskaylo
2015-12-16 13:26:30 -08:00
parent d1f617a54e
commit 9b32461240
5 changed files with 173 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,7 @@ $tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobileTreeItemH: 35px;
$mobileTreeItemIndent: 20px;
$mobileTreeItemIndent: 15px;
$mobileTreeRightArrowW: 30px;
/************************** DEVICE WIDTHS */

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

@@ -34,20 +34,20 @@
line-height: $mobileTreeItemH;
margin-bottom: 0px;
.view-control {
//@include test(red);
position: absolute;
font-size: 1.1em;
height: $mobileTreeItemH;
line-height: inherit;
right: 0px;
width: $mobileTreeRightArrowW;
text-align: center;
order: 2;
width: $mobileTreeItemH;
&.has-children {
&:before {
content: "\7d";
left: 50%;
@include transform(translateX(-50%) rotate(90deg));
}
&.expanded:before {
@include transform(translateX(-50%) rotate(270deg));
}
}
}
.label,
.t-object-label {
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
line-height: inherit;
}
}

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

@@ -46,23 +46,21 @@ ul.tree {
position: relative;
.view-control {
@extend .flex-elem;
color: $colorItemTreeVC;
//display: inline-block;
font-size: 0.75em;
margin-right: $interiorMargin;
font-size: 0.75em;
height: 100%; //$menuLineH;
line-height: inherit;
width: $treeVCW;
&.has-children {
&:before {
//@include trans-prop-nice(rotate);
content: ">";
//position: absolute;
//top: 50%;
//left: 50%;
position: absolute;
@include trans-prop-nice(transform, 100ms);
content: "\3e";
@include transform-origin(center);
}
&.expanded:before {
//@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
content: "v";
@include transform(rotate(90deg));
}
}
@include desktop {
@@ -73,27 +71,17 @@ ul.tree {
}
.t-object-label {
//display: block;
//@include absPosDefault();
line-height: $menuLineH;
.t-item-icon {
@include txtShdwSubtle($shdwItemTreeIcon);
font-size: $treeTypeIconH;
color: $colorItemTreeIcon;
//position: absolute;
//left: $interiorMargin;
//top: 50%;
width: $treeTypeIconH;
//@include transform(translateY(-50%));
}
.title-label,
.t-title-label {
@include ellipsize();
//@include absPosDefault();
//display: block;
//left: $runningItemW + ($interiorMargin * 3);
}
}