Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up settings UI #1404

Open
Sebastian-ubs opened this issue Dec 18, 2024 · 1 comment
Open

Clean up settings UI #1404

Sebastian-ubs opened this issue Dec 18, 2024 · 1 comment
Labels
enhancement New feature or request ux UX design needed

Comments

@Sebastian-ubs
Copy link
Contributor

Sebastian-ubs commented Dec 18, 2024

User Story

As a user I want to see settings in a way that I understand.
As an extension developer I want to get a feeling on where settings would be placed in future.

Description

Current

initial after undocking
Image Image

Requested changes

Figma

Minimum

Do the bare minimum changes for a beta release that makes the ui feel ready for users

  1. Rename
    • "Platform settings" to "General"
    • the general project based section from "Platform Settings" to "Project properties" and change the subheadline
    • sidebar: "Extensions" to "General settings"
    • sidebar: "Projects" to "Project settings"
    • sidebar: use the extension names, not the ...id? (wrong data field used)
  2. Spacing and scrolling - make the whole ui scroll horizontally:
    • make the ui full width and height without a border. Add a bottom padding to reserve space for the vertical scrollbar.
    • make the sidebar more narrow and let the whole window scroll when too small (e.g. sidebar min-width 200px, max-width 250px and cards/content area min-width 250px, max-width 600px for the cards) -- see image below
    • cards/content area: add a padding right "end" for the vertical scroll bar to not overlay the controls.
    • remove the left padding of the settings labels and align them to the left "start" (logical properties)
  3. add a placeholder when search returns no results

[broken search layout is a separate issue #1405]

If time allows

  1. do not use cards, but only (smaller) headlines and vertical line (border?) to separate settings groups
  2. always select the first project and show each section as a different page below, instead of as cards - selecting a project will show the first page
  3. apply "ghost" style to the project Combobox
  4. highlight search matches

Expected outcome for beta1

minimum if time allows
Image Image
Image (no image)

Future

Further improving the settings is out of scope for Q1

Visual reference of the vision that we won't implement right now

Image

@Sebastian-ubs Sebastian-ubs added enhancement New feature or request ux UX design needed labels Dec 18, 2024
@Sebastian-ubs Sebastian-ubs moved this to 📥 For Consideration in Paranext Dec 18, 2024
@GlennPruitt
Copy link

GlennPruitt commented Dec 19, 2024

@katherinejensen00 I think it would be okay to include this task under the "clean up ui" epic for Q1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux UX design needed
Projects
Status: 📥 For Consideration
Development

No branches or pull requests

2 participants