mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
Plot options 4.1 (#2303)
* working crosshairs -- todo -- add toggle option * add ability to toggle crosshair * add zoom in by onscreen button to plot * add zoom out functionality * switch positions of zoom in and out buttons * working zoom with mousewheel * add better logic to storing plot history on mouse wheel zoom * Local controls styling in plots and imagery - WIP * Plot local controls, cursor guides - Local control classes much refined; - Cursor guides styled, theme constants added; * Fix local controls in imagery - LC styles refined; - New theme constant; * Better approach to loading - New .c-loading--overlay that doesn't block the cursor; - Applied to plot views (telem, overlay and stacked plots); * Plot styles, local controls refined - Moved plot classes into their own scss file; - More refinement on local control styles; - Plot local controls layout finalized; - Buttons smallified in layout frame context; * Convert export buttons from <a> tags * Stubbed in cursor guide buttons in templates - WIP! * add toggle-cursor-guide-button to stacked plots * move cursor guide button to top left in all plots for consistency * Plot local controls layout refined - Also: global styling for *[disabled] * Change c-button 'is-enabled' to 'is-active' * Added check for if crosshairs enabled before tracking
This commit is contained in:
Deep Tailor
Andrew Henry
parent
df53af7b4d
commit
0e9319e97b
@ -1,22 +1,18 @@
|
||||
<div class="t-imagery" ng-controller="ImageryController as imagery">
|
||||
<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
|
||||
<mct-split-pane class='abs' anchor="bottom" alias="imagery">
|
||||
<div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
|
||||
ng-mouseenter="showLocalControls = true;"
|
||||
ng-mouseleave="showLocalControls = false;">
|
||||
<div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
|
||||
<span class="holder flex-elem grows">
|
||||
<div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
|
||||
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
|
||||
<span class="holder flex-elem grows c-imagery__lc__sliders">
|
||||
<input class="icon-brightness" type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
ng-model="filters.brightness">
|
||||
</input>
|
||||
ng-model="filters.brightness" />
|
||||
<input class="icon-contrast" type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
ng-model="filters.contrast">
|
||||
</input>
|
||||
ng-model="filters.contrast" />
|
||||
</span>
|
||||
<span class="holder flex-elem t-reset-btn-holder">
|
||||
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
|
||||
<a class="s-icon-button icon-reset t-btn-reset"
|
||||
ng-click="filters = { brightness: 100, contrast: 100 }"></a>
|
||||
</span>
|
||||
|
||||
@ -136,7 +136,7 @@
|
||||
<span class="t-object-alert t-alert-unsynced"
|
||||
title="This plot is not currently displaying the latest data.
|
||||
Reset Pan/zoom to return to view latest data."></span>
|
||||
<div class="gl-plot-display-area">
|
||||
<div class="gl-plot-display-area has-local-controls has-cursor-guides">
|
||||
<mct-ticks axis="xAxis">
|
||||
<div class="gl-plot-hash hash-v"
|
||||
ng-repeat="tick in ticks track by tick.value"
|
||||
@ -147,7 +147,6 @@
|
||||
</div>
|
||||
</mct-ticks>
|
||||
|
||||
|
||||
<mct-ticks axis="yAxis">
|
||||
<div class="gl-plot-hash hash-h"
|
||||
ng-repeat="tick in ticks track by tick.value"
|
||||
@ -155,7 +154,6 @@
|
||||
</div>
|
||||
</mct-ticks>
|
||||
|
||||
|
||||
<mct-chart config="config"
|
||||
series="series"
|
||||
rectangles="rectangles"
|
||||
@ -164,23 +162,37 @@
|
||||
the-y-axis="yAxis">
|
||||
</mct-chart>
|
||||
|
||||
<div class="h-local-controls h-local-controls-overlay-content"
|
||||
ng-show="plotHistory.length">
|
||||
<div class="l-btn-set">
|
||||
<a class="s-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</a>
|
||||
<a class="s-button icon-reset"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</a>
|
||||
<div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
|
||||
<div class="c-button-set c-button-set--strip-h">
|
||||
<button class="c-button icon-minus"
|
||||
ng-click="plot.zoom('out', 0.2)"
|
||||
title="Zoom out">
|
||||
</button>
|
||||
<button class="c-button icon-plus"
|
||||
ng-click="plot.zoom('in', 0.2)"
|
||||
title="Zoom in">
|
||||
</button>
|
||||
</div>
|
||||
<div class="c-button-set c-button-set--strip-h"
|
||||
ng-disabled="!plotHistory.length">
|
||||
<button class="c-button icon-arrow-left"
|
||||
ng-click="plot.back()"
|
||||
title="Restore previous pan/zoom">
|
||||
</button>
|
||||
<button class="c-button icon-reset"
|
||||
ng-click="plot.clear()"
|
||||
title="Reset pan/zoom">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
|
||||
</span>
|
||||
|
||||
<!--Cursor guides-->
|
||||
<div class="c-cursor-guide--v js-cursor-guide--v"
|
||||
ng-show="plot.cursorGuide">
|
||||
</div>
|
||||
<div class="c-cursor-guide--h js-cursor-guide--h"
|
||||
ng-show="plot.cursorGuide">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-axis-area gl-plot-x"
|
||||
|
||||
@ -20,31 +20,34 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="PlotController as controller"
|
||||
class="abs holder holder-plot has-control-bar"
|
||||
ng-class="{
|
||||
'loading': !!pending
|
||||
}"
|
||||
>
|
||||
class="abs holder holder-plot has-control-bar">
|
||||
<div class="l-control-bar" ng-show="!controller.hideExportButtons">
|
||||
<span class="c-button-set c-button-set--strip">
|
||||
<a class="c-button icon-download"
|
||||
<span class="c-button-set c-button-set--strip-h">
|
||||
<button class="c-button icon-download"
|
||||
ng-click="controller.exportPNG()"
|
||||
title="Export This View's Data as PNG">
|
||||
<span class="c-button__label">PNG</span>
|
||||
</a>
|
||||
<a class="c-button"
|
||||
</button>
|
||||
<button class="c-button"
|
||||
ng-click="controller.exportJPG()"
|
||||
title="Export This View's Data as JPG">
|
||||
<span class="c-button__label">JPG</span>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<button class="c-button icon-crosshair"
|
||||
ng-class="{ 'is-active': controller.cursorGuide }"
|
||||
ng-click="controller.toggleCursorGuide($event)"
|
||||
title="Toggle cursor guides">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="l-view-section">
|
||||
<div class="c-loading--overlay loading"
|
||||
ng-show="!!pending"></div>
|
||||
<mct-plot config="controller.config"
|
||||
series="series"
|
||||
the-y-axis="yAxis"
|
||||
the-x-axis="xAxis">
|
||||
</mct-plot>
|
||||
</mct-plot>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@ -20,26 +20,29 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="StackedPlotController as stackedPlot"
|
||||
class="abs holder holder-plot has-control-bar t-plot-stacked"
|
||||
ng-class="{
|
||||
'loading': !!currentRequest.pending
|
||||
}">
|
||||
|
||||
class="abs holder holder-plot has-control-bar t-plot-stacked">
|
||||
<div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
|
||||
<span class="c-button-set c-button-set--strip">
|
||||
<a class="c-button icon-download"
|
||||
<span class="c-button-set c-button-set--strip-h">
|
||||
<button class="c-button icon-download"
|
||||
ng-click="stackedPlot.exportPNG()"
|
||||
title="Export This View's Data as PNG">
|
||||
<span class="c-button__label">PNG</span>
|
||||
</a>
|
||||
<a class="c-button"
|
||||
</button>
|
||||
<button class="c-button"
|
||||
ng-click="stackedPlot.exportJPG()"
|
||||
title="Export This View's Data as JPG">
|
||||
<span class="c-button__label">JPG</span>
|
||||
</a>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<button class="c-button icon-crosshair"
|
||||
ng-class="{ 'is-active': stackedPlot.cursorGuide }"
|
||||
ng-click="stackedPlot.toggleCursorGuide($event)"
|
||||
title="Toggle cursor guides">
|
||||
</button>
|
||||
</div>
|
||||
<div class="l-view-section">
|
||||
<div class="c-loading--overlay loading"
|
||||
ng-show="!!currentRequest.pending"></div>
|
||||
<div class="gl-plot child-frame"
|
||||
ng-repeat="telemetryObject in telemetryObjects"
|
||||
ng-class="{
|
||||
|
||||
@ -78,6 +78,7 @@ define([
|
||||
this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
|
||||
this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
|
||||
this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
|
||||
this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
|
||||
|
||||
this.watchForMarquee();
|
||||
|
||||
@ -92,6 +93,12 @@ define([
|
||||
this.$scope.series = this.config.series.models;
|
||||
this.$scope.legend = this.config.legend;
|
||||
|
||||
this.cursorGuideVertical = this.$element[0].querySelector('.js-cursor-guide--v');
|
||||
this.cursorGuideHorizontal = this.$element[0].querySelector('.js-cursor-guide--h');
|
||||
this.cursorGuide = false;
|
||||
|
||||
this.listenTo(this.$scope, 'cursorguide', this.toggleCursorGuide, this);
|
||||
|
||||
this.listenTo(this.$scope, '$destroy', this.destroy, this);
|
||||
this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
|
||||
this.listenTo(this.$scope, 'plot:highlight:set', this.onPlotHighlightSet, this);
|
||||
@ -143,6 +150,9 @@ define([
|
||||
y: this.yScale.invert(this.positionOverElement.y)
|
||||
};
|
||||
|
||||
if (this.cursorGuide) {
|
||||
this.updateCrosshairs($event);
|
||||
}
|
||||
this.highlightValues(this.positionOverPlot.x);
|
||||
this.updateMarquee();
|
||||
this.updatePan();
|
||||
@ -150,6 +160,11 @@ define([
|
||||
$event.preventDefault();
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.updateCrosshairs = function ($event) {
|
||||
this.cursorGuideVertical.style.left = ($event.clientX - this.chartElementBounds.x) + 'px';
|
||||
this.cursorGuideHorizontal.style.top = ($event.clientY - this.chartElementBounds.y) + 'px';
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.trackChartElementBounds = function ($event) {
|
||||
if ($event.target === this.$canvas[1]) {
|
||||
this.chartElementBounds = $event.target.getBoundingClientRect();
|
||||
@ -266,6 +281,102 @@ define([
|
||||
this.marquee = undefined;
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.zoom = function (zoomDirection, zoomFactor) {
|
||||
this.freeze();
|
||||
this.trackHistory();
|
||||
var currentXaxis = this.$scope.xAxis.get('displayRange'),
|
||||
currentYaxis = this.$scope.yAxis.get('displayRange'),
|
||||
xAxisDist= (currentXaxis.max - currentXaxis.min) * zoomFactor,
|
||||
yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
|
||||
|
||||
if (zoomDirection === 'in') {
|
||||
this.$scope.xAxis.set('displayRange', {
|
||||
min: currentXaxis.min + xAxisDist,
|
||||
max: currentXaxis.max - xAxisDist
|
||||
});
|
||||
|
||||
this.$scope.yAxis.set('displayRange', {
|
||||
min: currentYaxis.min + yAxisDist,
|
||||
max: currentYaxis.max - yAxisDist
|
||||
});
|
||||
} else if (zoomDirection === 'out') {
|
||||
this.$scope.xAxis.set('displayRange', {
|
||||
min: currentXaxis.min - xAxisDist,
|
||||
max: currentXaxis.max + xAxisDist
|
||||
});
|
||||
|
||||
this.$scope.yAxis.set('displayRange', {
|
||||
min: currentYaxis.min - yAxisDist,
|
||||
max: currentYaxis.max + yAxisDist
|
||||
});
|
||||
}
|
||||
|
||||
this.$scope.$emit('user:viewport:change:end');
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.wheelZoom = function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!this.positionOverPlot) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.freeze();
|
||||
window.clearTimeout(this.stillZooming);
|
||||
|
||||
let xDisplayRange = this.$scope.xAxis.get('displayRange'),
|
||||
yDisplayRange = this.$scope.yAxis.get('displayRange'),
|
||||
xAxisDist = (xDisplayRange.max - xDisplayRange.min),
|
||||
yAxisDist = (yDisplayRange.max - yDisplayRange.min),
|
||||
xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x,
|
||||
xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min,
|
||||
yDistMouseToMax = yDisplayRange.max - this.positionOverPlot.y,
|
||||
yDistMouseToMin = this.positionOverPlot.y - yDisplayRange.min,
|
||||
xAxisMaxDist = xDistMouseToMax / xAxisDist,
|
||||
xAxisMinDist = xDistMouseToMin / xAxisDist,
|
||||
yAxisMaxDist = yDistMouseToMax / yAxisDist,
|
||||
yAxisMinDist = yDistMouseToMin / yAxisDist;
|
||||
|
||||
let plotHistoryStep;
|
||||
|
||||
if (!plotHistoryStep) {
|
||||
plotHistoryStep = {
|
||||
x: xDisplayRange,
|
||||
y: yDisplayRange
|
||||
};
|
||||
}
|
||||
|
||||
if (event.wheelDelta < 0) {
|
||||
|
||||
this.$scope.xAxis.set('displayRange', {
|
||||
min: xDisplayRange.min + ((xAxisDist * 0.01) * xAxisMinDist),
|
||||
max: xDisplayRange.max - ((xAxisDist * 0.01) * xAxisMaxDist)
|
||||
});
|
||||
|
||||
this.$scope.yAxis.set('displayRange', {
|
||||
min: yDisplayRange.min + ((yAxisDist * 0.01) * yAxisMinDist),
|
||||
max: yDisplayRange.max - ((yAxisDist * 0.01) * 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)
|
||||
});
|
||||
|
||||
this.$scope.yAxis.set('displayRange', {
|
||||
min: yDisplayRange.min - ((yAxisDist * 0.01) * yAxisMinDist),
|
||||
max: yDisplayRange.max + ((yAxisDist * 0.01) * yAxisMaxDist)
|
||||
});
|
||||
}
|
||||
|
||||
this.stillZooming = window.setTimeout(function () {
|
||||
this.plotHistory.push(plotHistoryStep);
|
||||
plotHistoryStep = undefined;
|
||||
this.$scope.$emit('user:viewport:change:end');
|
||||
}.bind(this), 250);
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.startPan = function ($event) {
|
||||
this.trackMousePosition($event);
|
||||
this.freeze();
|
||||
@ -362,5 +473,9 @@ define([
|
||||
this.stopListening();
|
||||
};
|
||||
|
||||
MCTPlotController.prototype.toggleCursorGuide = function ($event) {
|
||||
this.cursorGuide = !this.cursorGuide;
|
||||
};
|
||||
|
||||
return MCTPlotController;
|
||||
});
|
||||
|
||||
@ -59,6 +59,7 @@ define([
|
||||
this.openmct = openmct;
|
||||
this.objectService = objectService;
|
||||
this.exportImageService = exportImageService;
|
||||
this.cursorGuide = false;
|
||||
|
||||
$scope.pending = 0;
|
||||
|
||||
@ -258,8 +259,8 @@ define([
|
||||
PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
|
||||
this.config.series.forEach(function (series) {
|
||||
series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Export view as JPG.
|
||||
@ -283,6 +284,11 @@ define([
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
PlotController.prototype.toggleCursorGuide = function ($event) {
|
||||
this.cursorGuide = !this.cursorGuide;
|
||||
this.$scope.$broadcast('cursorguide', $event);
|
||||
};
|
||||
|
||||
return PlotController;
|
||||
|
||||
});
|
||||
|
||||
@ -35,6 +35,8 @@ define([
|
||||
|
||||
this.$element = $element;
|
||||
this.exportImageService = exportImageService;
|
||||
this.$scope = $scope;
|
||||
this.cursorGuide = false;
|
||||
|
||||
$scope.telemetryObjects = [];
|
||||
|
||||
@ -145,5 +147,10 @@ define([
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
StackedPlotController.prototype.toggleCursorGuide = function ($event) {
|
||||
this.cursorGuide = !this.cursorGuide;
|
||||
this.$scope.$broadcast('cursorguide', $event);
|
||||
};
|
||||
|
||||
return StackedPlotController;
|
||||
});
|
||||
|
||||
@ -23,11 +23,11 @@
|
||||
<div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
|
||||
:class="{'loading': loading}">
|
||||
<div class="c-table__control-bar c-control-bar">
|
||||
<a class="c-button icon-download labeled"
|
||||
<button class="c-button icon-download labeled"
|
||||
v-on:click="exportAsCSV()"
|
||||
title="Export This View's Data">
|
||||
<span class="c-button__label">Export As CSV</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
|
||||
<!-- Headers table -->
|
||||
|
||||
@ -183,6 +183,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
$btnStdH: 24px;
|
||||
$colorCursorGuide: rgba(white, 0.6);
|
||||
$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
|
||||
$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: pullForward($colorBodyBg, 15%);
|
||||
|
||||
@ -187,6 +187,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
$btnStdH: 24px;
|
||||
$colorCursorGuide: rgba(white, 0.6);
|
||||
$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
|
||||
$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: pullForward($colorBodyBg, 15%);
|
||||
|
||||
@ -183,6 +183,9 @@ $colorDropHintFg: pushBack($colorDropHint, 0);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$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);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
|
||||
@ -557,8 +557,6 @@ select {
|
||||
|
||||
/********* Button Sets */
|
||||
.c-button-set {
|
||||
// When one set is adjacent to another, provides a divider between
|
||||
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -567,21 +565,25 @@ select {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
+ .c-button-set {
|
||||
&:before {
|
||||
@include cToolbarSeparator();
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--strip'] {
|
||||
// Buttons are smashed together with minimal margin
|
||||
// c-buttons don't have border-radius between buttons, creates a tool-button-strip look
|
||||
// c-buttons don't have border-radius between buttons, creates a horizontal tool-button-strip look
|
||||
// c-click-icons get grouped more closely together
|
||||
|
||||
[class^="c-button"] {
|
||||
// Only apply the following to buttons that have background, eg. c-button
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--strip-h'] {
|
||||
// Horizontal strip
|
||||
|
||||
+ .c-button-set {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
[class^="c-button"] {
|
||||
+ * {
|
||||
margin-left: 1px;
|
||||
}
|
||||
@ -653,6 +655,46 @@ input[type="range"] {
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** LOCAL CONTROLS */
|
||||
.h-local-controls {
|
||||
// Holder for local controls
|
||||
&--horz {
|
||||
// Horizontal layout be
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--overlay-content {
|
||||
> .c-button {
|
||||
background: $colorLocalControlOvrBg;
|
||||
border-radius: $controlCr;
|
||||
box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-local-controls {
|
||||
// Controls that are in close proximity to an element they effect
|
||||
&--show-on-hover {
|
||||
// Hidden by default; requires a hover 1 - 3 levels above to display
|
||||
transition: $transOut;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-local-controls:hover {
|
||||
> .c-local-controls--show-on-hover,
|
||||
> * > .c-local-controls--show-on-hover,
|
||||
> * > * > .c-local-controls--show-on-hover,
|
||||
> * > * > * > .c-local-controls--show-on-hover
|
||||
{
|
||||
transition: $transIn;
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** DRAG AND DROP */
|
||||
.c-drop-hint {
|
||||
// Used in Tabs View, Flexible Grid Layouts
|
||||
@ -707,19 +749,3 @@ input[type="range"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.h-local-controls {
|
||||
&-overlay-content {
|
||||
box-shadow: $colorBodyBg 0 0 0 2px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: $interiorMargin;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-trans {
|
||||
// Has a translucent background plate
|
||||
background: rgba($colorBodyBg, 0.8);
|
||||
border-radius: $controlCr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -233,6 +233,7 @@ mct-container {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
*[disabled],
|
||||
.disabled,
|
||||
a.disabled {
|
||||
opacity: $controlDisabledOpacity;
|
||||
|
||||
550
src/styles-new/_legacy-plots.scss
Normal file
550
src/styles-new/_legacy-plots.scss
Normal file
@ -0,0 +1,550 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/********************************************************************* PLOTS */
|
||||
mct-plot {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/*********************** STACKED PLOT LAYOUT */
|
||||
.t-plot-stacked {
|
||||
.l-view-section {
|
||||
// Make this a flex container
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
.gl-plot.child-frame {
|
||||
mct-plot {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
flex: 1 1 auto;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-timeconductor-unsynced .holder-plot {
|
||||
.t-object-alert.t-alert-unsynced {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
color: $colorPlotFg;
|
||||
display: flex;
|
||||
//font-size: 0.7rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $plotMinH;
|
||||
|
||||
/*********************** AXIS AND DISPLAY AREA */
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
margin-top: $interiorMargin; // Keep the top tick label from getting clipped
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
.t-object-alert {
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
top: $interiorMarginSm;
|
||||
left: $interiorMarginSm;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
// Holds the plot area and the X-axis only
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: nth($plotDisplayArea, 4);
|
||||
|
||||
.gl-plot-display-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gl-plot-axis-area.gl-plot-x {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: $plotXBarH;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-axis-area {
|
||||
position: absolute;
|
||||
&.gl-plot-y {
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: auto;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
width: $plotYBarW;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-coords {
|
||||
box-sizing: border-box;
|
||||
border-radius: $controlCr;
|
||||
background: black;
|
||||
color: lighten($colorBodyFg, 30%);
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea,1) + $interiorMarginLg;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: nth($plotDisplayArea,4) + $interiorMarginLg;
|
||||
z-index: 10;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-label,
|
||||
.l-plot-label {
|
||||
color: $colorPlotLabelFg;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
&.gl-plot-x-label,
|
||||
&.l-plot-x-label {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.gl-plot-y-label,
|
||||
&.l-plot-y-label {
|
||||
$x: -50%;
|
||||
$r: -90deg;
|
||||
transform-origin: 50% 0;
|
||||
transform: translateX($x) rotate($r);
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin; // Kick off the left edge
|
||||
left: 0;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-x-options,
|
||||
.gl-plot-y-options {
|
||||
$h: 24px;
|
||||
position: absolute;
|
||||
height: $h;
|
||||
min-height: $h;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gl-plot-x-options {
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.gl-plot-y-options {
|
||||
transform: translateY(-50%);
|
||||
min-width: 150px; // Need this due to enclosure of .select
|
||||
top: 50%;
|
||||
left: $plotYLabelW + $interiorMargin * 2;
|
||||
}
|
||||
|
||||
.t-plot-display-controls {
|
||||
position: absolute;
|
||||
top: $interiorMargin;
|
||||
right: $interiorMargin;
|
||||
}
|
||||
|
||||
.gl-plot-hash {
|
||||
position: absolute;
|
||||
opacity: $opacityPlotHash;
|
||||
&.hash-v {
|
||||
border-right: 1px $colorPlotHash $stylePlotHash;
|
||||
height: 100%;
|
||||
}
|
||||
&.hash-h {
|
||||
border-bottom: 1px $colorPlotHash $stylePlotHash;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__local-controls {
|
||||
// Plot local controls
|
||||
$m: $interiorMargin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: $m;
|
||||
right: $m;
|
||||
z-index: 9;
|
||||
|
||||
&__reset {
|
||||
transition: right 100ms;
|
||||
top: $m;
|
||||
right: $m;
|
||||
}
|
||||
|
||||
&__zoom-and-guides {
|
||||
top: $m;
|
||||
right: $m;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area,
|
||||
.plot-display-area {
|
||||
@if $colorPlotBg != none {
|
||||
background-color: $colorPlotBg;
|
||||
}
|
||||
cursor: crosshair;
|
||||
border: 1px solid $colorPlotAreaBorder;
|
||||
}
|
||||
|
||||
.tick {
|
||||
position: absolute;
|
||||
border: 0 $colorPlotHash solid;
|
||||
&.tick-x {
|
||||
border-right-width: 1px;
|
||||
height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
@include reverseEllipsis();
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
&.gl-plot-x-tick-label,
|
||||
&.tick-label-x {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: 20%;
|
||||
margin-left: -10%;
|
||||
text-align: center;
|
||||
}
|
||||
&.gl-plot-y-tick-label,
|
||||
&.tick-label-y {
|
||||
top: auto;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
margin-bottom: -0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-tick {
|
||||
&.gl-plot-x-tick-label {
|
||||
top: $interiorMargin;
|
||||
}
|
||||
&.gl-plot-y-tick-label {
|
||||
right: $interiorMargin;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.tick-label {
|
||||
&.tick-label-x {
|
||||
top: 0;
|
||||
}
|
||||
&.tick-label-y {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.export-plot {
|
||||
$bg: white;
|
||||
$fg: black;
|
||||
$gry: #999;
|
||||
|
||||
background: $bg !important;
|
||||
z-index: -10;
|
||||
|
||||
.l-view-section {
|
||||
$m: $interiorMargin;
|
||||
top: $m !important;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
|
||||
.s-status-timeconductor-unsynced .holder-plot {
|
||||
.t-object-alert.t-alert-unsynced {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area {
|
||||
background: none !important;
|
||||
border-color: $gry !important;
|
||||
|
||||
.gl-plot-local-controls,
|
||||
.h-local-controls {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
color: $fg;
|
||||
|
||||
.gl-plot-hash {
|
||||
opacity: 0.1;
|
||||
border-color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
thead {
|
||||
border-bottom: none;
|
||||
|
||||
th {
|
||||
background: #eee;
|
||||
border-left-color: $bg;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
td {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************** _LEGEND.SCSS */
|
||||
.gl-plot-legend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&__view-control {
|
||||
padding-top: 2px;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
th,
|
||||
td {
|
||||
@include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
|
||||
padding: 1px 3px; // Tighter than standard tabular padding
|
||||
}
|
||||
}
|
||||
|
||||
&.hover-on-plot {
|
||||
// User is hovering over the plot to get a value at a point
|
||||
.hover-value-enabled {
|
||||
background-color: $legendHoverValueBg;
|
||||
border-radius: $smallCr;
|
||||
padding: 0 $interiorMarginSm;
|
||||
|
||||
&.value-to-display-min:before {
|
||||
content: 'MIN ';
|
||||
}
|
||||
&.value-to-display-max:before {
|
||||
content: 'MAX ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** GENERAL STYLES, ALL STATES */
|
||||
.plot-legend-item {
|
||||
// General styles for legend items, both expanded and collapsed legend states
|
||||
.plot-series-color-swatch {
|
||||
border-radius: $smallCr;
|
||||
border: 1px solid $colorBodyBg;
|
||||
display: inline-block;
|
||||
height: $plotSwatchD;
|
||||
width: $plotSwatchD;
|
||||
}
|
||||
.plot-series-name {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
@include ellipsize();
|
||||
}
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
&.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
|
||||
&.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
|
||||
|
||||
/***************** GENERAL STYLES, COLLAPSED */
|
||||
&.plot-legend-collapsed {
|
||||
// .plot-legend-item is a span of spans.
|
||||
&.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; }
|
||||
&.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
|
||||
|
||||
.plot-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
&:not(:first-child) {
|
||||
margin-left: $interiorMarginLg;
|
||||
}
|
||||
.plot-series-swatch-and-name,
|
||||
.plot-series-value {
|
||||
@include ellipsize();
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.plot-series-swatch-and-name {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** GENERAL STYLES, EXPANDED */
|
||||
&.plot-legend-expanded {
|
||||
.gl-plot-legend {
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/***************** TOP OR BOTTOM */
|
||||
&.plot-legend-top,
|
||||
&.plot-legend-bottom {
|
||||
// General styles when legend is on the top or bottom
|
||||
flex-direction: column;
|
||||
|
||||
&.plot-legend-collapsed {
|
||||
// COLLAPSED ON TOP OR BOTTOM
|
||||
.plot-wrapper-collapsed-legend {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** EITHER SIDE */
|
||||
&.plot-legend-left,
|
||||
&.plot-legend-right {
|
||||
// If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
|
||||
&.plot-legend-expanded {
|
||||
// EXPANDED, ON EITHER SIDE
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.plot-legend-collapsed {
|
||||
// COLLAPSED, ON EITHER SIDE
|
||||
.gl-plot-legend {
|
||||
max-height: inherit;
|
||||
width: 25%;
|
||||
}
|
||||
.plot-wrapper-collapsed-legend {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.plot-legend-item {
|
||||
margin-bottom: 1px;
|
||||
margin-left: 0;
|
||||
flex-wrap: wrap;
|
||||
.plot-series-swatch-and-name {
|
||||
flex: 0 1 auto;
|
||||
min-width: 20%;
|
||||
}
|
||||
.plot-series-value {
|
||||
flex: 0 1 auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** ON BOTTOM OR RIGHT */
|
||||
&.plot-legend-right:not(.plot-legend-expanded),
|
||||
&.plot-legend-bottom {
|
||||
.gl-plot-legend {
|
||||
order: 2;
|
||||
}
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** CURSOR GUIDES */
|
||||
[class*='c-cursor-guide'] {
|
||||
box-shadow: $shdwCursorGuide;
|
||||
background-color: $colorCursorGuide;
|
||||
display: none; // Displayed when an element with has-cursor-guides gets a hover; see below
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.has-cursor-guides:hover [class*='c-cursor-guide'] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c-cursor-guide {
|
||||
&--h {
|
||||
height: 1px;
|
||||
left: 0; right: 0;
|
||||
}
|
||||
|
||||
&--v {
|
||||
width: 1px;
|
||||
top: 0; bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -19,491 +19,6 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/********************************************************************* PLOTS */
|
||||
mct-plot {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/*********************** STACKED PLOT LAYOUT */
|
||||
.t-plot-stacked {
|
||||
.l-view-section {
|
||||
// Make this a flex container
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
.gl-plot.child-frame {
|
||||
mct-plot {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
flex: 1 1 auto;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-timeconductor-unsynced .holder-plot {
|
||||
.t-object-alert.t-alert-unsynced {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
color: $colorPlotFg;
|
||||
display: flex;
|
||||
font-size: 0.7rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: $plotMinH;
|
||||
|
||||
/*********************** AXIS AND DISPLAY AREA */
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
margin-top: $interiorMargin; // Keep the top tick label from getting clipped
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
.t-object-alert {
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
top: $interiorMarginSm;
|
||||
left: $interiorMarginSm;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
// Holds the plot area and the X-axis only
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: nth($plotDisplayArea, 4);
|
||||
|
||||
.gl-plot-display-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gl-plot-axis-area.gl-plot-x {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: $plotXBarH;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-axis-area {
|
||||
position: absolute;
|
||||
&.gl-plot-y {
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: auto;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
width: $plotYBarW;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-coords {
|
||||
box-sizing: border-box;
|
||||
border-radius: $controlCr;
|
||||
background: black;
|
||||
color: lighten($colorBodyFg, 30%);
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea,1) + $interiorMarginLg;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: nth($plotDisplayArea,4) + $interiorMarginLg;
|
||||
z-index: 10;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-label,
|
||||
.l-plot-label {
|
||||
color: $colorPlotLabelFg;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
&.gl-plot-x-label,
|
||||
&.l-plot-x-label {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.gl-plot-y-label,
|
||||
&.l-plot-y-label {
|
||||
$x: -50%;
|
||||
$r: -90deg;
|
||||
transform-origin: 50% 0;
|
||||
transform: translateX($x) rotate($r);
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin; // Kick off the left edge
|
||||
left: 0;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-x-options,
|
||||
.gl-plot-y-options {
|
||||
$h: 24px;
|
||||
position: absolute;
|
||||
height: $h;
|
||||
min-height: $h;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gl-plot-x-options {
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.gl-plot-y-options {
|
||||
transform: translateY(-50%);
|
||||
min-width: 150px; // Need this due to enclosure of .select
|
||||
top: 50%;
|
||||
left: $plotYLabelW + $interiorMargin * 2;
|
||||
}
|
||||
|
||||
.t-plot-display-controls {
|
||||
position: absolute;
|
||||
top: $interiorMargin;
|
||||
right: $interiorMargin;
|
||||
}
|
||||
|
||||
.gl-plot-hash {
|
||||
position: absolute;
|
||||
opacity: $opacityPlotHash;
|
||||
&.hash-v {
|
||||
border-right: 1px $colorPlotHash $stylePlotHash;
|
||||
height: 100%;
|
||||
}
|
||||
&.hash-h {
|
||||
border-bottom: 1px $colorPlotHash $stylePlotHash;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area,
|
||||
.plot-display-area {
|
||||
@if $colorPlotBg != none {
|
||||
background-color: $colorPlotBg;
|
||||
}
|
||||
cursor: crosshair;
|
||||
border: 1px solid $colorPlotAreaBorder;
|
||||
}
|
||||
|
||||
.tick {
|
||||
position: absolute;
|
||||
border: 0 $colorPlotHash solid;
|
||||
&.tick-x {
|
||||
border-right-width: 1px;
|
||||
height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
@include reverseEllipsis();
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
&.gl-plot-x-tick-label,
|
||||
&.tick-label-x {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: 20%;
|
||||
margin-left: -10%;
|
||||
text-align: center;
|
||||
}
|
||||
&.gl-plot-y-tick-label,
|
||||
&.tick-label-y {
|
||||
top: auto;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
margin-bottom: -0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-tick {
|
||||
&.gl-plot-x-tick-label {
|
||||
top: $interiorMargin;
|
||||
}
|
||||
&.gl-plot-y-tick-label {
|
||||
right: $interiorMargin;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.tick-label {
|
||||
&.tick-label-x {
|
||||
top: 0;
|
||||
}
|
||||
&.tick-label-y {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.export-plot {
|
||||
$bg: white;
|
||||
$fg: black;
|
||||
$gry: #999;
|
||||
|
||||
background: $bg !important;
|
||||
z-index: -10;
|
||||
|
||||
.l-view-section {
|
||||
$m: $interiorMargin;
|
||||
top: $m !important;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
|
||||
.s-status-timeconductor-unsynced .holder-plot {
|
||||
.t-object-alert.t-alert-unsynced {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area {
|
||||
background: none !important;
|
||||
border-color: $gry !important;
|
||||
|
||||
.gl-plot-local-controls,
|
||||
.h-local-controls {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
color: $fg;
|
||||
|
||||
.gl-plot-hash {
|
||||
opacity: 0.1;
|
||||
border-color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
thead {
|
||||
border-bottom: none;
|
||||
|
||||
th {
|
||||
background: #eee;
|
||||
border-left-color: $bg;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
td {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************** _LEGEND.SCSS */
|
||||
.gl-plot-legend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&__view-control {
|
||||
padding-top: 2px;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
th,
|
||||
td {
|
||||
@include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
|
||||
padding: 1px 3px; // Tighter than standard tabular padding
|
||||
//width: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
&.hover-on-plot {
|
||||
// User is hovering over the plot to get a value at a point
|
||||
.hover-value-enabled {
|
||||
background-color: $legendHoverValueBg;
|
||||
border-radius: $smallCr;
|
||||
padding: 0 $interiorMarginSm;
|
||||
|
||||
&.value-to-display-min:before {
|
||||
content: 'MIN ';
|
||||
}
|
||||
&.value-to-display-max:before {
|
||||
content: 'MAX ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** GENERAL STYLES, ALL STATES */
|
||||
.plot-legend-item {
|
||||
// General styles for legend items, both expanded and collapsed legend states
|
||||
.plot-series-color-swatch {
|
||||
border-radius: $smallCr;
|
||||
border: 1px solid $colorBodyBg;
|
||||
display: inline-block;
|
||||
height: $plotSwatchD;
|
||||
width: $plotSwatchD;
|
||||
}
|
||||
.plot-series-name {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
@include ellipsize();
|
||||
}
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.gl-plot {
|
||||
&.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
|
||||
&.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
|
||||
|
||||
/***************** GENERAL STYLES, COLLAPSED */
|
||||
&.plot-legend-collapsed {
|
||||
// .plot-legend-item is a span of spans.
|
||||
&.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; }
|
||||
&.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
|
||||
|
||||
.plot-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
&:not(:first-child) {
|
||||
margin-left: $interiorMarginLg;
|
||||
}
|
||||
.plot-series-swatch-and-name,
|
||||
.plot-series-value {
|
||||
@include ellipsize();
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.plot-series-swatch-and-name {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.plot-series-value {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** GENERAL STYLES, EXPANDED */
|
||||
&.plot-legend-expanded {
|
||||
.gl-plot-legend {
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/***************** TOP OR BOTTOM */
|
||||
&.plot-legend-top,
|
||||
&.plot-legend-bottom {
|
||||
// General styles when legend is on the top or bottom
|
||||
flex-direction: column;
|
||||
|
||||
&.plot-legend-collapsed {
|
||||
// COLLAPSED ON TOP OR BOTTOM
|
||||
.plot-wrapper-collapsed-legend {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** EITHER SIDE */
|
||||
&.plot-legend-left,
|
||||
&.plot-legend-right {
|
||||
// If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
|
||||
&.plot-legend-expanded {
|
||||
// EXPANDED, ON EITHER SIDE
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.plot-legend-collapsed {
|
||||
// COLLAPSED, ON EITHER SIDE
|
||||
.gl-plot-legend {
|
||||
max-height: inherit;
|
||||
width: 25%;
|
||||
}
|
||||
.plot-wrapper-collapsed-legend {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.plot-legend-item {
|
||||
margin-bottom: 1px;
|
||||
margin-left: 0;
|
||||
flex-wrap: wrap;
|
||||
.plot-series-swatch-and-name {
|
||||
flex: 0 1 auto;
|
||||
min-width: 20%;
|
||||
}
|
||||
.plot-series-value {
|
||||
flex: 0 1 auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************** ON BOTTOM OR RIGHT */
|
||||
&.plot-legend-right:not(.plot-legend-expanded),
|
||||
&.plot-legend-bottom {
|
||||
.gl-plot-legend {
|
||||
order: 2;
|
||||
}
|
||||
.plot-wrapper-axis-and-display-area {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* VIEWS */
|
||||
// From _views.scss
|
||||
// Legacy overlay and stacked plots depend on this for now
|
||||
@ -582,7 +97,6 @@ mct-plot {
|
||||
}
|
||||
|
||||
.l-image-main-controlbar {
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
.l-datetime-w, .l-controls-w {
|
||||
direction: rtl;
|
||||
@ -624,7 +138,6 @@ mct-plot {
|
||||
}
|
||||
|
||||
/*************************************** THUMBS */
|
||||
|
||||
.l-image-thumbs-wrapper {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@ -639,7 +152,6 @@ mct-plot {
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 0.8em;
|
||||
padding: 1px;
|
||||
margin-left: $interiorMarginSm;
|
||||
position: relative;
|
||||
@ -679,9 +191,14 @@ mct-plot {
|
||||
}
|
||||
|
||||
/*************************************** LOCAL CONTROLS */
|
||||
.t-imagery {
|
||||
.c-imagery {
|
||||
display: contents;
|
||||
.h-local-controls.h-local-controls-overlay-content {
|
||||
.h-local-controls--overlay-content {
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: $interiorMargin;
|
||||
z-index: 2;
|
||||
background: $colorLocalControlOvrBg;
|
||||
border-radius: $basicCr;
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
@ -699,8 +216,10 @@ mct-plot {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-reset-btn-holder {
|
||||
&__lc {
|
||||
&__reset-btn {
|
||||
$bc: $scrollbarTrackColorBg;
|
||||
&:before,
|
||||
&:after {
|
||||
@ -730,8 +249,8 @@ mct-plot {
|
||||
.l-image-main-wrapper {
|
||||
bottom: 0 !important;
|
||||
height: 100% !important;
|
||||
.l-image-main-controlbar {
|
||||
font-size: 0.7em;
|
||||
.l-image-main-controlbar .c-button {
|
||||
//font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
.l-image-thumbs-wrapper,
|
||||
@ -1723,6 +1242,10 @@ body.desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.c-loading--overlay {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* FLEX STYLES */
|
||||
|
||||
@ -391,7 +391,8 @@
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
|
||||
&[class*="--major"] {
|
||||
&[class*="--major"],
|
||||
&[class*='is-active']{
|
||||
background: $colorBtnMajorBg;
|
||||
color: $colorBtnMajorFg;
|
||||
|
||||
|
||||
@ -31,3 +31,4 @@
|
||||
@import "forms";
|
||||
@import "table";
|
||||
@import "legacy";
|
||||
@import "legacy-plots";
|
||||
|
||||
@ -113,6 +113,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-click-icon,
|
||||
.c-button {
|
||||
// Shrink buttons a bit when they appear in a frame
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user