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

[Frontend] Expand/collapse finessing

Browse Source 
open #90
Icon positioning; top of treeview splitter moved
back down below to previous position;
This commit is contained in:
Charles Hacskaylo
2015-10-29 12:55:20 -07:00
parent 1b0ce7166d
commit 8c4fdf5c1c
4 changed files with 116 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@@ -1616,11 +1616,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
position: absolute;
line-height: 24px;
height: 24px;
width: 15px; }
/* line 132, ../../../../general/res/sass/controls/_buttons.scss */
width: 15px;
text-align: center; }
/* line 133, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:hover {
color: #0099cc; }
/* line 137, ../../../../general/res/sass/controls/_buttons.scss */
/* line 138, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed {
background-color: #454545;
-moz-border-radius: 3px;
@@ -1660,19 +1661,19 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
.mini-tab.collapsed:not(.disabled):hover > .icon, .mini-tab.collapsed:not(.disabled):hover > .t-item-icon {
color: #33ccff; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 140, ../../../../general/res/sass/controls/_buttons.scss */
/* line 141, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:before {
opacity: 0; }
/* line 141, ../../../../general/res/sass/controls/_buttons.scss */
/* line 142, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:after {
opacity: 1; }
/* line 143, ../../../../general/res/sass/controls/_buttons.scss */
/* line 144, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:hover:before {
opacity: 1; }
/* line 144, ../../../../general/res/sass/controls/_buttons.scss */
/* line 145, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:hover:after {
opacity: 0; }
/* line 149, ../../../../general/res/sass/controls/_buttons.scss */
/* line 150, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:before, .mini-tab:after {
-moz-transition-property: left, right, opacity;
-o-transition-property: left, right, opacity;
@@ -1693,25 +1694,22 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
display: block;
height: 100%;
position: absolute; }
/* line 157, ../../../../general/res/sass/controls/_buttons.scss */
/* line 159, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:before {
width: 9px; }
/* line 163, ../../../../general/res/sass/controls/_buttons.scss */
/* line 165, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:after {
width: 100%;
text-align: center;
opacity: 0; }
/* line 170, ../../../../general/res/sass/controls/_buttons.scss */
/* line 172, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left {
text-align: right; }
/* line 173, ../../../../general/res/sass/controls/_buttons.scss */
/* line 175, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left:before {
content: '\3c';
content: '\e613';
right: 0; }
/* line 180, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left:hover:before {
right: 2px; }
/* line 181, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed {
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
@@ -1720,48 +1718,47 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
text-align: left; }
/* line 184, ../../../../general/res/sass/controls/_buttons.scss */
/* line 183, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed:before {
content: '\3e';
left: 0; }
/* line 188, ../../../../general/res/sass/controls/_buttons.scss */
/* line 187, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed:hover:before {
left: 2px; }
/* line 193, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:before {
text-align: left;
content: '\3e';
left: 0; }
/* line 201, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:hover:before {
left: 2px; }
/* line 202, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0; }
/* line 204, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:before {
text-align: right;
content: '\3c';
right: 0; }
/* line 209, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:hover:before {
right: 2px; } }
/* line 190, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right {
text-align: left; }
/* line 193, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:before {
content: '\e614';
left: 0; }
/* line 198, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0; }
/* line 200, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:before {
text-align: right;
content: '\3c';
right: 0; }
/* line 205, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:hover:before {
right: 2px; } }
/* line 215, ../../../../general/res/sass/controls/_buttons.scss */
/* line 211, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set {
font-size: 0; }
/* line 221, ../../../../general/res/sass/controls/_buttons.scss */
/* line 217, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .s-btn, .l-btn-set .s-menu-btn {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
margin-left: 1px; }
/* line 227, ../../../../general/res/sass/controls/_buttons.scss */
/* line 223, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
@@ -1770,7 +1767,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
margin-left: 0; }
/* line 234, ../../../../general/res/sass/controls/_buttons.scss */
/* line 230, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
@@ -1779,7 +1776,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px; }
/* line 241, ../../../../general/res/sass/controls/_buttons.scss */
/* line 237, ../../../../general/res/sass/controls/_buttons.scss */
.paused:not(.s-btn):not(.s-menu-btn) {
border-color: #c56f01 !important;
color: #c56f01 !important; }
@@ -4071,6 +4068,9 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 446, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .splitter-treeview {
top: 34px !important; }
/* line 449, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .create-and-search-holder {
-moz-transition-property: top;
-o-transition-property: top;
@@ -4089,7 +4089,7 @@ span.req {
-webkit-transition-delay: 200ms;
transition-delay: 200ms; }
/* line 453, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 456, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .pane.right,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity;
@@ -4110,21 +4110,21 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 462, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 465, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.right,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
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 471, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 474, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
left: 15px !important; }
/* line 474, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 477, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 15px !important; }
/* line 477, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 480, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;

104
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@@ -1589,11 +1589,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
position: absolute;
line-height: 24px;
height: 24px;
width: 15px; }
/* line 132, ../../../../general/res/sass/controls/_buttons.scss */
width: 15px;
text-align: center; }
/* line 133, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:hover {
color: #0099cc; }
/* line 137, ../../../../general/res/sass/controls/_buttons.scss */
/* line 138, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed {
background-color: #969696;
-moz-border-radius: 4px;
@@ -1624,19 +1625,19 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
.mini-tab.collapsed:not(.disabled):hover > .icon, .mini-tab.collapsed:not(.disabled):hover > .t-item-icon {
color: white; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 140, ../../../../general/res/sass/controls/_buttons.scss */
/* line 141, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:before {
opacity: 0; }
/* line 141, ../../../../general/res/sass/controls/_buttons.scss */
/* line 142, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:after {
opacity: 1; }
/* line 143, ../../../../general/res/sass/controls/_buttons.scss */
/* line 144, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:hover:before {
opacity: 1; }
/* line 144, ../../../../general/res/sass/controls/_buttons.scss */
/* line 145, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.collapsed:hover:after {
opacity: 0; }
/* line 149, ../../../../general/res/sass/controls/_buttons.scss */
/* line 150, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:before, .mini-tab:after {
-moz-transition-property: left, right, opacity;
-o-transition-property: left, right, opacity;
@@ -1657,25 +1658,22 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
display: block;
height: 100%;
position: absolute; }
/* line 157, ../../../../general/res/sass/controls/_buttons.scss */
/* line 159, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:before {
width: 9px; }
/* line 163, ../../../../general/res/sass/controls/_buttons.scss */
/* line 165, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab:after {
width: 100%;
text-align: center;
opacity: 0; }
/* line 170, ../../../../general/res/sass/controls/_buttons.scss */
/* line 172, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left {
text-align: right; }
/* line 173, ../../../../general/res/sass/controls/_buttons.scss */
/* line 175, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left:before {
content: '\3c';
content: '\e613';
right: 0; }
/* line 180, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left:hover:before {
right: 2px; }
/* line 181, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed {
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
@@ -1684,48 +1682,47 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
text-align: left; }
/* line 184, ../../../../general/res/sass/controls/_buttons.scss */
/* line 183, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed:before {
content: '\3e';
left: 0; }
/* line 188, ../../../../general/res/sass/controls/_buttons.scss */
/* line 187, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-left.collapsed:hover:before {
left: 2px; }
/* line 193, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:before {
text-align: left;
content: '\3e';
left: 0; }
/* line 201, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:hover:before {
left: 2px; }
/* line 202, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0; }
/* line 204, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:before {
text-align: right;
content: '\3c';
right: 0; }
/* line 209, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:hover:before {
right: 2px; } }
/* line 190, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right {
text-align: left; }
/* line 193, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right:before {
content: '\e614';
left: 0; }
/* line 198, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0; }
/* line 200, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:before {
text-align: right;
content: '\3c';
right: 0; }
/* line 205, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab.anchor-right.collapsed:hover:before {
right: 2px; } }
/* line 215, ../../../../general/res/sass/controls/_buttons.scss */
/* line 211, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set {
font-size: 0; }
/* line 221, ../../../../general/res/sass/controls/_buttons.scss */
/* line 217, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .s-btn, .l-btn-set .s-menu-btn {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
margin-left: 1px; }
/* line 227, ../../../../general/res/sass/controls/_buttons.scss */
/* line 223, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
@@ -1734,7 +1731,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-left: 0; }
/* line 234, ../../../../general/res/sass/controls/_buttons.scss */
/* line 230, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
@@ -1743,7 +1740,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px; }
/* line 241, ../../../../general/res/sass/controls/_buttons.scss */
/* line 237, ../../../../general/res/sass/controls/_buttons.scss */
.paused:not(.s-btn):not(.s-menu-btn) {
border-color: #ff9900 !important;
color: #ff9900 !important; }
@@ -4012,6 +4009,9 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 446, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .splitter-treeview {
top: 34px !important; }
/* line 449, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .create-and-search-holder {
-moz-transition-property: top;
-o-transition-property: top;
@@ -4030,7 +4030,7 @@ span.req {
-webkit-transition-delay: 200ms;
transition-delay: 200ms; }
/* line 453, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 456, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .pane.right,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity;
@@ -4051,21 +4051,21 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 462, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 465, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.right,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
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 471, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 474, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
left: 15px !important; }
/* line 474, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 477, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 15px !important; }
/* line 477, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 480, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;