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

Overhaul UI #280

Open
wants to merge 35 commits into
base: master
Choose a base branch
from
Open

Overhaul UI #280

wants to merge 35 commits into from

Conversation

boerdereinar
Copy link

@boerdereinar boerdereinar commented May 8, 2024

Overhaul UI

Description

This pr fully overhauls the UI as per #185.

New Features

  • Complete overhaul of UI
    • Adwaita colors (customisation is still possible)
    • Favorite/close button only visible on hover (configurable)
    • Pano window floats
      • Can be disabled
      • Each margin can be configured
    • Configurable item width and height
  • File previews
    • Text files
    • Images
    • Files that have a generated thumbnail i.e. pdfs/videos
    • File paths containing /home/user/* are shortened to ~/*
    • Multiple copied files are listed under their common directory to shorten the paths of the copied files. Usually this will result in only the file names being shown
    • Color item foreground is computed using luminance
  • Header Styles
    • Headers are hidden by default
    • Visible
    • Compact
  • Compact Mode
    • Height of item is halved
    • Layout of items is restructured
    • File previews are hidden
  • Open at pointer
    • Pano can open at the current pointer position
    • Height of the window is configurable
  • Middle click to delete items
  • Paste file content
  • Items are no longer selected after deleting an item (if no items were selected before)

Misc

  • yarn run clean:ts can now fail in build:ts to make building easier while pano is still running

Dependencies

  • Added color-string for easy color parsing and conversion to rgb
  • Removed validate-color
  • Removed hex-color-converter

Screenshots

New UI

image

Compact Mode

image

Window Position: Pointer

image

Incognito Mode

image

Header Style: Compact

image

Fixes

Fixes #124
Fixes #150
Fixes #176
Fixes #185
Fixes #272

Type of change

  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist

  • My code follows the style guidelines of this project
  • My commits follow the commit standards of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have checked my code and corrected any misspellings

@Totto16
Copy link
Collaborator

Totto16 commented May 8, 2024

Thank you for your contribution, I don't know if it makes sense to review this yet, since this and #278 clash and might create merge conflicts. I also am in favor of publishing the already working UI with #278 to EGO first, before doing this. And then testing it extensively and by multiple users, before releasing it.

But overall it really looks good, so I'm going to look at this as soon as the issues and PR's with more priority are resolved.

And just from glancing over it, there are a few things to do:

  • replace images / videos in the README with the new design (do that at the end, since we might change something)

@Totto16 Totto16 self-assigned this May 8, 2024
@Totto16 Totto16 added the Priority Medium Priority Medium label May 8, 2024
@@ -7,7 +7,7 @@
"scripts": {
"build": "yarn run build:ts && yarn run gen:locale && yarn run build:extension",
"gen:locale": "yarn run ts-node scripts/generateLocale.ts",
"build:ts": "yarn run clean:ts && rollup -c --failAfterWarnings && sed -i '/setTimeout/d' dist/thirdparty/prismjs.js && sed -i 's/var\\ /let\\ /g' dist/extension.js dist/prefs.js",
"build:ts": "yarn run clean:ts; rollup -c --failAfterWarnings && sed -i '/setTimeout/d' dist/thirdparty/prismjs.js && sed -i 's/var\\ /let\\ /g' dist/extension.js dist/prefs.js",
Copy link
Collaborator

@Totto16 Totto16 May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just here to block this from being merged for the moment, please leave this unresolved

Edit: sidenote @oae could you turn on, that we require at least one approval, before being able to merge, ty

Can be triggered by:
1. Pressing the action button
2. Ctrl + click on the item
3. Ctrl + enter on the item
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority Medium Priority Medium
Projects
None yet
2 participants