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

Closes #7936

Browse Source 
- Fix left and right `alignmentData` offsets in
EventTimelineView.vue, ImageryTimeView.vue and ActivityTimeline.vue.
This commit is contained in:
Charles Hacskaylo 2024-12-19 18:09:17 -08:00
parent f163034e18
commit 0933d27ce6
4 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@
-->
<template>
<div ref="events" class="c-events-tsv js-events-tsv" :style="{ left: leftOffset + 'px' }" />
<div ref="events" class="c-events-tsv js-events-tsv" :style="alignmentStyle" />
</template>
<script>
@ -69,8 +69,15 @@ export default {
};
},
computed: {
leftOffset() {
return this.alignmentData.leftWidth + AXES_PADDING;
alignmentStyle() {
let leftOffset = 0;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
return {
margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
};
}
},
watch: {

13
src/plugins/imagery/components/ImageryTimeView.vue
View File

@ -21,7 +21,7 @@
-->
<template>
<div ref="imagery" class="c-imagery-tsv js-imagery-tsv" :style="{ left: leftOffset + 'px' }">
<div ref="imagery" class="c-imagery-tsv js-imagery-tsv" :style="alignmentStyle">
<div ref="imageryHolder" class="c-imagery-tsv__contents u-contents"></div>
</div>
</template>
@ -71,8 +71,15 @@ export default {
};
},
computed: {
leftOffset() {
return this.alignmentData.leftWidth + AXES_PADDING;
alignmentStyle() {
let leftOffset = 0;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
return {
margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
};
}
},
watch: {

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

@ -26,7 +26,7 @@
</template>
<template #object>
<div class="c-plan-av" :style="alignmentStyle">
<svg v-if="activities.length > 0" :height="height" :width="svgWidth">
<svg v-if="activities.length > 0" class="c-plan-av__svg" :height="height">
<symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
<line
@ -157,24 +157,27 @@ export default {
computed: {
alignmentStyle() {
let leftOffset = 0;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
return {
left: `${this.alignmentData.leftWidth + leftOffset}px`
margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
};
},
svgWidth() {
// Reduce the width by left axis width, then take off the right yaxis width as well
return '100%'; // TEMP!
/*
let leftOffset = 0;
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
return (
return (
this.width -
(this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset)
);
);*/
}
},
methods: {

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

@ -27,11 +27,10 @@
text {
stroke: none;
}
}
&-av {
// Activities view
@include abs();
.c-swimlane__lane-object {
display: flex;
}
}
&__activity {
@ -58,3 +57,14 @@
display: none;
}
}
.c-plan-av {
// Activities view
background-color: $colorPlotBg;
flex: 1 1 auto;
height: 100%;
&__svg {
width: 100%;
}
}