Skip to content

feat: remove condensed list view and switch view modes with toggle buttons - #3538

Merged
AlexAndBear merged 1 commit into
mainfrom
feat/remove-condensed-view
Oct 5, 2026
Merged

AlexAndBear merged 1 commit into
mainfrom
feat/remove-condensed-view

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Oct 2, 2026 •

Copy link
Copy Markdown
Member

Description

Removes the condensed list view mode and replaces the view mode dropdown with two side-by-side toggle buttons (Grid | List) on desktop. On mobile the view mode stays a drop menu.

What changed Why
Removed the resource-table-condensed folder view, its condensedTable constant, the condensed handling in ResourceTable.vue and the menu-line-condensed icon The condensed list only differed by row height and kept causing extra maintenance and bugs
Removed the now unused viewMode prop from ResourceTable It was only used to detect the condensed mode
New ViewModeSwitch component: segmented Grid | List toggle (aria-pressed on the active mode) on desktop, the existing drop menu on mobile One click to switch, and the active mode is always visible. Extracted to keep ViewOptions.vue small
E2E: desktop clicks the toggle button directly, mobile still uses the drop menu, the a11y smoke test switches to the list view instead of the condensed one Follows the UI change

Note: users who still have resource-table-condensed persisted (local storage or bookmarked URL) fall back to the grid view until they pick a view mode once. Decided against a migration for this.

Desktop

Before After
before-desktop after-desktop

Mobile

Before After
before-mobile after-mobile

Related Issue

How Has This Been Tested?

  • test environment: local dev server (pnpm vite) against the docker-compose backend, Chromium desktop (1440x800) and mobile emulation (390x844)
  • test case 1: desktop shows the Grid | List toggle, the active mode is highlighted, clicking switches the view
  • test case 2: mobile shows the view mode drop menu with Grid and List only
  • test case 3: unit tests for ViewModeSwitch (desktop toggle, pressed state, select event, mobile drop menu) and ViewOptions
  • test case 4: pnpm check:types, pnpm lint, pnpm format:check, pnpm test:unit --run

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

@AlexAndBear
AlexAndBear merged commit fcd9543 into main Oct 5, 2026
32 checks passed
@AlexAndBear
AlexAndBear deleted the feat/remove-condensed-view branch October 5, 2026 15:06
@openclouders openclouders mentioned this pull request Oct 5, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Remove the condensed list view mode and switch between grid and list with two toggle buttons

2 participants