ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-06 01:11:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Closes #7936

Browse Source 
- WIP prepping activities view for adjustable swimlane height.
- Refactored ActivityTimeline.vue to not draw SVG if no activities in timeframe.
- ActivityTimeline.vue `leftOffset` now uses absolute position `left` instead of `left-margin`.
This commit is contained in:
Charles Hacskaylo 2024-12-19 15:25:30 -08:00
parent cfa2129660
commit e6cb940ee7
2 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/plugins/plan/components/ActivityTimeline.vue
View File

@ -25,68 +25,63 @@
{{ heading }} {{ heading }}
</template> </template>
<template #object> <template #object>
<svg :height="height" :width="svgWidth" :style="alignmentStyle"> <div class="c-plan-av" :style="alignmentStyle">
<symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none"> <svg v-if="activities.length > 0" :height="height" :width="svgWidth">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor" /> <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
<line <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
x1="100%" <line
y1="0" x1="100%"
x2="100%" y1="0"
y2="100%" x2="100%"
stroke="black" y2="100%"
stroke-width="1" stroke="black"
opacity="0.3" stroke-width="1"
transform="translate(-0.5, 0)" opacity="0.3"
/> transform="translate(-0.5, 0)"
</symbol> />
<template v-for="(activity, index) in activities" :key="`g-${activity.clipPathId}`"> </symbol>
<template v-if="clipActivityNames === true"> <template v-for="(activity, index) in activities" :key="`g-${activity.clipPathId}`">
<clipPath :id="activity.clipPathId" :key="activity.clipPathId"> <template v-if="clipActivityNames === true">
<rect <clipPath :id="activity.clipPathId" :key="activity.clipPathId">
<rect
:x="activity.rectStart"
:y="activity.row"
:width="activity.rectWidth - 1"
:height="rowHeight"
/>
</clipPath>
</template>
<g
class="c-plan__activity activity-bounds"
@click="setSelectionForActivity(activity, $event)"
>
<title>{{ activity.name }}</title>
<use
:key="`rect-${index}`"
href="#activity-bar-bg"
:x="activity.rectStart" :x="activity.rectStart"
:y="activity.row" :y="activity.row"
:width="activity.rectWidth - 1" :width="activity.rectWidth"
:height="rowHeight" :height="rowHeight"
:class="activity.class"
:color="activity.color"
/> />
</clipPath> <text
v-for="(textLine, textIndex) in activity.textLines"
:key="`text-${index}-${textIndex}`"
:class="`c-plan__activity-label ${activity.textClass}`"
:x="activity.textStart"
:y="activity.textY + textIndex * lineHeight"
:fill="activity.textColor"
:clip-path="clipActivityNames === true ? `url(#${activity.clipPathId})` : ''"
>
{{ textLine }}
</text>
</g>
</template> </template>
<g </svg>
class="c-plan__activity activity-bounds" <div v-else class="c-timeline__no-items">No activities within timeframe</div>
@click="setSelectionForActivity(activity, $event)" </div>
>
<title>{{ activity.name }}</title>
<use
:key="`rect-${index}`"
href="#activity-bar-bg"
:x="activity.rectStart"
:y="activity.row"
:width="activity.rectWidth"
:height="rowHeight"
:class="activity.class"
:color="activity.color"
/>
<text
v-for="(textLine, textIndex) in activity.textLines"
:key="`text-${index}-${textIndex}`"
:class="`c-plan__activity-label ${activity.textClass}`"
:x="activity.textStart"
:y="activity.textY + textIndex * lineHeight"
:fill="activity.textColor"
:clip-path="clipActivityNames === true ? `url(#${activity.clipPathId})` : ''"
>
{{ textLine }}
</text>
</g>
</template>
<text
v-if="activities.length === 0"
x="10"
y="20"
class="c-plan__activity-label--outside-rect"
>
No activities within current timeframe
</text>
</svg>
</template> </template>
</SwimLane> </SwimLane>
</template> </template>
@ -166,7 +161,7 @@ export default {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING; leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
} }
return { return {
marginLeft: `${this.alignmentData.leftWidth + leftOffset}px` left: `${this.alignmentData.leftWidth + leftOffset}px`
}; };
}, },
svgWidth() { svgWidth() {

5
src/plugins/plan/plan.scss
View File

@ -29,6 +29,11 @@
} }
} }
&-av {
// Activities view
@include abs();
}
&__activity { &__activity {
cursor: pointer; cursor: pointer;