Repository navigation
Modernise the UI/UX - #603
Merged
Merged
Conversation
…ing is open (e.g., a dialog or a menu).
…dow title now shows the selected file.
…ion details can now be copied from the About dialog.
…s of an update now shows how much has been downloaded.
…ion run, and which console can be copied and cleared.
… and which runs can be managed more easily.
…ers), and our overlays and cards now have a visible shadow in dark mode.
…nt view, which is now organised in sections and shows its issues in a popover.
…hich already have some.
…ile, so that we can switch to one of them.
…nd looks the same on all platforms.
… show the close button without any animation.
…run, using small icons, so that they can easily be discovered.
…that shows the issues found when generating CellML.
For instance, the Escape key committing rather than discarding the value being edited, the Enter key accepting our Interactive settings when on the Cancel button.
…keyboard focus away from the X and Y axis fields.
…e external data imports.
…een readers can identify.
…ng simulation inputs.
…ulation that cannot be stopped when releasing it.
…has a focus ring (as for toolbar buttons), and allow toolbar button and view switcher tooltips to be dismissed using Escape.
… be stopped before starting a new run, announce a run that fails to start again, and give the focus back to a simulation setting after a run started using F9.
…us ring on its handle, until a key that can be used with the slider is pressed.
…ed (and block the UI) if OpenCOR's window gets reloaded while the update is being installed.
…nce OpenCOR has been loaded in the full Web app.
… (incl. pinching) or a pen, and used with the keyboard (zoom, pan, reset, and context menu), and legend items are now toggle buttons.
…nCOR is less than 40rem wide (e.g., on a phone or when embedded in a small container), and the console of the Standard Simulation Experiment view now always shows a few lines.
There was a problem hiding this comment.
🟡 Changes recommended
An active moderate issue remains because the misspelled mask CSS token prevents PrimeVue dialogs and blocking masks from using the intended backgrounds.
1 open issue
What changed in this PR
Modernises OpenCOR’s UI/UX across the renderer, Electron shell, and splash screen, with improved accessibility, responsive layouts, reusable controls, dialogs, and native integrations. Fixes #602.
Changes:
- Adds reusable toolbar buttons, hints, context menus, toast styling, responsive layouts, and accessibility improvements.
- Redesigns dialogs, issue displays, changelogs, menus, editors, start screens, loading screens, and splash screens.
- Extends Electron IPC for open locations, recent files, system details, native dialogs, and update progress.
- Outstanding review items: add the
1.20261109.0changelog entry, correct the PrimeVue mask token, authorize local files for in-place saving, and globalize end-slot tooltip selectors.
| File | Summary |
|---|---|
src/renderer/vite.config.ts |
Reformats deployment and asset-caching documentation. |
src/renderer/src/main.ts |
Enables application-owned document titles. |
src/renderer/src/libopencor/locSedApi.ts |
Clarifies SED-ML documentation. |
src/renderer/src/libopencor/locLoggerApi.ts |
Reformats WASM issue ownership documentation. |
src/renderer/src/components/widgets/TooltipWidget.vue |
Removes the legacy tooltip component. |
src/renderer/src/components/widgets/ToolbarButtonWidget.vue |
Adds reusable accessible toolbar buttons and tooltips. |
src/renderer/src/components/widgets/ToastMessageWidget.vue |
Adds redesigned toast content and close controls. |
src/renderer/src/components/widgets/ThemeWidget.vue |
Uses the reusable toolbar button for theme switching. |
src/renderer/src/components/widgets/InputWidget.vue |
Improves slider focus behavior and reset hints. |
src/renderer/src/components/widgets/InputScientificNumberWidget.vue |
Adds accessible labels and styled hints. |
src/renderer/src/components/widgets/ContextMenuWidget.vue |
Adds reusable styled context menus. |
src/renderer/src/components/ViewSwitcherComponent.vue |
Adds keyboard navigation, accessible labels, and responsive tooltips. |
src/renderer/src/components/views/UnsupportedFileTypeView.vue |
Adds actions for switching to compatible views. |
src/renderer/src/components/views/toolbar-based-view.css |
Updates toolbar stacking and styling. |
src/renderer/src/components/views/IssuesView.vue |
Redesigns issue presentation and adds clipboard copying. |
src/renderer/src/components/views/CellDLEditorView.vue |
Updates editor toolbars, dialogs, and export issue handling. |
src/renderer/src/components/propertyEditors/PropertyEditor.vue |
Replaces the property table with numeric input fields. |
src/renderer/src/components/MainMenu.vue |
Modernises menus, icons, shortcuts, and open-location actions. |
src/renderer/src/components/DragNDropComponent.vue |
Adds responsive drag-and-drop feedback. |
src/renderer/src/components/dialogs/YesNoQuestionDialog.vue |
Adds severity styling and configurable button labels. |
src/renderer/src/components/dialogs/YesNoCancelQuestionDialog.vue |
Adds severity styling and configurable button labels. |
src/renderer/src/components/dialogs/UpdateDownloadProgressDialog.vue |
Adds detailed download and installation progress. |
src/renderer/src/components/dialogs/UpdateAvailableDialog.vue |
Redesigns update information and actions. |
src/renderer/src/components/dialogs/SettingsDialog.vue |
Adds grouped settings and a theme selector. |
src/renderer/src/components/dialogs/OpenRemoteDialog.vue |
Removes the replaced remote-open dialog. |
src/renderer/src/components/dialogs/OpenLocationDialog.vue |
Adds URL, data URL, and local-file handling. |
src/renderer/src/components/dialogs/OkMessageDialog.vue |
Adds severity icons and slot-based content. |
src/renderer/src/components/dialogs/message-dialog.css |
Provides shared message-dialog styling. |
src/renderer/src/components/dialogs/DisconnectFromGitHubDialog.vue |
Clarifies disconnect action labels. |
src/renderer/src/components/dialogs/ChangelogDialog.vue |
Updates changelog layout and empty states. |
src/renderer/src/components/dialogs/BaseDialog.vue |
Adds responsive dialog-container behavior and disables transitions. |
src/renderer/src/components/ChangelogComponent.vue |
Adds release dates, current-version markers, and hint labels. |
src/renderer/src/components/CellDLEditorPoolComponent.vue |
Reformats initialization error documentation. |
src/renderer/src/components/BlockingMessageComponent.vue |
Adds responsive blocking messages with progress indicators. |
src/renderer/src/components/BackgroundComponent.vue |
Adds start-screen actions, recent files, and responsive styling. |
src/renderer/src/common/vueCommon.ts |
Adds narrow-layout, toolbar, and clipboard composables. |
src/renderer/src/common/viewRegistry.ts |
Reformats unsaved-content documentation. |
src/renderer/src/common/settings.ts |
Reformats settings documentation. |
src/renderer/src/common/hint.ts |
Adds the shared accessible hint directive. |
src/renderer/src/common/electronApi.ts |
Extends the renderer-side Electron API contract. |
src/renderer/src/common/dependencies.ts |
Reformats xxHash initialization documentation. |
src/renderer/src/common/constants.ts |
Adds timing and responsive-layout constants. |
src/renderer/src/common/common.ts |
Adds system details, IME handling, title ownership, and paint helpers. |
src/renderer/src/common/celldl.ts |
Reformats CellDL dependency documentation. |
src/renderer/src/assets/app.css |
Adds shared theme variables, overlays, focus styles, hints, and panels. |
src/renderer/scripts/libopencor.ts |
Reformats linker-warning documentation. |
src/renderer/scripts/download.libopencor.js.ts |
Uses decimal kilobyte reporting. |
src/renderer/package.json |
Updates the renderer version and development dependencies. |
src/renderer/index.html |
Adds the initial loading screen. |
src/preload/index.ts |
Exposes system details, recent-file actions, dialogs, and update events. |
src/main/SplashScreenWindow.ts |
Redesigns the transparent splash-window configuration. |
src/main/MainWindow.ts |
Adds recent-file synchronization, native open-dialog handling, and update progress state. |
src/main/MainMenu.ts |
Routes native menu actions through the updated file-dialog flow. |
src/main/index.ts |
Registers new recent-file and file-dialog IPC handlers. |
src/main/assets/splashscreen.js |
Updates splash-screen footer rendering. |
src/main/assets/splashscreen.html |
Replaces the splash-screen layout. |
src/main/assets/splashscreen.css |
Adds redesigned splash-screen styling and dark-mode support. |
src/main/ApplicationWindow.ts |
Preserves transparent backgrounds for transparent windows. |
src/extern/corsProxy.js |
Reformats CORS proxy documentation. |
package.json |
Updates the application version and development dependencies. |
Review effort: Lite
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #602.