[Frontend] Inspector styling, in progress
open #90 Significant styling in object-inspector.html;
This commit is contained in:
Charles Hacskaylo
@@ -43,7 +43,7 @@ $ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 105px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueBrowseLeftPaneTreeW: 25%;
|
||||
$ueBrowseRightPaneInspectW: 10%;
|
||||
$ueBrowseRightPaneInspectW: 20%;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
$ueTimeControlH: (33px, 20px, 20px);
|
||||
|
||||
@@ -23,12 +23,18 @@
|
||||
|
||||
//.pane.right.t-inspect { @include test(green, 0.3); } // TEMP!
|
||||
|
||||
.t-inspector,
|
||||
.t-inspector table tr td {
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.t-inspector {
|
||||
.l-inspect {
|
||||
color: $colorInspectorFg;
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
ul li,
|
||||
em {
|
||||
display: block;
|
||||
@@ -36,7 +42,6 @@
|
||||
}
|
||||
|
||||
ul li {
|
||||
line-height: 130%;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
|
||||
@@ -61,7 +66,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.value {
|
||||
//word-wrap: break-word; // Doesn't work in <td>?
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
@@ -70,4 +74,29 @@
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-location {
|
||||
line-height: 180%;
|
||||
.location-item {
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.first):before {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\3e';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size:7px;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -249,7 +249,7 @@ label.checkbox.custom {
|
||||
|
||||
.l-elem-wrapper {
|
||||
//@include test(#66f, 0.2);
|
||||
@include webkitProp(justify-content, flex-start);
|
||||
@include justify-content(flex-start);
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
|
||||
@@ -125,8 +125,8 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
width: $ueBrowseLeftPaneTreeW;
|
||||
}
|
||||
&.t-inspect.right {
|
||||
min-width: 150px;
|
||||
min-width: 100px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseRightPaneInspectW;
|
||||
}
|
||||
@@ -234,6 +234,14 @@
|
||||
|
||||
.pane {
|
||||
position: absolute;
|
||||
|
||||
.pane-header {
|
||||
text-transform: uppercase;
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
&.treeview.left {
|
||||
.create-btn-holder {
|
||||
bottom: auto;
|
||||
@@ -381,7 +389,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// MOVED from mobile/_layout.scss
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
|
||||
@@ -20,15 +20,15 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span class="label s-label">
|
||||
<span class='ui-symbol icon type-icon'>
|
||||
{{type.getGlyph()}}
|
||||
<span
|
||||
class='ui-symbol icon l-icon-link'
|
||||
ng-show="location.isLink()"
|
||||
></span>
|
||||
<span class='ui-symbol icon l-icon-alert'></span>
|
||||
</span>
|
||||
<span class='title-label'>
|
||||
{{model.name}}
|
||||
</span>
|
||||
<span class='ui-symbol icon type-icon'>
|
||||
{{type.getGlyph()}}
|
||||
<span
|
||||
class='ui-symbol icon l-icon-link'
|
||||
ng-show="location.isLink()"
|
||||
></span>
|
||||
<span class='ui-symbol icon l-icon-alert'></span>
|
||||
</span>
|
||||
<span class='title-label'>
|
||||
{{model.name}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="ObjectInspectorController as controller">
|
||||
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
|
||||
<div class="pane-header">Inspection</div>
|
||||
<ul>
|
||||
<li>
|
||||
<em>Properties</em>
|
||||
@@ -33,22 +34,26 @@
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em title="The location of this linked object.">Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in contextutalParents">
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent">
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-if="primaryParents.length > 0">
|
||||
<em title="The location of the original object that this was linked from.">Original Location</em>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in primaryParents">
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent">
|
||||
ng-click="ngModel.selectedObject = parent"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user