ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-01 23:20:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] IN PROGRESS: Misc layout tweaks; treeview pane styling

Browse Source 
open #74
Treeview pane darkened;
Spacing in frame tweaked;
#content-area in right pane hidden
when treeview expanded for
phone portrait only;
Removed mobile-pane and
desktop-browse classes from markup;
This commit is contained in:
Charles Hacskaylo 2015-08-26 10:08:57 -07:00
parent 39bd292886
commit 89bfa54563
4 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/browse/res/templates/browse.html
View File

@ -24,7 +24,7 @@
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"> <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'> <mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane mobile-pane left desktop-browse'> <div class='split-pane-component treeview pane left'>
<div class="holder abs l-mobile"> <div class="holder abs l-mobile">
<div class='tree-holder abs mobile-tree-holder'> <div class='tree-holder abs mobile-tree-holder'>
<mct-representation key="'tree'" <mct-representation key="'tree'"
@ -39,7 +39,7 @@
<mct-splitter class="mobile-hide"></mct-splitter> <mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane mobile-pane right-repr'> <div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'> <div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>

62
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -785,7 +785,7 @@ mct-container {
left: 0; } left: 0; }
/* line 31, ../sass/mobile/_layout.scss */ /* line 31, ../sass/mobile/_layout.scss */
.pane.left { .pane.left.treeview {
background-color: #222; } background-color: #222; }
/* line 35, ../sass/mobile/_layout.scss */ /* line 35, ../sass/mobile/_layout.scss */
@ -797,8 +797,17 @@ mct-container {
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden; backface-visibility: hidden;
margin-left: 0 !important; } margin-left: 0 !important; }
/* line 39, ../sass/mobile/_layout.scss */
.pane.right-repr #content-area {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
transition-timing-function: ease;
backface-visibility: hidden;
opacity: 1; }
/* line 41, ../sass/mobile/_layout.scss */ /* line 45, ../sass/mobile/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
.user-environ .editor { .user-environ .editor {
@ -807,38 +816,38 @@ mct-container {
right: 0; right: 0;
bottom: 25px; } bottom: 25px; }
/* line 47, ../sass/mobile/_layout.scss */ /* line 51, ../sass/mobile/_layout.scss */
.holder.l-mobile { .holder.l-mobile {
top: 10px !important; top: 10px !important;
right: 10px !important; right: 10px !important;
bottom: 10px !important; bottom: 10px !important;
left: 10px !important; } left: 10px !important; }
/* line 57, ../sass/mobile/_layout.scss */ /* line 61, ../sass/mobile/_layout.scss */
.browse-hidetree { .browse-hidetree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 61, ../sass/mobile/_layout.scss */ /* line 65, ../sass/mobile/_layout.scss */
.browse-hidetree .pane.left { .browse-hidetree .pane.left.treeview {
opacity: 0; opacity: 0;
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; } overflow-x: hidden; }
/* line 70, ../sass/mobile/_layout.scss */ /* line 74, ../sass/mobile/_layout.scss */
.browse-hidetree .pane.right-repr { .browse-hidetree .pane.right-repr {
left: 0 !important; } left: 0 !important; }
/* line 77, ../sass/mobile/_layout.scss */ /* line 79, ../sass/mobile/_layout.scss */
.browse-showtree { .browse-showtree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 86, ../sass/mobile/_layout.scss */ /* line 88, ../sass/mobile/_layout.scss */
.browse-showtree .pane.left { .browse-showtree .pane.left.treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
@ -860,44 +869,44 @@ mct-container {
display: block !important; display: block !important;
right: auto !important; right: auto !important;
width: 40% !important; } width: 40% !important; }
/* line 96, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr { .browse-showtree .pane.right-repr {
left: 40% !important; } left: 40% !important; }
/* line 106, ../sass/mobile/_layout.scss */ /* line 107, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 110%; font-size: 110%;
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 10px; } left: 10px; }
/* line 113, ../sass/mobile/_layout.scss */ /* line 114, ../sass/mobile/_layout.scss */
.object-browse-bar { .object-browse-bar {
left: 30px !important; } left: 30px !important; }
/* line 116, ../sass/mobile/_layout.scss */ /* line 117, ../sass/mobile/_layout.scss */
.object-browse-bar .context-available { .object-browse-bar .context-available {
opacity: 1 !important; } opacity: 1 !important; }
/* line 119, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher { .object-browse-bar .view-switcher {
margin-right: 0 !important; } margin-right: 0 !important; }
/* line 124, ../sass/mobile/_layout.scss */ /* line 125, ../sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } overflow-x: hidden !important; }
/* line 128, ../sass/mobile/_layout.scss */ /* line 129, ../sass/mobile/_layout.scss */
.mobile-disable-select { .mobile-disable-select {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 133, ../sass/mobile/_layout.scss */ /* line 134, ../sass/mobile/_layout.scss */
.mobile-hide, .mobile-hide,
.mobile-hide-important { .mobile-hide-important {
display: none !important; } display: none !important; }
/* line 138, ../sass/mobile/_layout.scss */ /* line 139, ../sass/mobile/_layout.scss */
.mobile-back-hide { .mobile-back-hide {
pointer-events: none; pointer-events: none;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -914,7 +923,7 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 0; } opacity: 0; }
/* line 143, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.mobile-back-unhide { .mobile-back-unhide {
pointer-events: all; pointer-events: all;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -931,15 +940,18 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 1; } } opacity: 1; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 152, ../sass/mobile/_layout.scss */ /* line 153, ../sass/mobile/_layout.scss */
.browse-showtree .pane.left { .browse-showtree .pane.left.treeview {
width: 90% !important; } width: 90% !important; }
/* line 155, ../sass/mobile/_layout.scss */ /* line 156, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr { .browse-showtree .pane.right-repr {
left: 0 !important; left: 0 !important;
transform: translateX(90%); } } transform: translateX(90%); }
/* line 159, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr #content-area {
opacity: 0; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 163, ../sass/mobile/_layout.scss */ /* line 167, ../sass/mobile/_layout.scss */
.desktop-hide { .desktop-hide {
display: none; } } display: none; } }
/***************************************************************************** /*****************************************************************************

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

@ -24,15 +24,22 @@
// Wrapper of the entire 2 panes, only enacted on // Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes // phone and tablet. Also for the panes
.browse-wrapper, .browse-wrapper,
.mobile-pane { .pane {
position: absolute;
top: 0 !important; right: 0; bottom: 0; left: 0; top: 0 !important; right: 0; bottom: 0; left: 0;
} }
.mobile-pane.right-repr { .pane.left.treeview {
background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
//@include test(); //@include test();
@include slMenuTransitions; @include slMenuTransitions;
margin-left: 0 !important; margin-left: 0 !important;
#content-area {
@include slMenuTransitions;
opacity: 1;
}
} }
.user-environ .browse-area, .user-environ .browse-area,
@ -55,7 +62,7 @@
@include user-select(none); @include user-select(none);
// Sets the left tree menu when the tree // Sets the left tree menu when the tree
// is hidden. // is hidden.
.mobile-pane.left { .pane.left.treeview {
opacity: 0; opacity: 0;
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
@ -64,10 +71,8 @@
} }
// Sets the right represenation when // Sets the right represenation when
// the tree is hidden. // the tree is hidden.
.mobile-pane.right-repr { .pane.right-repr {
//@include slMenuTransitions;
left: 0 !important; left: 0 !important;
//width: 100% !important;
} }
} }
@ -80,7 +85,7 @@
@include user-select(none); @include user-select(none);
// Sets the left tree menu when the tree is shown. // Sets the left tree menu when the tree is shown.
.mobile-pane.left { .pane.left.treeview {
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%)); @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1; opacity: 1;
@ -90,8 +95,7 @@
width: $proporMenuWithView !important; width: $proporMenuWithView !important;
} }
// Sets the right representation when the tree is shown. // Sets the right representation when the tree is shown.
.mobile-pane.right-repr { .pane.right-repr {
//@include slMenuTransitions; CH MOVED
left: $proporMenuWithView !important; left: $proporMenuWithView !important;
//width: auto !important; //width: auto !important;
@ -146,12 +150,15 @@
@include phonePortrait { @include phonePortrait {
.browse-showtree { .browse-showtree {
.mobile-pane.left { .pane.left.treeview {
width: $proporMenuOnly !important; width: $proporMenuOnly !important;
} }
.mobile-pane.right-repr { .pane.right-repr {
left: 0 !important; left: 0 !important;
transform: translateX($proporMenuOnly); transform: translateX($proporMenuOnly);
#content-area {
opacity: 0;
}
} }
} }
} }

2
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -36,7 +36,7 @@
line-height: $ohH; line-height: $ohH;
} }
>.object-holder.abs { >.object-holder.abs {
top: $ohH + $interiorMarginSm; top: $ohH + $interiorMargin;
} }
.contents { .contents {
$myM: $interiorMargin; $myM: $interiorMargin;