diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js index ada74ccad0..11533197c8 100644 --- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js @@ -155,11 +155,11 @@ test.describe('Tagging in Notebooks @addInit', () => { // Fill [aria-label="OpenMCT Search"] input[type="search"] await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Unnamed'); - await expect(page.locator('text=No matching results.')).toBeVisible(); + await expect(page.locator('text=No results found')).toBeVisible(); await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sci'); - await expect(page.locator('text=No matching results.')).toBeVisible(); + await expect(page.locator('text=No results found')).toBeVisible(); await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('dri'); - await expect(page.locator('text=No matching results.')).toBeVisible(); + await expect(page.locator('text=No results found')).toBeVisible(); }); test('Tags persist across reload', async ({ page }) => { //Go to baseURL diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin index 01850a3bc4..d6d4dd21e5 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-darwin differ diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png index 7fb1ec390d..4a882660e0 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png differ diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin index 75b1c4d953..ef5455e5c4 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-darwin differ diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png index 031025d8e0..ffdedffd2b 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png differ diff --git a/e2e/tests/functional/search.e2e.spec.js b/e2e/tests/functional/search.e2e.spec.js index b654f44d10..a944599691 100644 --- a/e2e/tests/functional/search.e2e.spec.js +++ b/e2e/tests/functional/search.e2e.spec.js @@ -111,7 +111,7 @@ test.describe("Search Tests @unstable", () => { expect(await searchResults.count()).toBe(0); // Verify proper message appears - await expect(page.locator('text=No matching results.')).toBeVisible(); + await expect(page.locator('text=No results found')).toBeVisible(); }); test('Validate single object in search result @couchdb', async ({ page }) => { @@ -220,7 +220,7 @@ async function createObjectsForSearch(page, myItemsFolderName) { ]); await page.locator('button:has-text("Create")').click(); - await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click(); + await page.locator('li[title="A digital clock that uses system time and supports a variety of display formats and timezones."]').click(); await Promise.all([ page.waitForNavigation(), await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock A'), @@ -229,7 +229,7 @@ async function createObjectsForSearch(page, myItemsFolderName) { ]); await page.locator('button:has-text("Create")').click(); - await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click(); + await page.locator('li[title="A digital clock that uses system time and supports a variety of display formats and timezones."]').click(); await Promise.all([ page.waitForNavigation(), await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock B'), @@ -238,7 +238,7 @@ async function createObjectsForSearch(page, myItemsFolderName) { ]); await page.locator('button:has-text("Create")').click(); - await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click(); + await page.locator('li[title="A digital clock that uses system time and supports a variety of display formats and timezones."]').click(); await Promise.all([ page.waitForNavigation(), await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock C'), @@ -247,7 +247,7 @@ async function createObjectsForSearch(page, myItemsFolderName) { ]); await page.locator('button:has-text("Create")').click(); - await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click(); + await page.locator('li[title="A digital clock that uses system time and supports a variety of display formats and timezones."]').click(); await Promise.all([ page.waitForNavigation(), await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock D'), diff --git a/example/generator/plugin.js b/example/generator/plugin.js index 8f820e16fd..7444e1b9cd 100644 --- a/example/generator/plugin.js +++ b/example/generator/plugin.js @@ -36,7 +36,7 @@ define([ openmct.types.addType("example.state-generator", { name: "State Generator", - description: "For development use. Generates test enumerated telemetry by cycling through a given set of states", + description: "For development use. Generates example enumerated telemetry by cycling through a given set of states.", cssClass: "icon-generator-telemetry", creatable: true, form: [ diff --git a/src/api/forms/FormsAPI.js b/src/api/forms/FormsAPI.js index f6cefed4d0..c0bdc78c65 100644 --- a/src/api/forms/FormsAPI.js +++ b/src/api/forms/FormsAPI.js @@ -139,7 +139,7 @@ export default class FormsAPI extends EventEmitter { } else { overlay = self.openmct.overlays.overlay({ element: vm.$el, - size: 'small', + size: 'dialog', onDestroy: () => vm.$destroy() }); } diff --git a/src/api/forms/components/controls/Datetime.vue b/src/api/forms/components/controls/Datetime.vue index 5c6bee75dd..fa82a34155 100644 --- a/src/api/forms/components/controls/Datetime.vue +++ b/src/api/forms/components/controls/Datetime.vue @@ -32,53 +32,49 @@ prevent class="u-contents" > -
- -
-
- -
-
- -
-
- -
-
+ + + + +
UTC
diff --git a/src/api/overlays/Overlay.js b/src/api/overlays/Overlay.js index efc4ae22e8..c63285a2e8 100644 --- a/src/api/overlays/Overlay.js +++ b/src/api/overlays/Overlay.js @@ -6,7 +6,8 @@ const cssClasses = { large: 'l-overlay-large', small: 'l-overlay-small', fit: 'l-overlay-fit', - fullscreen: 'l-overlay-fullscreen' + fullscreen: 'l-overlay-fullscreen', + dialog: 'l-overlay-dialog' }; class Overlay extends EventEmitter { diff --git a/src/api/overlays/components/overlay-component.scss b/src/api/overlays/components/overlay-component.scss index 419d220487..67838d97d8 100644 --- a/src/api/overlays/components/overlay-component.scss +++ b/src/api/overlays/components/overlay-component.scss @@ -1,4 +1,4 @@ -@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) { +@mixin overlaySizing($marginTB: auto, $marginLR: auto, $width: auto, $height: auto) { position: absolute; top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR; width: $width; @@ -98,6 +98,7 @@ body.desktop { // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element. .l-overlay-large, .l-overlay-small, + .l-overlay-dialog, .l-overlay-fit { .c-overlay__outer { border-radius: $overlayCr; @@ -108,7 +109,7 @@ body.desktop { .l-overlay-fullscreen { // Used by About > Licenses display .c-overlay__outer { - @include overlaySizing($overlayOuterMarginFullscreen); + @include overlaySizing(nth($overlayOuterMarginFullscreen, 1), nth($overlayOuterMarginFullscreen, 2)); } } @@ -119,7 +120,7 @@ body.desktop { $lrPad: $pad; .c-overlay { &__outer { - @include overlaySizing($overlayOuterMarginLarge); + @include overlaySizing(nth($overlayOuterMarginLarge, 1), nth($overlayOuterMarginLarge, 2)); padding: $tbPad $lrPad; } @@ -137,14 +138,20 @@ body.desktop { .l-overlay-small { .c-overlay__outer { - @include overlaySizing($overlayOuterMarginDialog); + @include overlaySizing(nth($overlayOuterMarginSmall, 1), nth($overlayOuterMarginSmall, 2)); + } + } + + .l-overlay-dialog { + .c-overlay__outer { + @include overlaySizing(nth($overlayOuterMarginDialog, 1), nth($overlayOuterMarginDialog, 2)); } } .t-dialog-sm .l-overlay-small, // Legacy dialog support .l-overlay-fit { .c-overlay__outer { - @include overlaySizing(auto); + @include overlaySizing(auto, auto); top: 50%; left: 50%; transform: translate(-50%, -50%); diff --git a/src/plugins/LADTable/plugin.js b/src/plugins/LADTable/plugin.js index e686ce9a80..5be33faa53 100644 --- a/src/plugins/LADTable/plugin.js +++ b/src/plugins/LADTable/plugin.js @@ -32,7 +32,7 @@ export default function plugin() { openmct.types.addType('LadTable', { name: "LAD Table", creatable: true, - description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.", + description: "Display the current value for one or more telemetry end points in a fixed table. Each row is a telemetry end point.", cssClass: 'icon-tabular-lad', initialize(domainObject) { domainObject.composition = []; @@ -42,7 +42,7 @@ export default function plugin() { openmct.types.addType('LadTableSet', { name: "LAD Table Set", creatable: true, - description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.", + description: "Group LAD Tables together into a single view with sub-headers.", cssClass: 'icon-tabular-lad-set', initialize(domainObject) { domainObject.composition = []; diff --git a/src/plugins/clock/plugin.js b/src/plugins/clock/plugin.js index ab477357bb..0965985a7f 100644 --- a/src/plugins/clock/plugin.js +++ b/src/plugins/clock/plugin.js @@ -32,7 +32,7 @@ export default function ClockPlugin(options) { const CLOCK_INDICATOR_FORMAT = 'YYYY/MM/DD HH:mm:ss'; openmct.types.addType('clock', { name: 'Clock', - description: 'A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.', + description: 'A digital clock that uses system time and supports a variety of display formats and timezones.', creatable: true, cssClass: 'icon-clock', initialize: function (domainObject) { diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js index 5bcf3ee45d..9bcd7facfb 100644 --- a/src/plugins/displayLayout/DisplayLayoutToolbar.js +++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js @@ -93,7 +93,7 @@ define(['lodash'], function (_) { 'table': { value: 'table', name: 'Table', - class: 'icon-tabular-realtime' + class: 'icon-tabular-scrolling' } }; const APPLICABLE_VIEWS = { diff --git a/src/plugins/displayLayout/DrawingObjectTypes.js b/src/plugins/displayLayout/DrawingObjectTypes.js new file mode 100644 index 0000000000..9b34e808c9 --- /dev/null +++ b/src/plugins/displayLayout/DrawingObjectTypes.js @@ -0,0 +1,34 @@ +const displayLayoutDrawingObjectTypes = { + 'box-view': { + name: "Box", + creatable: false, + description: 'A rectangle shape.', + cssClass: 'icon-box-round-corners' + }, + 'ellipse-view': { + name: "Ellipse", + creatable: false, + description: 'A ellipse shape.', + cssClass: 'icon-circle' + }, + 'line-view': { + name: "Line", + creatable: false, + description: 'A line.', + cssClass: 'icon-line-horz' + }, + 'text-view': { + name: "Text", + creatable: false, + description: 'An editable text box.', + cssClass: 'icon-font' + }, + 'image-view': { + name: "Image", + creatable: false, + description: 'An image.', + cssClass: 'icon-image' + } +}; + +export default displayLayoutDrawingObjectTypes; diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss index 656a535c8f..a80f587fc4 100644 --- a/src/plugins/displayLayout/components/layout-frame.scss +++ b/src/plugins/displayLayout/components/layout-frame.scss @@ -74,14 +74,15 @@ transition-delay: $moveBarOutDelay; @include userSelectNone(); background: $editFrameMovebarColorBg; - box-shadow: rgba(black, 0.2) 0 1px; + box-shadow: rgba(black, 0.3) 0 2px; bottom: auto; display: block; height: 0; // Height is set on hover below - opacity: 0.8; + opacity: 0.9; max-height: 100%; overflow: hidden; text-align: center; + z-index: 10; &:before { // Grippy @@ -104,7 +105,6 @@ > .c-so-view.has-complex-content { transition: $transIn; transition-delay: 0s; - padding-top: $editFrameMovebarH + $interiorMarginSm; > .c-so-view__local-controls { transform: translateY($editFrameMovebarH); diff --git a/src/plugins/displayLayout/components/telemetry-view.scss b/src/plugins/displayLayout/components/telemetry-view.scss index 8b73d118a0..b1dc92c1e4 100644 --- a/src/plugins/displayLayout/components/telemetry-view.scss +++ b/src/plugins/displayLayout/components/telemetry-view.scss @@ -4,7 +4,7 @@ > * { // Label and value holders - flex: 1 1 auto; + flex: 1 1 50%; display: flex; flex-direction: row; align-items: center; diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js index 1d949e32ca..ad99fc47b0 100644 --- a/src/plugins/displayLayout/plugin.js +++ b/src/plugins/displayLayout/plugin.js @@ -25,6 +25,7 @@ import CopyToClipboardAction from './actions/CopyToClipboardAction'; import DisplayLayout from './components/DisplayLayout.vue'; import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'; import DisplayLayoutType from './DisplayLayoutType.js'; +import DisplayLayoutDrawingObjectTypes from './DrawingObjectTypes.js'; import objectUtils from 'objectUtils'; @@ -125,6 +126,11 @@ export default function DisplayLayoutPlugin(options) { return true; } }); + + for (const [type, definition] of Object.entries(DisplayLayoutDrawingObjectTypes)) { + openmct.types.addType(type, definition); + } + DisplayLayoutPlugin._installed = true; }; } diff --git a/src/plugins/flexibleLayout/toolbarProvider.js b/src/plugins/flexibleLayout/toolbarProvider.js index 49fdff416f..5d6663f667 100644 --- a/src/plugins/flexibleLayout/toolbarProvider.js +++ b/src/plugins/flexibleLayout/toolbarProvider.js @@ -159,7 +159,7 @@ function ToolbarProvider(openmct) { let prompt = openmct.overlays.dialog({ iconClass: 'alert', - message: 'This action will permanently delete this container from this Flexible Layout', + message: 'This action will permanently delete this container from this Flexible Layout. Do you want to continue?', buttons: [ { label: 'OK', diff --git a/src/plugins/gauge/gauge.scss b/src/plugins/gauge/gauge.scss index 96b9efbbd3..252216d3d3 100644 --- a/src/plugins/gauge/gauge.scss +++ b/src/plugins/gauge/gauge.scss @@ -52,6 +52,8 @@ $meterNeedleBorderRadius: 5px; .c-dial { max-height: 100%; max-width: 100%; + display: block; + margin: auto; // Centers SVG in container while allowing scaling &__bg { fill: $colorGaugeBg; diff --git a/src/plugins/hyperlink/plugin.js b/src/plugins/hyperlink/plugin.js index 4452a5ad4c..3d62451706 100644 --- a/src/plugins/hyperlink/plugin.js +++ b/src/plugins/hyperlink/plugin.js @@ -27,7 +27,7 @@ export default function () { openmct.types.addType('hyperlink', { name: 'Hyperlink', key: 'hyperlink', - description: 'A hyperlink to redirect to a different link', + description: 'A text element or button that links to any URL including Open MCT views.', creatable: true, cssClass: 'icon-chain-links', initialize: function (domainObject) { diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js index dd9e8a4cc0..5a60f0ea59 100644 --- a/src/plugins/tabs/plugin.js +++ b/src/plugins/tabs/plugin.js @@ -31,7 +31,7 @@ define([ openmct.types.addType('tabs', { name: "Tabs View", - description: 'Add multiple objects of any type to this view, and quickly navigate between them with tabs', + description: 'Quickly navigate between multiple objects of any type using tabs.', creatable: true, cssClass: 'icon-tabs-view', initialize(domainObject) { diff --git a/src/plugins/telemetryTable/TelemetryTableType.js b/src/plugins/telemetryTable/TelemetryTableType.js index 3d610a9ae5..af4888f5bb 100644 --- a/src/plugins/telemetryTable/TelemetryTableType.js +++ b/src/plugins/telemetryTable/TelemetryTableType.js @@ -23,9 +23,9 @@ define(function () { return { name: 'Telemetry Table', - description: 'Display telemetry values for the current time bounds in tabular form. Supports filtering and sorting.', + description: 'Display values for one or more telemetry end points in a scrolling table. Each row is a time-stamped value.', creatable: true, - cssClass: 'icon-tabular-realtime', + cssClass: 'icon-tabular-scrolling', initialize(domainObject) { domainObject.composition = []; domainObject.configuration = { diff --git a/src/plugins/telemetryTable/TelemetryTableViewProvider.js b/src/plugins/telemetryTable/TelemetryTableViewProvider.js index dd4dc0ad29..ddd257851a 100644 --- a/src/plugins/telemetryTable/TelemetryTableViewProvider.js +++ b/src/plugins/telemetryTable/TelemetryTableViewProvider.js @@ -36,7 +36,7 @@ export default function TelemetryTableViewProvider(openmct) { return { key: 'table', name: 'Telemetry Table', - cssClass: 'icon-tabular-realtime', + cssClass: 'icon-tabular-scrolling', canView(domainObject) { return domainObject.type === 'table' || hasTelemetry(domainObject); diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss index 8164a49c7d..c6db00163a 100755 --- a/src/styles/_constants.scss +++ b/src/styles/_constants.scss @@ -40,9 +40,10 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight; $menuLineH: 1.5rem; $treeItemIndent: 16px; $treeTypeIconW: 18px; -$overlayOuterMarginFullscreen: 0; -$overlayOuterMarginLarge: 10px; -$overlayOuterMarginDialog: 20%; +$overlayOuterMarginFullscreen: (1%, 1%); +$overlayOuterMarginLarge: (10px, 10px); +$overlayOuterMarginSmall: (30%, 20%); +$overlayOuterMarginDialog: (5%, 20%); $overlayInnerMargin: 25px; $mainViewPad: 0px; $treeNavArrowD: 20px; @@ -302,7 +303,7 @@ $bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www $bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e"); $bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23000000' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e"); $bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23000000' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23000000' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e"); -$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e"); +$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 0H64A64.19 64.19 0 0 0 0 64v384a64.19 64.19 0 0 0 64 64h384a64.19 64.19 0 0 0 64-64V64a64.19 64.19 0 0 0-64-64Zm-64 128v96h-96v-96Zm-96 128h96v96h-96Zm-32 96h-96v-96h96Zm0-224v96h-96v-96Zm-224 0h96v96H32Zm0 128h96v96H32Zm32 224a32.2 32.2 0 0 1-32-32v-64h96v96Zm96 0v-96h96v96Zm192 0h-64v-96h96v96Zm118.57-9.43A31.74 31.74 0 0 1 448 480h-32v-32h64a31.74 31.74 0 0 1-9.43 22.57ZM480 384h-64V128h64Z'/%3e%3c/svg%3e"); $bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e"); $bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 160V96h128v64Zm64 64h192v64H128Zm320 192H224v-64h224Zm0-128h-64v-64h64Zm0-128H256V96h192Z'/%3e%3c/svg%3e"); $bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e"); @@ -325,3 +326,4 @@ $bg-icon-plan: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3 $bg-icon-timelist: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M448 0H64A64.19 64.19 0 0 0 0 64v384a64.19 64.19 0 0 0 64 64h384a64.19 64.19 0 0 0 64-64V64a64.19 64.19 0 0 0-64-64ZM213.47 266.73a24 24 0 0 1-32.2 10.74L104 238.83V128a24 24 0 0 1 48 0v81.17l50.73 25.36a24 24 0 0 1 10.74 32.2ZM448 448H288v-64h160Zm0-96H288v-64h160Zm0-96H288v-64h160Zm0-96H288V96h160Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e"); $bg-icon-plot-scatter: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 176a48 48 0 1 1 48 48 48 48 0 0 1-48-48Zm80 240a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128-96a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm0-160a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128 256a48 48 0 1 1 48-48 48 48 0 0 1-48 48Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e"); $bg-icon-notebook-shift-log: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 55.36c0-39.95-27.69-63.66-61.54-52.68L0 128h448V55.36ZM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64ZM128 416H64v-64h64v64Zm0-96H64v-64h64v64Zm320 96H192v-64h256v64Zm0-96H192v-64h256v64Z'/%3e%3c/svg%3e"); +$bg-icon-telemetry-aggregate: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 3'%3e%3cpath d='M39 197.72c7-20.72 18.74-50.4 34.6-74.18C92.91 94.65 114.79 80 138.67 80s45.75 14.65 65 43.54c15.86 23.78 27.57 53.46 34.6 74.18 15.44 45.48 31.56 67.49 39 73.27 7.47-5.78 23.6-27.79 39-73.27 7-20.72 18.74-50.4 34.61-74.18q13.9-20.85 29.56-31.75A207.78 207.78 0 0 0 208 0C93.12 0 0 93.12 0 208a208.14 208.14 0 0 0 7.39 55.09c8.39-10.87 20.2-31.67 31.61-65.37Z'/%3e%3cpath d='M377 218.28c-7 20.72-18.74 50.4-34.6 74.18-19.28 28.89-41.16 43.54-65 43.54s-45.75-14.65-65-43.54c-15.86-23.78-27.57-53.46-34.6-74.18-15.44-45.48-31.57-67.49-39-73.27-7.47 5.78-23.6 27.79-39 73.27-7.19 20.72-18.9 50.4-34.8 74.18q-13.9 20.85-29.56 31.75A207.78 207.78 0 0 0 208 416c114.88 0 208-93.12 208-208a208.14 208.14 0 0 0-7.39-55.09c-8.39 10.87-20.2 31.67-31.61 65.37Z'/%3e%3cpath d='M460.78 167.31A258.4 258.4 0 0 1 464 208a255.84 255.84 0 0 1-256 256 258.4 258.4 0 0 1-40.69-3.22A207.23 207.23 0 0 0 304 512c114.88 0 208-93.12 208-208a207.23 207.23 0 0 0-51.22-136.69Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index c986925783..318e58b580 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -342,16 +342,17 @@ input[type=password], input[type=date], textarea { @include reactive-input(); - padding: $inputTextP; &.numeric { text-align: right; } } -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { - margin-right: -5px !important; - margin-top: -1px !important; +input[type=text], +input[type=search], +input[type=password], +input[type=date], +textarea { + padding: $inputTextP; } .c-input { diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 08a4ceca5c..1cf33a6dfb 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -44,26 +44,33 @@ } &__contents { + display: flex; + flex-direction: column; flex: 1 1 auto; overflow: auto; padding-right: $interiorMargin; } &__section { - display: inherit; - flex-direction: column; + display: contents; } &__row { display: flex; padding: $formTBPad 0; &:not(.first) { border-top: 1px solid $colorFormLines; } + flex: 0 0 auto; + + &.grows { + flex: 1 1 auto; + } } &__section-header { border-radius: $basicCr; background: $colorFormSectionHeaderBg; color: $colorFormSectionHeaderFg; + flex: 0 0 auto; font-size: inherit; font-weight: normal; margin: $interiorMargin 0; @@ -140,14 +147,16 @@ } &--datetime { - $size: min-content; + $size: max-content; display: grid; - grid-template-columns: repeat(5, min-content); - grid-template-rows: auto; + grid-template-columns: repeat(5, $size); + grid-template-rows: $size; grid-row-gap: 3px; grid-column-gap: $interiorMargin; + align-items: stretch; .hint { + align-self: center; opacity: 0.7; } } diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss index 866c40c401..d04205f71a 100755 --- a/src/styles/_glyphs.scss +++ b/src/styles/_glyphs.scss @@ -264,3 +264,4 @@ .bg-icon-timelist { @include glyphBg($bg-icon-timelist); } .bg-icon-plot-scatter { @include glyphBg($bg-icon-plot-scatter); } .bg-icon-notebook-shift-log { @include glyphBg($bg-icon-notebook-shift-log); } +.bg-icon-telemetry-aggregate { @include glyphBg($bg-icon-telemetry-aggregate); } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 08eafaa94e..f15af2bdfb 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -228,12 +228,12 @@ @mixin grippy($c: rgba(black, 0.5), $dir: 'x') { $deg: 90deg; - $bgSize: 2px 100%; + $bgSize: 3px 100%; @if $dir != 'x' { // Grippy texture runs 'vertically' $deg: 0deg; - $bgSize: 100% 2px; + $bgSize: 100% 3px; } background: linear-gradient($deg, diff --git a/src/styles/fonts/Open MCT Symbols 16px.json b/src/styles/fonts/Open MCT Symbols 16px.json index 11cc387378..c2df604e03 100644 --- a/src/styles/fonts/Open MCT Symbols 16px.json +++ b/src/styles/fonts/Open MCT Symbols 16px.json @@ -2,7 +2,7 @@ "metadata": { "name": "Open MCT Symbols 16px", "lastOpened": 0, - "created": 1651949568729 + "created": 1660771219523 }, "iconSets": [ { @@ -1325,7 +1325,7 @@ "name": "icon-plot-scatter", "prevSize": 16, "code": 60208, - "tempChar": "" + "tempChar": "" } ], "id": 0, @@ -3702,19 +3702,21 @@ { "id": 66, "paths": [ - "M64 0c-35.2 0-64 28.8-64 64v192h448v-256h-384z", - "M1024 256v-192c0-35.2-28.8-64-64-64h-384v256h448z", - "M0 384v192c0 35.2 28.8 64 64 64h384v-256h-448z", - "M960 640c35.2 0 64-28.8 64-64v-192h-448v256h384z", - "M512 1024l-256-256h512z" + "M896 0h-768c-70.606 0.215-127.785 57.394-128 127.979l-0 0.021v768c0.215 70.606 57.394 127.785 127.979 128l0.021 0h768c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-768c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0zM768 256v192h-192v-192zM576 512h192v192h-192zM512 704h-192v-192h192zM512 256v192h-192v-192zM64 256h192v192h-192zM64 512h192v192h-192zM128 960c-35.255-0.225-63.775-28.745-64-63.978l-0-0.022v-128h192v192zM320 960v-192h192v192zM704 960h-128v-192h192v192zM941.14 941.14c-11.511 11.644-27.483 18.856-45.139 18.86l-64.001 0v-64h128c-0.004 17.657-7.216 33.629-18.854 45.134l-0.006 0.006zM960 768h-128v-512h128z" + ], + "attrs": [ + {} ], - "attrs": [], "grid": 16, "tags": [ "icon-tabular-scrolling" ], + "isMulticolor": false, + "isMulticolor2": false, "colorPermutations": { - "12552552551": [] + "12552552551": [ + {} + ] } }, { @@ -4259,7 +4261,7 @@ } }, { - "id": 176, + "id": 185, "paths": [ "M192 0c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640c0-105.6-86.4-192-192-192zM128 352c0-53.019 42.981-96 96-96s96 42.981 96 96c0 53.019-42.981 96-96 96v0c-53.019 0-96-42.981-96-96v0zM288 832c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM544 640c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM544 320c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0zM800 832c-53.019 0-96-42.981-96-96s42.981-96 96-96c53.019 0 96 42.981 96 96v0c0 53.019-42.981 96-96 96v0z" ], diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.svg b/src/styles/fonts/Open-MCT-Symbols-16px.svg index 38ce5985a3..bb2b356589 100644 --- a/src/styles/fonts/Open-MCT-Symbols-16px.svg +++ b/src/styles/fonts/Open-MCT-Symbols-16px.svg @@ -3,173 +3,173 @@ Generated by IcoMoon - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.ttf b/src/styles/fonts/Open-MCT-Symbols-16px.ttf index 33008462f5..8e495b78ed 100644 Binary files a/src/styles/fonts/Open-MCT-Symbols-16px.ttf and b/src/styles/fonts/Open-MCT-Symbols-16px.ttf differ diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.woff b/src/styles/fonts/Open-MCT-Symbols-16px.woff index 4fbc1d1e40..6f9bdd0ccf 100644 Binary files a/src/styles/fonts/Open-MCT-Symbols-16px.woff and b/src/styles/fonts/Open-MCT-Symbols-16px.woff differ diff --git a/src/ui/inspector/ObjectName.vue b/src/ui/inspector/ObjectName.vue index 9703d4a918..57556e01f2 100644 --- a/src/ui/inspector/ObjectName.vue +++ b/src/ui/inspector/ObjectName.vue @@ -63,6 +63,7 @@ export default { return { domainObject: {}, activity: undefined, + layoutItem: undefined, keyString: undefined, multiSelect: false, itemsSelected: 0, @@ -81,6 +82,12 @@ export default { return 'icon-activity'; } + if (!this.domainObject && this.layoutItem) { + const layoutItemType = this.openmct.types.get(this.layoutItem.type); + + return layoutItemType.definition.cssClass; + } + if (this.type.definition.cssClass === undefined) { return 'icon-object'; } @@ -132,6 +139,8 @@ export default { this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier); this.status = this.openmct.status.get(this.keyString); this.statusUnsubscribe = this.openmct.status.observe(this.keyString, this.updateStatus); + } else if (selection[0][0].context.layoutItem) { + this.layoutItem = selection[0][0].context.layoutItem; } } }, diff --git a/src/ui/inspector/elements.scss b/src/ui/inspector/elements.scss index a3d4363cae..14d90b570d 100644 --- a/src/ui/inspector/elements.scss +++ b/src/ui/inspector/elements.scss @@ -18,7 +18,7 @@ } .c-grippy { - $d: 8px; + $d: 9px; flex: 0 0 auto; margin-right: $interiorMarginSm; transform: translateY(-2px); @@ -36,4 +36,4 @@ .js-last-place { height: 10px; -} \ No newline at end of file +} diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss index f708dbbedd..f9dc4d8c15 100644 --- a/src/ui/layout/layout.scss +++ b/src/ui/layout/layout.scss @@ -392,6 +392,8 @@ &__nav-to-parent-button { // This is an icon-button + margin-right: $interiorMargin; + .is-editing & { display: none; } @@ -412,7 +414,6 @@ &__object-name--w { @include headerFont(1.5em); - margin-left: $interiorMarginLg; min-width: 0; .is-status__indicator { diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss index 1f31c3c7b9..3dadf18c83 100644 --- a/src/ui/layout/mct-tree.scss +++ b/src/ui/layout/mct-tree.scss @@ -287,8 +287,10 @@ .c-selector { &.c-tree-and-search { - border: 1px solid $colorFormLines; - border-radius: $controlCr; - padding: $interiorMargin; + background: rgba($colorFormLines, 0.1); + border-radius: $basicCr; + padding: 2px; + height: 100%; + min-height: 150px; } } diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue index 9bf1b87a4d..34ed409295 100644 --- a/src/ui/layout/mct-tree.vue +++ b/src/ui/layout/mct-tree.vue @@ -5,7 +5,6 @@ :class="{ 'c-selector': isSelectorTree }" - :style="treeHeight" >
-
-
+ class="c-gsearch__result-pane-msg" + > +
Searching...
+
No matching results. + class="c-gsearch__result-pane-msg" + > +
No results found
diff --git a/src/ui/layout/search/search.scss b/src/ui/layout/search/search.scss index 49c3585a0c..e4499d83e6 100644 --- a/src/ui/layout/search/search.scss +++ b/src/ui/layout/search/search.scss @@ -66,6 +66,12 @@ &__results-section-title { @include propertiesHeader(); } + + &__result-pane-msg { + > * + * { + margin-top: $interiorMargin; + } + } } .c-gsearch-result {