mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +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
GitHub
parent
41138a1731
commit
97d80f57cc
@ -31,13 +31,13 @@
|
||||
</mct-form>
|
||||
</div>
|
||||
<div class="c-overlay__button-bar">
|
||||
<a class='c-button c-button--major'
|
||||
<button class='c-button c-button--major'
|
||||
ng-class="{ disabled: !createForm.$valid }"
|
||||
ng-click="ngModel.confirm()">
|
||||
OK
|
||||
</a>
|
||||
<a class='c-button '
|
||||
</button>
|
||||
<button class='c-button '
|
||||
ng-click="ngModel.cancel()">
|
||||
Cancel
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -31,13 +31,13 @@
|
||||
</mct-include>
|
||||
</div>
|
||||
<div class="c-overlay__button-bar">
|
||||
<a ng-repeat="option in ngModel.dialog.options"
|
||||
<button ng-repeat="option in ngModel.dialog.options"
|
||||
href=''
|
||||
class="s-button lg"
|
||||
title="{{option.description}}"
|
||||
ng-click="ngModel.confirm(option.key)"
|
||||
ng-class="{ major: $first, subtle: !$first }">
|
||||
{{option.name}}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</mct-container>
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
type="text" tabindex="10000"
|
||||
ng-model="ngModel.input"
|
||||
ng-keyup="controller.search()"/>
|
||||
<a class="c-search__clear-input clear-icon icon-x-in-circle"
|
||||
<button class="c-search__clear-input clear-icon icon-x-in-circle"
|
||||
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
|
||||
ng-click="ngModel.input = ''; controller.search()"></a>
|
||||
ng-click="ngModel.input = ''; controller.search()"></button>
|
||||
<!-- To prevent double triggering of clicks on click away, render
|
||||
non-clickable version of the button when menu active-->
|
||||
<a ng-if="!toggle.isActive()" class="menu-icon context-available"
|
||||
@ -45,16 +45,16 @@
|
||||
</mct-include>
|
||||
</div>
|
||||
|
||||
<a class="c-button c-search__btn-cancel"
|
||||
<button class="c-button c-search__btn-cancel"
|
||||
ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
|
||||
ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
|
||||
Cancel</a>
|
||||
Cancel</button>
|
||||
</div>
|
||||
|
||||
<div class="active-filter-display flex-elem holder"
|
||||
ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
|
||||
<a class="clear-filters icon-x-in-circle s-icon-button"
|
||||
ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
|
||||
<button class="clear-filters icon-x-in-circle s-icon-button"
|
||||
ng-click="ngModel.checkAll = true; menuController.checkAll()"></button>Filtered by: {{ ngModel.filtersString }}
|
||||
</div>
|
||||
|
||||
<div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
|
||||
@ -72,7 +72,7 @@
|
||||
ng-model="ngModel"
|
||||
class="l-flex-row flex-elem grows">
|
||||
</mct-representation>
|
||||
<a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
|
||||
<button class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
font-size: 1.25em;
|
||||
position: absolute;
|
||||
top: $p; right: $p;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
&__contents {
|
||||
@ -43,7 +44,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__top-bar {
|
||||
@ -87,6 +88,10 @@
|
||||
.c-click-icon {
|
||||
filter: $overlayBrightnessAdjust;
|
||||
}
|
||||
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop {
|
||||
@ -100,7 +105,6 @@ body.desktop {
|
||||
}
|
||||
|
||||
// Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
|
||||
.l-overlay-large,
|
||||
.l-overlay-small,
|
||||
.l-overlay-fit {
|
||||
.c-overlay__outer {
|
||||
@ -118,8 +122,28 @@ body.desktop {
|
||||
|
||||
.l-overlay-large {
|
||||
// Default
|
||||
.c-overlay__outer {
|
||||
@include overlaySizing($overlayOuterMarginLg);
|
||||
$pad: $interiorMarginLg;
|
||||
$tbPad: floor($pad * 0.8);
|
||||
$lrPad: $pad;
|
||||
.c-overlay {
|
||||
&__blocker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__outer {
|
||||
@include overlaySizing($overlayOuterMarginFullscreen);
|
||||
padding: $tbPad $lrPad;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
top: $pad;
|
||||
right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.l-browse-bar {
|
||||
margin-right: $lrPad + $pad; // Don't cover close button
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,4 +163,4 @@ body.desktop {
|
||||
min-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -31,11 +31,11 @@
|
||||
<div class="c-imagery__control-bar">
|
||||
<div class="c-imagery__timestamp">{{ getTime() }}</div>
|
||||
<div class="h-local-controls flex-elem">
|
||||
<a
|
||||
<button
|
||||
class="c-button icon-pause pause-play"
|
||||
:class="{'is-paused': paused()}"
|
||||
@click="paused(!paused())"
|
||||
></a>
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
height: 135px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: $interiorMarginSm;
|
||||
|
||||
&.is-paused {
|
||||
background: rgba($colorPausedBg, 0.4);
|
||||
@ -99,7 +100,7 @@
|
||||
.c-imagery {
|
||||
.h-local-controls--overlay-content {
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: $interiorMargin;
|
||||
left: $interiorMargin; top: $interiorMargin;
|
||||
z-index: 2;
|
||||
background: $colorLocalControlOvrBg;
|
||||
border-radius: $basicCr;
|
||||
|
||||
@ -21,8 +21,11 @@
|
||||
-->
|
||||
<div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
|
||||
<div class="c-plot-legend gl-plot-legend"
|
||||
ng-class="{ 'hover-on-plot': !!highlights.length }"
|
||||
ng-show="legend.get('position') !== 'hidden'">
|
||||
ng-class="{
|
||||
'hover-on-plot': !!highlights.length,
|
||||
'is-legend-hidden': legend.get('hideLegendWhenSmall')
|
||||
}"
|
||||
>
|
||||
<div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
|
||||
ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
|
||||
ng-click="legend.set('expanded', !legend.get('expanded'));">
|
||||
@ -36,11 +39,13 @@
|
||||
ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
|
||||
<div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
|
||||
<div class="plot-legend-item"
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
ng-class="{
|
||||
'is-missing': series.domainObject.status === 'missing'
|
||||
}"
|
||||
ng-repeat="series in series track by $index"
|
||||
>
|
||||
<div class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch "
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="is-missing__indicator" title="This item is missing"></span>
|
||||
@ -86,7 +91,9 @@
|
||||
</thead>
|
||||
<tr ng-repeat="series in series"
|
||||
class="plot-legend-item"
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
ng-class="{
|
||||
'is-missing': series.domainObject.status === 'missing'
|
||||
}"
|
||||
>
|
||||
<td class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
@ -128,7 +135,7 @@
|
||||
<div class="plot-wrapper-axis-and-display-area flex-elem grows">
|
||||
<div class="gl-plot-axis-area gl-plot-y has-local-controls"
|
||||
ng-style="{
|
||||
width: (tickWidth + 30) + 'px'
|
||||
width: (tickWidth + 20) + 'px'
|
||||
}">
|
||||
|
||||
<div class="gl-plot-label gl-plot-y-label"
|
||||
@ -146,7 +153,6 @@
|
||||
</option>
|
||||
</select>
|
||||
|
||||
|
||||
<mct-ticks axis="yAxis">
|
||||
<div ng-repeat="tick in ticks track by tick.value"
|
||||
class="gl-plot-tick gl-plot-y-tick-label"
|
||||
@ -159,17 +165,15 @@
|
||||
</div>
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis"
|
||||
ng-style="{
|
||||
left: (tickWidth + 30) + 'px'
|
||||
}">
|
||||
<div class="l-state-indicators">
|
||||
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
|
||||
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
|
||||
<span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
|
||||
title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
|
||||
ng-if="lockHighlightPoint"></span>
|
||||
</div>
|
||||
left: (tickWidth + 20) + 'px'
|
||||
}">
|
||||
|
||||
<div class="gl-plot-display-area has-local-controls has-cursor-guides">
|
||||
<div class="l-state-indicators">
|
||||
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
|
||||
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
|
||||
</div>
|
||||
|
||||
<mct-ticks axis="xAxis">
|
||||
<div class="gl-plot-hash hash-v"
|
||||
ng-repeat="tick in ticks track by tick.value"
|
||||
|
||||
@ -114,6 +114,11 @@
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small">Hide when plot small</div>
|
||||
<div class="grid-cell value">{{ config.legend.get('hideLegendWhenSmall') ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by Default</div>
|
||||
|
||||
@ -174,7 +174,6 @@
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value">
|
||||
<select ng-model="form.position">
|
||||
<option value="hidden">Hidden</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
@ -182,6 +181,11 @@
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small">Hide when plot small</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.hideLegendWhenSmall"/></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by default</div>
|
||||
|
||||
@ -48,6 +48,7 @@ define([
|
||||
return {
|
||||
position: 'top',
|
||||
expandByDefault: false,
|
||||
hideLegendWhenSmall: false,
|
||||
valueToShowWhenCollapsed: 'nearestValue',
|
||||
showTimestampWhenExpanded: true,
|
||||
showValueWhenExpanded: true,
|
||||
|
||||
@ -32,6 +32,11 @@ define([
|
||||
modelProp: 'position',
|
||||
objectPath: 'configuration.legend.position'
|
||||
},
|
||||
{
|
||||
modelProp: 'hideLegendWhenSmall',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.hideLegendWhenSmall'
|
||||
},
|
||||
{
|
||||
modelProp: 'expandByDefault',
|
||||
coerce: Boolean,
|
||||
|
||||
@ -54,6 +54,16 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__filter {
|
||||
.c-table__search {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.is-in-small-container & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__headers__label {
|
||||
@ -86,6 +96,10 @@
|
||||
height: 0; // Fixes Chrome 73 overflow bug
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
.is-editing & {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* TABLES */
|
||||
@ -138,7 +152,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* EDITING */
|
||||
/******************************* SPECIFIC CASE WRAPPERS */
|
||||
.is-editing {
|
||||
.c-telemetry-table__headers__labels {
|
||||
th[draggable],
|
||||
@ -158,8 +172,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.paused {
|
||||
border: 1px solid #ff9900;
|
||||
.is-paused {
|
||||
.c-table__body-w {
|
||||
border: 1px solid rgba($colorPausedBg, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* LEGACY */
|
||||
|
||||
@ -20,13 +20,16 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
<template>
|
||||
<div class="c-table-wrapper">
|
||||
<div class="c-table-wrapper"
|
||||
:class="{ 'is-paused': paused }"
|
||||
>
|
||||
<!-- main contolbar start-->
|
||||
<div v-if="!marking.useAlternateControlBar"
|
||||
class="c-table-control-bar c-control-bar"
|
||||
>
|
||||
<button
|
||||
v-if="allowExport"
|
||||
v-show="!markedRows.length"
|
||||
class="c-button icon-download labeled"
|
||||
title="Export this view's data"
|
||||
@click="exportAllDataAsCSV()"
|
||||
@ -125,7 +128,7 @@
|
||||
class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
|
||||
:class="{
|
||||
'loading': loading,
|
||||
'paused' : paused
|
||||
'is-paused' : paused
|
||||
}"
|
||||
>
|
||||
<div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}">
|
||||
|
||||
@ -84,6 +84,10 @@ $filterHov: brightness(1.3); // Tree, location items
|
||||
$colorSelectedBg: pushBack($colorKey, 10%);
|
||||
$colorSelectedFg: pullForward($colorBodyFg, 20%);
|
||||
|
||||
// Object labels
|
||||
$objectLabelTypeIconOpacity: 0.7;
|
||||
$objectLabelNameFilter: brightness(1.3);
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
$shellPanePad: $interiorMargin, 7px;
|
||||
@ -94,7 +98,7 @@ $sideBarHeaderBg: rgba($colorBodyFg, 0.2);
|
||||
$sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusFg: #888;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
|
||||
@ -205,9 +209,9 @@ $colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
|
||||
$colorBtnCautionBg: #f16f6f;
|
||||
$colorBtnCautionBg: $colorStatusAlert;
|
||||
$colorBtnCautionBgHov: #f1504e;
|
||||
$colorBtnCautionFg: $colorBtnFg;
|
||||
$colorBtnCautionFg: $colorBtnBg;
|
||||
$colorBtnActiveBg: $colorOk;
|
||||
$colorBtnActiveFg: $colorOkFg;
|
||||
$colorBtnSelectedBg: $colorSelectedBg;
|
||||
@ -335,7 +339,7 @@ $shdwItemText: none;
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
|
||||
$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
|
||||
$colorTabHeaderFg: $colorBodyFg;
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
|
||||
@ -353,7 +357,7 @@ $stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
$legendTableHeadBg: rgba($colorBodyFg, 0.15);
|
||||
$legendTableHeadBg: $colorTabHeaderBg;
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
|
||||
@ -88,6 +88,10 @@ $filterHov: brightness(1.3); // Tree, location items
|
||||
$colorSelectedBg: pushBack($colorKey, 10%);
|
||||
$colorSelectedFg: pullForward($colorBodyFg, 20%);
|
||||
|
||||
// Object labels
|
||||
$objectLabelTypeIconOpacity: 0.7;
|
||||
$objectLabelNameFilter: brightness(1.3);
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
$shellPanePad: $interiorMargin, 7px;
|
||||
@ -209,9 +213,9 @@ $colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
|
||||
$colorBtnCautionBg: #f16f6f;
|
||||
$colorBtnCautionBg: $colorStatusAlert;
|
||||
$colorBtnCautionBgHov: #f1504e;
|
||||
$colorBtnCautionFg: $colorBtnFg;
|
||||
$colorBtnCautionFg: $colorBtnBg;
|
||||
$colorBtnActiveBg: $colorOk;
|
||||
$colorBtnActiveFg: $colorOkFg;
|
||||
$colorBtnSelectedBg: $colorSelectedBg;
|
||||
@ -339,7 +343,7 @@ $shdwItemText: none;
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
|
||||
$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
|
||||
$colorTabHeaderFg: $colorBodyFg;
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
$colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
|
||||
|
||||
@ -80,10 +80,14 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
$filterHov: brightness(1.3); // Tree, location items
|
||||
$filterHov: brightness(0.8) contrast(2); // Tree, location items
|
||||
$colorSelectedBg: pushBack($colorKey, 40%);
|
||||
$colorSelectedFg: pullForward($colorBodyFg, 10%);
|
||||
|
||||
// Object labels
|
||||
$objectLabelTypeIconOpacity: 0.5;
|
||||
$objectLabelNameFilter: brightness(0.5);
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
$shellPanePad: $interiorMargin, 7px;
|
||||
@ -224,7 +228,7 @@ $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
$btnStdH: 24px;
|
||||
$colorCursorGuide: rgba(black, 0.6);
|
||||
$shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
|
||||
$colorLocalControlOvrBg: rgba($colorBodyFg, 0.8);
|
||||
$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
|
||||
$colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
$colorSelectArw: lighten($colorBtnBg, 20%);
|
||||
|
||||
@ -40,11 +40,10 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
|
||||
$menuLineH: 1.5rem;
|
||||
$treeItemIndent: 16px;
|
||||
$treeTypeIconW: 18px;
|
||||
$overlayOuterMarginLg: 5%;
|
||||
$overlayOuterMarginFullscreen: 0%;
|
||||
$overlayOuterMarginDialog: 20%;
|
||||
$overlayInnerMargin: 25px;
|
||||
$mainViewPad: 2px;
|
||||
$mainViewPad: 0px;
|
||||
/*************** Items */
|
||||
$itemPadLR: 5px;
|
||||
$gridItemDesk: 175px;
|
||||
@ -57,7 +56,7 @@ $tabularTdPadTB: 2px;
|
||||
$plotYBarW: 60px;
|
||||
$plotYLabelMinH: 20px;
|
||||
$plotYLabelW: 10px;
|
||||
$plotXBarH: 35px;
|
||||
$plotXBarH: 32px;
|
||||
$plotLegendH: 20px;
|
||||
$plotLegendWidthCollapsed: 20%;
|
||||
$plotLegendWidthExpanded: 50%;
|
||||
@ -90,6 +89,8 @@ $messageIconD: 80px;
|
||||
$messageListIconD: 32px;
|
||||
/*************** Tables */
|
||||
$tableResizeColHitareaD: 6px;
|
||||
/*************** Misc */
|
||||
$drawingObjBorderW: 3px;
|
||||
|
||||
/************************** MOBILE */
|
||||
$mobileMenuIconD: 24px; // Used
|
||||
|
||||
@ -57,11 +57,6 @@ button {
|
||||
line-height: 90%;
|
||||
padding: 3px 10px;
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
|
||||
@include desktop() {
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
@ -206,10 +206,6 @@ body.desktop .has-local-controls {
|
||||
&:hover {
|
||||
box-shadow: $browseSelectableShdwHov;
|
||||
}
|
||||
|
||||
&[s-selected] {
|
||||
border: $browseSelectedBorder;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************** EDITING */
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
@ -29,16 +29,19 @@ mct-plot {
|
||||
.gl-plot.child-frame {
|
||||
&:hover {
|
||||
background: rgba($editUIColorBg, 0.1);
|
||||
box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
|
||||
box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
|
||||
}
|
||||
|
||||
&[s-selected] {
|
||||
border: 1px solid $editUIColorFg !important;
|
||||
color: $editUIColorFg !important;
|
||||
box-shadow: $editFrameSelectedShdw;
|
||||
background: rgba($editUIColorBg, 0.2);
|
||||
box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.c-plot,
|
||||
@ -67,20 +70,14 @@ mct-plot {
|
||||
}
|
||||
|
||||
.c-plot {
|
||||
//$p: $mainViewPad;
|
||||
@include abs($mainViewPad);
|
||||
//position: absolute;
|
||||
//top: $p; right: $p; bottom: $p; left: $p;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
.l-control-bar {
|
||||
.c-control-bar {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.l-view-section {
|
||||
@ -114,6 +111,12 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-in-small-container & {
|
||||
.c-control-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
@ -205,7 +208,6 @@ mct-plot {
|
||||
&.gl-plot-y-label {
|
||||
display: block;
|
||||
left: 0; top: 0; right: auto; bottom: 0;
|
||||
padding-left: 5px;
|
||||
text-orientation: mixed;
|
||||
writing-mode: vertical-lr;
|
||||
&:before {
|
||||
@ -271,7 +273,7 @@ mct-plot {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: $m;
|
||||
right: $m;
|
||||
left: $m;
|
||||
z-index: 9;
|
||||
|
||||
&__reset {
|
||||
@ -284,15 +286,18 @@ mct-plot {
|
||||
top: $m;
|
||||
right: $m;
|
||||
}
|
||||
|
||||
.c-button {
|
||||
box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-state-indicators {
|
||||
color: $colorPausedBg;
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
pointer-events: none;
|
||||
top: $interiorMarginSm;
|
||||
cursor: help;
|
||||
font-size: 1.2em;
|
||||
bottom: $interiorMarginSm;
|
||||
left: $interiorMarginSm;
|
||||
z-index: 2;
|
||||
|
||||
@ -351,11 +356,11 @@ mct-plot {
|
||||
|
||||
.gl-plot-tick {
|
||||
&.gl-plot-x-tick-label {
|
||||
top: $interiorMargin;
|
||||
top: $interiorMarginSm;
|
||||
}
|
||||
&.gl-plot-y-tick-label {
|
||||
right: $interiorMargin;
|
||||
left: $interiorMargin;
|
||||
right: $interiorMarginSm;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -452,8 +457,22 @@ mct-plot {
|
||||
@include propertiesHeader();
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.is-in-small-container & {
|
||||
&.is-legend-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-plot--stacked {
|
||||
.is-legend-hidden {
|
||||
// Always show the legend in a stacked plot
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gl-plot-legend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -525,10 +544,19 @@ mct-plot {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
|
||||
.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
|
||||
.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
|
||||
.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
|
||||
|
||||
.gl-plot,
|
||||
.c-plot {
|
||||
&.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
|
||||
&.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
|
||||
|
||||
&.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
|
||||
&.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
|
||||
|
||||
&.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
|
||||
&.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
|
||||
&.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
|
||||
@ -540,7 +568,6 @@ mct-plot {
|
||||
|
||||
.plot-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
|
||||
.plot-series-swatch-and-name,
|
||||
@ -569,8 +596,10 @@ mct-plot {
|
||||
|
||||
/***************** TOP OR BOTTOM */
|
||||
&.plot-legend-top,
|
||||
&.plot-legend-bottom {
|
||||
&.plot-legend-bottom,
|
||||
&.plot-legend-hidden {
|
||||
// General styles when legend is on the top or bottom
|
||||
// -hidden included for legacy plots
|
||||
flex-direction: column;
|
||||
|
||||
&.plot-legend-collapsed {
|
||||
@ -592,6 +621,7 @@ mct-plot {
|
||||
&.plot-legend-left,
|
||||
&.plot-legend-right {
|
||||
// General styles when legend is on left or right
|
||||
|
||||
.gl-plot-legend {
|
||||
max-height: inherit;
|
||||
}
|
||||
@ -622,6 +652,7 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
.plot-legend-item {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
margin-left: 0;
|
||||
flex-wrap: nowrap;
|
||||
.plot-series-swatch-and-name {
|
||||
@ -649,6 +680,31 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
|
||||
/***************** STACKED PLOT LEGEND OVERRIDES */
|
||||
.c-plot--stacked {
|
||||
// Always show the legend on top, ignore any position setting
|
||||
.c-plot,
|
||||
.gl-plot {
|
||||
flex-direction: column !important;
|
||||
|
||||
.c-plot-legend,
|
||||
.gl-plot-legend {
|
||||
margin: 0;
|
||||
margin-bottom: $interiorMargin;
|
||||
order: 1 !important;
|
||||
width: 100% !important;
|
||||
|
||||
.plot-wrapper-collapsed-legend {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
order: 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***************** CURSOR GUIDES */
|
||||
[class*='c-cursor-guide'] {
|
||||
box-shadow: $shdwCursorGuide;
|
||||
|
||||
@ -443,28 +443,18 @@
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&[class*="--major"],
|
||||
&[class*='is-active']{
|
||||
background: $colorBtnMajorBg;
|
||||
color: $colorBtnMajorFg;
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnMajorBgHov;
|
||||
color: $colorBtnMajorFgHov;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--caution'] {
|
||||
background: $colorBtnCautionBg;
|
||||
color: $colorBtnCautionFg;
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnCautionBgHov;
|
||||
}
|
||||
background: $colorBtnCautionBg !important;
|
||||
color: $colorBtnCautionFg !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -90,14 +90,28 @@ div.c-table {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
.is-in-small-container & {
|
||||
&:not(.is-paused) {
|
||||
.c-table-control-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.c-table-control-bar {
|
||||
.c-click-icon,
|
||||
.c-button {
|
||||
&__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-table-control-bar {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
//margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
|
||||
padding: $interiorMarginSm 0;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@import "../plugins/condition/components/conditionals.scss";
|
||||
@import "../plugins/conditionWidget/components/condition-widget.scss";
|
||||
@import "../plugins/condition/components/inspector/conditional-styles.scss";
|
||||
@import "../plugins/displayLayout/components/box-view.scss";
|
||||
@import "../plugins/displayLayout/components/box-and-line-views";
|
||||
@import "../plugins/displayLayout/components/display-layout.scss";
|
||||
@import "../plugins/displayLayout/components/edit-marquee.scss";
|
||||
@import "../plugins/displayLayout/components/image-view.scss";
|
||||
|
||||
@ -142,8 +142,11 @@ export default {
|
||||
getOverlayElement(childElement) {
|
||||
const fragment = new DocumentFragment();
|
||||
const header = this.getPreviewHeader();
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.classList.add('l-preview-window__object-view');
|
||||
wrapper.append(childElement);
|
||||
fragment.append(header);
|
||||
fragment.append(childElement);
|
||||
fragment.append(wrapper);
|
||||
|
||||
return fragment;
|
||||
},
|
||||
|
||||
@ -10,25 +10,21 @@
|
||||
&__header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
font-size: 1.05em;
|
||||
align-items: center;
|
||||
margin-bottom: $interiorMargin;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
padding: 1px 2px;
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
margin-right: $interiorMarginSm;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include headerFont(1em);
|
||||
@include ellipsize();
|
||||
flex: 0 1 auto;
|
||||
.c-object-label {
|
||||
&__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.c-so-view--no-frame) {
|
||||
border: $browseFrameBorder;
|
||||
padding: $interiorMargin;
|
||||
padding: 0 $interiorMarginSm;
|
||||
|
||||
.is-editing & {
|
||||
background: rgba($colorBodyBg, 0.8);
|
||||
@ -40,9 +36,9 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .c-so-view__local-controls {
|
||||
top: $interiorMarginSm; right: $interiorMarginSm;
|
||||
}
|
||||
//> .c-so-view__local-controls {
|
||||
// top: $interiorMarginSm; right: $interiorMarginSm;
|
||||
//}
|
||||
|
||||
&.is-missing {
|
||||
@include isMissing($absPos: true);
|
||||
@ -55,9 +51,19 @@
|
||||
}
|
||||
|
||||
&__local-controls {
|
||||
// View Large button
|
||||
box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
|
||||
position: absolute;
|
||||
top: $interiorMargin; right: $interiorMargin;
|
||||
z-index: 2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.c-click-icon,
|
||||
.c-button {
|
||||
// Shrink buttons a bit when they appear in a frame
|
||||
border-radius: $smallCr !important;
|
||||
font-size: 0.9em;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
&__view-large {
|
||||
@ -68,7 +74,6 @@
|
||||
> .c-so-view__view-large { display: block; }
|
||||
}
|
||||
|
||||
/*************************** OBJECT VIEW */
|
||||
&__object-view {
|
||||
flex: 1 1 auto;
|
||||
height: 0; // Chrome 73 overflow bug fix
|
||||
@ -79,13 +84,6 @@
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
.c-click-icon,
|
||||
.c-button {
|
||||
// Shrink buttons a bit when they appear in a frame
|
||||
font-size: 0.9em;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-angular-object-view-wrapper {
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.1em;
|
||||
opacity: $objectLabelTypeIconOpacity;
|
||||
}
|
||||
|
||||
&.is-missing {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="c-inspector__header">
|
||||
<div v-if="!multiSelect"
|
||||
class="c-inspector__selected-w c-object-label"
|
||||
class="c-inspector__selected c-object-label"
|
||||
:class="{'is-missing': domainObject.status === 'missing' }"
|
||||
>
|
||||
<div class="c-object-label__type-icon"
|
||||
@ -11,17 +11,20 @@
|
||||
title="This item is missing"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<span v-if="!singleSelectNonObject"
|
||||
class="c-inspector__selected c-object-label__name"
|
||||
>{{ item.name }}</span>
|
||||
<span v-if="singleSelectNonObject"
|
||||
class="c-inspector__selected c-object-label__name c-inspector__selected--non-domain-object"
|
||||
>Layout Object</span>
|
||||
|
||||
<div v-if="singleSelectNonObject"
|
||||
class="c-inspector__selected c-inspector__selected--non-domain-object c-object-label"
|
||||
>
|
||||
<span class="c-object-label__type-icon"
|
||||
:class="typeCssClass"
|
||||
></span>
|
||||
<span class="c-object-label__name">Layout Object</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="multiSelect"
|
||||
class="c-inspector__multiple-selected-w"
|
||||
class="c-inspector__multiple-selected"
|
||||
>
|
||||
{{ itemsSelected }} items selected
|
||||
</div>
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
&__selected-w,
|
||||
&__multiple-selected-w {
|
||||
&__selected,
|
||||
&__multiple-selected {
|
||||
@include headerFont(1.1em);
|
||||
padding: $interiorMarginSm 0;
|
||||
}
|
||||
|
||||
&__multiple-selected-w {
|
||||
&__multiple-selected {
|
||||
$p: $interiorMarginLg;
|
||||
background: rgba($colorWarningLo, 0.3);
|
||||
border-radius: $basicCr;
|
||||
@ -25,10 +25,11 @@
|
||||
}
|
||||
|
||||
&__selected {
|
||||
@include ellipsize();
|
||||
flex: 1 1 auto;
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
|
||||
&--non-domain-object {
|
||||
&--non-domain-object .c-object-label__name {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
:title="lockedOrUnlocked"
|
||||
class="c-button"
|
||||
:class="{
|
||||
'icon-lock': domainObject.locked,
|
||||
'icon-lock c-button--caution': domainObject.locked,
|
||||
'icon-unlocked': !domainObject.locked
|
||||
}"
|
||||
@click="toggleLock(!domainObject.locked)"
|
||||
|
||||
@ -313,6 +313,13 @@
|
||||
|
||||
&__actions,
|
||||
&__end {
|
||||
.c-button {
|
||||
&[class*='icon-']:before {
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
@ -350,6 +357,10 @@
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
|
||||
&__object-name--w {
|
||||
@include headerFont(1.4em);
|
||||
min-width: 0;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="l-browse-bar">
|
||||
<div class="c-preview-header l-browse-bar">
|
||||
<div class="l-browse-bar__start">
|
||||
<div
|
||||
class="l-browse-bar__object-name--w"
|
||||
:class="type.cssClass"
|
||||
class="l-browse-bar__object-name--w c-object-label"
|
||||
>
|
||||
<span class="l-browse-bar__object-name">
|
||||
<div class="c-object-label__type-icon"
|
||||
:class="type.cssClass"
|
||||
></div>
|
||||
<span class="l-browse-bar__object-name c-object-label__name">
|
||||
{{ domainObject.name }}
|
||||
</span>
|
||||
<context-menu-drop-down :object-path="objectPath" />
|
||||
|
||||
@ -13,11 +13,9 @@
|
||||
}
|
||||
|
||||
&__object-view {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
flex: 1 1 auto;
|
||||
height: 0; // Chrome 73
|
||||
overflow: auto;
|
||||
padding: $interiorMargin;
|
||||
|
||||
> div:not([class]) {
|
||||
// Target an immediate child div without a class and make it display: contents
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user