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

[Mobile] Left tree

Browse Source 
Attempt to resize left
tree menu when changing device.
Currently does not move the splitter
bar.
This commit is contained in:
Dave
2015-07-07 16:46:32 -07:00
parent 79fb6eabd9
commit 24fae72492
4 changed files with 68 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@
</div> </div>
<mct-splitter></mct-splitter> <mct-splitter></mct-splitter>
<div class='split-pane-component items pane'> <div class='split-pane-component items pane'>
<div class='holder abs rem-display' id='content-area'> <div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>

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

@@ -474,13 +474,24 @@ mct-container {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; } border-radius: 3px; }
/* line 57, ../sass/user-environ/_layout.scss */ @media screen and (max-width: 514px) {
.browser-manage { /* line 57, ../sass/user-environ/_layout.scss */
.browser-manage {
width: 150px; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 57, ../sass/user-environ/_layout.scss */
.browser-manage {
min-width: 150px;
max-width: 300px;
width: 25%; } }
@media screen and (min-width: 801px) {
/* line 57, ../sass/user-environ/_layout.scss */
.browser-manage {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: 25%; } width: 25%; } }
/* line 75, ../sass/user-environ/_layout.scss */ /* line 73, ../sass/user-environ/_layout.scss */
.contents { .contents {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@@ -488,36 +499,36 @@ mct-container {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 83, ../sass/user-environ/_layout.scss */ /* line 81, ../sass/user-environ/_layout.scss */
.contents.nomargin { .contents.nomargin {
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; } left: 0px; }
/* line 92, ../sass/user-environ/_layout.scss */ /* line 90, ../sass/user-environ/_layout.scss */
.bar .icon.major { .bar .icon.major {
margin-right: 5px; } margin-right: 5px; }
/* line 95, ../sass/user-environ/_layout.scss */ /* line 93, ../sass/user-environ/_layout.scss */
.bar.abs, .btn-menu span.bar.l-click-area { .bar.abs, .btn-menu span.bar.l-click-area {
text-wrap: none; text-wrap: none;
white-space: nowrap; } white-space: nowrap; }
/* line 99, ../sass/user-environ/_layout.scss */ /* line 97, ../sass/user-environ/_layout.scss */
.bar.left, .bar.left,
.bar .left { .bar .left {
width: 45% !important; width: 45% !important;
right: auto !important; } right: auto !important; }
/* line 104, ../sass/user-environ/_layout.scss */ /* line 102, ../sass/user-environ/_layout.scss */
.bar.right, .bar.right,
.bar .right { .bar .right {
width: 45% !important; width: 45% !important;
left: auto !important; left: auto !important;
text-align: right; } text-align: right; }
/* line 109, ../sass/user-environ/_layout.scss */ /* line 107, ../sass/user-environ/_layout.scss */
.bar.right .icon.major, .bar.right .icon.major,
.bar .right .icon.major { .bar .right .icon.major {
margin-left: 15px; } margin-left: 15px; }
/* line 116, ../sass/user-environ/_layout.scss */ /* line 114, ../sass/user-environ/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
.user-environ .editor { .user-environ .editor {
@@ -525,23 +536,23 @@ mct-container {
right: 10px; right: 10px;
bottom: 35px; bottom: 35px;
left: 10px; } left: 10px; }
/* line 127, ../sass/user-environ/_layout.scss */ /* line 125, ../sass/user-environ/_layout.scss */
.user-environ .browse-area > .contents, .user-environ .browse-area > .contents,
.user-environ .edit-area > .contents { .user-environ .edit-area > .contents {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 133, ../sass/user-environ/_layout.scss */ /* line 131, ../sass/user-environ/_layout.scss */
.user-environ .edit-area { .user-environ .edit-area {
top: 45px; } top: 45px; }
/* line 136, ../sass/user-environ/_layout.scss */ /* line 134, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .tool-bar { .user-environ .edit-area .tool-bar {
bottom: auto; bottom: auto;
height: 30px; height: 30px;
line-height: 25px; } line-height: 25px; }
/* line 141, ../sass/user-environ/_layout.scss */ /* line 139, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .work-area { .user-environ .edit-area .work-area {
top: 40px; } top: 40px; }
/* line 146, ../sass/user-environ/_layout.scss */ /* line 144, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar { .user-environ .bottom-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@@ -553,20 +564,20 @@ mct-container {
height: auto; height: auto;
top: auto; top: auto;
height: 25px; } height: 25px; }
/* line 151, ../sass/user-environ/_layout.scss */ /* line 149, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .status-holder { .user-environ .bottom-bar .status-holder {
z-index: 1; } z-index: 1; }
/* line 155, ../sass/user-environ/_layout.scss */ /* line 153, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .app-logo { .user-environ .bottom-bar .app-logo {
left: auto; left: auto;
width: 105px; width: 105px;
z-index: 2; } z-index: 2; }
/* line 163, ../sass/user-environ/_layout.scss */ /* line 161, ../sass/user-environ/_layout.scss */
.cols { .cols {
overflow: hidden; overflow: hidden;
*zoom: 1; } *zoom: 1; }
/* line 165, ../sass/user-environ/_layout.scss */ /* line 163, ../sass/user-environ/_layout.scss */
.cols .col { .cols .col {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@@ -577,100 +588,100 @@ mct-container {
margin-left: 1.5%; margin-left: 1.5%;
padding-left: 5px; padding-left: 5px;
position: relative; } position: relative; }
/* line 173, ../sass/user-environ/_layout.scss */ /* line 171, ../sass/user-environ/_layout.scss */
.cols .col:first-child { .cols .col:first-child {
margin-left: 0; margin-left: 0;
padding-left: 0; } padding-left: 0; }
/* line 180, ../sass/user-environ/_layout.scss */ /* line 178, ../sass/user-environ/_layout.scss */
.cols.cols-2 .col-1 { .cols.cols-2 .col-1 {
min-width: 250px; min-width: 250px;
width: 48.5%; } width: 48.5%; }
/* line 186, ../sass/user-environ/_layout.scss */ /* line 184, ../sass/user-environ/_layout.scss */
.cols.cols-2-ff .col-100px { .cols.cols-2-ff .col-100px {
width: 100px; } width: 100px; }
/* line 193, ../sass/user-environ/_layout.scss */ /* line 191, ../sass/user-environ/_layout.scss */
.cols.cols-6 .col-1 { .cols.cols-6 .col-1 {
min-width: 83.33333px; min-width: 83.33333px;
width: 15.16667%; } width: 15.16667%; }
/* line 199, ../sass/user-environ/_layout.scss */ /* line 197, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-1 { .cols.cols-16 .col-1 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 202, ../sass/user-environ/_layout.scss */ /* line 200, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-2 { .cols.cols-16 .col-2 {
min-width: 62.5px; min-width: 62.5px;
width: 11%; } width: 11%; }
/* line 205, ../sass/user-environ/_layout.scss */ /* line 203, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-7 { .cols.cols-16 .col-7 {
min-width: 218.75px; min-width: 218.75px;
width: 42.25%; } width: 42.25%; }
/* line 211, ../sass/user-environ/_layout.scss */ /* line 209, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-2 { .cols.cols-32 .col-2 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 214, ../sass/user-environ/_layout.scss */ /* line 212, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-15 { .cols.cols-32 .col-15 {
min-width: 234.375px; min-width: 234.375px;
width: 45.375%; } width: 45.375%; }
/* line 218, ../sass/user-environ/_layout.scss */ /* line 216, ../sass/user-environ/_layout.scss */
.cols .l-row { .cols .l-row {
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
padding: 5px 0; } padding: 5px 0; }
/* line 224, ../sass/user-environ/_layout.scss */ /* line 222, ../sass/user-environ/_layout.scss */
.pane { .pane {
position: absolute; } position: absolute; }
/* line 227, ../sass/user-environ/_layout.scss */ /* line 225, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder { .pane.treeview .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 230, ../sass/user-environ/_layout.scss */ /* line 228, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder .wrapper.menu-element { .pane.treeview .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 235, ../sass/user-environ/_layout.scss */ /* line 233, ../sass/user-environ/_layout.scss */
.pane.treeview .tree-holder { .pane.treeview .tree-holder {
overflow: auto; overflow: auto;
top: 34px; } top: 34px; }
/* line 242, ../sass/user-environ/_layout.scss */ /* line 240, ../sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
.pane.items .object-browse-bar .right.abs, .pane.items .object-browse-bar .right.abs,
.pane.items .object-browse-bar .btn-menu span.right.l-click-area, .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
.btn-menu .pane.items .object-browse-bar span.right.l-click-area { .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 247, ../sass/user-environ/_layout.scss */ /* line 245, ../sass/user-environ/_layout.scss */
.pane.items .object-holder { .pane.items .object-holder {
top: 34px; } top: 34px; }
/* line 252, ../sass/user-environ/_layout.scss */ /* line 250, ../sass/user-environ/_layout.scss */
.pane.edit-main .object-holder { .pane.edit-main .object-holder {
top: 0; } top: 0; }
/* line 258, ../sass/user-environ/_layout.scss */ /* line 256, ../sass/user-environ/_layout.scss */
.pane .object-holder { .pane .object-holder {
overflow: auto; } overflow: auto; }
/* line 266, ../sass/user-environ/_layout.scss */ /* line 264, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 269, ../sass/user-environ/_layout.scss */ /* line 267, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 276, ../sass/user-environ/_layout.scss */ /* line 274, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 278, ../sass/user-environ/_layout.scss */ /* line 276, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 282, ../sass/user-environ/_layout.scss */ /* line 280, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 284, ../sass/user-environ/_layout.scss */ /* line 282, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 5px; } right: 5px; }
/* line 293, ../sass/user-environ/_layout.scss */ /* line 291, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }

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

@@ -55,21 +55,17 @@ $min-large: 770px;
// style="min-width: 150px; max-width: 800px; width: 25%;" // style="min-width: 150px; max-width: 800px; width: 25%;"
.browser-manage { .browser-manage {
// @media only screen and ($max-name : $max-small) { @include phone {
// width: 100%; width: 150px;
// } }
// @include tablet {
// @media only screen and ($min-name : $min-large) { width: 150px;
}
@include desktop {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: 25%; width: 25%;
// } }
}
.rem-display {
// @media only screen and ($max-name : $max-small) {
// display: none;
// }
} }
.contents { .contents {

32
platform/commonUI/general/res/templates/controls/menu-button.html
View File

@@ -1,32 +0,0 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web is licensed under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
Open MCT Web includes source code licensed under additional open source
licenses. See the Open Source Licenses file (LICENSES.md) included with
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
ng-class="{ labeled: parameters.labeled }"
title="{{parameters.action.getMetadata().description}}"
ng-click="parameters.action.perform()">
<span class="ui-symbol icon">
{{parameters.action.getMetadata().glyph}}
</span>
<span class="title-label" ng-if="parameters.labeled">
{{parameters.action.getMetadata().name}}
</span>
</a>