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

[Mobile] IN PROGRESS: Significant refactor in mobile/_layout.scss

Browse Source 
open #74
Made view-switcher visible when browsing via mobile;
Fixed class in browse.html markup from left-menu to left;
Moved object-browse-bar, top-bar classes from _controls into _layout;
Renamed and simplified menu widths in mobile _constants;
Really significant refactor of mobiles/_layout;
Tweaks in user-environ/_layout;
TO-DO: figure out why object-browse-bar flex styles not
working in mobile;
This commit is contained in:
Charles Hacskaylo
2015-08-25 13:34:37 -07:00
parent e1858bf0ae
commit c71f1fe447
7 changed files with 188 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -174,7 +174,7 @@
}
*/
/*.object-browse-bar .btn,
.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
font-size: $h * $btnFontSizeToH;
line-height: 200%;
vertical-align: top;
}*/
}
label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma);

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

@@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$phoneRepSizePortrait: 10%;
$phoneRepSizeLandscape: 60%;
$tabletRepSizePortrait: 500px;
$tabletRepSizeLandscape: 70%;
$desktopMenuSize: 25%;
$proporMenuOnly: 90%;
$proporMenuWithView: 40%;

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

@@ -20,154 +20,86 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
// Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes
.browse-wrapper,
.mobile-pane {
@include phoneandtablet {
@include phoneandtablet {
// Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes
.browse-wrapper,
.mobile-pane {
position: absolute;
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);
.mobile-pane.right-repr {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
}
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
}
.holder.l-mobile {
@include phoneandtablet {
//@include test();
.holder.l-mobile {
top: $bodyMargin !important;
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
}
}
// Default views of the panels
// if in desktop browser
.desktop-browse {
@include desktop {
min-width: 150px;
max-width: 800px;
width: $desktopMenuSize;
}
}
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include phoneandtablet {
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree {
@include user-select(none);
}
// Sets the left tree menu when the tree
// is hidden.
.mobile-pane.left-menu {
@include phoneandtablet {
@include trans-prop-nice(opacity, .4s);
// Sets the left tree menu when the tree
// is hidden.
.mobile-pane.left {
opacity: 0;
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden;
}
}
// Sets the right represenation when
// the tree is hidden.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
left: auto !important;
width: 100% !important;
// Sets the right represenation when
// the tree is hidden.
.mobile-pane.right-repr {
//@include slMenuTransitions;
left: 0 !important;
//width: 100% !important;
}
}
}
.mobile-tree-holder {
top: 30px;
}
// When the tree is shown, these are
// the classes used for the left menu
// and the right menu (for each device &
// orientation combination, separate
// parameters are used)
.browse-showtree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include phoneandtablet {
.browse-showtree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
@include user-select(none);
}
// Sets the left tree menu when the tree
// is shown.
.mobile-pane.left-menu {
@include phoneandtablet {
// Sets the left tree menu when the tree is shown.
.mobile-pane.left {
@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;
//width: auto !important; // CH CO
right: auto !important;
width: $proporMenuWithView !important;
}
// On both phones and tablets, the amount of
// space allowed for the right pane is specified
@include phonePortrait {
right: $phoneRepSizePortrait !important;
}
@include phoneLandscape {
right: $phoneRepSizeLandscape !important;
}
@include tabletPortrait {
right: $tabletRepSizePortrait !important;
}
@include tabletLandscape {
right: $tabletRepSizeLandscape !important;
}
}
// Sets the right representation when the tree is shown.
.mobile-pane.right-repr {
@include phoneandtablet {
@include slMenuTransitions;
left: auto !important;
}
// On both phones and tablets, the width of
// the right pane is specified
@include phonePortrait {
//width: $phoneRepSizePortrait !important;
left: 0 !important;
transform: translateX(100% - $phoneRepSizePortrait);
}
@include phoneLandscape {
width: $phoneRepSizeLandscape !important;
}
@include tabletPortrait {
//@include test(green);
width: $tabletRepSizePortrait !important;
}
@include tabletLandscape {
//@include test(orange);
width: $tabletRepSizeLandscape !important;
}
}
}
// Sets the right representation when the tree is shown.
.mobile-pane.right-repr {
//@include slMenuTransitions; CH MOVED
left: $proporMenuWithView !important;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}
@include phoneandtablet {
.mobile-menu-icon {
font-size: 110%;
position: absolute;
@@ -177,12 +109,13 @@
.object-browse-bar {
//@include test();
display: block !important;
//font-size: 0.95em;
left: 35px !important;
//left: 35px !important; // TEMP
.context-available {
opacity: 1 !important;
}
.view-switcher {
margin-right: 0 !important;
}
}
.tree-holder {
@@ -211,52 +144,20 @@
}
}
.desktop-hide {
@include desktop {
display: none;
}
}
/*
.mobile-back-hide {
@include phoneandtablet {
pointer-events: none;
@include trans-prop-nice(opacity, .4s);
opacity: 0;
}
}
// Hides objects on phone and tablet
.mobile-back-unhide {
@include phoneandtablet {
pointer-events: all;
@include trans-prop-nice(opacity, .4s);
opacity: 1;
}
}
// Hides objects only on the phone
.phone-hide {
@include phone {
display: none;
}
}
.tree-holder {
@include phoneandtablet {
.tree-holder {
overflow-x: hidden !important;
@include phonePortrait {
.browse-showtree {
.mobile-pane.left {
width: $proporMenuOnly !important;
}
.mobile-pane.right-repr {
left: 0 !important;
transform: translateX($proporMenuOnly);
}
}
}
.mobile-disable-select {
@include phoneandtablet {
.mobile-disable-select {
@include user-select(none);
}
@include desktop {
.desktop-hide {
display: none;
}
}
*/
}

9
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -88,8 +88,8 @@
&.l-flex {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
.left {
@include test(green);
flex: 1 1 auto;
}
}
@@ -208,7 +208,8 @@
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 50%;
max-width: 800px;
width: $ueBrowseLeftPaneW;
}
}
}
@@ -216,8 +217,8 @@
.edit-mode {
.split-layout {
.split-pane-component.pane.right {
min-width: 150px;
max-width: 50%;
//min-width: 150px;
//max-width: 50%;
.split-pane-component.pane.bottom {
min-height: 50px;
max-height: 80%;