[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;
This commit is contained in:
Charles Hacskaylo 2015-11-04 15:47:13 -08:00
parent f4325e2bb3
commit 5f1f54fa91
4 changed files with 53 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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