mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 07:16:39 +00:00
Closes #7960
- Removed in-page `style` defs from ExtendedLinesOverlay.vue; CSS actually located in timeline.scss. - Improved sizing and style for Marcus Bains ("now") line. - Removed extraneous padding at bottom of plot view when in Time Strip. - Added missing header info to timeline.scss. - CSS refinements.
This commit is contained in:
parent
96d8870f22
commit
38292953fc
@ -21,7 +21,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="events" class="c-events-tsv c-timeline-holder">
|
||||
<div ref="events" class="c-events-tsv">
|
||||
<div ref="eventsHolder" class="c-events-tsv__contents u-contents"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,4 +1,5 @@
|
||||
.c-events-tsv {
|
||||
overflow: hidden;
|
||||
div.c-events-tsv__event-wrapper {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
@ -8,22 +9,22 @@
|
||||
margin-top: 5px;
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
|
||||
|
||||
[class*='__event-handle'] {
|
||||
background-color: $colorBodyFg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__no-items {
|
||||
fill: $colorBodyFg !important;
|
||||
}
|
||||
|
||||
|
||||
&__event-handle {
|
||||
background-color: rgba($colorBodyFg, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.c-events-canvas {
|
||||
pointer-events: auto; // This allows the event element to receive a browser-level context click
|
||||
position: absolute;
|
||||
@ -31,4 +32,3 @@
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
@ -19,9 +19,8 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="extended-lines-overlay">
|
||||
<div class="c-timeline__overlay-lines">
|
||||
<div v-for="(lines, key) in extendedLinesPerKey" :key="key" class="extended-line-container">
|
||||
<div
|
||||
v-for="(line, index) in lines"
|
||||
@ -53,22 +52,3 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.extended-lines-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.extended-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,23 +1,51 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2024, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/********************************************* TIME STRIP */
|
||||
.c-timeline-holder {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
// Plot view overrides
|
||||
.gl-plot-display-area,
|
||||
.gl-plot-axis-area.gl-plot-y {
|
||||
bottom: $interiorMargin !important;
|
||||
}
|
||||
}
|
||||
|
||||
.c-timeline__objects {
|
||||
display: contents;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.extended-lines-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none; /* Allows clicks to pass through */
|
||||
z-index: 10; /* Ensure it sits atop swimlanes */
|
||||
.c-timeline__overlay-lines {
|
||||
//background: rgba(deeppink, 0.2);
|
||||
@include abs();
|
||||
pointer-events: none; /* Allows clicks to pass through */
|
||||
z-index: 10; /* Ensure it sits atop swimlanes */
|
||||
}
|
||||
|
||||
.extended-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
background-color: $colorBodyFg; /* Use desired color */
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
background-color: $colorBodyFg; /* Use desired color */
|
||||
}
|
||||
|
@ -21,9 +21,9 @@
|
||||
-->
|
||||
<template>
|
||||
<div ref="axisHolder" class="c-timesystem-axis">
|
||||
<div class="nowMarker" :style="nowMarkerStyle"><span class="icon-arrow-down"></span></div>
|
||||
<div class="c-timesystem-axis__mb-line" :style="nowMarkerStyle"></div>
|
||||
<svg :width="svgWidth" :height="svgHeight">
|
||||
<g class="axis" font-size="1.3em" :transform="axisTransform"></g>
|
||||
<g class="axis" :transform="axisTransform"></g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
@ -44,6 +44,7 @@ import { useResizeObserver } from '../composables/resize';
|
||||
const PADDING = 1;
|
||||
const PIXELS_PER_TICK = 100;
|
||||
const PIXELS_PER_TICK_WIDE = 200;
|
||||
const TIME_AXIS_LINE_Y = 20;
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject', 'path'],
|
||||
@ -78,7 +79,7 @@ export default {
|
||||
const { size: containerSize, startObserving } = useResizeObserver();
|
||||
const svgWidth = ref(0);
|
||||
const svgHeight = ref(0);
|
||||
const axisTransform = ref('translate(0,20)');
|
||||
const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y}})`);
|
||||
const alignmentOffset = ref(0);
|
||||
const nowMarkerStyle = reactive({
|
||||
height: '0px',
|
||||
@ -169,10 +170,12 @@ export default {
|
||||
this.updateNowMarker();
|
||||
},
|
||||
updateNowMarker() {
|
||||
const nowMarker = this.$el.querySelector('.nowMarker');
|
||||
const nowMarker = this.$el.querySelector('.c-timesystem-axis__mb-line');
|
||||
if (nowMarker) {
|
||||
nowMarker.classList.remove('hidden');
|
||||
this.nowMarkerStyle.height = this.contentHeight + 'px';
|
||||
// const markerH = this.contentHeight - TIME_AXIS_LINE_Y;
|
||||
this.nowMarkerStyle.height = this.contentHeight - TIME_AXIS_LINE_Y + 'px';
|
||||
this.nowMarkerStyle.top = TIME_AXIS_LINE_Y + 'px';
|
||||
const nowTimeStamp = this.openmct.time.now();
|
||||
const now = this.xScale(nowTimeStamp);
|
||||
this.nowMarkerStyle.left = `${now + this.alignmentOffset}px`;
|
||||
|
@ -1,9 +1,11 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.c-timesystem-axis {
|
||||
$h: 30px;
|
||||
height: $h;
|
||||
|
||||
svg {
|
||||
$lineC: rgba($colorBodyFg, 0.3) !important;
|
||||
$lineC: $colorInteriorBorder; //rgba($colorBodyFg, 0.3) !important;
|
||||
text-rendering: geometricPrecision;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -26,21 +28,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nowMarker {
|
||||
width: 2px;
|
||||
&__mb-line {
|
||||
$c: $colorTimeRealtimeBtnBgMajor;
|
||||
$w: 13px;
|
||||
$wHalf: math.floor(math.div($w, 2));
|
||||
//$h: 5px;
|
||||
//$hHalf: math.floor(math.div($h, 2));
|
||||
$transform: translateX(($wHalf - 1) * -1);
|
||||
|
||||
border-right: 2px dashed $c;
|
||||
pointer-events: none;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: gray;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
//background: $c;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: $transform;
|
||||
border-left: $wHalf solid transparent;
|
||||
border-right: $wHalf solid transparent;
|
||||
border-top: $wHalf solid $c;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transform: $transform rotate(180deg);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .icon-arrow-down {
|
||||
font-size: large;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user