ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-09 04:14:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

resolve conflicts

Browse Source
This commit is contained in:
Scott Bell 2024-12-16 11:50:26 +01:00
commit d97f7c347b
13 changed files with 166 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/tests/functional/planning/ganttChart.e2e.spec.js
View File

@ -126,7 +126,7 @@ test.describe('Gantt Chart', () => {
await page.goto(ganttChart.url);
// Assert that the Plan's status is displayed as draft
expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(
expect(await page.locator('.c-swimlane.is-status--draft').count()).toBe(
Object.keys(testPlan1).length
);
});

67
src/plugins/events/components/events-view.scss
View File

@ -1,34 +1,51 @@
.c-events-tsv {
div.c-events-tsv__event-wrapper {
cursor: pointer;
position: absolute;
top: 0;
display: flex;
z-index: 1;
margin-top: 5px;
&:hover {
z-index: 2;
[class*='__event-handle'] {
background-color: $colorBodyFg;
overflow: hidden;
&__event-wrapper {
// Wraps an individual event line
// Also holds the hover flyout element
$c: $colorEventLine;
$lineW: 2px;
$hitAreaW: 6px;
$m: $interiorMargin;
background-color: rgba($c, 0.6);
cursor: pointer;
position: absolute;
display: flex;
top: $m; bottom: $m;
width: $lineW;
z-index: 1;
&:before {
// Extend hit area
content: '';
display: block;
position: absolute;
top: 0; bottom: 0;
z-index: 0;
width: $hitAreaW;
transform: translateX(($hitAreaW - $lineW) * -0.5);
}
&:hover {
z-index: 2;
background-color: $c;
&:before {
background-color: rgba($c, 0.4);
}
}
}
}
&__no-items {
fill: $colorBodyFg !important;
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
}
.c-events-canvas {
pointer-events: auto;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
}

13
src/plugins/timeline/ExtendedLinesOverlay.vue
View File

@ -19,15 +19,18 @@
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 v-for="(lines, key) in extendedLinesPerKey" :key="key" class="extended-line-container">
<div class="c-timeline__overlay-lines">
<div
v-for="(lines, key) in extendedLinesPerKey"
:key="key"
class="c-timeline__extended-line-container"
>
<div
v-for="(line, index) in lines"
:key="index"
class="extended-line"
:class="[line.limitClass, { 'extended-line-hovered': isHovered(key, index) }]"
class="c-timeline__extended-line"
:class="[line.limitClass, { 'c-timeline__extended-line-hovered': isHovered(key, index) }]"
:style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
@mouseover="startingHover(key, index)"
@mouseleave="startingHover(null, null)"

4
src/plugins/timeline/TimelineObjectView.vue
View File

@ -28,8 +28,8 @@
:show-ucontents="isPlanLikeObject(item.domainObject)"
:span-rows-count="item.rowCount"
:domain-object="item.domainObject"
button-title="Toggle event lines"
button-icon="icon-timeline"
button-title="Toggle extended event lines overlay"
button-icon="icon-arrows-up-down"
:hide-button="!hasEventTelemetry()"
:button-click-on="enableExtendEventLines"
:button-click-off="disableExtendEventLines"

88
src/plugins/timeline/timeline.scss
View File

@ -1,34 +1,62 @@
/*****************************************************************************
* 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;
display: flex;
flex-direction: column;
gap: 1px;
// Plot view overrides
.gl-plot-display-area,
.gl-plot-axis-area.gl-plot-y {
bottom: $interiorMargin !important;
}
}
.c-timeline__objects {
display: contents;
.c-timeline {
&__objects {
display: contents;
}
&__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 {
opacity: 0.3;
position: absolute;
top: 20px; // Offset down to line up with time axis ticks line
width: 2px;
pointer-events: auto;
background-color: $colorEventLine; //$colorBodyFg; /* Use desired color */
}
&__extended-line-hovered {
background-color: green;
}
}
.extended-lines-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.extended-lines-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.extended-line {
position: absolute;
top: 0;
width: 2px;
background-color: $colorBodyFg; /* Use desired color */
}
.extended-line-hovered {
background-color: green;
}

2
src/styles/_constants-darkmatter.scss
View File

@ -517,6 +517,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
$colorInProgressFg: $colorTimeRealtimeFgSubtle;
$colorInProgressFgEm: $colorTimeRealtimeFg;
$colorGanttSelectedBorder: rgba(#fff, 0.3);
$colorEventLine: $colorBodyFg;
$colorEventLineExtended: rgba($colorEventLine, 0.3);
// Tree
$colorTreeBg: transparent;

2
src/styles/_constants-espresso.scss
View File

@ -482,6 +482,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
$colorInProgressFg: $colorTimeRealtimeFgSubtle;
$colorInProgressFgEm: $colorTimeRealtimeFg;
$colorGanttSelectedBorder: rgba(#fff, 0.3);
$colorEventLine: $colorBodyFg;
$colorEventLineExtended: rgba($colorEventLine, 0.3);
// Tree
$colorTreeBg: transparent;

2
src/styles/_constants-maelstrom.scss
View File

@ -498,6 +498,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
$colorInProgressFg: $colorTimeRealtimeFgSubtle;
$colorInProgressFgEm: $colorTimeRealtimeFg;
$colorGanttSelectedBorder: rgba(#fff, 0.3);
$colorEventLine: $colorBodyFg;
$colorEventLineExtended: rgba($colorEventLine, 0.3);
// Tree
$colorTreeBg: transparent;

2
src/styles/_constants-snow.scss
View File

@ -481,6 +481,8 @@ $colorInProgressBg: #b1e8ff;
$colorInProgressFg: $colorCurrentFg;
$colorInProgressFgEm: $colorCurrentFgEm;
$colorGanttSelectedBorder: #fff;
$colorEventLine: $colorBodyFg;
$colorEventLineExtended: rgba($colorEventLine, 0.3);
// Tree
$colorTreeBg: transparent;

15
src/ui/components/TimeSystemAxis.vue
View File

@ -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',
@ -113,7 +114,7 @@ export default {
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, 20)`;
this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, ${TIME_AXIS_LINE_Y})`;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
this.alignmentOffset =
@ -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`;

9
src/ui/components/swim-lane/SwimLane.vue
View File

@ -34,10 +34,6 @@
:class="[swimlaneClass, statusClass]"
:style="gridRowSpan"
>
<div class="c-object-label__name">
<slot name="label"></slot>
</div>
<div v-if="iconClass" class="c-object-label__type-icon" :class="iconClass">
<span
v-if="status"
@ -46,7 +42,10 @@
:title="`This item is ${status}`"
></span>
</div>
<div class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major">
<div class="c-object-label__name">
<slot name="label"></slot>
</div>
<div class="c-icon-button c-icon-button--major">
<button
v-if="!hideButton"
class="c-button"

3
src/ui/components/swim-lane/swimlane.scss
View File

@ -24,8 +24,7 @@
display: grid;
grid-template-columns: 100px 100px 1fr;
grid-column-gap: 1px;
grid-row-gap: 1px;
margin-bottom: 1px;
grid-row-gap: 1px; // Is this being used?
width: 100%;
&.is-status--draft {

43
src/ui/components/timesystem-axis.scss
View File

@ -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;
}
}
}