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

Resize plans properly (#7597)

Browse Source 
* resize firing

* ensure watcher fires

* remove unneeded const

* add small visual test resizing plan

* use browser with null viewport

* lint
This commit is contained in:
Scott Bell 2024-03-18 23:13:19 +01:00 committed by GitHub
parent 4027eae299
commit f189a4d602
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
e2e/tests/visual-a11y/planning.visual.spec.js
View File

@ -72,11 +72,29 @@ test.describe('Visual - Planning', () => {
name: 'Plan Visual Test',
json: examplePlanSmall2
});
await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
await percySnapshot(page, `Plan View (theme: ${theme})`);
});
test('Resize Plan View @2p', async ({ browser, theme }) => {
// need to set viewport to null to allow for resizing
const newContext = await browser.newContext({
viewport: null
});
const newPage = await newContext.newPage();
await newPage.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
const plan = await createPlanFromJSON(newPage, {
name: 'Plan Visual Test',
json: examplePlanSmall2
});
await setBoundsToSpanAllActivities(newPage, examplePlanSmall2, plan.url);
// resize the window
await newPage.setViewportSize({ width: 800, height: 600 });
await percySnapshot(newPage, `Plan View resized (theme: ${theme})`);
});
test('Plan View w/ draft status', async ({ page, theme }) => {
const plan = await createPlanFromJSON(page, {
name: 'Plan Visual Test (Draft)',

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

@ -77,12 +77,13 @@ export default {
},
setup() {
const axisHolder = ref(null);
const { size, startObserving } = useResizeObserver();
const { size: containerSize, startObserving } = useResizeObserver();
onMounted(() => {
startObserving(axisHolder.value);
});
return {
containerSize: size
axisHolder,
containerSize
};
},
watch: {
@ -95,8 +96,11 @@ export default {
contentHeight() {
this.updateNowMarker();
},
containerSize() {
this.resize();
containerSize: {
handler() {
this.resize();
},
deep: true
}
},
mounted() {
@ -104,7 +108,7 @@ export default {
this.useSVG = true;
}
this.container = select(this.$refs.axisHolder);
this.container = select(this.axisHolder);
this.svgElement = this.container.append('svg:svg');
// draw x axis with labels. CSS is used to position them.
this.axisElement = this.svgElement
@ -122,7 +126,7 @@ export default {
},
methods: {
resize() {
if (this.$refs.axisHolder.clientWidth !== this.width) {
if (this.axisHolder.clientWidth !== this.width) {
this.setDimensions();
this.drawAxis(this.bounds, this.timeSystem);
this.updateNowMarker();
@ -139,11 +143,10 @@ export default {
}
},
setDimensions() {
const axisHolder = this.$refs.axisHolder;
this.width = axisHolder.clientWidth;
this.width = this.axisHolder.clientWidth;
this.offsetWidth = this.width - this.offset;
this.height = Math.round(axisHolder.getBoundingClientRect().height);
this.height = Math.round(this.axisHolder.getBoundingClientRect().height);
if (this.useSVG) {
this.svgElement.attr('width', this.width);