ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-02 08:43:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Misc UI 5 (#2332)

Browse Source 
* Style fixes for Inspector and location elements

- Code cleanup;
- Remove legacy styles;

* Tab styling WIP, for VISTA Venue dialog

* Add new c-tabs styles, replaces c-compact-button

- Remove c-compact-button and mixin;
- Refactor to use c-tabs in Tabs View;
- New notched look for tabs;

* Tweaks to c-tabs

* Misc various

- Increased mouse wheel zoom and changed to use const;
- Fixed squishy grippys in Elements pool;
- Fixed Time Conductor to prevent overrunning right pane when main pane
is very small;
- Changed message text when leaving Layout editing;
- Fixed z-index problem with splitter bars and VISTA Indicator hover
bubbles;
- Restored support for legacy `l-input-lg` to allow large text input
fields in form generation;
- Modded styles in Properties dialog to fix issue with label column
colliding with inputs when the label text is long;

* Restore hover hide/show to local controls in Summary Widgets

- Also fixed rotation transition for disclosure controls;

* Refinement to overflow hidden for Time Conductor UI

* Fix Time Conductor layout in mobile

* Fix Filter tree items in Inspector

* Move .selector-list out from within .form .form-row to allow more
flexible usage;

* Significant theme updates; table layout and Summary styling added

- Reorganized status constants;
- Added base styles for selected and active styles;
- Added styling for selected and active buttons;
- c-table changed from absolute pos to relative;
- Added c-table-and-summary styling;

* Tweaks to Location component
This commit is contained in:
Charles Hacskaylo 2019-03-26 11:38:38 -07:00 committed by Andrew Henry
parent 6c479d6d59
commit c0ce448dc3
21 changed files with 382 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/filters/components/FilterObject.vue
View File

@ -5,11 +5,11 @@
<span class="c-disclosure-triangle is-enabled flex-elem"
:class="{'c-disclosure-triangle--expanded': expanded}"></span>
<div class="c-tree__item__label">
<div class="t-object-label l-flex-row flex-elem grows">
<div class="t-item-icon flex-elem"
<div class="c-object-label">
<div class="c-object-label__type-icon"
:class="objectCssClass">
</div>
<div class="t-title-label flex-elem grows">{{ filterObject.name }}</div>
<div class="c-object-label__name flex-elem grows">{{ filterObject.name }}</div>
</div>
</div>
</div>

17
src/plugins/plot/src/plot/MCTPlotController.js
View File

@ -315,6 +315,7 @@ define([
};
MCTPlotController.prototype.wheelZoom = function (event) {
const ZOOM_AMT = 0.1;
event.preventDefault();
if (!this.positionOverPlot) {
@ -349,24 +350,24 @@ define([
if (event.wheelDelta < 0) {
this.$scope.xAxis.set('displayRange', {
min: xDisplayRange.min + ((xAxisDist * 0.01) * xAxisMinDist),
max: xDisplayRange.max - ((xAxisDist * 0.01) * xAxisMaxDist)
min: xDisplayRange.min + ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
max: xDisplayRange.max - ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
});
this.$scope.yAxis.set('displayRange', {
min: yDisplayRange.min + ((yAxisDist * 0.01) * yAxisMinDist),
max: yDisplayRange.max - ((yAxisDist * 0.01) * yAxisMaxDist)
min: yDisplayRange.min + ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
max: yDisplayRange.max - ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
});
} else if (event.wheelDelta >= 0) {
this.$scope.xAxis.set('displayRange', {
min: xDisplayRange.min - ((xAxisDist * 0.01) * xAxisMinDist),
max: xDisplayRange.max + ((xAxisDist * 0.01) * xAxisMaxDist)
min: xDisplayRange.min - ((xAxisDist * ZOOM_AMT) * xAxisMinDist),
max: xDisplayRange.max + ((xAxisDist * ZOOM_AMT) * xAxisMaxDist)
});
this.$scope.yAxis.set('displayRange', {
min: yDisplayRange.min - ((yAxisDist * 0.01) * yAxisMinDist),
max: yDisplayRange.max + ((yAxisDist * 0.01) * yAxisMaxDist)
min: yDisplayRange.min - ((yAxisDist * ZOOM_AMT) * yAxisMinDist),
max: yDisplayRange.max + ((yAxisDist * ZOOM_AMT) * yAxisMaxDist)
});
}

2
src/plugins/summaryWidget/res/conditionTemplate.html
View File

@ -4,7 +4,7 @@
<span class="t-configuration"> </span>
<span class="t-value-inputs"> </span>
</span>
<span class="flex-elem local-control local-controls-hidden l-condition-action-buttons-wrapper">
<span class="flex-elem c-local-controls--show-on-hover l-condition-action-buttons-wrapper">
<a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this condition"></a>
<a class="s-icon-button icon-trash t-delete" title="Delete this condition"></a>
</span>

4
src/plugins/summaryWidget/res/ruleTemplate.html
View File

@ -1,5 +1,5 @@
<div class="c-sw-rule">
<div class="c-sw-rule__ui l-compact-form has-local-controls l-widget-rule s-widget-rule">
<div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
<div class="c-sw-rule__ui__header widget-rule-header">
<div class="c-sw-rule__grippy-wrapper">
<div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
@ -11,7 +11,7 @@
</div>
<div class="flex-elem rule-title">Default Title</div>
<div class="flex-elem rule-description grows">Rule description goes here</div>
<div class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
<div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
<a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
<a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
</div>

2
src/plugins/summaryWidget/res/testDataItemTemplate.html
View File

@ -7,7 +7,7 @@
<span class="equal-to hidden"> equal to </span>
<span class="t-value-inputs"></span>
</span>
<span class="flex-elem local-control local-controls-hidden l-widget-test-data-item-action-buttons-wrapper">
<span class="flex-elem c-local-controls--show-on-hover l-widget-test-data-item-action-buttons-wrapper">
<a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this test value"></a>
<a class="s-icon-button icon-trash t-delete" title="Delete this test value"></a>
</span>

13
src/plugins/tabs/components/tabs.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="c-tabs-view">
<div class="c-tabs-view__tabs-holder c-compact-button-holder"
<div class="c-tabs-view__tabs-holder c-tabs"
:class="{
'is-dragging': isDragging,
'is-mouse-over': allowDrop
@ -11,7 +11,7 @@
</div>
<div class="c-tabs-view__empty-message"
v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
<button class="c-tabs-view__tab c-compact-button"
<button class="c-tabs-view__tab c-tab"
v-for="(tab,index) in tabsList"
:key="index"
:class="[
@ -53,11 +53,16 @@
}
&__tabs-holder {
@include userSelectNone();
flex: 0 0 auto;
min-height: $h;
}
&__tab {
&:before {
margin-right: $interiorMarginSm;
opacity: 0.7;
}
}
&__object-holder {
flex: 1 1 auto;
display: flex;

184
src/plugins/timeConductor/Conductor.vue
View File

@ -23,73 +23,76 @@
<div class="c-conductor"
:class="[isFixed ? 'is-fixed-mode' : 'is-realtime-mode']">
<form class="u-contents" ref="conductorForm" @submit.prevent="updateTimeFromConductor">
<button class="c-input--submit" type="submit" ref="submitButton"></button>
<ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
<div class="c-conductor__time-bounds">
<button class="c-input--submit" type="submit" ref="submitButton"></button>
<ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
v-if="isFixed">
<!-- Fixed start -->
<div class="c-conductor__start-fixed__label">Start</div>
<input class="c-input--datetime"
type="text" autocorrect="off" spellcheck="false"
ref="startDate"
v-model="formattedBounds.start"
@change="validateAllBounds(); submitForm()" />
<date-picker
v-if="isFixed && isUTCBased"
:default-date-time="formattedBounds.start"
:formatter="timeFormatter"
@date-selected="startDateSelected"></date-picker>
</div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
v-if="!isFixed">
<!-- RT start -->
<div class="c-direction-indicator icon-minus"></div>
<input class="c-input--hrs-min-sec"
type="text" autocorrect="off"
ref="startOffset"
spellcheck="false"
v-model="offsets.start"
@change="validateAllOffsets(); submitForm()">
</div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
<!-- Fixed end and RT 'last update' display -->
<div class="c-conductor__end-fixed__label">
{{ isFixed ? 'End' : 'Updated' }}
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
v-if="isFixed">
<!-- Fixed start -->
<div class="c-conductor__start-fixed__label">Start</div>
<input class="c-input--datetime"
type="text" autocorrect="off" spellcheck="false"
ref="startDate"
v-model="formattedBounds.start"
@change="validateAllBounds(); submitForm()" />
<date-picker
v-if="isFixed && isUTCBased"
:default-date-time="formattedBounds.start"
:formatter="timeFormatter"
@date-selected="startDateSelected"></date-picker>
</div>
<input class="c-input--datetime"
type="text" autocorrect="off" spellcheck="false"
v-model="formattedBounds.end"
:disabled="!isFixed"
ref="endDate"
@change="validateAllBounds(); submitForm()">
<date-picker
v-if="isFixed && isUTCBased"
class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.end"
:formatter="timeFormatter"
@date-selected="endDateSelected"></date-picker>
</div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
v-if="!isFixed">
<!-- RT end -->
<div class="c-direction-indicator icon-plus"></div>
<input class="c-input--hrs-min-sec"
type="text"
autocorrect="off"
spellcheck="false"
ref="endOffset"
v-model="offsets.end"
@change="validateAllOffsets(); submitForm()">
</div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
v-if="!isFixed">
<!-- RT start -->
<div class="c-direction-indicator icon-minus"></div>
<input class="c-input--hrs-min-sec"
type="text" autocorrect="off"
ref="startOffset"
spellcheck="false"
v-model="offsets.start"
@change="validateAllOffsets(); submitForm()">
</div>
<conductor-axis
class="c-conductor__ticks"
:bounds="rawBounds"
@panAxis="setViewFromBounds"></conductor-axis>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
<!-- Fixed end and RT 'last update' display -->
<div class="c-conductor__end-fixed__label">
{{ isFixed ? 'End' : 'Updated' }}
</div>
<input class="c-input--datetime"
type="text" autocorrect="off" spellcheck="false"
v-model="formattedBounds.end"
:disabled="!isFixed"
ref="endDate"
@change="validateAllBounds(); submitForm()">
<date-picker
v-if="isFixed && isUTCBased"
class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.end"
:formatter="timeFormatter"
@date-selected="endDateSelected"></date-picker>
</div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
v-if="!isFixed">
<!-- RT end -->
<div class="c-direction-indicator icon-plus"></div>
<input class="c-input--hrs-min-sec"
type="text"
autocorrect="off"
spellcheck="false"
ref="endOffset"
v-model="offsets.end"
@change="validateAllOffsets(); submitForm()">
</div>
<conductor-axis
class="c-conductor__ticks"
:bounds="rawBounds"
@panAxis="setViewFromBounds"></conductor-axis>
</div>
<div class="c-conductor__controls">
<!-- Mode, time system menu buttons and duration slider -->
<ConductorMode class="c-conductor__mode-select"></ConductorMode>
@ -113,17 +116,18 @@
/*********************************************** CONDUCTOR LAYOUT */
.c-conductor {
display: grid;
grid-column-gap: $interiorMargin;
grid-row-gap: $interiorMargin;
align-items: center;
&__time-bounds {
display: grid;
grid-column-gap: $interiorMargin;
grid-row-gap: $interiorMargin;
align-items: center;
// Default: fixed mode, desktop
grid-template-rows: 1fr 1fr;
grid-template-columns: 20px auto 1fr auto;
grid-template-areas:
"tc-mode-icon tc-start tc-ticks tc-end"
"tc-controls tc-controls tc-controls tc-controls";
// Default: fixed mode, desktop
grid-template-rows: 1fr;
grid-template-columns: 20px auto 1fr auto;
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
overflow: hidden;
}
&__mode-icon {
grid-area: tc-mode-icon;
@ -163,10 +167,10 @@
}
&.is-realtime-mode {
grid-template-columns: 20px auto 1fr auto auto;
grid-template-areas:
"tc-mode-icon tc-start tc-ticks tc-updated tc-end"
"tc-controls tc-controls tc-controls tc-controls tc-controls";
.c-conductor__time-bounds {
grid-template-columns: 20px auto 1fr auto auto;
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
}
.c-conductor__end-fixed {
grid-area: tc-updated;
@ -174,9 +178,15 @@
}
body.phone.portrait & {
grid-row-gap: $interiorMargin;
grid-template-rows: auto auto auto;
grid-template-columns: 20px auto auto;
.c-conductor__time-bounds {
grid-row-gap: $interiorMargin;
grid-template-rows: auto auto;
grid-template-columns: 20px auto auto;
}
.c-conductor__controls {
padding-left: 25px; // Line up visually with other controls
}
&__mode-icon {
grid-row: 1;
@ -200,17 +210,19 @@
justify-content: flex-start;
}
grid-template-areas:
.c-conductor__time-bounds {
grid-template-areas:
"tc-mode-icon tc-start tc-start"
"tc-mode-icon tc-end tc-end"
"tc-mode-icon tc-controls tc-controls";
}
}
}
&.is-realtime-mode {
grid-template-areas:
.c-conductor__time-bounds {
grid-template-areas:
"tc-mode-icon tc-start tc-updated"
"tc-mode-icon tc-end tc-end"
"tc-mode-icon tc-controls tc-controls";
"tc-mode-icon tc-end tc-end";
}
.c-conductor__end-fixed {
justify-content: flex-end;

43
src/styles-new/_constants-espresso.scss
View File

@ -83,6 +83,9 @@ $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #ccc;
$colorAHov: #fff;
$filterHov: brightness(1.3); // Tree, location items
$colorSelectedBg: pushBack($colorKey, 10%);
$colorSelectedFg: pullForward($colorBodyFg, 20%);
// Layout
$shellMainPad: 4px 0;
@ -98,6 +101,20 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
$colorStatusError: #da0004;
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
$colorStatusBtnBg: #666; // Where is this used?
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// States
$colorPausedBg: #ff9900;
@ -173,6 +190,10 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorBtnActiveBg: $colorOk;
$colorBtnActiveFg: $colorOkFg;
$colorBtnSelectedBg: $colorSelectedBg;
$colorBtnSelectedFg: $colorSelectedFg;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
$colorClickIconButtonFgHov: $colorKeyHov;
@ -265,26 +286,9 @@ $colorLimitRedBg: #940000;
$colorLimitRedFg: #ffa489;
$colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: #dddddd;
$colorInfoBubbleFg: #666;
$colorInfoBubbleFg: #666;
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
@ -306,6 +310,9 @@ $colorTabHeaderFg: $colorBodyFg;
$colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
$colorSummaryBg: #2c2c2c;
$colorSummaryFg: rgba($colorBodyFg, 0.7);
$colorSummaryFgEm: $colorBodyFg;
// Plot
$colorPlotBg: rgba(black, 0.05);
@ -324,7 +331,7 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedBg: $colorSelectedBg;
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: pushBack($editUIColor, 20%);

45
src/styles-new/_constants-maelstrom.scss
View File

@ -87,6 +87,9 @@ $uiColor: #00b2ff; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #ccc;
$colorAHov: #fff;
$filterHov: brightness(1.3); // Tree, location items
$colorSelectedBg: pushBack($colorKey, 10%);
$colorSelectedFg: pullForward($colorBodyFg, 20%);
// Layout
$shellMainPad: 4px 0;
@ -102,6 +105,20 @@ $colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324de
$colorStatusError: #da0004;
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
$colorStatusBtnBg: #666; // Where is this used?
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// States
$colorPausedBg: #ff9900;
@ -177,6 +194,10 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorBtnActiveBg: $colorOk;
$colorBtnActiveFg: $colorOkFg;
$colorBtnSelectedBg: $colorSelectedBg;
$colorBtnSelectedFg: $colorSelectedFg;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
$colorClickIconButtonFgHov: $colorKeyHov;
@ -269,26 +290,9 @@ $colorLimitRedBg: #940000;
$colorLimitRedFg: #ffa489;
$colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: #dddddd;
$colorInfoBubbleFg: #666;
$colorInfoBubbleFg: #666;
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
@ -310,6 +314,9 @@ $colorTabHeaderFg: $colorBodyFg;
$colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: pushBack($colorTabHeaderFg, 10%);
$colorSummaryBg: #2c2c2c;
$colorSummaryFg: rgba($colorBodyFg, 0.7);
$colorSummaryFgEm: $colorBodyFg;
// Plot
$colorPlotBg: rgba(black, 0.05);
@ -328,7 +335,7 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedBg: $colorSelectedBg;
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
@ -375,7 +382,7 @@ $colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
// About Screen
$colorAboutLink: $colorKeySubtle;
$colorAboutLink: #9bb5ff;
// Loading
$colorLoadingFg: #776ba2;

45
src/styles-new/_constants-snow.scss
View File

@ -83,6 +83,9 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
$filterHov: brightness(1.3); // Tree, location items
$colorSelectedBg: pushBack($colorKey, 40%);
$colorSelectedFg: pullForward($colorBodyFg, 10%);
// Layout
$shellMainPad: 4px 0;
@ -98,6 +101,20 @@ $colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316de
$colorStatusError: #da0004;
$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
$colorStatusBtnBg: #666; // Where is this used?
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// States
$colorPausedBg: #ff9900;
@ -173,6 +190,10 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
$colorBtnCautionBg: #f16f6f;
$colorBtnCautionBgHov: #f1504e;
$colorBtnCautionFg: $colorBtnFg;
$colorBtnActiveBg: $colorOk;
$colorBtnActiveFg: $colorOkFg;
$colorBtnSelectedBg: $colorBtnMajorBg;
$colorBtnSelectedFg: $colorBtnMajorFg;
$colorClickIconButton: $colorKey;
$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
$colorClickIconButtonFgHov: $colorKeyHov;
@ -265,22 +286,6 @@ $colorLimitRedBg: #ff0000;
$colorLimitRedFg: #fff;
$colorLimitRedIc: #ffa99a;
// Status
$colorAlert: #ff3c00;
$colorAlertFg: #fff;
$colorWarningHi: #990000;
$colorWarningHiFg: #FF9594;
$colorWarningLo: #ff9900;
$colorWarningLoFg: #523400;
$colorDiagnostic: #a4b442;
$colorDiagnosticFg: #39461A;
$colorCommand: #3693bd;
$colorCommandFg: #fff;
$colorInfo: #2294a2;
$colorInfoFg: #fff;
$colorOk: #33cc33;
$colorOkFg: #fff;
// Bubble colors
$colorInfoBubbleBg: $colorMenuBg;
$colorInfoBubbleFg: #666;
@ -305,6 +310,9 @@ $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBorder: $colorBodyBg;
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
$colorTabGroupHeaderFg: pullForward($colorTabGroupHeaderBg, 40%);
$colorSummaryBg: #999;
$colorSummaryFg: rgba($colorBodyBg, 0.7);
$colorSummaryFgEm: white;
// Plot
$colorPlotBg: rgba(black, 0.05);
@ -323,8 +331,8 @@ $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
$colorItemTreeIcon: $colorKey; // Used
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeSelectedBg: $colorSelectedBg;
$colorItemTreeSelectedFg: $colorItemTreeHoverFg;
$colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
$colorItemTreeEditingBg: pushBack($editUIColor, 20%);
$colorItemTreeEditingFg: $editUIColor;
@ -347,6 +355,7 @@ $scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%);
// Splitter
$splitterHandleD: 2px;
$splitterD: $splitterHandleD;
$splitterHandleHitMargin: 4px;
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);

72
src/styles-new/_controls.scss
View File

@ -48,10 +48,16 @@ button {
height: $d; width: $d;
}
}
}
.c-compact-button {
@include cCompactButtons($bg: $colorBtnBg, $fg: $colorBtnFg, $bgHov: $colorBtnBgHov);
&.is-active {
background: $colorBtnActiveBg;
color: $colorBtnActiveFg;
}
&.is-selected {
background: $colorBtnSelectedBg;
color: $colorBtnSelectedFg;
}
}
/********* Icon Buttons */
@ -143,7 +149,7 @@ button {
font-family: symbolsfont;
font-size: 1rem * $s;
transform-origin: center;
transition: transform 100ms ease-in-out;
transition: $transOut;
}
}
@ -270,6 +276,63 @@ select {
}
}
/******************************************************** TABS */
.c-tabs {
// Single horizontal strip of tabs, with a bottom divider line
@include userSelectNone();
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
position: relative; // Required in case this is applied to a <ul>
&:before {
// Separator line at bottom of tabs
content: '';
display: block;
height: 1px;
width: 100%;
background: $colorBtnReverseBg;
position: absolute;
bottom: 0px;
z-index: 1;
}
}
.c-tab {
// Used in Tab View, generic tabs
background: $colorBtnBg;
color: $colorBtnFg;
cursor: pointer;
display: flex;
align-items: center;
flex: 1 1 auto;
margin: 1px 1px 0 0;
padding: $interiorMargin $interiorMarginLg;
white-space: nowrap;
--notchSize: 7px;
clip-path:
polygon(
0% 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
100% 100%,
0% 100%
);
@include hover() {
background: $colorBtnBgHov;
}
&.is-current {
background: $colorBtnReverseBg;
color: $colorBtnReverseFg;
pointer-events: none;
}
}
/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
.c-hyperlink {
&--link {
@ -658,7 +721,6 @@ input[type="range"] {
}
}
/***************************************************** LOCAL CONTROLS */
.h-local-controls {
// Holder for local controls
&--horz {

38
src/styles-new/_forms.scss
View File

@ -101,7 +101,6 @@
min-width: 120px;
order: 1;
position: relative;
white-space: nowrap;
width: $formLabelW;
}
@ -121,26 +120,35 @@
margin-right: 5px;
}
}
.select {
.l-input-lg { // LEGACY FORM SUPPORT
input[type=text],
input[type=search],
input[type=number] {
width: 100%;
}
}
select {
margin-right: $interiorMargin;
}
}
.hint, .field-hints { color: $colorFieldHint; }
}
}
.selector-list {
// Used in create overlay to display tree view
@include nice-input();
padding: $interiorMargin;
position: relative;
min-height: 150px;
height: 100%;
>.wrapper {
$p: $interiorMargin;
box-sizing: border-box;
overflow: auto;
}
}
.selector-list {
// Displays tree view in dialogs
@include nice-input();
padding: $interiorMargin;
position: relative;
min-height: 150px;
height: 100%;
>.wrapper {
$p: $interiorMargin;
box-sizing: border-box;
overflow: auto;
}
}

12
src/styles-new/_legacy.scss
View File

@ -804,7 +804,9 @@ mct-indicators mct-include {
}
.label {
// Hover bubbles that appear when hovering on an Indicator
display: inline-block;
a,
button,
s-button,
@ -851,8 +853,6 @@ mct-indicators mct-include {
}
&:not(.no-collapse) {
z-index: 0;
&:before {
margin-right: 0 !important;
}
@ -870,6 +870,8 @@ mct-indicators mct-include {
transform-origin: 10px 100%;
transform: scale(0.0);
white-space: nowrap;
z-index: 50;
&:before {
// Infobubble-style arrow element
content: '';
@ -880,9 +882,9 @@ mct-indicators mct-include {
}
}
&:hover {
@include hover() {
background: $bg;
z-index: 1;
.label {
opacity: 1;
transform: scale(1.0);
@ -1314,7 +1316,7 @@ body.desktop {
.grid-properties {
display: grid;
grid-row-gap: 0;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 2fr;
}
.grid-span-all,

44
src/styles-new/_mixins.scss
View File

@ -467,50 +467,6 @@
}
}
@mixin cCompactButtons($bg, $fg, $bgHov) {
// Used in Tab view
// To be used in indicators popups?
$m: 1px;
$btnM: $m;
&-holder {
background: $colorTabsHolderBg;
border-radius: $controlCr;
padding: $m ($m - $btnM) ($m - $btnM) $m;
display: flex;
flex-flow: row wrap;
justify-content: stretch;
> * {
margin: 0 $btnM $btnM 0;
}
}
background: $colorBtnBg;
color: $colorBtnFg;
flex: 1 1 auto;
padding: $interiorMargin;
&:before {
opacity: 0.5;
}
> * {
margin-left: $interiorMarginSm;
}
@include hover() {
background: $bgHov;
}
&.is-current {
background: $colorBtnReverseBg;
color: $colorBtnReverseFg;
pointer-events: none;
}
}
@mixin cSelect($bg, $fg, $arwClr, $shdw) {
$svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;

38
src/styles-new/_table.scss
View File

@ -19,7 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/******************************************************** TABLE */
table {
$minW: 50px;
@ -53,8 +52,7 @@ table {
// Can be used by any type of table, scrolling, LAD, etc.
$min-w: 50px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%;
width: 100%;
&__control-bar,
@ -117,4 +115,36 @@ table {
th, td {
width: 33%; // Needed to prevent size jumping as values dynamically update
}
}
}
/************************************** TABLE AND SUMMARY VIEWS */
// Displays summary values above a table.
.c-table-and-summary {
height: 100%;
width: 100%;
overflow: auto;
display: flex;
flex-direction: column;
> * + * { margin-top: $interiorMargin; }
&__summary {
display: flex;
justify-items: stretch;
> * + * { margin-left: 1px; }
}
&__summary-item {
background: $colorSummaryBg;
color: $colorSummaryFg;
flex: 1 1 auto;
padding: $interiorMargin $interiorMarginLg;
em {
font-weight: bold;
color: $colorSummaryFgEm;
}
}
}

1
src/ui/inspector/Elements.vue
View File

@ -55,6 +55,7 @@
&__grippy {
$d: 8px;
@include grippy($c: $colorItemTreeVC, $dir: 'y');
flex: 0 0 auto;
margin-right: $interiorMarginSm;
transform: translateY(-2px);
width: $d; height: $d;

52
src/ui/inspector/Inspector.vue
View File

@ -22,7 +22,6 @@
min-height: 50px;
+ [class*="__"] {
// Margin between elements
margin-top: $interiorMargin;
}
@ -37,9 +36,7 @@
}
&__elements {
// LEGACY TODO: Refactor when markup is updated, fix scrolling
// so that only tree holder handles overflow
height: 200px;
height: 200px; // Initial height
.tree-item {
.t-object-label {
@ -64,48 +61,6 @@
}
/************************************************************** LEGACY */
// TODO: refactor when legacy properties markup can be converted
.inspector-location {
display: inline-block;
.location-item {
$h: 1.2em;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
line-height: $h;
position: relative;
padding: 2px 4px;
.t-object-label {
.t-item-icon {
height: $h;
margin-right: $interiorMarginSm;
}
}
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.last) .t-object-label .t-title-label:after {
color: pushBack($colorInspectorFg, 15%);
content: '\e904';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
font-style: normal !important;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;
}
}
.l-inspector-part {
display: contents;
}
@ -116,8 +71,8 @@
grid-column: 1 / 3;
}
.tree .grid-properties {
margin-left: $treeItemIndent + $interiorMarginLg;
.c-tree .grid-properties {
margin-left: $treeItemIndent;
}
}
@ -143,7 +98,6 @@
}
+ .c-properties {
// Margin between components
margin-top: $interiorMarginLg;
}

48
src/ui/inspector/Location.vue
View File

@ -3,14 +3,14 @@
<div class="c-properties__header" title="The location of this linked object.">Original Location</div>
<ul class="c-properties__section">
<li class="c-properties__row" v-if="originalPath.length">
<ul class="c-properties__value">
<ul class="c-properties__value c-location">
<li v-for="pathObject in orderedOriginalPath"
class="c-location__item"
:key="pathObject.key">
<object-label
:domainObject="pathObject.domainObject"
:objectPath="pathObject.objectPath">
</object-label>
<span class="c-disclosure-triangle"></span>
</li>
</ul>
</li>
@ -18,8 +18,50 @@
</div>
</template>
<script>
<style lang="scss">
@import "~styles/sass-base";
.c-location {
display: flex;
flex-wrap: wrap;
&__item {
$m: $interiorMarginSm;
cursor: pointer;
display: flex;
align-items: center;
margin: 0 $m $m 0;
&:not(:last-child) {
&:after {
color: $colorInspectorPropName;
content: $glyph-icon-arrow-right;
font-family: symbolsfont;
font-size: 0.7em;
margin-left: $m;
opacity: 0.8;
}
}
.c-object-label {
padding: 0;
transition: $transOut;
&__type-icon {
width: auto;
font-size: 1em;
}
&:hover {
transition: $transIn;
filter: $filterHov;
}
}
}
}
</style>
<script>
import ObjectLabel from '../components/ObjectLabel.vue';
export default {

2
src/ui/layout/BrowseBar.vue
View File

@ -112,7 +112,7 @@ const PLACEHOLDER_OBJECT = {};
promptUserandCancelEditing() {
let dialog = this.openmct.overlays.dialog({
iconClass: 'alert',
message: 'Are you sure you want to continue? All unsaved changes will be lost!',
message: 'Any unsaved changes will be lost. Are you sure you want to continue?',
buttons: [
{
label: 'Ok',

1
src/ui/layout/Layout.vue
View File

@ -186,7 +186,6 @@
// Wrapper for main views
flex: 1 1 auto !important;
overflow: auto;
//font-size: 16px; // TEMP FOR LEGACY STYLING
}
&__tree {

1
src/ui/layout/pane.vue
View File

@ -128,7 +128,6 @@
background: $colorSplitterBg;
display: block;
position: absolute;
z-index: 10;
transition: $transOut;
&:before {