diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index adc0164769..276f10c657 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -21,7 +21,7 @@ -->
- + diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 4a20202a91..f02d9190f7 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -35,7 +35,7 @@
+ ng-class='{inactive: !paneModel.leftPane, active: paneModel.leftPane}'>
+ ng-class='{leftInactive: !paneModel.leftPane, leftActive: paneModel.leftPane}'> diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index cace241013..5546f143f3 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -855,31 +855,21 @@ mct-container { bottom: 10px !important; left: 10px !important; } - /* line 61, ../sass/mobile/_layout.scss */ - .browse-hidetree { + /* line 58, ../sass/mobile/_layout.scss */ + .pane.left { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 65, ../sass/mobile/_layout.scss */ - .browse-hidetree .pane.left.treeview { + /* line 60, ../sass/mobile/_layout.scss */ + .pane.left.inactive { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - /* line 74, ../sass/mobile/_layout.scss */ - .browse-hidetree .pane.right-repr { - left: 0 !important; } - - /* line 79, ../sass/mobile/_layout.scss */ - .browse-showtree { - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; } - /* line 88, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.left.treeview { + /* line 68, ../sass/mobile/_layout.scss */ + .pane.left.active { -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; @@ -901,47 +891,51 @@ mct-container { display: block !important; right: auto !important; width: 40% !important; } - /* line 98, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.right-repr { - left: 40% !important; } + /* line 80, ../sass/mobile/_layout.scss */ + .pane.left .create-btn.major.inactivePane { + display: none; } - /* line 107, ../sass/mobile/_layout.scss */ + /* line 89, ../sass/mobile/_layout.scss */ + .split-pane-component.secondary-split.pane.right.leftActive { + left: 40% !important; } + + /* line 147, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 114, ../sass/mobile/_layout.scss */ + /* line 154, ../sass/mobile/_layout.scss */ .object-browse-bar { left: 30px !important; } - /* line 117, ../sass/mobile/_layout.scss */ + /* line 157, ../sass/mobile/_layout.scss */ .object-browse-bar .context-available { opacity: 1 !important; } - /* line 120, ../sass/mobile/_layout.scss */ + /* line 160, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher { margin-right: 0 !important; } - /* line 122, ../sass/mobile/_layout.scss */ + /* line 162, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher .name { display: none; } - /* line 129, ../sass/mobile/_layout.scss */ + /* line 169, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 133, ../sass/mobile/_layout.scss */ + /* line 173, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 138, ../sass/mobile/_layout.scss */ + /* line 178, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 143, ../sass/mobile/_layout.scss */ + /* line 183, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -958,7 +952,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 148, ../sass/mobile/_layout.scss */ + /* line 188, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -975,19 +969,20 @@ mct-container { transition-timing-function: ease-in-out; 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) { - /* line 157, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.left.treeview { + /* line 197, ../sass/mobile/_layout.scss */ + .pane.left.active { width: 90% !important; } - /* line 160, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.right-repr { + + /* line 204, ../sass/mobile/_layout.scss */ + .split-pane-component.secondary-split.pane.right.leftActive { left: 0 !important; transform: translateX(90%); -webkit-transform: translateX(90%); } - /* line 163, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.right-repr #content-area { + /* line 207, ../sass/mobile/_layout.scss */ + .split-pane-component.secondary-split.pane.right.leftActive #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) { - /* line 171, ../sass/mobile/_layout.scss */ + /* line 228, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } /***************************************************************************** diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index d202ec0450..84c71963ae 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -55,54 +55,94 @@ left: $bodyMargin !important; } - // When the tree is hidden, these are the - // classes used for the left menu and the - // right representation. - .browse-hidetree { + .pane.left { @include user-select(none); - // Sets the left tree menu when the tree - // is hidden. - .pane.left.treeview { + &.inactive { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - // Sets the right represenation when - // the tree is hidden. - .pane.right-repr { - left: 0 !important; + + &.active { + @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; // CH CO + right: auto !important; + width: $proporMenuWithView !important; + } + + // When the pane is closed, hide the create button + .create-btn.major { + &.inactivePane { + display: none; + } } } - - .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. - .pane.left.treeview { - @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; // CH CO - right: auto !important; - width: $proporMenuWithView !important; - } - // Sets the right representation when the tree is shown. - .pane.right-repr { - left: $proporMenuWithView !important; - //width: auto !important; + .split-pane-component.secondary-split.pane.right { - //left: 0 !important; - //transform: translateX($proporMenuWithView); - } - } + // Sliding transition for open/close of left pane + &.leftActive { + left: $proporMenuWithView !important; + //width: auto !important; + + //left: 0 !important; + //transform: translateX($proporMenuWithView); + } + } + + //// 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. + // .pane.left.treeview { + // opacity: 0; + // right: 100% !important; + // width: auto !important; + // overflow-y: hidden; + // overflow-x: hidden; + // } + // // Sets the right represenation when + // // the tree is hidden. + // .pane.right-repr { + // left: 0 !important; + // } + //} + + //.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. + // .pane.left.treeview { + // @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; // CH CO + // right: auto !important; + // width: $proporMenuWithView !important; + // } + // // Sets the right representation when the tree is shown. + // .pane.right-repr { + // left: $proporMenuWithView !important; + // //width: auto !important; + // + // //left: 0 !important; + // //transform: translateX($proporMenuWithView); + // } + //} .mobile-menu-icon { font-size: 110%; @@ -153,22 +193,39 @@ } @include phonePortrait { - .browse-showtree { - .pane.left.treeview { - width: $proporMenuOnly !important; - } - .pane.right-repr { - left: 0 !important; - @include webkitProp(transform, translateX($proporMenuOnly)); - #content-area { - opacity: 0; - } - } + .pane.left { + &.active { + width: $proporMenuOnly !important; } + } + + .split-pane-component.secondary-split.pane.right { + // Sliding transition for open/close of left pane + &.leftActive { + left: 0 !important; + @include webkitProp(transform, translateX($proporMenuOnly)); + #content-area { + opacity: 0; + } + } + } + + //.browse-showtree { + // .pane.left.treeview { + // width: $proporMenuOnly !important; + // } + // .pane.right-repr { + // left: 0 !important; + // @include webkitProp(transform, translateX($proporMenuOnly)); + // #content-area { + // opacity: 0; + // } + // } + //} } @include desktop { .desktop-hide { display: none; } -} \ No newline at end of file +}