mirror of
https://github.com/nasa/openmct.git
synced 2025-06-17 06:38:17 +00:00
UI enhancements (#3217)
* UI enhancements for #3176 - Large overlay now displays fullscreen; * UI enhancements for #3176 - Adding new ".is-in-small-container" CSS - VERY WIP! - TODO: fix table implementation; * UI fixes for NIRVSS client #170 - Hide table header filter inputs when table is in small container; * UI fixes for NIRVSS client #170 - Fixing legends and plot layout when small, and within a stacked plot; - Add new `hideLegendWhenSmall` property; - Remove 'hidden' from plot legend position options; - Reduced opacity of tabular headers in Espresso theme; - VERY, VERY WIP right now! * UI fixes for NIRVSS client #170 - Fixing legends and plot layout when small, and within a stacked plot; - Cleanups, indention, removed commented CSS; - Tightened up spacing in plot Y axis; * UI enhancements for #3176 - Move local controls for plots and imagery, prevent overlapping with view large button when in a hidden frame in a layout; - Finesse local control styling for increased legibility; - Move l-state-indicators to avoid overlap with repositioned local controls, finesse styling; * UI enhancements for #3176 - Tweak large overlay close button for better visual alignment; * UI enhancements for #3176 - Significant improvements to lines in Display Layouts; - Increased border-width for lines and boxes; - Code enhanced for proper handling of horizontal and vertical lines - but still isn't working properly; - Renamed box-view.scss to box-and-line-views.scss; - VERY WIP! * Fixed incorrect grid array reference * UI enhancements for #3176 - Fixed final issue with Display Layout line drawing object, thank you @deeptailor!; * UI enhancements for #3176 - Contrast enhancements and markup normalization for `c-object-label` elements in main view, Layout frames, Inspector and overlay; - Enhanced `l-overlay-large` layout; - Tightened up margins and spacing in plots; - Refined `is-paused` styling in Telemetry Tables; - Now hide Telemetry Tables 'Export Data' button if rows are selected, which use a separate export button; - Layout frames now hide button's text labels when small; - Layout frames spacing tightened up and improved; * UI enhancements for #3176 - Tweak Snow theme constants; * UI enhancements for #3176 - Fixed ObjectFrame getOverlayElement method, added a wrapper div around the viewed object to properly control resulting layout in the overlay; - Simplified preview CSS to remove background, border and padding; - Layout tweaks to add space between scrollbar and thumbs in Imagery view; - Removed dev "-info" element in LineView.vue; * UI enhancements for #3176 - Improved styling for 'edit lock' button; * UI enhancements for #3176 - Show Display Layout frame "-move" bar on hover, rather than select, to make it easier to select items with hidden frames, and only show -move bar's drag grippy when that frame is selected; - `pointer-events: none` applied to table's body and plot's plot areas when placed in a Layout and being edited, prevents distracting interactions (plot zoom/pan, table row selection) when selecting and moving elements in a Layout; - Refined hover styles for c-button to use $filterHov, simplified and normalized hover styling; - Converted a number of old `<a>` tags to `<buttons>` to normalize styling and use the appropriate control; - Edit lock button is now colored when locked; * Fix linting issue * Minor tweaks - Tweaked control positioning; Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
Charles Hacskaylo
committed by
GitHub
GitHub
parent
41138a1731
commit
97d80f57cc
@ -25,7 +25,8 @@
|
||||
class="l-layout__frame c-frame"
|
||||
:class="{
|
||||
'no-frame': !item.hasFrame,
|
||||
'u-inspectable': inspectable
|
||||
'u-inspectable': inspectable,
|
||||
'is-in-small-container': size.width < 600 || size.height < 600
|
||||
}"
|
||||
:style="style"
|
||||
>
|
||||
@ -61,6 +62,13 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size() {
|
||||
let {width, height} = this.item;
|
||||
return {
|
||||
width: (this.gridSize[0] * width),
|
||||
height: (this.gridSize[1] * height)
|
||||
};
|
||||
},
|
||||
style() {
|
||||
let {x, y, width, height} = this.item;
|
||||
return {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="l-layout__frame c-frame no-frame"
|
||||
class="l-layout__frame c-frame no-frame c-line-view"
|
||||
:class="[styleClass]"
|
||||
:style="style"
|
||||
>
|
||||
@ -31,9 +31,15 @@
|
||||
height="100%"
|
||||
>
|
||||
<line
|
||||
class="c-line-view__hover-indicator"
|
||||
v-bind="linePosition"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
<line
|
||||
class="c-line-view__line"
|
||||
v-bind="linePosition"
|
||||
:stroke="stroke"
|
||||
stroke-width="2"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -49,7 +55,8 @@
|
||||
class="c-frame-edit__handle"
|
||||
:class="startHandleClass"
|
||||
@mousedown="startDrag($event, 'start')"
|
||||
></div>
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="c-frame-edit__handle"
|
||||
:class="endHandleClass"
|
||||
@ -68,14 +75,18 @@ const START_HANDLE_QUADRANTS = {
|
||||
1: 'c-frame-edit__handle--sw',
|
||||
2: 'c-frame-edit__handle--se',
|
||||
3: 'c-frame-edit__handle--ne',
|
||||
4: 'c-frame-edit__handle--nw'
|
||||
4: 'c-frame-edit__handle--nw',
|
||||
5: 'c-frame-edit__handle--ne',
|
||||
6: 'c-frame-edit__handle--se'
|
||||
};
|
||||
|
||||
const END_HANDLE_QUADRANTS = {
|
||||
1: 'c-frame-edit__handle--ne',
|
||||
2: 'c-frame-edit__handle--nw',
|
||||
3: 'c-frame-edit__handle--sw',
|
||||
4: 'c-frame-edit__handle--se'
|
||||
4: 'c-frame-edit__handle--se',
|
||||
5: 'c-frame-edit__handle--sw',
|
||||
6: 'c-frame-edit__handle--nw'
|
||||
};
|
||||
|
||||
export default {
|
||||
@ -158,6 +169,12 @@ export default {
|
||||
},
|
||||
vectorQuadrant() {
|
||||
let {x, y, x2, y2} = this.position;
|
||||
if (x2 === x) {
|
||||
return 5; // Vertical line
|
||||
}
|
||||
if (y2 === y) {
|
||||
return 6; // Horizontal line
|
||||
}
|
||||
if (x2 > x) {
|
||||
if (y2 < y) {
|
||||
return 1;
|
||||
@ -170,21 +187,27 @@ export default {
|
||||
return 3;
|
||||
},
|
||||
linePosition() {
|
||||
return this.vectorQuadrant % 2 !== 0
|
||||
// odd vectorQuadrant slopes up
|
||||
? {
|
||||
x1: '0%',
|
||||
y1: '100%',
|
||||
x2: '100%',
|
||||
y2: '0%'
|
||||
}
|
||||
// even vectorQuadrant slopes down
|
||||
: {
|
||||
x1: '0%',
|
||||
y1: '0%',
|
||||
x2: '100%',
|
||||
y2: '100%'
|
||||
};
|
||||
let pos = {};
|
||||
switch(this.vectorQuadrant) {
|
||||
case 1:
|
||||
case 3:
|
||||
// slopes up
|
||||
pos = {x1: '0%', y1: '100%', x2: '100%', y2: '0%'};
|
||||
break;
|
||||
case 5:
|
||||
// vertical
|
||||
pos = {x1: '0%', y1: '0%', x2: '0%', y2: '100%'};
|
||||
break;
|
||||
case 6:
|
||||
// horizontal
|
||||
pos = {x1: '0%', y1: '0%', x2: '100%', y2: '0%'};
|
||||
break;
|
||||
default:
|
||||
// slopes down
|
||||
pos = {x1: '0%', y1: '0%', x2: '100%', y2: '100%'};
|
||||
break;
|
||||
}
|
||||
return pos;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -209,8 +232,7 @@ export default {
|
||||
layoutItem: this.item,
|
||||
index: this.index
|
||||
};
|
||||
this.removeSelectable = this.openmct.selection.selectable(
|
||||
this.$el, this.context, this.initSelect);
|
||||
this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.removeSelectable) {
|
||||
@ -224,12 +246,17 @@ export default {
|
||||
document.body.addEventListener('mousemove', this.continueDrag);
|
||||
document.body.addEventListener('mouseup', this.endDrag);
|
||||
this.startPosition = [event.pageX, event.pageY];
|
||||
this.dragPosition = {
|
||||
x: this.item.x,
|
||||
y: this.item.y,
|
||||
x2: this.item.x2,
|
||||
y2: this.item.y2
|
||||
};
|
||||
let {x, y, x2, y2} = this.item;
|
||||
this.dragPosition = {x, y, x2, y2};
|
||||
if (x === x2 || y === y2) {
|
||||
if (y > y2 || x < x2) {
|
||||
if (this.dragging === 'start') {
|
||||
this.dragging = 'end';
|
||||
} else if (this.dragging === 'end') {
|
||||
this.dragging = 'start';
|
||||
}
|
||||
}
|
||||
}
|
||||
event.preventDefault();
|
||||
},
|
||||
continueDrag(event) {
|
||||
@ -263,7 +290,7 @@ export default {
|
||||
},
|
||||
calculateDragPosition(pxDeltaX, pxDeltaY) {
|
||||
let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
|
||||
let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
|
||||
let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
|
||||
let {x, y, x2, y2} = this.item;
|
||||
let dragPosition = {x, y, x2, y2};
|
||||
|
||||
|
||||
55
src/plugins/displayLayout/components/box-and-line-views.scss
Normal file
55
src/plugins/displayLayout/components/box-and-line-views.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.c-box-view {
|
||||
border-width: $drawingObjBorderW !important;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.c-frame & {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
.c-line-view {
|
||||
&.c-frame {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.c-frame-edit {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-handle-info {
|
||||
background: rgba(#999, 0.2);
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
top: 5px; left: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
svg {
|
||||
// Prevent clipping when line is horizontal and vertical
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
// Must use !important to counteract setting in normalize.min.css
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__line {
|
||||
stroke-linecap: round;
|
||||
stroke-width: $drawingObjBorderW;
|
||||
}
|
||||
|
||||
&__hover-indicator {
|
||||
display: none;
|
||||
opacity: 0.5;
|
||||
stroke: $editFrameColorHov;
|
||||
stroke-width: $drawingObjBorderW + 4;
|
||||
}
|
||||
|
||||
.is-editing & {
|
||||
&:hover {
|
||||
[class*='__hover-indicator'] {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.c-box-view {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.c-frame & {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,10 @@
|
||||
> *:first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&.is-in-small-container {
|
||||
//background: rgba(blue, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.c-frame-edit__move {
|
||||
@ -61,7 +65,7 @@
|
||||
.l-layout {
|
||||
/******************* 0 - 1 ITEM SELECTED */
|
||||
&:not(.is-multi-selected) {
|
||||
> .l-layout__frame[s-selected] {
|
||||
> .l-layout__frame {
|
||||
> .c-so-view.has-complex-content {
|
||||
> .c-so-view__local-controls {
|
||||
transition: transform $transOutTime ease-in-out;
|
||||
@ -89,7 +93,7 @@
|
||||
$lrOffset: 25%;
|
||||
@include grippy($editFrameMovebarColorFg);
|
||||
content: '';
|
||||
display: block;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: $tbOffset;
|
||||
right: $lrOffset;
|
||||
@ -119,6 +123,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .l-layout__frame[s-selected] {
|
||||
> .c-so-view.has-complex-content {
|
||||
+ .c-frame-edit__move:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************* > 1 ITEMS SELECTED */
|
||||
|
||||
Reference in New Issue
Block a user