From 9d2c7a6de537b315c6f9ae056e8e3bf38f3ae6b0 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 29 Jun 2018 11:18:50 -0700 Subject: [PATCH] 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 --- .../styleguide/res/templates/controls.html | 17 +- .../templates/browse/object-properties.html | 71 ++-- .../commonUI/edit/res/templates/elements.html | 2 +- .../icomoon-project-openmct-symbols-16px.json | 210 ++++++----- .../fonts/symbols/openmct-symbols-16px.eot | Bin 17516 -> 17544 bytes .../fonts/symbols/openmct-symbols-16px.svg | 3 +- .../fonts/symbols/openmct-symbols-16px.ttf | Bin 17300 -> 17328 bytes .../fonts/symbols/openmct-symbols-16px.woff | Bin 17376 -> 17404 bytes .../general/res/sass/_archetypes.scss | 54 +++ .../commonUI/general/res/sass/_badges.scss | 16 - .../commonUI/general/res/sass/_constants.scss | 12 +- .../commonUI/general/res/sass/_global.scss | 16 +- .../commonUI/general/res/sass/_glyphs.scss | 2 + .../commonUI/general/res/sass/_inspector.scss | 134 ++++--- .../general/res/sass/controls/_buttons.scss | 3 +- .../general/res/sass/controls/_controls.scss | 96 +++-- .../general/res/sass/features/_imagery.scss | 87 +++-- .../general/res/sass/forms/_elems.scss | 29 +- .../general/res/sass/mobile/_layout.scss | 2 +- .../general/res/sass/mobile/_tree.scss | 11 - .../general/res/sass/plots/_plots-main.scss | 15 - .../general/res/sass/search/_search.scss | 5 +- .../general/res/sass/user-environ/_frame.scss | 37 +- .../res/sass/user-environ/_layout.scss | 12 +- .../res/sass/user-environ/_selecting.scss | 77 ++-- .../res/templates/controls/selector.html | 23 -- .../res/templates/object-inspector.html | 4 +- .../themes/espresso/res/sass/_constants.scss | 6 +- .../themes/snow/res/sass/_constants.scss | 6 +- .../conductor/core/res/sass/_constants.scss | 4 +- .../core/res/sass/_time-conductor-base.scss | 26 +- .../core/res/templates/time-conductor.html | 2 +- .../core/src/ui/ConductorAxisController.js | 5 +- .../imagery/res/templates/imagery.html | 15 +- .../features/layout/res/templates/frame.html | 4 +- .../res/templates/table-options-edit.html | 5 +- .../timeline/res/sass/_timeline-thematic.scss | 9 +- .../timeline/res/templates/timeline.html | 34 +- platform/forms/res/templates/form.html | 4 +- platform/search/res/templates/search.html | 6 +- src/plugins/plot/res/templates/mct-plot.html | 26 +- .../res/templates/plot-options-browse.html | 232 ++++++------ .../plot/res/templates/plot-options-edit.html | 335 ++++++++---------- 43 files changed, 873 insertions(+), 784 deletions(-) diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html index 8ed9bcc97d..a29f82586d 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -149,12 +149,21 @@

Local Controls

-

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.

+

Local controls are typically buttons and selects that provide actions in close proximity to a component.

+

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 .has-local-controls to the element that should be aware of the hover and ensure that element encloses .h-local-controls.

