mirror of
https://github.com/nasa/openmct.git
synced 2025-02-18 16:40:58 +00:00
Styling to support Plotly integration (#2532)
* Mods to support NIRVSS spectra plot enhancements - Plot legend can display a header element, related styles; - Remove unneeded margin from propertiesHeader mixin; * Mods to support NIRVSS spectra plot enhancements - Finessing plot legend header styling; - New theme constants for plot legend header; - Increased size of plot color swatches; * Mods to support NIRVSS spectra plot enhancements - Major progress on Plotly style overrides; * New glyphs for Spectra and Commands * Icon backgrounds added for new glyphs - bg-icon-spectra, -spectra-telemetry and -command; * Plot legend enhancements - Make selector for .hover-value-enabled less selective; * Move plotly SCSS into its own file
This commit is contained in:
Charles Hacskaylo
Andrew Henry
parent
e58e9d3a26
commit
93abb09419
@ -20,94 +20,97 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
|
||||
<div class="gl-plot-legend"
|
||||
<div class="c-plot-legend gl-plot-legend"
|
||||
ng-class="{ 'hover-on-plot': !!highlights.length }"
|
||||
ng-show="legend.get('position') !== 'hidden'">
|
||||
<div class="gl-plot-legend__view-control c-disclosure-triangle is-enabled"
|
||||
<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'));">
|
||||
</div>
|
||||
|
||||
<!-- COLLAPSED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-collapsed-legend"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
<div class="plot-legend-item"
|
||||
ng-repeat="series in series track by $index">
|
||||
<div class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="plot-series-name">{{ series.get('name') }}</span>
|
||||
</div>
|
||||
<div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
|
||||
ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
|
||||
ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
|
||||
{{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
|
||||
series.formatY(series.closest) :
|
||||
legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
|
||||
series.closest && series.formatX(series.closest) :
|
||||
series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-plot-legend__wrapper">
|
||||
|
||||
<!-- EXPANDED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-expanded-legend">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th ng-if="legend.get('showTimestampWhenExpanded')">
|
||||
Timestamp
|
||||
</th>
|
||||
<th ng-if="legend.get('showValueWhenExpanded')">
|
||||
Value
|
||||
</th>
|
||||
<th ng-if="legend.get('showMinimumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
Min
|
||||
</th>
|
||||
<th ng-if="legend.get('showMaximumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
Max
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr ng-repeat="series in series" class="plot-legend-item">
|
||||
<td class="plot-series-swatch-and-name"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
<!-- COLLAPSED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-collapsed-legend"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
<div class="plot-legend-item"
|
||||
ng-repeat="series in series track by $index">
|
||||
<div class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="plot-series-name">{{ series.get('name') }}</span>
|
||||
</td>
|
||||
</div>
|
||||
<div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
|
||||
ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
|
||||
ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
|
||||
{{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
|
||||
series.formatY(series.closest) :
|
||||
legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
|
||||
series.closest && series.formatX(series.closest) :
|
||||
series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<td ng-if="legend.get('showTimestampWhenExpanded')">
|
||||
<span class="plot-series-value cursor-hover hover-value-enabled">
|
||||
{{ series.closest && series.formatX(series.closest) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showValueWhenExpanded')">
|
||||
<span class="plot-series-value cursor-hover hover-value-enabled"
|
||||
ng-class="series.closest.mctLimitState.cssClass">
|
||||
{{ series.formatY(series.closest) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showMinimumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
<span class="plot-series-value">
|
||||
{{ series.formatY(series.get('stats').minPoint) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showMaximumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
<span class="plot-series-value">
|
||||
{{ series.formatY(series.get('stats').maxPoint) }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- EXPANDED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-expanded-legend">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th ng-if="legend.get('showTimestampWhenExpanded')">
|
||||
Timestamp
|
||||
</th>
|
||||
<th ng-if="legend.get('showValueWhenExpanded')">
|
||||
Value
|
||||
</th>
|
||||
<th ng-if="legend.get('showMinimumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
Min
|
||||
</th>
|
||||
<th ng-if="legend.get('showMaximumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
Max
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr ng-repeat="series in series" class="plot-legend-item">
|
||||
<td class="plot-series-swatch-and-name"
|
||||
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="plot-series-name">{{ series.get('name') }}</span>
|
||||
</td>
|
||||
|
||||
<td ng-if="legend.get('showTimestampWhenExpanded')">
|
||||
<span class="plot-series-value cursor-hover hover-value-enabled">
|
||||
{{ series.closest && series.formatX(series.closest) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showValueWhenExpanded')">
|
||||
<span class="plot-series-value cursor-hover hover-value-enabled"
|
||||
ng-class="series.closest.mctLimitState.cssClass">
|
||||
{{ series.formatY(series.closest) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showMinimumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
<span class="plot-series-value">
|
||||
{{ series.formatY(series.get('stats').minPoint) }}
|
||||
</span>
|
||||
</td>
|
||||
<td ng-if="legend.get('showMaximumWhenExpanded')"
|
||||
class="mobile-hide">
|
||||
<span class="plot-series-value">
|
||||
{{ series.formatY(series.get('stats').maxPoint) }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -339,6 +339,7 @@ $stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
$legendTableHeadBg: rgba($colorBodyFg, 0.15);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
|
||||
@ -343,6 +343,7 @@ $stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
$legendTableHeadBg: rgba($colorBodyFg, 0.15);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
|
||||
@ -339,6 +339,7 @@ $stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
$legendTableHeadBg: rgba($colorBodyFg, 0.15);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
|
||||
@ -60,7 +60,7 @@ $plotXBarH: 35px;
|
||||
$plotLegendH: 20px;
|
||||
$plotLegendWidthCollapsed: 20%;
|
||||
$plotLegendWidthExpanded: 50%;
|
||||
$plotSwatchD: 8px;
|
||||
$plotSwatchD: 10px;
|
||||
$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
|
||||
$plotMinH: 95px;
|
||||
$controlBarH: 25px;
|
||||
@ -232,6 +232,9 @@ $glyph-icon-flexible-layout: '\eb20';
|
||||
$glyph-icon-generator-telemetry: '\eb21';
|
||||
$glyph-icon-generator-events: '\eb22';
|
||||
$glyph-icon-gauge: '\eb23';
|
||||
$glyph-icon-spectra: '\eb24';
|
||||
$glyph-icon-spectra-telemetry: '\eb25';
|
||||
$glyph-icon-command: '\eb26';
|
||||
|
||||
/************************** GLYPHS AS DATA URI */
|
||||
// Only objects have been converted, for use in Create menu and folder views
|
||||
@ -278,3 +281,6 @@ $bg-icon-flexible-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='ht
|
||||
$bg-icon-generator-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M76 236.9c5.4-2.1 20.4-17.8 34.9-54.7C126.8 141.5 154.5 93 196 93c19.7 0 38 10.9 54.6 32.5 14 18.2 24.4 40.8 30.5 56.7 14.5 36.9 29.5 52.6 34.9 54.7 5.4-2.1 20.4-17.8 34.9-54.7S388 104.5 421.7 95A192 192 0 0 0 256 0C150 0 64 86 64 192a197.2 197.2 0 0 0 3.7 37.9c3.6 4 6.5 6.3 8.3 7zM442.3 238.5A192.9 192.9 0 0 0 448 192a197.2 197.2 0 0 0-3.7-37.9c-3.6-4-6.5-6.3-8.3-7-5.4 2.1-20.4 17.8-34.9 54.7-10.9 27.9-27.3 59.5-50 76.6z'/%3e%3cpath d='M256 320l67.5-29.5a60.3 60.3 0 0 1-7.5.5c-19.7 0-38-10.9-54.6-32.5-14-18.2-24.4-40.8-30.5-56.7-14.5-36.9-29.5-52.6-34.9-54.7-5.4 2.1-20.4 17.8-34.9 54.7-8.2 21.1-19.6 44.2-34.4 61.6z'/%3e%3cpath d='M512 240L256 352 0 240v160l256 112 256-112V240z'/%3e%3c/svg%3e");
|
||||
$bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
|
||||
$bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256c0 113.2 73.5 209.2 175.3 243L304 256v251.5C422.4 485 512 381 512 256 512 114.6 397.4 0 256 0zm121.4 263.9a159.8 159.8 0 0 0-242.8 0l-73-62.5c4.3-5 8.7-9.8 13.4-14.4a255.9 255.9 0 0 1 362 0c4.7 4.6 9.1 9.4 13.4 14.4z'/%3e%3c/svg%3e");
|
||||
$bg-icon-spectra: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M384 352H128l51.2-89.6L0 288v127c0 53.3 43.7 97 97 97h318c53.4 0 97-43.7 97-97v-31l-162.9-93.1zM415 0H97C43.7 0 0 43.6 0 97v159l200-30.1 56-97.9 54.9 96H512V97a97.2 97.2 0 00-97-97zM512 320v-32l-192-32 192 64z'/%3e%3c/svg%3e");
|
||||
$bg-icon-spectra-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 128l54.9 96H510C494.3 97.7 386.5 0 256 0 114.6 0 0 114.6 0 256l200-30.1zM384 352H128l51.2-89.6L2 287.7C17.6 414.1 125.4 512 256 512c100.8 0 188-58.3 229.8-143l-136.7-78.1zM320 256l192 64v-32l-192-32z'/%3e%3c/svg%3e");
|
||||
$bg-icon-command: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M185.1 229.7a96.5 96.5 0 0015.8 11.7A68.5 68.5 0 01192 208c0-19.8 8.9-38.8 25.1-53.7 18.5-17 43.7-26.3 70.9-26.3 20.1 0 39.1 5.1 55.1 14.6a81.3 81.3 0 00-16.2-20.3C308.4 105.3 283.2 96 256 96s-52.4 9.3-70.9 26.3C168.9 137.2 160 156.2 160 176s8.9 38.8 25.1 53.7z'/%3e%3cpath d='M442.7 134.8C422.4 57.5 346.5 0 256 0S89.6 57.5 69.3 134.8C26.3 174.8 0 228.7 0 288c0 123.7 114.6 224 256 224s256-100.3 256-224c0-59.3-26.3-113.2-69.3-153.2zM256 64c70.6 0 128 50.2 128 112s-57.4 112-128 112-128-50.2-128-112S185.4 64 256 64zm0 352c-87.7 0-159.2-63.9-160-142.7 34.4 47.4 93.2 78.7 160 78.7s125.6-31.3 160-78.7c-.8 78.8-72.3 142.7-160 142.7z'/%3e%3c/svg%3e");
|
||||
|
||||
@ -166,6 +166,9 @@
|
||||
.icon-generator-telemetry { @include glyphBefore($glyph-icon-generator-telemetry); }
|
||||
.icon-generator-events { @include glyphBefore($glyph-icon-generator-events); }
|
||||
.icon-gauge { @include glyphBefore($glyph-icon-gauge); }
|
||||
.icon-spectra { @include glyphBefore($glyph-icon-spectra); }
|
||||
.icon-spectra-telemetry { @include glyphBefore($glyph-icon-spectra-telemetry); }
|
||||
.icon-command { @include glyphBefore($glyph-icon-command); }
|
||||
|
||||
/************************** 12 PX CLASSES */
|
||||
// TODO: sync with 16px redo as of 10/25/18
|
||||
@ -220,3 +223,6 @@
|
||||
.bg-icon-generator-telemetry { @include glyphBg($bg-icon-generator-telemetry); }
|
||||
.bg-icon-generator-events { @include glyphBg($bg-icon-generator-events); }
|
||||
.bg-icon-gauge { @include glyphBg($bg-icon-gauge); }
|
||||
.bg-icon-spectra { @include glyphBg($bg-icon-spectra); }
|
||||
.bg-icon-spectra-telemetry { @include glyphBg($bg-icon-spectra-telemetry); }
|
||||
.bg-icon-command { @include glyphBg($bg-icon-command); }
|
||||
|
||||
@ -394,15 +394,28 @@ mct-plot {
|
||||
}
|
||||
|
||||
/****************** _LEGEND.SCSS */
|
||||
.gl-plot-legend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.gl-plot-legend,
|
||||
.c-plot-legend {
|
||||
&__wrapper {
|
||||
// Holds view-control and both collapsed and expanded legends
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__view-control {
|
||||
padding-top: 2px;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__header {
|
||||
@include propertiesHeader();
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-legend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
th,
|
||||
@ -411,7 +424,9 @@ mct-plot {
|
||||
padding: 1px 3px; // Tighter than standard tabular padding
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*[class*="-legend"] {
|
||||
&.hover-on-plot {
|
||||
// User is hovering over the plot to get a value at a point
|
||||
.hover-value-enabled {
|
||||
@ -499,6 +514,7 @@ mct-plot {
|
||||
|
||||
.plot-wrapper-expanded-legend {
|
||||
overflow-y: auto;
|
||||
table thead th { background: $legendTableHeadBg; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -231,7 +231,6 @@
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
font-weight: normal;
|
||||
margin: $interiorMarginSm 0;
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -33,4 +33,5 @@
|
||||
@import "table";
|
||||
@import "legacy";
|
||||
@import "legacy-plots";
|
||||
@import "plotly";
|
||||
@import "legacy-messages";
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"metadata": {
|
||||
"name": "Open MCT Symbols 16px",
|
||||
"lastOpened": 0,
|
||||
"created": 1567791159617
|
||||
"created": 1572989474120
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -1022,13 +1022,37 @@
|
||||
"prevSize": 24,
|
||||
"code": 60195,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 170,
|
||||
"id": 148,
|
||||
"name": "icon-spectra",
|
||||
"prevSize": 24,
|
||||
"code": 60196,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 171,
|
||||
"id": 147,
|
||||
"name": "icon-telemetry-spectra",
|
||||
"prevSize": 24,
|
||||
"code": 60197,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 172,
|
||||
"id": 146,
|
||||
"name": "icon-pushbutton",
|
||||
"prevSize": 24,
|
||||
"code": 60198,
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"id": 0,
|
||||
"metadata": {
|
||||
"name": "Open MCT Symbols 16px",
|
||||
"importSize": {
|
||||
"width": 384,
|
||||
"width": 512,
|
||||
"height": 512
|
||||
},
|
||||
"designer": "Charles Hacskaylo"
|
||||
@ -2667,6 +2691,61 @@
|
||||
"tags": [
|
||||
"icon-gauge-v2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 148,
|
||||
"paths": [
|
||||
"M768 704h-512l102.4-179.2-358.4 51.2v254c0 106.6 87.4 194 194 194h636c106.8 0 194-87.4 194-194v-62l-325.8-186.2z",
|
||||
"M830 0h-636c-106.6 0-194 87.2-194 194v318l400-60.2 112-195.8 109.8 192h402.2v-254c-0.227-107.052-86.948-193.773-193.978-194l-0.022-0z",
|
||||
"M1024 640v-64l-384-64 384 128z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-spectra"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 147,
|
||||
"paths": [
|
||||
"M512 256l109.8 192h398.2c-31.4-252.6-247-448-508-448-282.8 0-512 229.2-512 512l400-60.2z",
|
||||
"M768 704h-512l102.4-179.2-354.4 50.6c31.2 252.8 246.8 448.6 508 448.6 201.6 0 376-116.6 459.6-286l-273.4-156.2z",
|
||||
"M640 512l384 128v-64l-384-64z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-telemetry-spectra"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 146,
|
||||
"paths": [
|
||||
"M370.2 459.4c9.326 8.53 19.666 16.261 30.729 22.914l0.871 0.486c-11.077-19.209-17.664-42.221-17.8-66.76l-0-0.040c0-39.6 17.8-77.6 50.2-107.4 37-34 87.4-52.6 141.8-52.6 40.2 0 78.2 10.2 110.2 29.2-8.918-15.653-19.693-29.040-32.268-40.482l-0.132-0.118c-37-34-87.4-52.6-141.8-52.6s-104.8 18.6-141.8 52.6c-32.4 29.8-50.2 67.8-50.2 107.4s17.8 77.6 50.2 107.4z",
|
||||
"M885.4 269.6c-40.6-154.6-192.4-269.6-373.4-269.6s-332.8 115-373.4 269.6c-86 80-138.6 187.8-138.6 306.4 0 247.4 229.2 448 512 448s512-200.6 512-448c0-118.6-52.6-226.4-138.6-306.4zM512 128c141.2 0 256 100.4 256 224s-114.8 224-256 224-256-100.4-256-224 114.8-224 256-224zM512 832c-175.4 0-318.4-127.8-320-285.4 68.8 94.8 186.4 157.4 320 157.4s251.2-62.6 320-157.4c-1.6 157.6-144.6 285.4-320 285.4z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-pushbutton"
|
||||
]
|
||||
}
|
||||
],
|
||||
"invisible": false,
|
||||
|
||||
3
src/styles/fonts/Open-MCT-Symbols-16px.svg
Normal file → Executable file
3
src/styles/fonts/Open-MCT-Symbols-16px.svg
Normal file → Executable file
@ -134,4 +134,7 @@
|
||||
<glyph unicode="" glyph-name="icon-generator-sine" d="M152 358.2c10.8 4.2 40.8 35.6 69.8 109.4 31.8 81.4 87.2 178.4 170.2 178.4 39.4 0 76-21.8 109.2-65 28-36.4 48.8-81.6 61-113.4 29-73.8 59-105.2 69.8-109.4 10.8 4.2 40.8 35.6 69.8 109.4s74.2 155.4 141.6 174.4c-67.89 114.467-190.82 190-331.391 190-0.003 0-0.007 0-0.010 0h0.001c-212 0-384-172-384-384 0.017-26.829 2.71-53.018 7.827-78.329l-0.427 2.529c7.2-8 13-12.6 16.6-14zM884.6 355c7.235 27.919 11.392 59.972 11.4 92.995v0.005c-0.017 26.829-2.71 53.018-7.827 78.329l0.427-2.529c-7.2 8-13 12.6-16.6 14-10.8-4.2-40.8-35.6-69.8-109.4-21.8-55.8-54.6-119-100-153.2zM512 192l135 59c-4.485-0.614-9.689-0.977-14.972-1h-0.028c-39.4 0-76 21.8-109.2 65-28 36.4-48.8 81.6-61 113.4-29 73.8-59 105.2-69.8 109.4-10.8-4.2-40.8-35.6-69.8-109.4-16.4-42.2-39.2-88.4-68.8-123.2zM1024 352l-512-224-512 224v-320l512-224 512 224v320z" />
|
||||
<glyph unicode="" glyph-name="icon-generator-event" d="M320 640h384v-64h-384v64zM320 384h384v-64h-384v64zM320 512h320v-64h-320v64zM256 703.8h512v-399.8l128 56v344c-0.227 70.601-57.399 127.773-127.978 128h-512.022c-70.601-0.227-127.773-57.399-128-127.978v-344.022l128-56zM658.2 256h-292.4l146.2-64 146.2 64zM512 128l-512 224v-320l512-224 512 224v320l-512-224z" />
|
||||
<glyph unicode="" glyph-name="icon-gauge-v2" d="M512 832c-282.8 0-512-229.2-512-512 0-226.4 147-418.4 350.6-486l257.4 486v-503c236.8 45 416 253 416 503 0 282.8-229.2 512-512 512zM754.8 304.2c-58.967 68.597-145.842 111.772-242.8 111.772s-183.833-43.176-242.445-111.35l-0.355-0.422-146 125c8.6 10 17.4 19.6 26.8 28.8 92.628 92.679 220.619 150.006 362 150.006s269.372-57.326 361.997-150.003l0.003-0.003c9.4-9.2 18.2-18.8 26.8-28.8z" />
|
||||
<glyph unicode="" glyph-name="icon-spectra" d="M768 128h-512l102.4 179.2-358.4-51.2v-254c0-106.6 87.4-194 194-194h636c106.8 0 194 87.4 194 194v62l-325.8 186.2zM830 832h-636c-106.6 0-194-87.2-194-194v-318l400 60.2 112 195.8 109.8-192h402.2v254c-0.227 107.052-86.948 193.773-193.978 194h-0.022zM1024 192v64l-384 64 384-128z" />
|
||||
<glyph unicode="" glyph-name="icon-telemetry-spectra" d="M512 576l109.8-192h398.2c-31.4 252.6-247 448-508 448-282.8 0-512-229.2-512-512l400 60.2zM768 128h-512l102.4 179.2-354.4-50.6c31.2-252.8 246.8-448.6 508-448.6 201.6 0 376 116.6 459.6 286l-273.4 156.2zM640 320l384-128v64l-384 64z" />
|
||||
<glyph unicode="" glyph-name="icon-pushbutton" d="M370.2 372.6c9.326-8.53 19.666-16.261 30.729-22.914l0.871-0.486c-11.077 19.209-17.664 42.221-17.8 66.76v0.040c0 39.6 17.8 77.6 50.2 107.4 37 34 87.4 52.6 141.8 52.6 40.2 0 78.2-10.2 110.2-29.2-8.918 15.653-19.693 29.040-32.268 40.482l-0.132 0.118c-37 34-87.4 52.6-141.8 52.6s-104.8-18.6-141.8-52.6c-32.4-29.8-50.2-67.8-50.2-107.4s17.8-77.6 50.2-107.4zM885.4 562.4c-40.6 154.6-192.4 269.6-373.4 269.6s-332.8-115-373.4-269.6c-86-80-138.6-187.8-138.6-306.4 0-247.4 229.2-448 512-448s512 200.6 512 448c0 118.6-52.6 226.4-138.6 306.4zM512 704c141.2 0 256-100.4 256-224s-114.8-224-256-224-256 100.4-256 224 114.8 224 256 224zM512 0c-175.4 0-318.4 127.8-320 285.4 68.8-94.8 186.4-157.4 320-157.4s251.2 62.6 320 157.4c-1.6-157.6-144.6-285.4-320-285.4z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 50 KiB |
BIN
src/styles/fonts/Open-MCT-Symbols-16px.ttf
Normal file → Executable file
BIN
src/styles/fonts/Open-MCT-Symbols-16px.ttf
Normal file → Executable file
Binary file not shown.
BIN
src/styles/fonts/Open-MCT-Symbols-16px.woff
Normal file → Executable file
BIN
src/styles/fonts/Open-MCT-Symbols-16px.woff
Normal file → Executable file
Binary file not shown.
51
src/styles/plotly.scss
Normal file
51
src/styles/plotly.scss
Normal file
@ -0,0 +1,51 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2019, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/***************** PLOTLY OVERRIDES */
|
||||
.plot-container.plotly {
|
||||
.bglayer .bg {
|
||||
fill: $colorPlotBg !important;
|
||||
fill-opacity: 1 !important;
|
||||
stroke: $colorInteriorBorder;
|
||||
stroke-width: 1 !important;
|
||||
}
|
||||
|
||||
.cartesianlayer .gridlayer {
|
||||
.x,
|
||||
.y {
|
||||
path {
|
||||
opacity: $opacityPlotHash;
|
||||
stroke: $colorPlotHash !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xtick,
|
||||
.ytick,
|
||||
.g-xtitle,
|
||||
.g-ytitle {
|
||||
text {
|
||||
fill: $colorPlotFg !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user