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.

Sign up for GitHub

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

Jump to bottom

Overhaul UI #280

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

Overhaul UI #280

wants to merge 44 commits into from

Conversation

boerdereinar
Copy link

@boerdereinar boerdereinar commented May 8, 2024 •
edited
Loading

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)
  • Any single grapheme cluster is now displayed as an emoji

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
  • Added graphemer for checking if the copied string contains a single grapheme cluster for the emoji item. This fixes ZWJ sequences not being detected as an emoji
  • 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
Fixes #300

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 •
edited
Loading

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
Totto16
Totto16 requested changes May 8, 2024
View reviewed changes
package.json
@@ -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 •
edited
Loading

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

@boerdereinar
Change to headerless style + add compact mode
9ba2b49
@boerdereinar
Remove redundant settings
38cb908
@boerdereinar
Shorten /home/user to ~
8e6da5c
@boerdereinar
add back headers
30c2438
@boerdereinar
add close item with middle click
fbc1bca
@boerdereinar
Add file preview + various style fixes
34f3dcc
@boerdereinar
Add file type detection for files without an extension
159be9d
@boerdereinar
Modify file item look
a9164b8
@boerdereinar
Change file styling again
4c05691
@boerdereinar
Rename preview settings
6fd2c62
@boerdereinar
Don't select on item removal
28667a1
@boerdereinar
Replace validate-color calls with color-string + make clean:ts failab…
6fb7ad2 
…le in build:ts + style changes

clean:ts is now able to fail so that I can build Pano while it is still running
@boerdereinar
Add color-string to rollup
bf4fbf8
@boerdereinar
Fix prettier problems
190473d
@boerdereinar
Re-add removed translations
a7ad086
@boerdereinar
Make item width and height configurable
5df4ea2
@boerdereinar
Change text styling
d4d8588
@boerdereinar
Only parse rgb, because color-string doesn't do conversions
7293776
@boerdereinar
Fix compact mode link style
6e0ef99
@boerdereinar
Add floating mode + fix incognito icon + modify colors to better supp…
8433bf5 
…ort incognito mode
@boerdereinar
Use BinLayout for pano item
5b0f5b7
@boerdereinar
Add option to open Pano at the pointer position
75cfe3a
@boerdereinar
Fix action button coloring to follow body/header color
9e312d9
@boerdereinar
Add compact header style
efa01b7
@boerdereinar
Fix item spacing evenly
83b431c
@boerdereinar
Fix shortcuts
47ce566
@boerdereinar
Add paste file content functionality to text file items
8704740 
Can be triggered by:
1. Pressing the action button
2. Ctrl + click on the item
3. Ctrl + enter on the item
@boerdereinar
Store any single grapheme as an emoji item
19682f8 
This adds support for ZWJ sequences
@boerdereinar
Fix transparent header color
9b3acf6 
Note: this causes a windows xp like visual bug in the link item when running Pano in a nested shell
@boerdereinar
Decrease height of files preview if it contains less files than the h…
116e820 
…eight
@boerdereinar
Fix emoji display for wide emojis like 👩🏽‍👩🏿‍👧🏻‍👧🏽
a79416c
@boerdereinar
Fix header date updater not being destroyed
3504558
@boerdereinar
Fix warnings that happen when toggling the show-controls-on-hover set…
3055ec2 
…ting
@boerdereinar
Add border around window
df96c0d
@boerdereinar
Fix item shadow + color item color + remove on mmb setting not being …
a78da38 
…respected

- Item color didn't support this format: rgb(255 0 0)
@boerdereinar
Fix pixel inconsistencies
bee6a39
@boerdereinar boerdereinar mentioned this pull request Jun 21, 2024
Closed
4 tasks
@AshtakaOOf
Copy link

Hello I'm sorry if this might be rude, but will this PR be merged at some point or is oae MIA?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Totto16 Totto16 Totto16 requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@Totto16 Totto16

Labels
Priority Medium Priority Medium
Projects
None yet
Milestone
No milestone
3 participants
@boerdereinar @Totto16 @AshtakaOOf