-
Hover over me -
+
+ Some content in here +
- + +
+
+
+ Hover here +
+ +
diff --git a/platform/commonUI/browse/res/templates/browse/object-properties.html b/platform/commonUI/browse/res/templates/browse/object-properties.html index 5b79c6451c..2711c85704 100644 --- a/platform/commonUI/browse/res/templates/browse/object-properties.html +++ b/platform/commonUI/browse/res/templates/browse/object-properties.html @@ -19,41 +19,46 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
    -
  • - Properties -
    -
    {{ data.name }}
    -
    {{ data.value }}
    +
    +
      +

      Properties

      +
    • +
      {{ data.name }}
      +
      {{ data.value }}
      +
      • +
    + +
      +

      Location

      +
    • +
      This Link
      +
      +
      + + +
      • -
    • - Location -
      This Object
      - - - - -
      • -
    • -
      Object's Original
      - - - - +
    • +
      Original
      +
      +
      + + +
      +
    diff --git a/platform/commonUI/edit/res/templates/elements.html b/platform/commonUI/edit/res/templates/elements.html index e222a73287..80a35d00be 100644 --- a/platform/commonUI/edit/res/templates/elements.html +++ b/platform/commonUI/edit/res/templates/elements.html @@ -24,7 +24,7 @@ class="flex-elem holder" ng-model="filterBy"> -
    +
    • diff --git a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json index 562f236316..eaef303c41 100644 --- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json +++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json @@ -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": [ + {}, + {}, + {} + ] } }, { diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot index c40c2939f545a5a1603e7d13a178fb084eb3319c..b451c040789806ec93e82ccab178dcf1df0e093b 100755 GIT binary patch delta 587 zcmXAlL1@!Z9LE2z$xO1OXZl>Dym%hLAtpeDJ04H8#$1`Kpdi(|;5e0ywS=`_n>=Dda z%=@$XsbXV@-Nt+ifHZRx7c#4fZ@&Qa^EhwiGsOa2gL?oc)0l%-GWqe??tzP#bNG!= zVPbL$7@WYVN@orXW8Nk;(rX&F`BE=#g+NvSWkVlEvM2$41gW6B=no--sDtR^$SCR< zdIPDWPNPqQOz}Om(;Y%$mv*|NNbJ&1_YxAj^f3BKAoT&}uH8q#_-io@#sWNoKq%8_ z&k^enumJTfWs!G)&H|(3EjSPXoaTqHhhy|P3s=47Jrnk?FApz`I{JQth#h>s3_imj z@}H(F86(qXI%yK4zLC61N^5)CoXSPG6j$TV@kM@-f6ea*hA=BU7n;J4?t$(VF(@7v zFN^oZwxmk^(pl+|^j7+6@3&WEmmHNBZziyRW++M%*Z_iupRUWsi0vN}M31=u delta 580 zcmeC^WPH=X$eQEAz%XSZt2vA6OVvpe9dqmN2Z>|%KI_{15*V9gY|-p)Wj6Q zKHu*Q40aL>3=C!&KmqncEG9sH0FbYeky}!+FO+2kkYB>Uz<41iKRNNr zfwTha|A(pLx40;uOLWo9FPX;6$I(c0MbCcf*^Z~7#KHuG0*1R%qTdS z!|4A376#@6K$o&Ja5FFnD+(%#LNNmi!yh-u&CXgR%Y{I}5uMyBYf&4nK}8jy8^U94|OcIP*AH za314)z-7a=fm?`Mk2{Wg8utetHXbV;51vIlJ9y6VTJg5 + @@ -57,7 +58,7 @@ - + diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf index c7cbd72c8009b8a55d33e2ac7db26ffc05c46299..39ee867c06b6110a05bbf4f6dc18c92115c86da7 100755 GIT binary patch delta 622 zcmX|7OK1~O6umDQ%uHu8nVDo_(j<}wD|J(1KpQp0BrQdxNWpfcScCnXfi*RJU{yVt!o)RM|5x@F%lnEt504Nh5e}SOJKuPG*Q^>o20nDb&|f@m!iN(OsfwAH4T$JT>Cz+T1mYjU+Dd zr6)33GNMG?g_{e{SfDu0uI2;qK9Vt(tQer%!5kn!cYqbZ3Ec_y0=uDuU_Y=QItGpa zhoSpOR?$aoW(UE@s?F>W7+JNMJp)Eo-29vy!$WC{Hy5pD2&?05}!n{xyezY8ESronE z0dZWsCpIKa>Xinh$I=_=v$@w?kZrPGo|9k7tCpapY*|+d%8D9RPpSp=o%&5vw2(He zUD4ia8`ddn-PU8frTg@LeNJE0*X+Fgvi)JezO+5<;2mYB;=JJ8Y`x#Q>Y8@_bO+tn fJUcu&&vVZgVijfF9 zi7A48zTX)b>?DBlW*I;M_CqWtKz;y_uac2lQn4?TWd)F50yOVJPJVLYy#wdBFfcf{ z0OeohCRP+MG%?I$U~n`5@)hzDb5kYEf2pMb1%L)HDHY@wmoP8`r5Kz`ChpkCXgE2G zv9sO~$X8Oj63EsC(h5MV31piCX#*g(1hO50v;z=( z0NLIQe1br81VMU3fHY9AAV_ZGv0 z2Id1m7qT;OGcX7%3Mz_1F#`+3A2?<{@SmXpj2Je*lJHZNnWXwsHJ;z*D+4zR&`bt~ z>*g)HVf5q>J9Ea8$vt+HH!ItBFxJ0gXJMCOH)Ef};m481(Z;ck;{~S)XCCJY&SRVp zxNNvKa0_wkamR5_s+Lp;y9r!Y4#5M0!NUL|sIiL^p}v6a6DrB{oOwn1*#yZhr6(2_FfcIf0SaM4F(3r zDy3cQl^FO07=V}w$W{f?EI`Z&WNQFv0U(wHvh{$p z0uXBg*%mEr`; zlNp^h2iSKr*56?J!!E?G!S2GoiX(=jf@2ED9*%FEPMkHI+c>XqzT@)Z+Q+THZN;6% zy@>k{j}VU=PYBOCo+CWBc-?p>@QLsl@b&TS;=9Lh!M}?Cjlcwf8-jL%ae@;BPY6B{ z5)iTxN)hT1x*+sTxJvknh>OS!Q65h<|fBDCIE7*mk0m= delta 630 zcmey<&iJ66QLNnG&5ePP0SKHQFmQwEDGW@LA3BRo)KRU!nv_Y9yQP;3s6uL8pChgeK9a!V?J zVh0!)7%zbEzEGAGIr+&zbq*7NYF>fxy#wdBOj z63EsC(h5MV31piCX#*g(1hO50v;z=(0NLIQe1br81VMU3fHY9AAV_ZJkXVJoaCs3;1>3@i+P;F$Tqe})Dy zV%TgZ>8C0)N%f^_JipCX25uIhnG6iq&0BWE=*bK0%o$52->{p!Ip4m6vHl%93%eA% z8T%X#KaMPpHjZ^1FE~v&^Eg*<9^-t#Wy7_BTZmhaJC1uA_Xi#}9xEOXo<%%6c+T-! z@wV`B@Tu@M@vY;##IM6YkN<%{i@+H{Bf%iS7QsD&H-uP(41^+tYJ`pmy%Nq7J|SWu z(jzJ+>LS`Cx=Hk&=pV5vu{mPLG{jTH|47V}WRWbAd?z(a>XLMU^b;8!nL1e^*&Nwr QvcO0Nr>~OD^Bm)t07+PpO8@`> diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index eb0dea253e..4a7eae8d8e 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -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; + } + } +} diff --git a/platform/commonUI/general/res/sass/_badges.scss b/platform/commonUI/general/res/sass/_badges.scss index 0f1bfbd3ae..7b7dcd7082 100644 --- a/platform/commonUI/general/res/sass/_badges.scss +++ b/platform/commonUI/general/res/sass/_badges.scss @@ -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; } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 4d603e13e7..ec52e2b56f 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -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//css/ directory diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index b6748847fc..d2e58072d9 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index 57c881812b..bc15f703e9 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -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); } diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss index c76d742ebb..2fbf24ca50 100644 --- a/platform/commonUI/general/res/sass/_inspector.scss +++ b/platform/commonUI/general/res/sass/_inspector.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index c1d19d18e7..e4afc0f295 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 1fa5a8a7dc..7e0d7dd843 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -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); } } diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index 4312546585..857ef23522 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index a780603216..c9b3a0daf7 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -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; } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 169a0136e9..07e64ae2af 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -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 diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 26e91031c8..2afd2a1185 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 62e2ac2948..e78e83e525 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 26f18cc944..929c66857f 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 24d7e652f6..10f959c5fe 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 29af0a8a4d..ba4c87518e 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -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; } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_selecting.scss b/platform/commonUI/general/res/sass/user-environ/_selecting.scss index 39017a280e..652e4e77f3 100644 --- a/platform/commonUI/general/res/sass/user-environ/_selecting.scss +++ b/platform/commonUI/general/res/sass/user-environ/_selecting.scss @@ -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. } } diff --git a/platform/commonUI/general/res/templates/controls/selector.html b/platform/commonUI/general/res/templates/controls/selector.html index 24b3276151..ce34507883 100644 --- a/platform/commonUI/general/res/templates/controls/selector.html +++ b/platform/commonUI/general/res/templates/controls/selector.html @@ -23,17 +23,6 @@ ng-controller="SelectorController as selector">
      Available
      - -
      Selected
      - -
      • diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html index cf0f87f023..71bffd5f9a 100644 --- a/platform/commonUI/general/res/templates/object-inspector.html +++ b/platform/commonUI/general/res/templates/object-inspector.html @@ -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">
      - Elements +

      Elements

      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; } } } diff --git a/platform/features/conductor/core/res/templates/time-conductor.html b/platform/features/conductor/core/res/templates/time-conductor.html index d04acfde65..46b2ac3293 100644 --- a/platform/features/conductor/core/res/templates/time-conductor.html +++ b/platform/features/conductor/core/res/templates/time-conductor.html @@ -77,7 +77,7 @@ - +
      diff --git a/platform/features/conductor/core/src/ui/ConductorAxisController.js b/platform/features/conductor/core/src/ui/ConductorAxisController.js index 6afa25331f..8b8fd3baa1 100644 --- a/platform/features/conductor/core/src/ui/ConductorAxisController.js +++ b/platform/features/conductor/core/src/ui/ConductorAxisController.js @@ -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()); diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html index 8dfb4964b4..5522ba5e03 100644 --- a/platform/features/imagery/res/templates/imagery.html +++ b/platform/features/imagery/res/templates/imagery.html @@ -1,10 +1,9 @@
      -
      -
      +
      {{imagery.getTime()}}
      -
      +
      - - diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html index 2d69400f95..96d24d4ab0 100644 --- a/platform/features/layout/res/templates/frame.html +++ b/platform/features/layout/res/templates/frame.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
      +
      -
      +
      - Table Options + class="flex-elem grows l-inspector-part"> + class="flex-elem no-margin">
      diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index df813272f9..4029876d55 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -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 { diff --git a/platform/features/timeline/res/templates/timeline.html b/platform/features/timeline/res/templates/timeline.html index 9f3fd93e26..8fe2ec4312 100644 --- a/platform/features/timeline/res/templates/timeline.html +++ b/platform/features/timeline/res/templates/timeline.html @@ -106,30 +106,32 @@
      -
      +
      - - +
      + + - - + + - - + + +
      diff --git a/platform/forms/res/templates/form.html b/platform/forms/res/templates/form.html index 09c6b7ebc8..3cc7d21a45 100644 --- a/platform/forms/res/templates/form.html +++ b/platform/forms/res/templates/form.html @@ -22,9 +22,9 @@
      -
      +

      {{section.name}} -

      + @@ -52,7 +52,7 @@
      + ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"> Filtered by: {{ ngModel.filtersString }}
      @@ -65,7 +65,7 @@
      + ng-class="{invisible: !(loading || results.length > 0), loading: loading}"> -
      - - - - - - - +
      +
      + + + + +
      • +
    +
+
+
    +

    Y Axis

    +
  • +
    Label
    +
    {{ config.yAxis.get('label') ? config.yAxis.get('label') : "Not defined" }}
    +
    • +
  • +
    Autoscale
    +
    + {{ config.yAxis.get('autoscale') ? "Enabled: " : "Disabled" }} + {{ config.yAxis.get('autoscale') ? (config.yAxis.get('autoscalePadding')) : ""}} +
    +
    • +
  • +
    Minimum value
    +
    {{ config.yAxis.get('range').min }}
    +
    • +
  • +
    Maximum value
    +
    {{ config.yAxis.get('range').max }}
    +
    • +
+
    +

    Legend

    +
  • +
    Position
    +
    {{ config.legend.get('position') }}
    +
    • +
  • +
    Expand by Default
    +
    {{ config.legend.get('expandByDefault') ? "Yes" : "No" }}
    +
    • +
  • +
    Show when collapsed:
    +
    {{ + config.legend.get('valueToShowWhenCollapsed').replace('nearest', '') + }} +
    +
    • +
  • +
    Show when expanded:
    +
    + Timestamp + Value + Min + Max +
    +
    • +
+
diff --git a/src/plugins/plot/res/templates/plot-options-edit.html b/src/plugins/plot/res/templates/plot-options-edit.html index 4df65887c1..16e833735f 100644 --- a/src/plugins/plot/res/templates/plot-options-edit.html +++ b/src/plugins/plot/res/templates/plot-options-edit.html @@ -19,147 +19,140 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
- - Series Options - -
    -
      -
    • - - - - - +
      +
        +

        Plot Series Options

        +
      • + + -
        -
          -
        • - - -
          - -
          + + +           +
            +
          • + +
            Value
            +
            +
            + +
            +
            +
            • +
          • +
            Line Style
            +
            +
            + +
            +
            +
            • +
          • +
            Markers
            +
            +
            • +
          • +
            Alarm Markers
            +
            +
            • +
          • +
            Marker Size:
            +
            +
            • +
          • +
            Color
            +
            +
            + -
            • -
          • - - -
            - +
            +
            + +
            +
            - -
            • -
          • - - -
            • -
          • - - -
            • -
          • - - -
            • -
              -
            • - - -
              - - -
              -               -
              • -
            • -
              -
              -
              -
              -
              • - -
            -
          +
        +
      +
+ + + + +
+
    +

    Y Axis

    +
  • +
    Label
    +
    +
    • +
+
    +

    Y Axis Scaling

    +
  • +
    Autoscale
    +
    +
    • +
  • +
    + Padding
    +
    +
- - - - Y Axis - -
    -
  • - - -
    • -
-
    -
  • Scaling
    • -
  • - - - - -
    • -
  • +
      +
      {{ validation['form.yAxis.range'] }} +
      +
    • +
      Minimum Value
      +
      + +
      • -
    • - - - - -
      • -
    • - - - - -
      • -
    • - - - - +
    • +
      Maximum Value
      +
    - - - Legend - - -
      -
    • - - +
        +

        Legend

        +
      • +
        Position
        +
        - +
        • -
      • - - - - +
      • +
        Expand by default
        +
        • -
      • - - +
      • +
        When collapsed show
        +
        - +
        • -
      • -
          -
          • -
        • - - - - -
          • -
        • - - - - -
          • -
        • - - - - -
          • -
        • - - - - -
          • -
        +
      • +
        When expanded show
        +
        +
          +
        • Nearest timestamp
          • +
        • Nearest value
          • +
        • Minimum value
          • +
        • Maximum value
          • +
        + +
      - +