ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-18 16:40:58 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Misc UI 7 (#2349)

Browse Source 
* Misc UI 7

- Better approach to hide/show in Tabs view;

* Misc UI 7

- Fix Chrome 73 bug for Folders in Tabs and Flex Layouts views;

* Misc UI 7

- Fixed look of text inputs in Snow;
- Added description for Tabs View;

* Misc UI 7

- Resizeable table column headers now clip properly;
- Cleaned up and consolidated related CSS;

* Misc UI 7

- Remove undesired top margin in Flex Layouts;
- Fix Chrome 73 overflow bug in ObjectFrame;

* Misc UI 7

- Remove undesired top margin in Flex Layouts;
- Fix Chrome 73 overflow bug in ObjectFrame;
- Enhanced View Large button so now displays in objects with
frames hidden;
- Changed behavior for frame move bar such that it only displays for
selected items;
- Fixed bug where telem table columns can't be resized in new tables;
- Added overflow handling to telem table column headers;

* Misc UI 7

- Remove undesired top margin in Flex Layouts;
- Fix Chrome 73 overflow bug in ObjectFrame;
- Enhanced View Large button so now displays in objects with
frames hidden, and is only shown for objects that get
.has-complex-content applied;
- Changed behavior for frame move bar such that it only displays for
selected items;
- Fixed bug where telem table columns can't be resized in new tables;
- Added overflow handling to telem table column headers;
- Fix for clipped color palette in Summary Widgets, and better flex
layout in sizing in edit interface;
- Added timer and hyperlink to SIMPLE_CONTENT_TYPES list;

* Misc UI 7

- Accessibility: add name of object as title attribute to Layout frames;
- Moved c-frame base styling into c-so-view;

* remove title from layoutFrame
This commit is contained in:
Charles Hacskaylo 2019-04-04 10:45:17 -07:00 committed by Deep Tailor
parent 4189a05758
commit 6f3e2a8fbb
12 changed files with 115 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/plugins/displayLayout/components/LayoutFrame.vue
View File

@ -59,13 +59,6 @@
> *:first-child {
flex: 1 1 auto;
}
&:not(.no-frame) {
background: $colorBodyBg;
border: $browseFrameBorder;
padding: $interiorMargin;
}
}
.c-frame-edit {
@ -162,7 +155,6 @@
.is-editing {
.c-frame {
$moveBarOutDelay: 500ms;
&.no-frame {
border: $editFrameBorder; // Base border style for a frame element while editing.
}
@ -196,13 +188,25 @@
}
}
.l-layout__frame:not(.is-resizing) {
.l-layout__frame[s-selected]:not(.is-resizing) {
// Show and animate the __move bar for sub-object views with complex content
> .c-so-view.has-complex-content {
> .c-so-view__local-controls {
transition: transform 250ms ease-in-out;
transition-delay: $moveBarOutDelay;
}
}
&:hover > .c-so-view.has-complex-content {
// Move content down so the __move bar doesn't cover it.
padding-top: $editFrameMovebarH;
transition: $transIn;
> .c-so-view__local-controls {
transition: transform 50ms ease-in-out;
transform: translateY($editFrameMovebarH);
}
&.c-so-view--no-frame {
// Move content down with a bit more space
padding-top: $editFrameMovebarH + $interiorMarginSm;

8
src/plugins/flexibleLayout/components/flexibleLayout.vue
View File

@ -106,9 +106,6 @@
.c-fl {
@include abs();
display: flex;
flex-direction: column; // TEMP: only needed to support temp-toolbar element
> * + * { margin-top: $interiorMargin; }
.temp-toolbar {
flex: 0 0 auto;
@ -292,11 +289,6 @@
margin-bottom: $interiorMargin;
}
&__object-view {
flex: 1 1 auto;
overflow: auto;
}
&__size-indicator {
$size: 35px;

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

@ -25,7 +25,7 @@
<div class="c-tabs-view__object-holder"
v-for="(tab, index) in tabsList"
:key="index"
:class="{'invisible': !isCurrent(tab)}">
:class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}">
<div v-if="currentTab"
class="c-tabs-view__object-name l-browse-bar__object-name--w"
:class="currentTab.type.definition.cssClass">
@ -68,6 +68,14 @@
flex: 1 1 auto;
display: flex;
flex-direction: column;
&--hidden {
height: 1000px;
width: 1000px;
position: absolute;
left: -9999px;
top: -9999px;
}
}
&__object-name {
@ -78,7 +86,10 @@
}
&__object {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
height: 0; // Chrome 73 oveflow bug fix
}
&__empty-message {

1
src/plugins/tabs/plugin.js
View File

@ -31,6 +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',
creatable: true,
cssClass: 'icon-tabs-view',
initialize(domainObject) {

28
src/plugins/telemetryTable/components/table-column-header.vue
View File

@ -34,39 +34,13 @@
isSortable ? 'is-sortable' : '',
isSortable && sortOptions.key === headerKey ? 'is-sorting' : '',
isSortable && sortOptions.direction].join(' ')">
<div v-if="isEditing" class="c-telemetry-table__resize-hotzone c-telemetry-table__resize-hotzone--right"
<div class="c-telemetry-table__resize-hitarea"
@mousedown="resizeColumnStart"
></div>
<slot></slot>
</div>
</th>
</template>
<style lang="scss">
@import "~styles/sass-base";
@import "~styles/table";
$hotzone-size: 6px;
.c-telemetry-table__headers__content {
width: 100%;
}
.c-table.c-telemetry-table {
.c-telemetry-table__resize-hotzone {
display: block;
position: absolute;
height: 100%;
padding: 0;
margin: 0;
width: $hotzone-size;
min-width: $hotzone-size;
cursor: col-resize;
border: none;
right: 0px;
margin-right: -$tabularTdPadLR - 1 - $hotzone-size / 2;
}
}
</style>
<script>
import _ from 'lodash';
const MOVE_COLUMN_DT_TYPE = 'movecolumnfromindex';

37
src/plugins/telemetryTable/components/table.vue
View File

@ -34,7 +34,7 @@
<div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
<table class="c-table__headers c-telemetry-table__headers">
<thead>
<tr class="c-telemetry-table__headers__name">
<tr class="c-telemetry-table__headers__labels">
<table-column-header
v-for="(title, key, headerIndex) in headers"
:key="key"
@ -49,7 +49,8 @@
:columnWidth="columnWidths[key]"
:sortOptions="sortOptions"
:isEditing="isEditing"
>{{title}}</table-column-header>
><span class="c-telemetry-table__headers__label">{{title}}</span>
</table-column-header>
</tr>
<tr class="c-telemetry-table__headers__filter">
<table-column-header
@ -159,6 +160,32 @@
thead {
display: block;
}
&__labels {
// Top row, has labels
.c-telemetry-table__headers__content {
// Holds __label, sort indicator and resize-hitarea
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
}
}
&__headers__label {
overflow: hidden;
flex: 0 1 auto;
}
&__resize-hitarea {
// In table-column-header.vue
@include abs();
display: none; // Set to display: block in .is-editing section below
left: auto; right: -1 * $tabularTdPadLR;
width: $tableResizeColHitareaD;
cursor: col-resize;
transform: translateX(50%); // Move so this element sits over border between columns
}
/******************************* ELEMENTS */
@ -221,7 +248,7 @@
/******************************* EDITING */
.is-editing {
.c-telemetry-table__headers__name {
.c-telemetry-table__headers__labels {
th[draggable],
th[draggable] > * {
cursor: move;
@ -233,6 +260,10 @@
> * { background: $b; }
}
}
.c-telemetry-table__resize-hitarea {
display: block;
}
}
/******************************* LEGACY */

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

@ -206,7 +206,7 @@ $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
$btnStdH: 24px;
$colorCursorGuide: rgba(black, 0.6);
$shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
$colorLocalControlOvrBg: rgba($colorBodyFg, 0.8);
// Menus
$colorMenuBg: pushBack($colorBodyBg, 10%);
@ -242,8 +242,8 @@ $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: pushBack($colorBodyFg, 10%);
$colorInputIcon: pushBack($colorBodyFg, 25%);
$colorFieldHint: pullForward($colorBodyFg, 40%);
$shdwInput: inset rgba(black, 0.7) 0 0 1px;
$shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
$shdwInput: inset rgba(black, 0.5) 0 0 2px;
$shdwInputHov: inset rgba(black, 0.8) 0 0 2px;
$shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
$formTBPad: $interiorMargin;
$formLRPad: $interiorMargin;

3
src/styles-new/_constants.scss
View File

@ -28,6 +28,7 @@ $dirImgs: 'images/';
$controlFadeMs: 100ms;
$browseToEditAnimMs: 400ms;
$editBorderPulseMs: 500ms;
$moveBarOutDelay: 500ms;
/************************** SPATIAL */
$interiorMarginSm: 3px;
@ -84,6 +85,8 @@ $waitSpinnerTreeBorderW: 3px;
/*************** Messages */
$messageIconD: 80px;
$messageListIconD: 32px;
/*************** Tables */
$tableResizeColHitareaD: 6px;
/************************** MOBILE */
$mobileMenuIconD: 24px; // Used

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

@ -721,6 +721,7 @@ input[type="range"] {
}
}
/******************************************************** LOCAL CONTROLS */
.h-local-controls {
// Holder for local controls
&--horz {

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

@ -482,6 +482,8 @@ body.mobile.phone {
.widget-edit-holder {
display: flex; // Overrides `display: none` during Browse mode
flex: 1 1 auto;
.flex-accordion-holder {
// Needed because otherwise accordion elements "creep" when contents expand and contract
display: block !important;
@ -497,12 +499,6 @@ body.mobile.phone {
// Test data is expanded and rules are collapsed
// Make text data take up all the vertical space
.flex-accordion-holder { display: flex; }
.widget-test-data {
flex-grow: 999999;
}
.w-widget-test-data-items {
max-height: inherit;
}
}
}
&.expanded-widget-rules {

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

@ -76,7 +76,7 @@ div.c-table {
}
thead tr,
[class*="__header"] {
&.c-table__headers {
background: $colorTabHeaderBg;
th {

71
src/ui/components/ObjectFrame.vue
View File

@ -26,21 +26,19 @@
'has-complex-content': complexContent
}">
<div class="c-so-view__header">
<div class="c-so-view__header__start">
<div class="c-so-view__header__name"
:class="cssClass">
{{ domainObject && domainObject.name }}
</div>
<context-menu-drop-down
<div class="c-so-view__header__name"
:class="cssClass">
{{ domainObject && domainObject.name }}
</div>
<context-menu-drop-down
:object-path="objectPath">
</context-menu-drop-down>
</div>
<div class="c-so-view__header__end">
<div class="c-button icon-expand local-controls--hidden"
title="View Large"
@click="expand">
</div>
</div>
</context-menu-drop-down>
</div>
<div class="c-so-view__local-controls c-so-view__view-large h-local-controls c-local-controls--show-on-hover">
<button class="c-button icon-expand"
title="View Large"
@click="expand">
</button>
</div>
<object-view
class="c-so-view__object-view"
@ -65,16 +63,6 @@
align-items: center;
margin-bottom: $interiorMargin;
&__start,
&__end {
display: flex;
flex: 1 1 auto;
}
&__end {
justify-content: flex-end;
}
&__name {
@include headerFont(1em);
display: flex;
@ -84,8 +72,20 @@
}
}
&--no-frame > .c-so-view__header {
display: none;
&:not(.c-so-view--no-frame) {
background: $colorBodyBg;
border: $browseFrameBorder;
padding: $interiorMargin;
}
&--no-frame {
> .c-so-view__header {
display: none;
}
> .c-so-view__local-controls {
top: $interiorMarginSm; right: $interiorMarginSm;
}
}
&__name {
@ -101,9 +101,24 @@
}
}
&__local-controls {
position: absolute;
top: 0; right: 0;
z-index: 2;
}
&__view-large {
display: none;
}
&.has-complex-content {
.c-so-view__view-large { display: block; }
}
/*************************** OBJECT VIEW */
&__object-view {
flex: 1 1 auto;
height: 0; // Chrome 73 overflow bug fix
overflow: auto;
.c-object-view {
@ -128,7 +143,9 @@
const SIMPLE_CONTENT_TYPES = [
'clock',
'summary-widget'
'timer',
'summary-widget',
'hyperlink'
];
export default {