Skip to content

feat(office-settings): polish fonts table to match overall design - #3479

Merged
AlexAndBear merged 1 commit into
mainfrom
enhancement/polish-office-fonts-table
Sep 29, 2026
Merged

AlexAndBear merged 1 commit into
mainfrom
enhancement/polish-office-fonts-table

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Sep 29, 2026 •

Copy link
Copy Markdown
Member

Description

Polishes the office settings fonts page so it matches the overall design of the admin and account settings:

  • The fonts list is now an oc-table (like the apps table in the admin settings), sortable by name, with the sort state kept in the route query
  • Added a search input to filter fonts by name, with the matching part highlighted and an empty state when nothing matches
  • An empty state is shown when no fonts are installed
  • The headline uses the same size as the account settings and now has a subtitle
  • The "Office" breadcrumb now has a link, so it's clickable
  • The upload input shows a hint about the allowed file types (.ttf, .otf)
  • The upload input is cleared after the upload has finished
  • Version and designer columns no longer wrap, keeping rows compact
  • Extracted the table into a FontsList component and the Font type into types.ts
  • Added vue-router to the package's peerDependencies, like the other apps

Before

fonts-before

After

fonts-after

Related Issue

  • Fixes <issue_link>

How Has This Been Tested?

  • test environment: local dev setup (pnpm vite against the docker-compose backend), Chrome
  • test case 1: fonts are listed in an oc-table and can be sorted by name ascending/descending
  • test case 2: searching filters fonts by name and highlights the match; no-match shows an empty state
  • test case 3: the "Office" breadcrumb is clickable
  • test case 4: the upload input shows the allowed file types
  • test case 5: after uploading two fonts, the file names are no longer shown in the upload input
  • test case 6: unit tests for FontsList (filtering, empty state, sorting, highlighting, delete event) and App tests (incl. upload clears the input) pass

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)

Use oc-table with sorting by name and a search filter like the apps table,
align the heading with the account settings, add a subtitle, a breadcrumb
link and an allowed file types hint for the upload input, and clear the
upload input after uploading.
@AlexAndBear
AlexAndBear force-pushed the enhancement/polish-office-fonts-table branch from 6131822 to f640cdc Compare September 29, 2026 06:43
@AlexAndBear
AlexAndBear merged commit 78a8b8c into main Sep 29, 2026
31 checks passed
@AlexAndBear
AlexAndBear deleted the enhancement/polish-office-fonts-table branch September 29, 2026 07:35
@openclouders openclouders mentioned this pull request Sep 29, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants