mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 01:16:46 +00:00
Review and integrate UI enhancements (#2078)
* [Frontend] WIP New local-controls classes Fixes #2000 - h-local-controls - Markup in plots changed - Changed reset plot button's icon * [Frontend] WIP local-controls classes Fixes #2000 - Refactoring to use and apply local-control classes consistently; - Plots and imagery done in main view and Display Layout contexts; * [Frontend] WIP local-controls classes Fixes #2000 - Use local-control classes in Timelines; - Group Timeline buttons in l-btn-set; - Use reset icon glyph; * [Frontend] WIP local-controls classes Fixes #2000 - Slight increase in size to buttons in frame context; * [Frontend] local-controls classes Fixes #2000 - Code cleanup; - Update Style Guide content; - Provisionally done, needs unit testing and double-checking; * [Frontend] Better selecting in browse mode Fixes #2000 - Better colors and approach to selecting in browse mode; * [Frontend] Tweaks to pane collapse mini-tabs Fixes #1758 Fixes #2000 - Enlarged mini-tabs and moved to screen top; - Removed duplicative theme-based constants; * [Frontend] Tweaks to "nav up" arrow button Fixes #1758 Fixes #2000 - Increased hit area of .l-back "nav up" arrow in object-browse-bar; * [Frontend] Glyph improvements Fixes #1758 Fixes #2000 - New arrow glyph for view controls; - Increased hit area of view controls in tree for mobile and desktop; - Better "hamburger" menu glyph; * [Frontend] Inspector refactor to CSS grid WIP Fixes #1758 Fixes #2000 - WIP!!!; - Good progress on Properties section; * [Frontend] Inspector refactor to CSS grid WIP Fixes #2000 - Significant mods to CSS and markup; - New grid archetypes classes; - Added title attribs to plot options edit and browse props; - Added value, alarm markers to plot series browse props; - Nearly done (?) but needs unit testing and cleanups; * [Frontend] Minor tweaks to form and form-row Fixes #2000 - Fixing margin problem with .form-row; - h2 instead of div.section-header; * [Frontend] Fixed H2 in Elements pool Fixes #2000 * Refinements to Time Conductor Fixes #2000 - Tweaks size of fixed position grab ticks; - Positioning refinements to ticks and text; - Hide major tick marks; * Hide View Large button for nested hidden-frame Layouts Fixes #2000 - When a layout is nested and has its frame hidden, hide the View Large button; * Better hiding of Time Conductor "Submit" button Fixes #2000 * Re-added new icon-arrow-right-equilateral glyph; Fixes #2000 Fixes #2078 * Remove commented styles/markup Fixes #2000 Fixes #2078 * Repaired approach to hiding Time Conductor Submit button Fixes #2000 Fixes #2078 - Renamed .off to .invisible and added refinements; * Fixed wrong conflict resolutions; polish search Fixes #2000 Fixes #2078 - .invisible instead of .off in search.html; - Minor polishing to search; fixes #1758 fixes #1763 fixes #2011
This commit is contained in:
Charles Hacskaylo
Pete Richards
parent
07fb20c32f
commit
9d2c7a6de5
@ -149,12 +149,21 @@
|
||||
<h2>Local Controls</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Local controls are typically buttons and selects that provide local control to an individual element. Typically, these controls are hidden in order to not block data display until the user hovers their cursor over an element, when the controls are displayed using a transition fade. Mousing out of the element fades the controls from view.</p>
|
||||
<p>Local controls are typically buttons and selects that provide actions in close proximity to a component.</p>
|
||||
<p>These controls can optionally be hidden to reduce clutter until the user hovers their cursor over an enclosing element. To use this approach, apply the class <code>.has-local-controls</code> to the element that should be aware of the hover and ensure that element encloses <code>.h-local-controls</code>.</p>
|
||||
</div>
|
||||
<mct-example><div class="plot-display-area" style="height: 100px; padding: 10px; position: relative;">Hover over me
|
||||
<div class="l-local-controls gl-plot-local-controls t-plot-display-controls">
|
||||
<mct-example><div class="plot-display-area" style="padding: 10px; position: relative;">
|
||||
Some content in here
|
||||
<div class="h-local-controls h-local-controls-overlay-content l-btn-set">
|
||||
<a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
|
||||
<a class="s-button icon-arrows-out" title="Reset pan/zoom"></a>
|
||||
<a class="s-button icon-reset" title="Reset pan/zoom"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plot-display-area has-local-controls" style="padding: 10px; position: relative;">
|
||||
Hover here
|
||||
<div class="h-local-controls h-local-controls-overlay-content local-controls-hidden l-btn-set">
|
||||
<a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
|
||||
<a class="s-button icon-reset" title="Reset pan/zoom"></a>
|
||||
</div>
|
||||
</div></mct-example>
|
||||
</div>
|
||||
|
||||
@ -19,41 +19,46 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="ObjectInspectorController as controller">
|
||||
<ul class="flex-elem grows l-inspector-part">
|
||||
<li>
|
||||
<em class="t-inspector-part-header">Properties</em>
|
||||
<div class="inspector-properties"
|
||||
ng-repeat="data in metadata"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
<div class="label">{{ data.name }}</div>
|
||||
<div class="value">{{ data.value }}</div>
|
||||
<div ng-controller="ObjectInspectorController as controller" class="grid-properties">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 class="first">Properties</h2>
|
||||
<li class="t-repeat grid-row"
|
||||
ng-repeat="data in metadata"
|
||||
ng-class="{ first:$index === 0 }">
|
||||
<div class="grid-cell label">{{ data.name }}</div>
|
||||
<div class="grid-cell value">{{ data.value }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="l-inspector-part" ng-if="contextutalParents.length > 0">
|
||||
<h2 title="The location of this linked object.">Location</h2>
|
||||
<li class="grid-row">
|
||||
<div class="label" ng-if="primaryParents.length > 0">This Link</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="t-repeat inspector-location"
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-click="parent.getCapability('action').perform('navigate')"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-if="contextutalParents.length > 0">
|
||||
<em class="t-inspector-part-header" title="The location of this linked object.">Location</em>
|
||||
<div ng-if="primaryParents.length > 0" class="section-header">This Object</div>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in contextutalParents"
|
||||
ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-click="parent.getCapability('action').perform('navigate')"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-if="primaryParents.length > 0">
|
||||
<div class="section-header">Object's Original</div>
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ last:($index + 1) === primaryParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-click="parent.getCapability('action').perform('navigate')"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<li class="grid-row" ng-if="primaryParents.length > 0">
|
||||
<div class="grid-cell label">Original</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="t-repeat inspector-location value"
|
||||
ng-repeat="parent in primaryParents"
|
||||
ng-class="{ last:($index + 1) === primaryParents.length }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-click="parent.getCapability('action').perform('navigate')"
|
||||
class="location-item">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
class="flex-elem holder"
|
||||
ng-model="filterBy">
|
||||
</mct-include>
|
||||
<div class="flex-elem grows vscroll">
|
||||
<div class="flex-elem grows vscroll scroll-pad">
|
||||
<ul class="tree" id="inspector-elements-tree"
|
||||
ng-if="composition.length > 0">
|
||||
<li ng-repeat="containedObject in composition | filter:searchElements">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-16px",
|
||||
"lastOpened": 0,
|
||||
"created": 1527895011127
|
||||
"created": 1529545133464
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -268,13 +268,21 @@
|
||||
"code": 59697,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 148,
|
||||
"id": 118,
|
||||
"name": "icon-arrow-right-equilateral",
|
||||
"prevSize": 24,
|
||||
"code": 59698,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 48,
|
||||
"prevSize": 24,
|
||||
"name": "icon-arrows-out",
|
||||
"id": 43,
|
||||
"code": 921600,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 49,
|
||||
@ -282,7 +290,7 @@
|
||||
"name": "icon-arrows-right-left",
|
||||
"id": 44,
|
||||
"code": 921601,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 50,
|
||||
@ -290,7 +298,7 @@
|
||||
"name": "icon-arrows-up-down",
|
||||
"id": 45,
|
||||
"code": 921602,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 9,
|
||||
@ -298,7 +306,7 @@
|
||||
"name": "icon-bullet",
|
||||
"id": 4,
|
||||
"code": 921604,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 25,
|
||||
@ -306,7 +314,7 @@
|
||||
"name": "icon-calendar",
|
||||
"id": 20,
|
||||
"code": 921605,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 30,
|
||||
@ -314,7 +322,7 @@
|
||||
"name": "icon-chain-links",
|
||||
"id": 25,
|
||||
"code": 921606,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 109,
|
||||
@ -322,7 +330,7 @@
|
||||
"prevSize": 24,
|
||||
"code": 921607,
|
||||
"name": "icon-pane-collapse-left",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 110,
|
||||
@ -330,7 +338,7 @@
|
||||
"prevSize": 24,
|
||||
"code": 921608,
|
||||
"name": "icon-pane-collapse-right",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 5,
|
||||
@ -338,7 +346,7 @@
|
||||
"prevSize": 24,
|
||||
"code": 921609,
|
||||
"name": "icon-download",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 60,
|
||||
@ -346,7 +354,7 @@
|
||||
"name": "icon-duplicate",
|
||||
"id": 55,
|
||||
"code": 921616,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 61,
|
||||
@ -354,7 +362,7 @@
|
||||
"name": "icon-folder-new",
|
||||
"id": 56,
|
||||
"code": 921617,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 64,
|
||||
@ -362,7 +370,7 @@
|
||||
"name": "icon-fullscreen-expand",
|
||||
"id": 59,
|
||||
"code": 921618,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 63,
|
||||
@ -370,7 +378,7 @@
|
||||
"name": "icon-fullscreen-collapse",
|
||||
"id": 58,
|
||||
"code": 921619,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 67,
|
||||
@ -378,7 +386,7 @@
|
||||
"name": "icon-layers",
|
||||
"id": 62,
|
||||
"code": 921620,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 145,
|
||||
@ -386,7 +394,7 @@
|
||||
"name": "icon-line-horz",
|
||||
"id": 64,
|
||||
"code": 921621,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 146,
|
||||
@ -394,7 +402,7 @@
|
||||
"name": "icon-magnify",
|
||||
"id": 68,
|
||||
"code": 921622,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 71,
|
||||
@ -402,7 +410,7 @@
|
||||
"name": "icon-magnify-in",
|
||||
"id": 66,
|
||||
"code": 921623,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 72,
|
||||
@ -410,7 +418,7 @@
|
||||
"name": "icon-magnify-out",
|
||||
"id": 67,
|
||||
"code": 921624,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 74,
|
||||
@ -418,7 +426,7 @@
|
||||
"name": "icon-menu",
|
||||
"id": 69,
|
||||
"code": 921625,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 75,
|
||||
@ -426,7 +434,7 @@
|
||||
"name": "icon-move",
|
||||
"id": 70,
|
||||
"code": 921632,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 76,
|
||||
@ -434,7 +442,7 @@
|
||||
"name": "icon-new-window",
|
||||
"id": 71,
|
||||
"code": 921633,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 26,
|
||||
@ -442,7 +450,7 @@
|
||||
"name": "icon-paint-bucket",
|
||||
"id": 21,
|
||||
"code": 921634,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 81,
|
||||
@ -450,7 +458,7 @@
|
||||
"name": "icon-pause",
|
||||
"id": 76,
|
||||
"code": 921635,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 82,
|
||||
@ -458,7 +466,7 @@
|
||||
"name": "icon-pencil",
|
||||
"id": 77,
|
||||
"code": 921636,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 84,
|
||||
@ -466,7 +474,7 @@
|
||||
"name": "icon-play",
|
||||
"id": 79,
|
||||
"code": 921637,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 85,
|
||||
@ -474,7 +482,7 @@
|
||||
"name": "icon-plot-resource",
|
||||
"id": 80,
|
||||
"code": 921638,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 27,
|
||||
@ -482,7 +490,7 @@
|
||||
"name": "icon-pointer-left",
|
||||
"id": 22,
|
||||
"code": 921639,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 28,
|
||||
@ -490,7 +498,7 @@
|
||||
"name": "icon-pointer-right",
|
||||
"id": 23,
|
||||
"code": 921640,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 32,
|
||||
@ -498,7 +506,7 @@
|
||||
"name": "icon-refresh",
|
||||
"id": 27,
|
||||
"code": 921641,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 16,
|
||||
@ -506,7 +514,7 @@
|
||||
"name": "icon-save",
|
||||
"id": 11,
|
||||
"code": 921648,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 88,
|
||||
@ -514,7 +522,7 @@
|
||||
"name": "icon-sine",
|
||||
"id": 83,
|
||||
"code": 921649,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 102,
|
||||
@ -522,7 +530,7 @@
|
||||
"name": "icon-T",
|
||||
"id": 84,
|
||||
"code": 921650,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 92,
|
||||
@ -530,7 +538,7 @@
|
||||
"name": "icon-thumbs-strip",
|
||||
"id": 87,
|
||||
"code": 921651,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 96,
|
||||
@ -538,7 +546,7 @@
|
||||
"name": "icon-two-parts-both",
|
||||
"id": 91,
|
||||
"code": 921652,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 97,
|
||||
@ -546,7 +554,7 @@
|
||||
"name": "icon-two-parts-one-only",
|
||||
"id": 92,
|
||||
"code": 921653,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 21,
|
||||
@ -554,7 +562,7 @@
|
||||
"name": "icon-resync",
|
||||
"id": 16,
|
||||
"code": 921654,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 120,
|
||||
@ -562,7 +570,7 @@
|
||||
"name": "icon-reset",
|
||||
"prevSize": 24,
|
||||
"code": 921655,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 121,
|
||||
@ -570,7 +578,7 @@
|
||||
"name": "icon-x-in-circle",
|
||||
"prevSize": 24,
|
||||
"code": 921656,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 118,
|
||||
@ -578,7 +586,7 @@
|
||||
"name": "icon-brightness",
|
||||
"prevSize": 24,
|
||||
"code": 921657,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 119,
|
||||
@ -586,7 +594,7 @@
|
||||
"name": "icon-contrast",
|
||||
"prevSize": 24,
|
||||
"code": 921664,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 124,
|
||||
@ -594,7 +602,7 @@
|
||||
"name": "icon-expand",
|
||||
"prevSize": 24,
|
||||
"code": 921665,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 125,
|
||||
@ -602,7 +610,7 @@
|
||||
"name": "icon-list-view",
|
||||
"prevSize": 24,
|
||||
"code": 921666,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 133,
|
||||
@ -610,7 +618,7 @@
|
||||
"name": "icon-grid-snap-to",
|
||||
"prevSize": 24,
|
||||
"code": 921667,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 128,
|
||||
@ -618,7 +626,7 @@
|
||||
"name": "icon-grid-snap-no",
|
||||
"prevSize": 24,
|
||||
"code": 921668,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 131,
|
||||
@ -626,7 +634,7 @@
|
||||
"name": "icon-frame-show",
|
||||
"prevSize": 24,
|
||||
"code": 921669,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 130,
|
||||
@ -634,7 +642,7 @@
|
||||
"name": "icon-frame-hide",
|
||||
"prevSize": 24,
|
||||
"code": 921670,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 138,
|
||||
@ -642,7 +650,7 @@
|
||||
"name": "icon-import",
|
||||
"prevSize": 24,
|
||||
"code": 921671,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 136,
|
||||
@ -650,7 +658,7 @@
|
||||
"name": "icon-export",
|
||||
"prevSize": 24,
|
||||
"code": 921672,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 37,
|
||||
@ -658,7 +666,7 @@
|
||||
"name": "icon-activity",
|
||||
"id": 32,
|
||||
"code": 921856,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 36,
|
||||
@ -666,7 +674,7 @@
|
||||
"name": "icon-activity-mode",
|
||||
"id": 31,
|
||||
"code": 921857,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 52,
|
||||
@ -674,7 +682,7 @@
|
||||
"name": "icon-autoflow-tabular",
|
||||
"id": 47,
|
||||
"code": 921858,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 55,
|
||||
@ -682,7 +690,7 @@
|
||||
"name": "icon-clock",
|
||||
"id": 50,
|
||||
"code": 921859,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 58,
|
||||
@ -690,7 +698,7 @@
|
||||
"name": "icon-database",
|
||||
"id": 53,
|
||||
"code": 921860,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 57,
|
||||
@ -698,7 +706,7 @@
|
||||
"name": "icon-database-query",
|
||||
"id": 52,
|
||||
"code": 921861,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 17,
|
||||
@ -706,7 +714,7 @@
|
||||
"name": "icon-dataset",
|
||||
"id": 12,
|
||||
"code": 921862,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 22,
|
||||
@ -714,7 +722,7 @@
|
||||
"name": "icon-datatable",
|
||||
"id": 17,
|
||||
"code": 921863,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 59,
|
||||
@ -722,7 +730,7 @@
|
||||
"name": "icon-dictionary",
|
||||
"id": 54,
|
||||
"code": 921864,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 62,
|
||||
@ -730,7 +738,7 @@
|
||||
"name": "icon-folder",
|
||||
"id": 57,
|
||||
"code": 921865,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 66,
|
||||
@ -738,7 +746,7 @@
|
||||
"name": "icon-image",
|
||||
"id": 61,
|
||||
"code": 921872,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 68,
|
||||
@ -746,7 +754,7 @@
|
||||
"name": "icon-layout",
|
||||
"id": 63,
|
||||
"code": 921873,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 77,
|
||||
@ -754,7 +762,7 @@
|
||||
"name": "icon-object",
|
||||
"id": 72,
|
||||
"code": 921874,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 78,
|
||||
@ -762,7 +770,7 @@
|
||||
"name": "icon-object-unknown",
|
||||
"id": 73,
|
||||
"code": 921875,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 79,
|
||||
@ -770,7 +778,7 @@
|
||||
"name": "icon-packet",
|
||||
"id": 74,
|
||||
"code": 921876,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 80,
|
||||
@ -778,7 +786,7 @@
|
||||
"name": "icon-page",
|
||||
"id": 75,
|
||||
"code": 921877,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 135,
|
||||
@ -786,7 +794,7 @@
|
||||
"name": "icon-plot-overlay",
|
||||
"prevSize": 24,
|
||||
"code": 921878,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 113,
|
||||
@ -794,7 +802,7 @@
|
||||
"name": "icon-plot-stacked",
|
||||
"prevSize": 24,
|
||||
"code": 921879,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
@ -802,7 +810,7 @@
|
||||
"name": "icon-session",
|
||||
"id": 5,
|
||||
"code": 921880,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 24,
|
||||
@ -810,7 +818,7 @@
|
||||
"name": "icon-tabular",
|
||||
"id": 19,
|
||||
"code": 921881,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 7,
|
||||
@ -818,7 +826,7 @@
|
||||
"name": "icon-tabular-lad",
|
||||
"id": 2,
|
||||
"code": 921888,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 6,
|
||||
@ -826,7 +834,7 @@
|
||||
"name": "icon-tabular-lad-set",
|
||||
"id": 1,
|
||||
"code": 921889,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 8,
|
||||
@ -834,7 +842,7 @@
|
||||
"name": "icon-tabular-realtime",
|
||||
"id": 3,
|
||||
"code": 921890,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 23,
|
||||
@ -842,7 +850,7 @@
|
||||
"name": "icon-tabular-scrolling",
|
||||
"id": 18,
|
||||
"code": 921891,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 112,
|
||||
@ -850,7 +858,7 @@
|
||||
"name": "icon-telemetry",
|
||||
"id": 86,
|
||||
"code": 921892,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 90,
|
||||
@ -858,7 +866,7 @@
|
||||
"name": "icon-telemetry-panel",
|
||||
"id": 85,
|
||||
"code": 921893,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 93,
|
||||
@ -866,7 +874,7 @@
|
||||
"name": "icon-timeline",
|
||||
"id": 88,
|
||||
"code": 921894,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 116,
|
||||
@ -874,7 +882,7 @@
|
||||
"name": "icon-timer-v1.5",
|
||||
"prevSize": 24,
|
||||
"code": 921895,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
@ -882,7 +890,7 @@
|
||||
"name": "icon-topic",
|
||||
"id": 6,
|
||||
"code": 921896,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 115,
|
||||
@ -890,7 +898,7 @@
|
||||
"name": "icon-box-with-dashed-lines",
|
||||
"id": 29,
|
||||
"code": 921897,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 126,
|
||||
@ -898,7 +906,7 @@
|
||||
"name": "icon-summary-widget",
|
||||
"prevSize": 24,
|
||||
"code": 921904,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 139,
|
||||
@ -906,7 +914,7 @@
|
||||
"name": "icon-notebook",
|
||||
"prevSize": 24,
|
||||
"code": 921905,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
@ -1639,6 +1647,26 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 118,
|
||||
"paths": [
|
||||
"M962 512l-896 512v-1024z"
|
||||
],
|
||||
"attrs": [
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-arrow-right-equilateral"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751207457516161751": [
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"paths": [
|
||||
"M0 512l256 256v-512z",
|
||||
@ -2034,9 +2062,9 @@
|
||||
},
|
||||
{
|
||||
"paths": [
|
||||
"M0 0h1024v256h-1024v-256z",
|
||||
"M0 384h1024v256h-1024v-256z",
|
||||
"M0 768h1024v256h-1024v-256z"
|
||||
"M0 128h1024v128h-1024v-128z",
|
||||
"M0 448h1024v128h-1024v-128z",
|
||||
"M0 768h1024v128h-1024v-128z"
|
||||
],
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
@ -2044,9 +2072,19 @@
|
||||
],
|
||||
"defaultCode": 109,
|
||||
"id": 69,
|
||||
"attrs": [],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"colorPermutations": {
|
||||
"1161751207457516161751": []
|
||||
"1161751207457516161751": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Binary file not shown.
@ -39,6 +39,7 @@
|
||||
<glyph unicode="" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
|
||||
<glyph unicode="" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
|
||||
<glyph unicode="" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
|
||||
<glyph unicode="󡀀" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
|
||||
<glyph unicode="󡀁" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
|
||||
<glyph unicode="󡀂" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
|
||||
@ -57,7 +58,7 @@
|
||||
<glyph unicode="󡀖" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
|
||||
<glyph unicode="󡀗" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
|
||||
<glyph unicode="󡀘" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
|
||||
<glyph unicode="󡀙" glyph-name="icon-menu" d="M0 960h1024v-256h-1024v256zM0 576h1024v-256h-1024v256zM0 192h1024v-256h-1024v256z" />
|
||||
<glyph unicode="󡀙" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
|
||||
<glyph unicode="󡀠" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
|
||||
<glyph unicode="󡀡" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
|
||||
<glyph unicode="󡀢" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
|
||||
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
Binary file not shown.
@ -157,3 +157,57 @@
|
||||
.t-popup {
|
||||
z-index: 75;
|
||||
}
|
||||
|
||||
/********************************************* GRID STYLES */
|
||||
.grid-two-column {
|
||||
display: grid;
|
||||
grid-row-gap: 0;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: top;
|
||||
}
|
||||
|
||||
.grid-two-column-span-cols {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.grid-elem {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
}
|
||||
&.label {
|
||||
background-color: rgba(0,0,128,0.2);
|
||||
}
|
||||
&.value {
|
||||
background-color: rgba(0,128,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Properties grids
|
||||
.grid-properties {
|
||||
@extend .grid-two-column;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.grid-span-all {
|
||||
@extend .grid-two-column-span-cols;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
.grid-cell {
|
||||
padding: 3px $interiorMarginLg 3px 0;
|
||||
&[title] {
|
||||
// When a cell has a title, assume it's helpful text
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
&.force-border,
|
||||
&:not(:first-of-type) {
|
||||
// Row borders, effected via border-top on child elements of the row
|
||||
.grid-cell {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,25 +37,9 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
//.top-bar .btn-browse .badge {
|
||||
// Moved to _controls.scss .btn.browse-btn
|
||||
// border-radius: $controlCr * 1.5;
|
||||
// $d: 20px;
|
||||
// display: block;
|
||||
// font-size: 1em;
|
||||
// line-height: $d;
|
||||
//// margin-top: -4px;
|
||||
//
|
||||
// position: absolute;
|
||||
// top: 5px; left: 5px; bottom: 5px; right: auto;
|
||||
// width: $d; height: auto;
|
||||
//}
|
||||
|
||||
.super-menu .badge {
|
||||
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
|
||||
border-radius: $controlCr;
|
||||
@include boxShdwSubtle();
|
||||
// display: inline-block;
|
||||
// margin-right: 10px !important;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
@ -43,10 +43,10 @@ $ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 80px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueCollapsedPaneEdgeM: 22px;
|
||||
$uePaneMiniTabH: 22px;
|
||||
$uePaneMiniTabW: 8px;
|
||||
$uePaneMiniTabFontSize: 8px;
|
||||
$uePaneMiniTabCollapsedW: 18px;
|
||||
$uePaneMiniTabH: 36px;
|
||||
$uePaneMiniTabW: 10px;
|
||||
$uePaneMiniTabFontSize: 9px;
|
||||
$uePaneMiniTabCollapsedW: 22px;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
/*************** Panes */
|
||||
@ -70,7 +70,7 @@ $ueBrowseGridItemTopBarH: 20px;
|
||||
$ueBrowseGridItemBottomBarH: 30px;
|
||||
$itemPadLR: 5px;
|
||||
/*************** Tree */
|
||||
$treeVCW: 10px;
|
||||
$treeVCW: 16px;
|
||||
$treeTypeIconH: 1.4em; // was 16px
|
||||
$treeTypeIconHPx: 16px;
|
||||
$treeTypeIconW: 18px;
|
||||
@ -132,7 +132,7 @@ $menuLineHPx: 24px;
|
||||
$btnStdH: 25px;
|
||||
$btnToolbarH: $btnStdH;
|
||||
$controlBarH: $btnStdH;
|
||||
$btnFrameH: 16px;
|
||||
$btnFrameH: 18px;
|
||||
|
||||
/************************** PATHS */
|
||||
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
|
||||
|
||||
@ -141,7 +141,6 @@ a.disabled {
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
// .t-object-label
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
@ -201,6 +200,9 @@ a.disabled {
|
||||
|
||||
.vscroll {
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.slidable {
|
||||
@ -224,6 +226,10 @@ a.disabled {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
@ -235,14 +241,16 @@ a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.off {
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
|
||||
@ -75,6 +75,7 @@ $glyph-icon-x: '\e928';
|
||||
$glyph-icon-brackets: '\e929';
|
||||
$glyph-icon-crosshair: '\e930';
|
||||
$glyph-icon-grippy: '\e931';
|
||||
$glyph-icon-arrow-right-equilateral: '\e932';
|
||||
$glyph-icon-arrows-out: '\e1000';
|
||||
$glyph-icon-arrows-right-left: '\e1001';
|
||||
$glyph-icon-arrows-up-down: '\e1002';
|
||||
@ -190,6 +191,7 @@ $glyph-icon-notebook: '\e1131';
|
||||
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
|
||||
.icon-crosshair { @include glyphBefore($glyph-icon-crosshair); }
|
||||
.icon-grippy { @include glyphBefore($glyph-icon-grippy); }
|
||||
.icon-arrow-right-equilateral { @include glyphBefore($glyph-icon-arrow-right-equilateral); }
|
||||
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||
|
||||
@ -19,23 +19,15 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* Styles for the Inspector pane */
|
||||
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* New grid layout for the Inspector pane */
|
||||
.l-inspect {
|
||||
// Overall layout
|
||||
@extend .abs;
|
||||
background: $colorInspectorBg;
|
||||
color: $colorInspectorFg;
|
||||
line-height: 140%;
|
||||
|
||||
.flex-elem.holder:not(:last-child) {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
@ -50,80 +42,48 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-inspector-part {
|
||||
box-sizing: border-box;
|
||||
padding-right: $interiorMargin;
|
||||
.tree .form {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.tree {
|
||||
.grid-properties {
|
||||
margin-left: $treeVCW + $interiorMarginLg;
|
||||
}
|
||||
.section-header {
|
||||
background: none;
|
||||
color: $colorInspectorPropName;
|
||||
border-radius: unset;
|
||||
font-size: inherit;
|
||||
padding: $interiorMarginSm 0;
|
||||
}
|
||||
|
||||
mct-form:not(:last-child) .form {
|
||||
border-bottom: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
padding-bottom: $interiorMarginLg;
|
||||
.l-section-body {
|
||||
margin-bottom: 0;
|
||||
&:not(.first) {
|
||||
border-top: 1px solid $colorFormLines;
|
||||
}
|
||||
}
|
||||
.form-row {
|
||||
align-items: center;
|
||||
border: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: $interiorMarginSm 0;
|
||||
.label {
|
||||
min-width: 80px;
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='search'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
em.t-inspector-part-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
em.t-inspector-part-header {
|
||||
border-radius: $basicCr;
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: floor($formTBPad * .75) $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.inspector-properties {
|
||||
&:not(.first) {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
padding: $interiorMarginSm 0;
|
||||
.grid-properties {
|
||||
.label {
|
||||
color: $colorInspectorPropName;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
&:first-child {
|
||||
// If there is no preceding .label element, make value span columns
|
||||
@extend .grid-two-column-span-cols;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-location {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
// Headers for .l-inspector-part elements
|
||||
@extend .grid-two-column-span-cols;
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
margin: $interiorMarginLg 0 $interiorMarginSm 0;
|
||||
padding: floor($formTBPad * .75) $formLRPad;
|
||||
text-transform: uppercase;
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -162,6 +122,34 @@
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements pool
|
||||
.holder-elements {
|
||||
.current-elements {
|
||||
position: relative;
|
||||
.tree-item {
|
||||
.t-object-label {
|
||||
// Elements pool is a flat list, so don't indent items.
|
||||
font-size: 0.75rem;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for the Inspector pane */
|
||||
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
.flex-elem.holder:not(:last-child) {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.holder-elements {
|
||||
.current-elements {
|
||||
position: relative;
|
||||
|
||||
@ -113,10 +113,11 @@ body.desktop .mini-tab-icon {
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
font-size: 0; // Remove space between s-button elements due to white space in markup
|
||||
white-space: nowrap;
|
||||
|
||||
.s-button {
|
||||
border-radius: 0;
|
||||
margin-left: 1px;
|
||||
margin-left: 1px !important;
|
||||
}
|
||||
|
||||
> .s-button {
|
||||
|
||||
@ -128,40 +128,80 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-local-controls {
|
||||
// Control shown when hovering over an object, like plots and imagery
|
||||
// Default position is upper right
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p; right: $p; bottom: auto;
|
||||
text-align: right;
|
||||
z-index: 5;
|
||||
|
||||
|
||||
/******************************************************** LOCAL CONTROLS */
|
||||
// Controls placed in proximity to or overlaid on components and views
|
||||
|
||||
.local-controls-persist {
|
||||
|
||||
}
|
||||
|
||||
.s-local-controls {
|
||||
font-size: 0.7rem;
|
||||
&.s-wrapper-transluc {
|
||||
// Semi-opaque wrapper to visually distinguish a control
|
||||
// from the background
|
||||
background: rgba($colorTransLucBg, 0.7);
|
||||
box-sizing: border-box;
|
||||
border-radius: $controlCr;
|
||||
.local-controls-hidden {
|
||||
// Used within .has-local-controls, hidden by default
|
||||
|
||||
}
|
||||
|
||||
.local-controls-flyout {
|
||||
|
||||
}
|
||||
|
||||
body.desktop .has-local-controls {
|
||||
// Helper class, provides hover ability to show local controls
|
||||
|
||||
&:hover .local-controls-hidden {
|
||||
@include trans-prop-nice($props: opacity, $dur: 50ms);
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.has-local-controls {
|
||||
.local-control {
|
||||
@include trans-prop-nice($props: opacity, $dur: 250ms);
|
||||
.local-controls-hidden {
|
||||
@include trans-prop-nice($props: opacity, $dur: 1000ms);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
.local-control {
|
||||
@include trans-prop-nice($props: opacity, $dur: 10ms);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.h-local-controls {
|
||||
// An explicit outer holder for controls. Typically placed in upper right.
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
&.h-local-controls-overlay-content {
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p; right: $p;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.l-btn-set,
|
||||
.s-button {
|
||||
&:not(:first-child) {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-local-controls-overlay-content {
|
||||
background: $colorBodyBg;
|
||||
border-radius: $controlCr + 1;
|
||||
box-sizing: border-box;
|
||||
border-radius: $controlCr;
|
||||
padding: 1px;
|
||||
.s-button {
|
||||
background: $colorBtnBg;
|
||||
}
|
||||
}
|
||||
|
||||
.h-local-controls-trans {
|
||||
background: rgba($colorTransLucBg, 0.5);
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
/******************************************************** VIEW CONTROLS */
|
||||
// Expand/collapse > and v arrows, used in tree and plot legend
|
||||
// Moved this over from a tree-only context 5/18/17
|
||||
@ -174,7 +214,7 @@
|
||||
&:before {
|
||||
position: absolute;
|
||||
@include trans-prop-nice(transform, 100ms);
|
||||
content: $glyph-icon-arrow-right;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
@include transform-origin(center);
|
||||
}
|
||||
&.expanded:before {
|
||||
@ -773,13 +813,17 @@ textarea {
|
||||
@extend .icon-arrow-right;
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
width: $treeVCW;
|
||||
&:before {
|
||||
// Arrow glyph
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@include trans-prop-nice(transform, 100ms);
|
||||
transform: translateX(-50%);
|
||||
transform-origin: center;
|
||||
}
|
||||
&.expanded:before {
|
||||
transform: rotate(90deg);
|
||||
transform: translateX(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -138,54 +138,51 @@
|
||||
}
|
||||
|
||||
/*************************************** LOCAL CONTROLS */
|
||||
.l-local-controls {
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.t-reset-btn-holder {
|
||||
$bc: $scrollbarTrackColorBg;
|
||||
&:before,
|
||||
&:after {
|
||||
border-right: 1px solid $bc;
|
||||
content:'';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $bc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid $bc;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.s-wrapper-transluc {
|
||||
left: auto;
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
}
|
||||
|
||||
&.l-flex-row {
|
||||
.t-imagery {
|
||||
.h-local-controls.h-local-controls-overlay-content {
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
align-items: center;
|
||||
}
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.t-reset-btn-holder {
|
||||
$bc: $scrollbarTrackColorBg;
|
||||
&:before,
|
||||
&:after {
|
||||
border-right: 1px solid $bc;
|
||||
content:'';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $bc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid $bc;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************** WHEN IN FRAME */
|
||||
.frame .t-imagery {
|
||||
.l-image-main-wrapper {
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
width: 100%;
|
||||
|
||||
.l-form-section {
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
position: relative;
|
||||
&.grows {
|
||||
.l-section-body,
|
||||
@ -57,7 +58,6 @@
|
||||
$m: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid $colorFormLines;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
padding: $formTBPad 0;
|
||||
position: relative;
|
||||
|
||||
@ -132,6 +132,7 @@
|
||||
width: auto;
|
||||
order: 2;
|
||||
}
|
||||
>.control,
|
||||
>.controls {
|
||||
flex: 0 0 auto;
|
||||
margin-right: $interiorMargin;
|
||||
@ -258,19 +259,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-error {
|
||||
// Block element that visually flags an error and contains a message
|
||||
background-color: $colorFormFieldErrorBg;
|
||||
color: $colorFormFieldErrorFg;
|
||||
border-radius: $basicCr;
|
||||
display: block;
|
||||
padding: 1px 6px;
|
||||
&:before {
|
||||
content: $glyph-icon-alert-triangle;
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
.form-error {
|
||||
// Block element that visually flags an error and contains a message
|
||||
background-color: $colorFormFieldErrorBg;
|
||||
color: $colorFormFieldErrorFg;
|
||||
border-radius: $basicCr;
|
||||
display: block;
|
||||
padding: 1px 6px;
|
||||
&:before {
|
||||
content: $glyph-icon-alert-triangle;
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ body.mobile {
|
||||
|
||||
.object-browse-bar {
|
||||
&.t-primary {
|
||||
margin-left: 45px;
|
||||
margin-left: 30px;
|
||||
|
||||
.title-label {
|
||||
// Prevent inline editing of the object title in the main view in mobile
|
||||
|
||||
@ -34,18 +34,7 @@ body.touch {
|
||||
line-height: $mobileTreeItemH !important;
|
||||
.view-control {
|
||||
font-size: 1em;
|
||||
margin-right: $interiorMargin;
|
||||
width: ceil($mobileTreeItemH * 0.75);
|
||||
&.has-children {
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(-90deg);
|
||||
}
|
||||
&.expanded:before {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-object-label {
|
||||
line-height: inherit;
|
||||
|
||||
@ -246,21 +246,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area,
|
||||
.plot-display-area,
|
||||
.gl-plot-axis-area {
|
||||
.gl-plot-local-controls,
|
||||
.l-local-controls {
|
||||
@include trans-prop-nice(opacity, 150ms);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover .gl-plot-local-controls,
|
||||
&:hover .l-local-controls {
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area,
|
||||
.plot-display-area {
|
||||
|
||||
@ -111,14 +111,15 @@ input.c-search__search-input {
|
||||
|
||||
.results-msg {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.active-filter-display {
|
||||
$s: 0.7em;
|
||||
$s: 0.7rem;
|
||||
$p: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
line-height: 130%;
|
||||
padding-left: $s * 2;
|
||||
padding-left: $s * 1.5;
|
||||
font-size: $s;
|
||||
|
||||
.clear-filters {
|
||||
|
||||
@ -64,14 +64,16 @@
|
||||
left: $m;
|
||||
}
|
||||
&.frame-template {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
&:before {
|
||||
font-size: 0.65rem;
|
||||
.h-local-controls {
|
||||
.s-button,
|
||||
.s-menu-button {
|
||||
height: $btnFrameH;
|
||||
line-height: $btnFrameH;
|
||||
padding: 0 $interiorMargin;
|
||||
> span,
|
||||
&:before {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,8 +98,6 @@
|
||||
border-color: transparent;
|
||||
.object-browse-bar .right {
|
||||
$m: 0;
|
||||
background: rgba(black, 0.3);
|
||||
border-radius: $basicCr;
|
||||
padding: $interiorMarginSm;
|
||||
position: absolute;
|
||||
top: $m; right: $m;
|
||||
@ -111,10 +111,23 @@
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
}
|
||||
|
||||
> .t-frame-inner {
|
||||
> .object-browse-bar .left {
|
||||
display: none;
|
||||
&.t-object-type-layout {
|
||||
> .object-browse-bar {
|
||||
.t-btn-view-large {
|
||||
// When a nested layout has its frame hidden, don't display a view large button
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .object-browse-bar {
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .object-holder.abs {
|
||||
overflow: hidden;
|
||||
top: 0 !important;
|
||||
|
||||
@ -145,20 +145,18 @@
|
||||
body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
$hi: splitterHandleInset($splitterD, $splitterHandleD);
|
||||
$paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
|
||||
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
|
||||
top: 0;
|
||||
|
||||
&.toggle-tree.anchor-left.collapsed,
|
||||
&.toggle-inspect.anchor-right:not(.collapsed) {
|
||||
@extend .icon-arrow-right;
|
||||
border-bottom-right-radius: $controlCr;
|
||||
border-top-right-radius: $controlCr;
|
||||
}
|
||||
|
||||
&.toggle-tree.anchor-left:not(.collapsed),
|
||||
&.toggle-inspect.anchor-right.collapsed {
|
||||
@extend .icon-arrow-left;
|
||||
border-bottom-left-radius: $controlCr;
|
||||
border-top-left-radius: $controlCr;
|
||||
}
|
||||
|
||||
&.toggle-tree.anchor-left {
|
||||
@ -240,7 +238,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar .s-button,
|
||||
.top-bar .buttons-main .s-button,
|
||||
.top-bar .s-menu-button,
|
||||
.tool-bar .s-button,
|
||||
@ -268,7 +265,12 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
|
||||
|
||||
.left {
|
||||
.l-back {
|
||||
margin-right: $interiorMarginLg;
|
||||
a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
}
|
||||
margin-right: $interiorMargin;
|
||||
&.s-status-editing { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,51 +19,62 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.s-hover-border {
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-editing {
|
||||
// Limit to editing mode
|
||||
$o: 0.5;
|
||||
$oHover: 0.8;
|
||||
$bc: $colorSelectableSelectedPrimary;
|
||||
body.desktop {
|
||||
.s-hover-border {
|
||||
// Show a border by default so user can see object bounds and empty objects
|
||||
border-color: rgba($bc, $o) !important;
|
||||
border-style: dotted !important;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($bc, $oHover) !important;
|
||||
}
|
||||
|
||||
&.t-object-type-layout {
|
||||
border-style: dashed !important;
|
||||
border-color: rgba($colorBodyFg, 0.3) !important;
|
||||
}
|
||||
}
|
||||
.s-selected {
|
||||
&.s-moveable {
|
||||
&:not(.s-drilled-in) {
|
||||
cursor: move;
|
||||
|
||||
.s-status-editing {
|
||||
// Limit to editing mode
|
||||
$o: 0.5;
|
||||
$oHover: 0.8;
|
||||
$bc: $colorSelectableSelectedPrimary;
|
||||
.s-hover-border {
|
||||
// Show a border by default so user can see object bounds and empty objects
|
||||
border-color: rgba($bc, $o) !important;
|
||||
border-style: dotted !important;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($bc, $oHover) !important;
|
||||
}
|
||||
|
||||
&.t-object-type-layout {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
}
|
||||
.s-selected {
|
||||
> .s-hover-border,
|
||||
&.s-hover-border {
|
||||
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
|
||||
@include boxShdwLarge();
|
||||
// Show edit-corners if you got 'em
|
||||
.edit-corner {
|
||||
display: block;
|
||||
&:hover {
|
||||
background-color: rgba($colorKey, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.s-moveable {
|
||||
&:not(.s-drilled-in) {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-selected > .s-hover-border,
|
||||
.s-selected.s-hover-border {
|
||||
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
|
||||
border-color: $colorSelectableSelectedPrimary !important;
|
||||
@include boxShdwLarge();
|
||||
// Show edit-corners if you got 'em
|
||||
.edit-corner {
|
||||
display: block;
|
||||
&:hover {
|
||||
background-color: rgba($colorKey, 1);
|
||||
}
|
||||
.s-selected > .s-hover-border,
|
||||
.s-selected.s-hover-border {
|
||||
border-color: $colorSelectableSelectedPrimary !important;
|
||||
//z-index: 1; // Bring selected item from beneath others. BUT, this breaks editing in Fixed Position.
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,17 +23,6 @@
|
||||
ng-controller="SelectorController as selector">
|
||||
<div class='col col-15'>
|
||||
<div class='line field-hints'>Available</div>
|
||||
<!--div id='_form_filter' class='line filter'>
|
||||
<input type='text' class='control filter' name='filter-available' />
|
||||
<a class='icon ui-symbol t-available-trigger'
|
||||
href=''
|
||||
title="Filter is case sensitive">M</a>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
Showing {{shown}} of {{count}} available options.
|
||||
</div -->
|
||||
|
||||
<div class='line treeview' name='available'>
|
||||
<mct-representation key="'tree'"
|
||||
mct-object="selector.root()"
|
||||
@ -55,18 +44,6 @@
|
||||
</div>
|
||||
<div class='col col-15'>
|
||||
<div class='line field-hints'>Selected</div>
|
||||
<!-- div id='_form_filter' class='line filter'>
|
||||
<input type='text' class='control filter' name='filter-selected' />
|
||||
<a class='icon ui-symbol t-selected-trigger'
|
||||
href=''
|
||||
title="Filter is case sensitive">
|
||||
M
|
||||
</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
Showing {{shown}} of {{count}} available options.
|
||||
</div -->
|
||||
|
||||
<div class='line treeview l-tree-item-flat-list' name='selected'>
|
||||
<ul class="tree">
|
||||
<li ng-repeat="selectedObject in selector.selected()">
|
||||
|
||||
@ -29,14 +29,14 @@
|
||||
key="'inspector-region'"
|
||||
mct-object="domainObject"
|
||||
ng-model="ngModel"
|
||||
class="flex-elem grows vscroll l-flex-col">
|
||||
class="flex-elem grows vscroll scroll-pad l-flex-col inspector-properties">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<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 t-inspector-part-header">Elements</em>
|
||||
<h2>Elements</h2>
|
||||
<mct-representation
|
||||
key="'edit-elements'"
|
||||
mct-object="domainObject"
|
||||
|
||||
@ -72,8 +72,8 @@ $colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 20%);
|
||||
$colorTick: rgba(white, 0.2);
|
||||
$colorSelectableSelectedPrimary: $colorKey;
|
||||
$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
|
||||
$colorSelectableHov: $colorSelectableSelectedSecondary;
|
||||
//$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
|
||||
$colorSelectableHov: rgba($colorBodyFg, 0.3);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||
@ -226,8 +226,6 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
|
||||
$colorSplitterActive: $colorKey;
|
||||
|
||||
// Minitabs
|
||||
$uePaneMiniTabH: 24px;
|
||||
$uePaneMiniTabW: 8px;
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
|
||||
@ -72,8 +72,8 @@ $colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
$colorSelectableSelectedPrimary: $colorKey;
|
||||
$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
|
||||
$colorSelectableHov: $colorSelectableSelectedSecondary;
|
||||
//$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
|
||||
$colorSelectableHov: rgba($colorBodyFg, 0.4);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
@ -226,8 +226,6 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterActive: $colorKey;
|
||||
|
||||
// Minitabs
|
||||
$uePaneMiniTabH: 24px;
|
||||
$uePaneMiniTabW: 8px;
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
$ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
|
||||
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
|
||||
$ueTimeConductorH: (20px, 3px, 20px); // Heights for Ticks, Data Visualization, Controls elements
|
||||
$ueTimeConductorRtH: (20px, 3px, 20px); // Heights for elements in Real-time mode
|
||||
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
|
||||
$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
|
||||
$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
|
||||
|
||||
@ -192,15 +192,19 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> g {
|
||||
// Tick holder
|
||||
font-size: 0.9em;
|
||||
transform: translateY(23px);
|
||||
}
|
||||
path {
|
||||
path,
|
||||
line {
|
||||
// Line beneath ticks
|
||||
display: none;
|
||||
}
|
||||
line {
|
||||
// Tick marks
|
||||
stroke: $c;
|
||||
//stroke: $c;
|
||||
//transform: translateY(-10px);
|
||||
}
|
||||
text {
|
||||
// Tick labels
|
||||
@ -256,7 +260,7 @@
|
||||
|
||||
.l-time-conductor-controls {
|
||||
align-items: center;
|
||||
margin-top: $interiorMargin;
|
||||
margin-top: $interiorMarginLg;
|
||||
.l-time-conductor-zoom-w {
|
||||
justify-content: flex-end;
|
||||
.time-conductor-zoom {
|
||||
@ -334,27 +338,25 @@
|
||||
content: $i;
|
||||
}
|
||||
.l-axis-holder {
|
||||
$angle: 90deg;
|
||||
$c0: rgba($colorBodyFg, 0.1);
|
||||
$c1: rgba($colorBodyFg, 0.1);
|
||||
$c2: transparent;
|
||||
$grabTicksH: 3px;
|
||||
$grabTicksXSpace: 4px;
|
||||
$grabTicksYOffset: 0;
|
||||
$grabTicksYOffset: 2px;
|
||||
$grabTicksXSpace: 3px;
|
||||
transition: background 150ms ease-in-out;
|
||||
@include cursorGrab();
|
||||
svg {
|
||||
$c1: rgba($colorBodyFg, 0.2);
|
||||
$angle: 90deg;
|
||||
@include background-image(linear-gradient($angle,
|
||||
$c1 1px, $c2 1px,
|
||||
$c2 100%
|
||||
));
|
||||
background-position: center $grabTicksYOffset;
|
||||
background-repeat: repeat-x;
|
||||
background-size: $grabTicksXSpace $grabTicksH;
|
||||
background-size: $grabTicksXSpace $r1H - ($grabTicksYOffset * 2);
|
||||
}
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(
|
||||
$c0 70%, $c2 100%
|
||||
));
|
||||
background: $c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="off">
|
||||
<input type="submit" class="invisible">
|
||||
</form>
|
||||
<conductor-axis class="mobile-hide" view-service="tcController.conductorViewService"></conductor-axis>
|
||||
</div>
|
||||
|
||||
@ -76,9 +76,8 @@ define(
|
||||
|
||||
this.xAxis = d3Axis.axisTop();
|
||||
|
||||
// draw x axis with labels and move to the bottom of the chart area
|
||||
this.axisElement = vis.append("g")
|
||||
.attr("transform", "translate(0," + (height - PADDING) + ")");
|
||||
// draw x axis with labels. CSS is used to position them.
|
||||
this.axisElement = vis.append("g");
|
||||
|
||||
if (this.timeAPI.timeSystem() !== undefined) {
|
||||
this.changeTimeSystem(this.timeAPI.timeSystem());
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<div class="t-imagery" ng-controller="ImageryController as imagery">
|
||||
<mct-split-pane class='abs' anchor="bottom" alias="imagery">
|
||||
<div class="split-pane-component l-image-main-wrapper l-flex-col"
|
||||
<div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
|
||||
ng-mouseenter="showLocalControls = true;"
|
||||
ng-mouseleave="showLocalControls = false;">
|
||||
<div class="l-local-controls s-local-controls s-wrapper-transluc l-flex-row"
|
||||
ng-class="{ 'hide-nice': !showLocalControls }">
|
||||
<div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
|
||||
<span class="holder flex-elem grows">
|
||||
<input class="icon-brightness" type="range"
|
||||
min="0"
|
||||
@ -38,18 +37,12 @@
|
||||
ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
|
||||
<span class="l-time">{{imagery.getTime()}}</span>
|
||||
</div>
|
||||
<div class="l-controls-w flex-elem">
|
||||
<div class="h-local-controls flex-elem">
|
||||
<a class="s-button pause-play"
|
||||
ng-click="imagery.paused(!imagery.paused())"
|
||||
ng-class="{ paused: imagery.paused() }"></a>
|
||||
<a href="{{imagery.getImageUrl()}}"
|
||||
ng-if="imagery.getImageUrl()"
|
||||
target="_blank"
|
||||
title="Open image in new tab."
|
||||
class="s-button icon-new-window">
|
||||
</a>
|
||||
<a href=""
|
||||
class="s-button l-mag s-mag ui-symbol vsm icon-arrows-out"
|
||||
class="s-button l-mag s-mag vsm icon-reset"
|
||||
ng-click="clipped = false"
|
||||
ng-show="clipped === true"
|
||||
title="Not all of image is visible; click to reset."></a>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="frame frame-template t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}">
|
||||
<div class="frame frame-template t-frame-inner abs has-local-controls t-object-type-{{ domainObject.getModel().type }}">
|
||||
<div class="abs object-browse-bar l-flex-row">
|
||||
<div class="left flex-elem l-flex-row grows">
|
||||
<mct-representation
|
||||
@ -28,7 +28,7 @@
|
||||
class="l-flex-row flex-elem object-header grows">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed h-local-controls local-controls-hidden">
|
||||
<mct-representation
|
||||
key="'switcher'"
|
||||
ng-model="representation"
|
||||
|
||||
@ -22,12 +22,11 @@
|
||||
|
||||
<div ng-if="domainObject.getCapability('editor').inEditContext()"
|
||||
ng-controller="TableOptionsController"
|
||||
class="l-controls-first flex-elem grows l-inspector-part">
|
||||
<em class="t-inspector-part-header" title="Display properties for this object">Table Options</em>
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<mct-form
|
||||
ng-model="configuration.table.columns"
|
||||
structure="columnsForm"
|
||||
name="columnsFormState"
|
||||
class="flex-elem l-flex-row no-margin">
|
||||
class="flex-elem no-margin">
|
||||
</mct-form>
|
||||
</div>
|
||||
|
||||
@ -148,14 +148,7 @@
|
||||
$bg: $timelineHeaderColorBg;
|
||||
$l: 5%;
|
||||
@include user-select(none);
|
||||
@include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 70%, rgba($bg, 0) 100%));
|
||||
.s-button {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
.icon {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
}
|
||||
@include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 75%, rgba($bg, 0) 100%));
|
||||
}
|
||||
|
||||
.l-timeline-resource-graph {
|
||||
|
||||
@ -106,30 +106,32 @@
|
||||
|
||||
<!-- TOP PANE GANTT BARS -->
|
||||
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
|
||||
<div class="l-hover-btns-holder s-hover-btns-holder">
|
||||
<div class="h-local-controls l-hover-btns-holder s-hover-btns-holder">
|
||||
<a class="s-button icon-timer"
|
||||
ng-click="scroll.follow = true"
|
||||
ng-show="!toiController.isFollowing() && toiController.isActive()"
|
||||
title="Follow time bounds">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="scroll.follow = false; zoomController.fit()"
|
||||
ng-show="true"
|
||||
title="Zoom to fit">
|
||||
</a>
|
||||
<div class="l-btn-set">
|
||||
<a class="s-button icon-reset"
|
||||
ng-click="scroll.follow = false; zoomController.fit()"
|
||||
ng-show="true"
|
||||
title="Zoom to fit">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-magnify-in"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
||||
ng-show="true"
|
||||
title="Zoom in">
|
||||
</a>
|
||||
<a class="s-button icon-magnify-in"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(-1)"
|
||||
ng-show="true"
|
||||
title="Zoom in">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-magnify-out"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
||||
ng-show="true"
|
||||
title="Zoom out">
|
||||
</a>
|
||||
<a class="s-button icon-magnify-out"
|
||||
ng-click="scroll.follow = false; zoomController.zoom(1)"
|
||||
ng-show="true"
|
||||
title="Zoom out">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;" mct-scroll-x="scroll.x">
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
<form name="mctForm" novalidate class="form l-flex-col">
|
||||
<span ng-repeat="section in structure.sections"
|
||||
class="l-form-section l-flex-col flex-elem {{ section.cssClass }}">
|
||||
<div class="section-header flex-elem" ng-if="section.name">
|
||||
<h2 class="section-header flex-elem" ng-if="section.name">
|
||||
{{section.name}}
|
||||
</div>
|
||||
</h2>
|
||||
<ng-form class="form-row validates l-flex-row flex-elem {{ section.cssClass }}"
|
||||
ng-class="{
|
||||
first:$index < 1,
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<a ng-if="toggle.isActive()" class="menu-icon context-available"></a>
|
||||
<mct-include key="'search-menu'"
|
||||
class="menu-element c-search__search-menu-holder"
|
||||
ng-class="{off: !toggle.isActive()}"
|
||||
ng-class="{invisible: !toggle.isActive()}"
|
||||
ng-model="ngModel"
|
||||
parameters="{menuVisible: toggle.setState}">
|
||||
</mct-include>
|
||||
@ -52,7 +52,7 @@
|
||||
</div>
|
||||
|
||||
<div class="active-filter-display flex-elem holder"
|
||||
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
|
||||
ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
|
||||
<a class="clear-filters icon-x-in-circle s-icon-button"
|
||||
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
|
||||
</div>
|
||||
@ -65,7 +65,7 @@
|
||||
</div>
|
||||
|
||||
<div class="search-results flex-elem holder grows vscroll"
|
||||
ng-class="{ off: !(loading || results.length > 0), loading: loading }">
|
||||
ng-class="{invisible: !(loading || results.length > 0), loading: loading}">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object"
|
||||
|
||||
@ -162,20 +162,18 @@
|
||||
the-y-axis="yAxis">
|
||||
</mct-chart>
|
||||
|
||||
<div class="l-local-controls gl-plot-local-controls"
|
||||
ng-show="plotHistory.length"
|
||||
style="position: absolute; top: 8px; right: 8px;">
|
||||
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
|
||||
<a class="s-button icon-arrows-out"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
|
||||
<div class="h-local-controls h-local-controls-overlay-content"
|
||||
ng-show="plotHistory.length">
|
||||
<div class="l-btn-set">
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
<a class="s-button icon-reset"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
|
||||
|
||||
@ -19,112 +19,132 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController"
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<ul class="flex-elem grows l-inspector-part"><li>
|
||||
<em class="t-inspector-part-header">Plot Series</em>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree">
|
||||
<h2 title="Plot series display properties in this object">Plot Series</h2>
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties" ng-show="series.expanded">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('yKey')}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
'stepAfter': 'Step After'
|
||||
}[series.get('interpolate')] }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed, and their size.">Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('markers') ? "Enabled: " + series.get('markerSize') + "px" : "Disabled"}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value">
|
||||
{{series.get('alarmMarkers') ? "Enabled" : "Disabled"}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value">
|
||||
<!-- TODO: get this into a class -->
|
||||
<span class="color-swatch"
|
||||
ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}">
|
||||
</span>
|
||||
<div class="l-flex-col inspector-config" ng-show="series.expanded">
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Line Style</div>
|
||||
<div class="value">{{ {
|
||||
'none': 'None',
|
||||
'linear': 'Linear interpolation',
|
||||
'stepAfter': 'Step After'
|
||||
}[series.get('interpolate')] }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Markers</div>
|
||||
<div class="value">
|
||||
{{series.get('markers') ? "On, " + series.get('markerSize') + "px" : "Off"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Color</div>
|
||||
<div class="value">
|
||||
<span class="color-swatch"
|
||||
ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<em class="t-inspector-part-header">Y Axis</em>
|
||||
<div class="inspector-properties first">
|
||||
<div class="label">Label</div>
|
||||
<div class="value">{{ config.yAxis.get('label') }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Autoscale</div>
|
||||
<div class="value">
|
||||
{{ config.yAxis.get('autoscale') ? "On" : "Off" }}
|
||||
{{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding') * 100) + "%" : ""}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspector-properties"
|
||||
ng-if="!form.yAxis.autoscale">
|
||||
<div class="label">Min</div>
|
||||
<div class="value">{{ config.yAxis.get('range').min }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties"
|
||||
ng-if="!form.yAxis.autoscale">
|
||||
<div class="label">Max</div>
|
||||
<div class="value">{{ config.yAxis.get('range').max }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<em class="t-inspector-part-header">Legend</em>
|
||||
<div class="inspector-properties first">
|
||||
<div class="label">Position</div>
|
||||
<div class="value">{{ config.legend.get('position') }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Expand by Default</div>
|
||||
<div class="value">{{ config.legend.get('expandByDefault') ? "Yes" : "No" }}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Show when collapsed:</div>
|
||||
<div class="value">{{
|
||||
config.legend.get('valueToShowWhenCollapsed').replace('nearest', '')
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="inspector-properties">
|
||||
<div class="label">Show when expanded:</div>
|
||||
<div class="value comma-list">
|
||||
<span ng-if="config.legend.get('showTimestampWhenExpanded')">Timestamp</span>
|
||||
<span ng-if="config.legend.get('showValueWhenExpanded')">Value</span>
|
||||
<span ng-if="config.legend.get('showMinimumWhenExpanded')">Min</span>
|
||||
<span ng-if="config.legend.get('showMaximumWhenExpanded')">Max</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li><!-- end repeat -->
|
||||
</ul>
|
||||
<div class="grid-properties">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Y axis settings for this object">Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled.">Label</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('label') ? config.yAxis.get('label') : "Not defined" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
||||
<div class="grid-cell value">
|
||||
{{ config.yAxis.get('autoscale') ? "Enabled: " : "Disabled" }}
|
||||
{{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding')) : ""}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value.">Minimum value</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('range').min }}</div>
|
||||
</li>
|
||||
<li class="grid-row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value.">Maximum value</div>
|
||||
<div class="grid-cell value">{{ config.yAxis.get('range').max }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend settings for this object">Legend</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by Default</div>
|
||||
<div class="grid-cell value">{{ config.legend.get('expandByDefault') ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed.">Show when collapsed:</div>
|
||||
<div class="grid-cell value">{{
|
||||
config.legend.get('valueToShowWhenCollapsed').replace('nearest', '')
|
||||
}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded.">Show when expanded:</div>
|
||||
<div class="grid-cell value comma-list">
|
||||
<span ng-if="config.legend.get('showTimestampWhenExpanded')">Timestamp</span>
|
||||
<span ng-if="config.legend.get('showValueWhenExpanded')">Value</span>
|
||||
<span ng-if="config.legend.get('showMinimumWhenExpanded')">Min</span>
|
||||
<span ng-if="config.legend.get('showMaximumWhenExpanded')">Max</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,147 +19,140 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController"
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<em class="t-inspector-part-header"
|
||||
title="Display properties for this object">
|
||||
Series Options
|
||||
</em>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree l-inspector-part">
|
||||
<h2 title="Display properties for this object">Plot Series Options</h2>
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<div class="inspector-config" ng-show="series.expanded">
|
||||
<ul>
|
||||
<li>
|
||||
<label>Value:</label>
|
||||
<span class="control">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].yKey">
|
||||
<option ng-repeat="option in form.series[$index].yAxisOptions"
|
||||
value="{{option.value}}"
|
||||
ng-selected="option.value == form.series[$index].yKey">
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<mct-representation class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties" ng-show="series.expanded">
|
||||
<li class="grid-row">
|
||||
<!-- Value to be displayed -->
|
||||
<div class="grid-cell label"
|
||||
title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].yKey">
|
||||
<option ng-repeat="option in form.series[$index].yAxisOptions"
|
||||
value="{{option.value}}"
|
||||
ng-selected="option.value == form.series[$index].yKey">
|
||||
{{option.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].interpolate">
|
||||
<option value="none">None</option>
|
||||
<option value="linear">Linear interpolate</option>
|
||||
<option value="stepAfter">Step after</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Whether markers are displayed.">Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.series[$index].markers"/></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.series[$index].alarmMarkers"/></div>
|
||||
</li>
|
||||
<li class="grid-row" ng-show="form.series[$index].markers || form.series[$index].alarmMarkers">
|
||||
<div class="grid-cell label"
|
||||
title="The size of regular and alarm markers for this series.">Marker Size:</div>
|
||||
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.series[$index].markerSize"/></div>
|
||||
</li>
|
||||
<li class="grid-row"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
ng-show="form.series[$index].interpolate !== 'none' || form.series[$index].markers">
|
||||
<div class="grid-cell label"
|
||||
title="Manually set the plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="s-menu-button" ng-click="toggle.toggle()">
|
||||
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<label>Line Style:</label>
|
||||
<span class="control">
|
||||
<div class="select">
|
||||
<select ng-model="form.series[$index].interpolate">
|
||||
<option value="none">None</option>
|
||||
<option value="linear">Linear interpolate</option>
|
||||
<option value="stepAfter">Step After</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="l-inline-palette" ng-show="toggle.isActive()">
|
||||
<!-- TODO: redo this as a grid -->
|
||||
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
|
||||
<div class="l-palette-item s-palette-item"
|
||||
ng-repeat="color in group"
|
||||
xng-class="{ 'icon-check': series.get('color') === color }"
|
||||
ng-style="{ background: color.asHexString() }"
|
||||
ng-click="setColor(series, color, config.series.models.indexOf(series))">
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Show Markers</label>
|
||||
<span class="control"><input type="checkbox" ng-model="form.series[$index].markers"/></span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Show Alarm Markers</label>
|
||||
<span class="control"><input type="checkbox" ng-model="form.series[$index].alarmMarkers"/></span>
|
||||
</li>
|
||||
<li ng-show="form.series[$index].markers || form.series[$index].alarmMarkers">
|
||||
<label>Marker Size:</label>
|
||||
<span class="control"><input class="sm" type="text" ng-model="form.series[$index].markerSize"/></span>
|
||||
</li>
|
||||
<ul ng-controller="ClickAwayController as toggle" ng-show="form.series[$index].interpolate !== 'none' || form.series[$index].markers">
|
||||
<li>
|
||||
<label>Color:</label>
|
||||
<span class="control">
|
||||
<div class="s-menu-button" ng-click="toggle.toggle()">
|
||||
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li class="connects-to-previous l-inline-palette" ng-show="toggle.isActive()">
|
||||
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
|
||||
<div class="l-palette-item s-palette-item"
|
||||
ng-repeat="color in group"
|
||||
xng-class="{ 'icon-check': series.get('color') === color }"
|
||||
ng-style="{ background: color.asHexString() }"
|
||||
ng-click="setColor(series, color, config.series.models.indexOf(series))">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="grid-properties" ng-show="!!config.series.models.length">
|
||||
<ul class="l-inspector-part">
|
||||
<h2>Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Manually override how the Y axis is labeled.">Label</div>
|
||||
<div class="grid-cell value"><input class="control" type="text" ng-model="form.yAxis.label"/></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="l-inspector-part" ng-show="!(form.yAxis.key == 'enum')">
|
||||
<h2>Y Axis Scaling</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.yAxis.autoscale"/></div>
|
||||
</li>
|
||||
<li class="grid-row" ng-show="form.yAxis.autoscale">
|
||||
<div class="grid-cell label"
|
||||
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc.">
|
||||
Padding</div>
|
||||
<div class="grid-cell value">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.autoscalePadding"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<form class="inspector-config"
|
||||
ng-show="!!config.series.models.length">
|
||||
<em class="t-inspector-part-header"
|
||||
title="Options for plot axes display">
|
||||
Y Axis
|
||||
</em>
|
||||
<ul>
|
||||
<li>
|
||||
<label>Label:</label>
|
||||
<input class="control" type="text" ng-model="form.yAxis.label"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul ng-show="!(form.yAxis.key == 'enum')">
|
||||
<li class="section-header">Scaling</li>
|
||||
<li class="controls-first">
|
||||
<label>Autoscale</label>
|
||||
<span class="control">
|
||||
<input type="checkbox" ng-model="form.yAxis.autoscale"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="form-error"
|
||||
ng-show="!(form.yAxis.key == 'enum') && !form.yAxis.autoscale && validation['form.yAxis.range']">
|
||||
<ul class="l-inspector-part" ng-show="!form.yAxis.autoscale">
|
||||
<div class="grid-span-all form-error"
|
||||
ng-show="!(form.yAxis.key == 'enum') && !form.yAxis.autoscale && validation['form.yAxis.range']">
|
||||
{{ validation['form.yAxis.range'] }}
|
||||
</div>
|
||||
<li class="grid-row force-border">
|
||||
<div class="grid-cell label"
|
||||
title="Minimum Y axis value.">Minimum Value</div>
|
||||
<div class="grid-cell value">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.min"/>
|
||||
</div>
|
||||
</li>
|
||||
<li ng-show="!form.yAxis.autoscale">
|
||||
<label>Minimum:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.min"/>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-show="!form.yAxis.autoscale">
|
||||
<label>Maximum:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.range.max"/>
|
||||
</span>
|
||||
</li>
|
||||
<li ng-show="form.yAxis.autoscale">
|
||||
<label>Padding:</label>
|
||||
<span class="control">
|
||||
<input class="sm" type="text" ng-model="form.yAxis.autoscalePadding"/>
|
||||
</span>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Maximum Y axis value.">Maximum Value</div>
|
||||
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.yAxis.range.max"/></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<em class="t-inspector-part-header"
|
||||
title="Options for legend display">
|
||||
Legend
|
||||
</em>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<label>Position:</label>
|
||||
<span class="control">
|
||||
<ul class="l-inspector-part">
|
||||
<h2 title="Legend options">Legend</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.legend.position">
|
||||
<option value="hidden">Hidden</option>
|
||||
@ -169,61 +162,45 @@
|
||||
<option value="left">Left</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Expand by default</label>
|
||||
<span class="control">
|
||||
<input type="checkbox" ng-model="form.legend.expandByDefault"/>
|
||||
</span>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by default</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.legend.expandByDefault"/></div>
|
||||
</li>
|
||||
<li class="controls-under">
|
||||
<label>Show when collapsed:</label>
|
||||
<span class="control">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's collapsed.">When collapsed show</div>
|
||||
<div class="grid-cell value">
|
||||
<div class="select">
|
||||
<select ng-model="form.legend.valueToShowWhenCollapsed">
|
||||
<option value="none">None</option>
|
||||
<option value="nearestTimestamp">Nearest Timestamp</option>
|
||||
<option value="nearestValue">Nearest Value</option>
|
||||
<option value="min">Minimum</option>
|
||||
<option value="max">Maximum</option>
|
||||
<option value="none">nothing</option>
|
||||
<option value="nearestTimestamp">nearest timestamp</option>
|
||||
<option value="nearestValue">nearest Value</option>
|
||||
<option value="min">minimum value</option>
|
||||
<option value="max">maximum value</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="controls-under">
|
||||
<ul>
|
||||
<li><label>Show when expanded:</label></li>
|
||||
<li class="controls-first">
|
||||
<label>Nearest Timestamp</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showTimestampWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Nearest Value</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showValueWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Minimum</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showMinimumWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
<li class="controls-first">
|
||||
<label>Maximum</label>
|
||||
<span class="control">
|
||||
<input type="checkbox"
|
||||
ng-model="form.legend.showMaximumWhenExpanded"/>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="What to display in the legend when it's expanded.">When expanded show</div>
|
||||
<div class="grid-cell value">
|
||||
<ul>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showTimestampWhenExpanded"/> Nearest timestamp</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showValueWhenExpanded"/> Nearest value</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showMinimumWhenExpanded"/> Minimum value</li>
|
||||
<li><input type="checkbox"
|
||||
ng-model="form.legend.showMaximumWhenExpanded"/> Maximum value</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user