[Mobile] Moved Button

Button moved to the Browse.html
and BrowseController handles the
tree slide.
This commit is contained in:
Dave 2015-07-09 10:28:45 -07:00
parent 7974f33781
commit b9371ea03d
5 changed files with 82 additions and 10 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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);

View File

@ -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;

View File

@ -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 {