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 c40c2939f5..b451c04078 100755 Binary files a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot and b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot differ diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg index ae3d015e1e..d8a4b93643 100755 --- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg +++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg @@ -39,6 +39,7 @@ + @@ -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 c7cbd72c80..39ee867c06 100755 Binary files a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf and b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf differ diff --git a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff index 949ca37b4e..94a65eb834 100755 Binary files a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff and b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff differ 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
          • +
        + +
      - +