ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 21:27:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Closes #7960

Browse Source 
- Removed bad `}` in TimeSystemAxis.vue.
- Removed `.u-contents` from line 129 of ganttChart.e2e.spec.js.
- Removed `event-handle` element; not needed.
- Changed `__event-wrapper` to not set height explicitly; uses absolute positioning.
- Added :before element to event-wrapper for better hit area.
- Improved hover styling.
- $colorEvent* style constants added to theme constant SCSS files.
This commit is contained in:
Charles Hacskaylo 2024-12-13 17:42:46 -08:00
parent 38292953fc
commit 3d3f093c7e
13 changed files with 90 additions and 56 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
);
});

17
src/plugins/events/components/EventTimelineView.vue
View File

@ -416,14 +416,15 @@ export default {
eventWrapper.classList.add(EVENT_WRAPPER_CLASS);
eventWrapper.style.left = `${this.xScale(event.time) + this.alignmentData.leftWidth + AXES_PADDING}px`;
const eventTickElement = document.createElement('div');
eventTickElement.classList.add('c-events-tsv__event-handle');
eventTickElement.style.width = '2px';
eventTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
if (this.titleKey) {
eventTickElement.title = event[this.titleKey];
}
eventWrapper.appendChild(eventTickElement);
// const eventTickElement = document.createElement('div');
// eventTickElement.classList.add('c-events-tsv__event-handle');
// eventTickElement.style.width = '2px';
// eventTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
// if (this.titleKey) {
// eventTickElement.title = event[this.titleKey];
// }
// eventWrapper.appendChild(eventTickElement);
const limitEvaluation = this.limitEvaluator.evaluate(event, this.valueMetadata);
const limitClass = limitEvaluation?.cssClass;
if (limitClass) {

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

@ -1,34 +1,51 @@
.c-events-tsv {
overflow: hidden;
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;
&__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 {
.c-events-canvas {
pointer-events: auto; // This allows the event element to receive a browser-level context click
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
}

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

@ -21,11 +21,15 @@
-->
<template>
<div class="c-timeline__overlay-lines">
<div v-for="(lines, key) in extendedLinesPerKey" :key="key" class="extended-line-container">
<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="c-timeline__extended-line"
:class="line.limitClass"
:style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
></div>

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"

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

@ -24,6 +24,9 @@
.c-timeline-holder {
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
gap: 1px;
// Plot view overrides
.gl-plot-display-area,
@ -32,20 +35,23 @@
}
}
.c-timeline__objects {
display: contents;
}
.c-timeline {
&__objects {
display: contents;
}
.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 */
}
&__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 */
&__extended-line {
opacity: 0.3;
position: absolute;
top: 20px; // Offset down to line up with time axis ticks line
width: 2px;
background-color: $colorEventLine; //$colorBodyFg; /* Use desired color */
}
}

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;

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

@ -79,7 +79,7 @@ export default {
const { size: containerSize, startObserving } = useResizeObserver();
const svgWidth = ref(0);
const svgHeight = ref(0);
const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y}})`);
const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
const alignmentOffset = ref(0);
const nowMarkerStyle = reactive({
height: '0px',
@ -114,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 =

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 {