ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-28 08:58:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Treeview] Create button and slide transition

Browse Source 
Made the create button visible when the left
pane is closed. Added a transition between
opening and closing the pane.
This commit is contained in:
slhale 2015-08-20 10:41:30 -07:00
parent 81ece1190e
commit d2bc8227c7
5 changed files with 112 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -24,6 +24,7 @@
<div class="object-browse-bar bar abs">
<div class="ui-symbol left-pane-tabs"
ng-class="{inactivePane: !ngModel.leftPane}"
ng-click="ngModel.leftPane = !ngModel.leftPane; log(ngModel.pane)">
<
</div>

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

@ -35,7 +35,8 @@
ng-class='{inactive: !paneModel.leftPane}'>
<mct-representation key="'create-button'"
mct-object="navigatedObject">
mct-object="navigatedObject"
ng-model="paneModel">
</mct-representation>
<div class='holder tree-holder abs'>

6
platform/commonUI/browse/res/templates/create/create-button.html
View File

@ -20,8 +20,10 @@
at runtime from the About dialog for additional information.
-->
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
<div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
Create
<div class="btn btn-menu create-btn major"
ng-class="{inactivePane: !ngModel.leftPane}"
ng-click="createController.toggle()">
<span>Create</span>
</div>
<div class="menu dropdown super-menu" ng-show="createController.isActive()">
<mct-representation mct-object="domainObject" key="'create-menu'">

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

@ -706,25 +706,61 @@ mct-container {
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 27, ../sass/tree/_layout.scss */
.pane.left.inactive {
visibility: hidden;
width: 0 !important;
min-width: 0 !important; }
/* line 28, ../sass/tree/_layout.scss */
.pane.left {
transition: width 0.25s; }
/* line 31, ../sass/tree/_layout.scss */
.pane.left.inactive {
width: 0 !important;
min-width: 0 !important; }
/* line 36, ../sass/tree/_layout.scss */
.splitter-bar.left.inactive {
left: 0 !important;
visibility: hidden; }
/* line 37, ../sass/tree/_layout.scss */
.splitter-bar.left {
opacity: 1;
transition: left 0.25s, opacity 0.25s, visibility 0.25s; }
/* line 41, ../sass/tree/_layout.scss */
.splitter-bar.left.inactive {
left: 0 !important;
visibility: hidden;
opacity: 0;
width: 0; }
/* line 48, ../sass/tree/_layout.scss */
.splitter-bar.left.inactive:before {
border-width: 0; }
/* line 46, ../sass/tree/_layout.scss */
.items.pane.leftInactive {
left: 0 !important; }
/* line 55, ../sass/tree/_layout.scss */
.create-btn.major {
top: 0;
left: 0;
transition: all 0.25s; }
/* line 60, ../sass/tree/_layout.scss */
.create-btn.major.inactivePane {
top: 0;
left: 0;
position: relative;
padding: 0;
text-align: center;
font-size: 12px;
width: 13px;
height: 16px;
line-height: 14px;
left: -11px;
top: 20px; }
/* line 78, ../sass/tree/_layout.scss */
.create-btn.major.inactivePane span {
display: none; }
/* line 52, ../sass/tree/_layout.scss */
/* line 85, ../sass/tree/_layout.scss */
.items.pane {
transition: left 0.25s; }
/* line 88, ../sass/tree/_layout.scss */
.items.pane.leftInactive {
left: 0 !important; }
/* line 94, ../sass/tree/_layout.scss */
.object-browse-bar {
position: relative; }
/* line 55, ../sass/tree/_layout.scss */
/* line 97, ../sass/tree/_layout.scss */
.object-browse-bar .left-pane-tabs {
position: relative;
cursor: pointer;
@ -739,7 +775,10 @@ mct-container {
background-color: lightgrey;
border: 1px solid grey;
border-left-width: 0; }
/* line 74, ../sass/tree/_layout.scss */
/* line 116, ../sass/tree/_layout.scss */
.object-browse-bar .left-pane-tabs.inactivePane {
left: -16px; }
/* line 121, ../sass/tree/_layout.scss */
.object-browse-bar .items-select {
margin-left: 10px; }

55
platform/commonUI/general/res/sass/tree/_layout.scss
View File

@ -22,27 +22,69 @@
// Added by shale on 08/19/2015. Styling for the collapsible tree view.
$transitionTime: 0.25s;
//.pane.right,
.pane.left {
transition: width $transitionTime;
&.inactive {
// Don't want visibility hidden later, because create button
visibility: hidden;
width: 0 !important;
min-width: 0 !important;
}
}
.splitter-bar.left {
opacity: 1;
transition: left $transitionTime, opacity $transitionTime, visibility $transitionTime;
&.inactive {
left: 0 !important;
//display: none;
visibility: hidden;
//width: 0;
opacity: 0;
width: 0;
&:before {
border-width: 0;
}
}
}
// When the pane is closed, move and resize the create button
.create-btn.major {
top: 0;
left: 0;
transition: all $transitionTime;
&.inactivePane {
top: 0;
left: 0;
position: relative;
padding: 0;
text-align: center;
font-size: 12px;
width: 13px;
height: 16px;
line-height: 14px;
left: -11px;
top: 20px;
// Remove 'Create' text from the button when in small mode
span {
display: none;
}
}
}
// The main view needs to align left when the panes are moving around
.items.pane {
transition: left $transitionTime;
&.leftInactive {
left: 0 !important;
}
@ -69,6 +111,11 @@
background-color: lightgrey;
border: 1px solid grey;
border-left-width: 0;
// Move button closer
&.inactivePane {
left: -16px;
}
}
.items-select {