From 7b360c1381b57995ff4de327e2ccec14d1f70666 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 17 Sep 2025 16:19:02 -0700 Subject: [PATCH 1/2] Expanded Time List enhancements for #8091 (#8095) * Markup and CSS changes for expanded Activities in Time List - Significant markup and CSS changes. - Activities now use Plan colors. - Greatly improved narrow space and wrapping. - Added new global data uri's for status icons. - Added new global `gear-spinner` animation for in-progress Activity status icon. - Added new global `absCenter` mixin. - Revised and greatly simplified execution status and time context labels. - Revised, refined past/current/future styling and theme colors. - Status icon coloring added to theme constants. - Updated other themes constants for new approach to bg/fg/em. - Smoke tested in Espresso and Snow themes. * Remove unused imports * Remove unused and commented out code * Remove progress pie tests as that widget no longer exists * lint fix * remove tests for progress pie as it no longer exists --------- Co-authored-by: Shefali Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com> --- .../timelistControlledClock.e2e.spec.js | 26 -- .../planning-timelist.visual.spec.js | 54 --- .../visual-a11y/planning-view.visual.spec.js | 20 -- src/plugins/timelist/ExpandedViewItem.vue | 196 ++++------- src/plugins/timelist/TimelistComponent.vue | 1 + src/plugins/timelist/timelist.scss | 312 ++++++++---------- src/styles/_constants-darkmatter.scss | 27 +- src/styles/_constants-espresso.scss | 26 +- src/styles/_constants-maelstrom.scss | 24 +- src/styles/_constants-snow.scss | 24 +- src/styles/_global.scss | 19 ++ src/styles/_glyphs.scss | 19 ++ src/styles/_mixins.scss | 8 + 13 files changed, 309 insertions(+), 447 deletions(-) delete mode 100644 e2e/tests/visual-a11y/planning-timelist.visual.spec.js diff --git a/e2e/tests/functional/planning/timelistControlledClock.e2e.spec.js b/e2e/tests/functional/planning/timelistControlledClock.e2e.spec.js index 156d48aebe3..51ae9c479a7 100644 --- a/e2e/tests/functional/planning/timelistControlledClock.e2e.spec.js +++ b/e2e/tests/functional/planning/timelistControlledClock.e2e.spec.js @@ -54,8 +54,6 @@ const examplePlanSmall1 = JSON.parse( const TIME_TO_FROM_COLUMN = 2; const HEADER_ROW = 0; const NUM_COLUMNS = 5; -const FULL_CIRCLE_PATH = - 'M3.061616997868383e-15,-50A50,50,0,1,1,-3.061616997868383e-15,50A50,50,0,1,1,3.061616997868383e-15,-50Z'; /** * The regular expression used to parse the countdown string. @@ -177,14 +175,6 @@ test.describe('Activity progress when activity is in the future @clock', () => { await page.clock.resume(); await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1); }); - - test('progress pie is empty', async ({ page }) => { - const anActivity = page.getByRole('row').nth(0); - // Progress pie shows no progress when now is less than the start time - await expect(anActivity.getByLabel('Activity in progress').locator('path')).not.toHaveAttribute( - 'd' - ); - }); }); test.describe('Activity progress when now is between start and end of the activity @clock', () => { @@ -194,13 +184,6 @@ test.describe('Activity progress when now is between start and end of the activi await page.goto('./', { waitUntil: 'domcontentloaded' }); await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1); }); - - test('progress pie is partially filled', async ({ page }) => { - const anActivity = page.getByRole('row').nth(0); - const pathElement = anActivity.getByLabel('Activity in progress').locator('path'); - // Progress pie shows progress when now is greater than the start time - await expect(pathElement).toHaveAttribute('d'); - }); }); test.describe('Activity progress when now is after end of the activity @clock', () => { @@ -210,15 +193,6 @@ test.describe('Activity progress when now is after end of the activity @clock', await page.goto('./', { waitUntil: 'domcontentloaded' }); await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1); }); - - test('progress pie is full', async ({ page }) => { - const anActivity = page.getByRole('row').nth(0); - // Progress pie is completely full and doesn't update if now is greater than the end time - await expect(anActivity.getByLabel('Activity in progress').locator('path')).toHaveAttribute( - 'd', - FULL_CIRCLE_PATH - ); - }); }); /** diff --git a/e2e/tests/visual-a11y/planning-timelist.visual.spec.js b/e2e/tests/visual-a11y/planning-timelist.visual.spec.js deleted file mode 100644 index baf23a02a98..00000000000 --- a/e2e/tests/visual-a11y/planning-timelist.visual.spec.js +++ /dev/null @@ -1,54 +0,0 @@ -/***************************************************************************** - * 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. - *****************************************************************************/ - -import percySnapshot from '@percy/playwright'; -import fs from 'fs'; - -import { scanForA11yViolations, test } from '../../avpFixtures.js'; -import { - createTimelistWithPlanAndSetActivityInProgress, - getFirstActivity -} from '../../helper/planningUtils.js'; - -const examplePlanSmall1 = JSON.parse( - fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)) -); - -const FIRST_ACTIVITY_SMALL_1 = getFirstActivity(examplePlanSmall1); - -test.describe('Visual - Timelist progress bar @clock @a11y', () => { - test.beforeEach(async ({ page }) => { - await page.clock.install({ time: FIRST_ACTIVITY_SMALL_1.end + 10000 }); - await page.clock.resume(); - await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1); - await page.getByLabel('Click to collapse items').click(); - }); - - test('progress pie is full', async ({ page, theme }) => { - // Progress pie is completely full and doesn't update if now is greater than the end time - await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`); - }); -}); - -test.afterEach(async ({ page }, testInfo) => { - await scanForA11yViolations(page, testInfo.title); -}); diff --git a/e2e/tests/visual-a11y/planning-view.visual.spec.js b/e2e/tests/visual-a11y/planning-view.visual.spec.js index 6386f0cca4c..8887fe88295 100644 --- a/e2e/tests/visual-a11y/planning-view.visual.spec.js +++ b/e2e/tests/visual-a11y/planning-view.visual.spec.js @@ -27,37 +27,17 @@ import { createPlanFromJSON } from '../../appActions.js'; import { scanForA11yViolations, test } from '../../avpFixtures.js'; import { VISUAL_FIXED_URL } from '../../constants.js'; import { - createTimelistWithPlanAndSetActivityInProgress, getFirstActivity, setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js'; -const examplePlanSmall1 = JSON.parse( - fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)) -); - const examplePlanSmall2 = JSON.parse( fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url)) ); -const FIRST_ACTIVITY_SMALL_1 = getFirstActivity(examplePlanSmall1); const FIRST_ACTIVITY_SMALL_2 = getFirstActivity(examplePlanSmall2); -test.describe('Visual - Timelist progress bar @clock @a11y', () => { - test.beforeEach(async ({ page }) => { - await page.clock.install({ time: FIRST_ACTIVITY_SMALL_1.end + 10000 }); - await page.clock.resume(); - await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1); - await page.getByLabel('Click to collapse items').click(); - }); - - test('progress pie is full', async ({ page, theme }) => { - // Progress pie is completely full and doesn't update if now is greater than the end time - await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`); - }); -}); - test.describe('Visual - Plan View @a11y', () => { test.beforeEach(async ({ page }) => { // Set the clock to the end of the first activity in the plan diff --git a/src/plugins/timelist/ExpandedViewItem.vue b/src/plugins/timelist/ExpandedViewItem.vue index 6d0dc309631..2280bf33ea7 100644 --- a/src/plugins/timelist/ExpandedViewItem.vue +++ b/src/plugins/timelist/ExpandedViewItem.vue @@ -20,68 +20,33 @@ at runtime from the About dialog for additional information. -->