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

Enhancement: UX Improvements to the sidebar panel/tool window #705

Open
16 tasks
T3sT3ro opened this issue Nov 11, 2023 · 0 comments
Open
16 tasks

Enhancement: UX Improvements to the sidebar panel/tool window #705

T3sT3ro opened this issue Nov 11, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@T3sT3ro
Copy link

T3sT3ro commented Nov 11, 2023

Is your feature request related to a problem? Please describe.
The UI of sidebar could be improved for better readability and UX. Right now some elements/views are redundant, occupy much space (forcing user to scroll) and separate elements that should be grouped together.

  1. First, a little inconsistency: The view widget used in the sidebar in the current FM extension seem to differ from the regular view widget used in other extensions (e.g. the "Explorer" sidebar). The differences between FM's sections and Explorers sections are:
    • FM's views don't animate when opened/closed
    • FM's views are not tab/keyboard navigable (space to activate, arrow up/down to move focus)
    • FM's views aren't separated with a horizontal divider (border?) while section in the Explorer are
    • FM's views can't be reordered with drag and drop.
  2. Secondly, the "Actions view" together with "Other Actions view" should be moved to View Actions. Any user-defined actions should also display in here as well instead of the separate view.
  3. The third thing is about UX and readability: the ordering and grouping of views in the toolbar could be adjusted.

Describe the solution you'd like

  1. To address the first issue: Use official VSCode views and follow their guidelines.
  2. For the second and third one, here is a detailed list:
    • Remove the "Actions" and "Other actions" sections, move them to appropriate places using default vscode icons when applicable:
      • Don't show the name of the file in the primary sidebar of the extension. That's what the tab pane is for. Without the filename there will be more space for actions
        image
      • Keep only one "Open Dashboard" action in the Sidebar toolbar (there are now 3: one on the toolbar, one in Actions view and one in the editor toolbar)
      • Move the "Add content" action to the Sidebar toolbar, use file-add icon
      • Move "Optimize slug" to view-action of the Metadata View, use rocket icon
      • Move the "open preview" to the Editor's Actions, use open-preview icon
      • Move the "start server" to the Sidebar toolbar
      • Move the "enable writing settings" and "toggle center mode", to the Editor's Actions
      • Move "Create template", "Reveal file/project...", "Open documentation", "Settings overview" and "Report an issue" to the "..." of the Sidebar toolbar
    • Reorganize the sidebar (top to bottom)
      1. "Recently Opened" should be the first or last view in the list (it's similar to "opened editors" in Explorer so it's a good spot for that section).
      2. Second the "Metadata" section, because it's the first thing of the post, the frontmatter, which intuitively should be the first thing on the sidebar
      3. Third, SEO
        • combine it's "Recommendations and "More details" into one table called "Insights" (concept graphic below)
        • move "Keywords" right below the "Insights" because it can occupy a lot of space!
        • Think about rearranging the keywords table from 2 columns with very tall rows into 6 columns with short rows. Each column for check would have an icon in the header with a hover tooltip (icons — "Title": quote, "Description": note, "Slug": link, "Content: book, "Used in Headings": label 'H1' or tag, "Keyword usage": percent sign, pulse or symbol-keyword)
          image
      4. finally the "Metadata" view
      • Add a "Fix frontmatter from content type" action which (after confirmation) overrides frontmatter fields (removes extra, adds missing) based on the content-type.
      • Use a dropdown for selecting the content type, similar to the one used in the Debugger tool window for choosing configuration.
      • Move "Create content type (from this file)" and "Add missing fields to content type" to the ... view actions. They should have confirmation dialogs informing about overwriting global config for content-type.

Additional context
A simple rendition of what I have in mind, generally. image

@T3sT3ro T3sT3ro added the enhancement New feature or request label Nov 11, 2023
@T3sT3ro T3sT3ro changed the title Enhancement: Improvements to the sidebar panel/tool window Enhancement: UX Improvements to the sidebar panel/tool window Nov 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant