From 5f1f54fa91272046e25847bbc773e80594197f9c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 4 Nov 2015 15:47:13 -0800
Subject: [PATCH] [Frontend] Inspector-related fixes
open #243
Enlarged size of mini-tab icon when panes are collapsed;
Increased size of edge margin to allow for larger icons;
---
.../commonUI/general/res/sass/_constants.scss | 3 +-
.../general/res/sass/controls/_buttons.scss | 5 +++
.../espresso/res/css/theme-espresso.css | 42 ++++++++++---------
.../themes/snow/res/css/theme-snow.css | 42 ++++++++++---------
4 files changed, 53 insertions(+), 39 deletions(-)
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index a3305cf0a4..e0d9f34bd6 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -44,9 +44,10 @@ $ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectW: 20%;
-$ueCollapsedPaneEdgeM: 20px;
+$ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: $ueTopBarH;
$uePaneMiniTabW: 9px;
+$uePaneMiniTabCollapsedW: 11px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 956e144899..5431b0f563 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -225,6 +225,11 @@ $pad: $interiorMargin * $baseRatio;
overflow: hidden;
word-break: break-all;
+ &.collapsed {
+ $d: $uePaneMiniTabCollapsedW;
+ width: $d; font-size: $d;
+ }
+
&:before,
&:after {
position: absolute;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 6cffc059da..d0d1a2c63b 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -507,35 +507,35 @@ mct-container {
padding: 5px 0; }
/********************************************* FLEX STYLES */
-/* line 95, ../../../../general/res/sass/_archetypes.scss */
+/* line 96, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex,
.l-flex-col {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap; }
- /* line 100, ../../../../general/res/sass/_archetypes.scss */
+ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 1 auto;
flex: 0 1 auto; }
- /* line 103, ../../../../general/res/sass/_archetypes.scss */
+ /* line 104, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }
-/* line 109, ../../../../general/res/sass/_archetypes.scss */
+/* line 110, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex {
-webkit-flex-direction: row;
flex-direction: row; }
-/* line 110, ../../../../general/res/sass/_archetypes.scss */
+/* line 111, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col {
-webkit-flex-direction: column;
flex-direction: column; }
-/* line 116, ../../../../general/res/sass/_archetypes.scss */
+/* line 115, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;
@@ -1895,26 +1895,30 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
overflow: hidden;
word-break: break-all; }
/* line 228, ../../../../general/res/sass/controls/_buttons.scss */
+ .mini-tab-icon.collapsed {
+ width: 11px;
+ font-size: 11px; }
+ /* line 233, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:before, .mini-tab-icon:after {
position: absolute;
display: inherit; }
- /* line 234, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 239, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:before {
content: '\78'; }
- /* line 238, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 243, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:hover {
color: #0099cc; } }
-/* line 245, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 250, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set {
font-size: 0; }
- /* line 251, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 256, ../../../../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 257, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 262, ../../../../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;
@@ -1923,7 +1927,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 264, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 269, ../../../../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;
@@ -1932,7 +1936,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px; }
-/* line 271, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 276, ../../../../general/res/sass/controls/_buttons.scss */
.paused:not(.s-btn):not(.s-menu-btn) {
border-color: #c56f01 !important;
color: #c56f01 !important; }
@@ -4533,10 +4537,10 @@ span.req {
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed {
left: 0;
- -moz-transform: translateX(-15px);
- -ms-transform: translateX(-15px);
- -webkit-transform: translateX(-15px);
- transform: translateX(-15px); }
+ -moz-transform: translateX(-17px);
+ -ms-transform: translateX(-17px);
+ -webkit-transform: translateX(-17px);
+ transform: translateX(-17px); }
/* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before {
-moz-transition-property: opacity;
@@ -4757,11 +4761,11 @@ span.req {
/* line 418, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
- left: 20px !important; }
+ left: 22px !important; }
/* line 421, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
- right: 20px !important; }
+ right: 22px !important; }
/* line 424, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index cc80ecd0df..1e3717427f 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -507,35 +507,35 @@ mct-container {
padding: 5px 0; }
/********************************************* FLEX STYLES */
-/* line 95, ../../../../general/res/sass/_archetypes.scss */
+/* line 96, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex,
.l-flex-col {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap; }
- /* line 100, ../../../../general/res/sass/_archetypes.scss */
+ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 1 auto;
flex: 0 1 auto; }
- /* line 103, ../../../../general/res/sass/_archetypes.scss */
+ /* line 104, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows,
.l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }
-/* line 109, ../../../../general/res/sass/_archetypes.scss */
+/* line 110, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex {
-webkit-flex-direction: row;
flex-direction: row; }
-/* line 110, ../../../../general/res/sass/_archetypes.scss */
+/* line 111, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col {
-webkit-flex-direction: column;
flex-direction: column; }
-/* line 116, ../../../../general/res/sass/_archetypes.scss */
+/* line 115, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left {
-webkit-flex: 1 1 0;
flex: 1 1 0;
@@ -1840,26 +1840,30 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
overflow: hidden;
word-break: break-all; }
/* line 228, ../../../../general/res/sass/controls/_buttons.scss */
+ .mini-tab-icon.collapsed {
+ width: 11px;
+ font-size: 11px; }
+ /* line 233, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:before, .mini-tab-icon:after {
position: absolute;
display: inherit; }
- /* line 234, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 239, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:before {
content: '\78'; }
- /* line 238, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 243, ../../../../general/res/sass/controls/_buttons.scss */
.mini-tab-icon:hover {
color: #0099cc; } }
-/* line 245, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 250, ../../../../general/res/sass/controls/_buttons.scss */
.l-btn-set {
font-size: 0; }
- /* line 251, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 256, ../../../../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 257, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 262, ../../../../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;
@@ -1868,7 +1872,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 264, ../../../../general/res/sass/controls/_buttons.scss */
+ /* line 269, ../../../../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;
@@ -1877,7 +1881,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px; }
-/* line 271, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 276, ../../../../general/res/sass/controls/_buttons.scss */
.paused:not(.s-btn):not(.s-menu-btn) {
border-color: #ff9900 !important;
color: #ff9900 !important; }
@@ -4455,10 +4459,10 @@ span.req {
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed {
left: 0;
- -moz-transform: translateX(-15px);
- -ms-transform: translateX(-15px);
- -webkit-transform: translateX(-15px);
- transform: translateX(-15px); }
+ -moz-transform: translateX(-17px);
+ -ms-transform: translateX(-17px);
+ -webkit-transform: translateX(-17px);
+ transform: translateX(-17px); }
/* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before {
-moz-transition-property: opacity;
@@ -4679,11 +4683,11 @@ span.req {
/* line 418, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
- left: 20px !important; }
+ left: 22px !important; }
/* line 421, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
- right: 20px !important; }
+ right: 22px !important; }
/* line 424, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {