mirror of
https://github.com/nasa/openmct.git
synced 2025-05-10 20:43:00 +00:00
[Mobile] Moved Button
Button moved to the Browse.html and BrowseController handles the tree slide.
This commit is contained in:
parent
7974f33781
commit
b9371ea03d
@ -41,6 +41,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mct-split-pane>
|
</mct-split-pane>
|
||||||
|
<div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide"
|
||||||
|
ng-click="treeSlide()">T</div>
|
||||||
</div>
|
</div>
|
||||||
<mct-include key="'bottombar'"></mct-include>
|
<mct-include key="'bottombar'"></mct-include>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,10 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class='object-header' ng-controller="TreeMenuController as treeController">
|
<div class='object-header object-header-mobile'>
|
||||||
<div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
|
|
||||||
T
|
|
||||||
</div>
|
|
||||||
<span class="label s-label">
|
<span class="label s-label">
|
||||||
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
|
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
|
||||||
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
|
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
|
||||||
|
@ -140,6 +140,22 @@ define(
|
|||||||
$scope.treeModel = {
|
$scope.treeModel = {
|
||||||
selectedObject: navigationService.getNavigation()
|
selectedObject: navigationService.getNavigation()
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$scope.treeSlide = function () {
|
||||||
|
console.log("Clicked");
|
||||||
|
if (document.getElementById("myElement").
|
||||||
|
className.match(/(?:^|\s)holder-hide(?!\S)/)) {
|
||||||
|
document.getElementById("myElement").className =
|
||||||
|
document.getElementById("myElement")
|
||||||
|
.className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
|
||||||
|
document.getElementById("myElement").className += " holder-show";
|
||||||
|
} else {
|
||||||
|
document.getElementById("myElement").className =
|
||||||
|
document.getElementById("myElement")
|
||||||
|
.className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
|
||||||
|
document.getElementById("myElement").className += " holder-hide";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Listen for changes in navigation state.
|
// Listen for changes in navigation state.
|
||||||
navigationService.addListener(setNavigation);
|
navigationService.addListener(setNavigation);
|
||||||
|
@ -748,7 +748,15 @@ mct-container {
|
|||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
left: -150px; } }
|
left: -150px; } }
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 514px) {
|
||||||
|
/* line 37, ../sass/mobile/_layout.scss */
|
||||||
|
.holder-show {
|
||||||
|
-moz-transition-duration: 0.2s;
|
||||||
|
-o-transition-duration: 0.2s;
|
||||||
|
-webkit-transition-duration: 0.2s;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
left: 0px; } }
|
||||||
|
@media screen and (min-width: 515px) and (max-width: 800px) {
|
||||||
/* line 37, ../sass/mobile/_layout.scss */
|
/* line 37, ../sass/mobile/_layout.scss */
|
||||||
.holder-show {
|
.holder-show {
|
||||||
-moz-transition-duration: 0.2s;
|
-moz-transition-duration: 0.2s;
|
||||||
@ -757,16 +765,40 @@ mct-container {
|
|||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
left: 0px; } }
|
left: 0px; } }
|
||||||
|
|
||||||
|
/* line 48, ../sass/mobile/_layout.scss */
|
||||||
|
.button-hide {
|
||||||
|
position: absolute; }
|
||||||
|
@media screen and (max-width: 514px) {
|
||||||
|
/* line 48, ../sass/mobile/_layout.scss */
|
||||||
|
.button-hide {
|
||||||
|
left: 108px; } }
|
||||||
|
@media screen and (min-width: 515px) and (max-width: 800px) {
|
||||||
|
/* line 48, ../sass/mobile/_layout.scss */
|
||||||
|
.button-hide {
|
||||||
|
left: 150px; } }
|
||||||
|
|
||||||
|
/* line 59, ../sass/mobile/_layout.scss */
|
||||||
|
.object-header-mobile {
|
||||||
|
position: relative; }
|
||||||
|
@media screen and (max-width: 514px) {
|
||||||
|
/* line 59, ../sass/mobile/_layout.scss */
|
||||||
|
.object-header-mobile {
|
||||||
|
left: 17px; } }
|
||||||
|
@media screen and (min-width: 515px) and (max-width: 800px) {
|
||||||
|
/* line 59, ../sass/mobile/_layout.scss */
|
||||||
|
.object-header-mobile {
|
||||||
|
left: 15px; } }
|
||||||
|
|
||||||
@media screen and (max-width: 514px) {
|
@media screen and (max-width: 514px) {
|
||||||
/* line 44, ../sass/mobile/_layout.scss */
|
/* line 69, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
width: 100px; } }
|
width: 100px; } }
|
||||||
@media screen and (min-width: 515px) and (max-width: 800px) {
|
@media screen and (min-width: 515px) and (max-width: 800px) {
|
||||||
/* line 44, ../sass/mobile/_layout.scss */
|
/* line 69, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
width: 150px; } }
|
width: 150px; } }
|
||||||
@media screen and (min-width: 801px) {
|
@media screen and (min-width: 801px) {
|
||||||
/* line 44, ../sass/mobile/_layout.scss */
|
/* line 69, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
@ -35,10 +35,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.holder-show {
|
.holder-show {
|
||||||
@include phoneandtablet {
|
@include phone {
|
||||||
@include transition-duration(.2s);
|
@include transition-duration(.2s);
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
@include tablet {
|
||||||
|
@include transition-duration(.2s);
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-hide {
|
||||||
|
position: absolute;
|
||||||
|
// @include transition-duration(.2s);
|
||||||
|
@include phone {
|
||||||
|
left: 108px;
|
||||||
|
}
|
||||||
|
@include tablet {
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.object-header-mobile {
|
||||||
|
position: relative;
|
||||||
|
@include phone {
|
||||||
|
left: 23px;
|
||||||
|
}
|
||||||
|
@include tablet {
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user