[Frontend] Refactor Inspector to use s-status-editing

open #468
Removed ng-show="editMode" in object-inspector.html;
Refactored CSS as required in _inspector.scss;
Added opacity transition to splitter-inspect-panel and
split-pane-component pane bottom, but not working as desired currently:
entire inspector seems to be destroyed and recreated when switching into
and out of edit mode;
Moved <style> def for .location-item in object-inspector.html into .scss;
This commit is contained in:
Charles Hacskaylo 2016-01-08 16:47:11 -08:00
parent 898dd557e5
commit a65ca7cb1e
4 changed files with 133 additions and 60 deletions

View File

@ -97,7 +97,6 @@
}
.inspector-location {
//line-height: 180%;
.location-item {
cursor: pointer;
display: inline-block;
@ -142,3 +141,20 @@
}
}
.l-inspect {
.splitter-inspect-panel,
.split-pane-component.pane.bottom {
@include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
opacity: 0;
pointer-events: none;
}
}
.s-status-editing .l-inspect {
.location-item { pointer-events: none; }
.splitter-inspect-panel,
.split-pane-component.pane.bottom {
opacity: 1;
pointer-events: inherit;
}
}

View File

@ -19,11 +19,6 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<style>
.s-status-editing .location-item{
pointer-events: none;
}
</style>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
@ -69,8 +64,8 @@
</ul>
</div><!--/ holder-inspector -->
</div><!--/ split-pane-component -->
<mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
<div class="split-pane-component pane bottom" ng-show="editMode">
<mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
<div class="split-pane-component pane bottom">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<mct-representation

View File

@ -1551,20 +1551,20 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
.l-inspect .inspector-properties .value {
color: #bfbfbf;
word-break: break-all; }
/* line 101, ../../../../general/res/sass/_inspector.scss */
/* line 100, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 106, ../../../../general/res/sass/_inspector.scss */
/* line 105, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(153, 153, 153, 0.1);
color: #cccccc; }
/* line 109, ../../../../general/res/sass/_inspector.scss */
/* line 108, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #33ccff; }
/* line 114, ../../../../general/res/sass/_inspector.scss */
/* line 113, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #737373;
content: '\3e';
@ -1574,20 +1574,51 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
line-height: inherit;
margin-left: 3px;
width: 4px; }
/* line 126, ../../../../general/res/sass/_inspector.scss */
/* line 125, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements {
position: relative; }
/* line 129, ../../../../general/res/sass/_inspector.scss */
/* line 128, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
left: 0; }
/* line 132, ../../../../general/res/sass/_inspector.scss */
/* line 131, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-item-icon {
font-size: 1em;
width: 1em; }
/* line 136, ../../../../general/res/sass/_inspector.scss */
/* line 135, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-title-label {
left: 25px; }
/* line 145, ../../../../general/res/sass/_inspector.scss */
.l-inspect .splitter-inspect-panel,
.l-inspect .split-pane-component.pane.bottom {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
opacity: 0;
pointer-events: none; }
/* line 154, ../../../../general/res/sass/_inspector.scss */
.s-status-editing .l-inspect .location-item {
pointer-events: none; }
/* line 155, ../../../../general/res/sass/_inspector.scss */
.s-status-editing .l-inspect .splitter-inspect-panel,
.s-status-editing .l-inspect .split-pane-component.pane.bottom {
opacity: 1;
pointer-events: inherit; }
/********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
.l-breadcrumb {
@ -4936,20 +4967,20 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 10px; }
/* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back:not(.s-status-editing) {
margin-right: 10px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-treeview-elements {
opacity: 0; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 310, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity;
@ -4969,7 +5000,7 @@ span.req {
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
opacity: 1; }
/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-treeview-elements {
-moz-transition-property: opacity;
-o-transition-property: opacity;
@ -4988,7 +5019,7 @@ span.req {
-webkit-transition-delay: 200ms;
transition-delay: 200ms; }
/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity;
@ -5009,41 +5040,41 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
.holder-all {
min-width: 600px; }
/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .split-pane-component.pane.treeview.left {
min-width: 150px;
max-width: 35%;
width: 25%; }
/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .split-pane-component.pane.t-inspect.right {
min-width: 200px;
max-width: 35%;
width: 20%;
z-index: 3; }
/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
padding-right: 5px; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; }
/* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; }
/* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;
@ -5062,10 +5093,10 @@ span.req {
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.primary-pane .object-browse-bar {
min-width: 200px; } }
/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper {
-moz-animation-name: pulseBorder;
-webkit-animation-name: pulseBorder;
@ -5107,7 +5138,7 @@ span.req {
border-color: rgba(88, 122, 181, 0.3); }
100% {
border-color: #587ab5; } }
/* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper .l-object-wrapper-inner {
overflow: hidden;
position: absolute;
@ -5117,7 +5148,7 @@ span.req {
left: 3px;
width: auto;
height: auto; }
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper .l-edit-controls {
height: 30px;
margin-bottom: 5px;

View File

@ -1532,20 +1532,20 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
.l-inspect .inspector-properties .value {
color: #404040;
word-break: break-all; }
/* line 101, ../../../../general/res/sass/_inspector.scss */
/* line 100, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 106, ../../../../general/res/sass/_inspector.scss */
/* line 105, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(102, 102, 102, 0.1);
color: #333333; }
/* line 109, ../../../../general/res/sass/_inspector.scss */
/* line 108, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #0099cc; }
/* line 114, ../../../../general/res/sass/_inspector.scss */
/* line 113, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #8c8c8c;
content: '\3e';
@ -1555,20 +1555,51 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
line-height: inherit;
margin-left: 3px;
width: 4px; }
/* line 126, ../../../../general/res/sass/_inspector.scss */
/* line 125, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements {
position: relative; }
/* line 129, ../../../../general/res/sass/_inspector.scss */
/* line 128, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label {
left: 0; }
/* line 132, ../../../../general/res/sass/_inspector.scss */
/* line 131, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-item-icon {
font-size: 1em;
width: 1em; }
/* line 136, ../../../../general/res/sass/_inspector.scss */
/* line 135, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-title-label {
left: 25px; }
/* line 145, ../../../../general/res/sass/_inspector.scss */
.l-inspect .splitter-inspect-panel,
.l-inspect .split-pane-component.pane.bottom {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
opacity: 0;
pointer-events: none; }
/* line 154, ../../../../general/res/sass/_inspector.scss */
.s-status-editing .l-inspect .location-item {
pointer-events: none; }
/* line 155, ../../../../general/res/sass/_inspector.scss */
.s-status-editing .l-inspect .splitter-inspect-panel,
.s-status-editing .l-inspect .split-pane-component.pane.bottom {
opacity: 1;
pointer-events: inherit; }
/********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
.l-breadcrumb {
@ -4858,20 +4889,20 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 10px; }
/* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back:not(.s-status-editing) {
margin-right: 10px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-treeview-elements {
opacity: 0; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 310, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity;
@ -4891,7 +4922,7 @@ span.req {
-webkit-transition-delay: 250ms;
transition-delay: 250ms;
opacity: 1; }
/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-treeview-elements {
-moz-transition-property: opacity;
-o-transition-property: opacity;
@ -4910,7 +4941,7 @@ span.req {
-webkit-transition-delay: 200ms;
transition-delay: 200ms; }
/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity;
@ -4931,41 +4962,41 @@ span.req {
transition-delay: 250ms;
opacity: 1; }
/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; }
@media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
/* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
.holder-all {
min-width: 600px; }
/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .split-pane-component.pane.treeview.left {
min-width: 150px;
max-width: 35%;
width: 25%; }
/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .split-pane-component.pane.t-inspect.right {
min-width: 200px;
max-width: 35%;
width: 20%;
z-index: 3; }
/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
padding-right: 5px; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; }
/* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; }
/* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;
@ -4984,10 +5015,10 @@ span.req {
-webkit-transition-delay: 0;
transition-delay: 0; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.primary-pane .object-browse-bar {
min-width: 200px; } }
/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper {
-moz-animation-name: pulseBorder;
-webkit-animation-name: pulseBorder;
@ -5029,7 +5060,7 @@ span.req {
border-color: rgba(75, 177, 199, 0.3); }
100% {
border-color: #4bb1c7; } }
/* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper .l-object-wrapper-inner {
overflow: hidden;
position: absolute;
@ -5039,7 +5070,7 @@ span.req {
left: 3px;
width: auto;
height: auto; }
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
.s-status-editing .l-object-wrapper .l-edit-controls {
height: 30px;
margin-bottom: 5px;