Overhaul UI #280

boerdereinar · 2024-05-08T00:07:18Z

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

Compact Mode

Window Position: Pointer

Incognito Mode

Header Style: Compact

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 · 2024-05-08T00:36:22Z

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 · 2024-05-08T00:38:39Z

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",


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

…le in build:ts + style changes clean:ts is now able to fail so that I can build Pano while it is still running

…ort incognito mode

… again

…style in compact mode

Can be triggered by: 1. Pressing the action button 2. Ctrl + click on the item 3. Ctrl + enter on the item

This adds support for ZWJ sequences

Note: this causes a windows xp like visual bug in the link item when running Pano in a nested shell

…eight

…ting

…respected - Item color didn't support this format: rgb(255 0 0)

AshtakaOOf · 2024-10-21T08:28:27Z

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

JE-Amouel · 2024-12-11T15:08:51Z

Hi,
Is this PR still in the scope?

PauloVBettio · 2025-01-18T17:40:11Z

What is missing to merge this pull request? How could I help to speed this up?

JE-Amouel · 2025-01-23T21:06:43Z

i just try this branch, and is f*cking awesome 💯

we really need this

PauloVBettio · 2025-01-24T12:22:17Z

So, it’s currently broken? Bummer.
I could also submit a new pull request with the design, but would it actually get merged? If not, I think it might be better to create a new fork or start a new project with a different vision.

No problem with Pano tho, it is great! I understand if they don't want to change the design.

JE-Amouel · 2025-01-24T12:57:00Z

@PauloVBettio

So, it’s currently broken? Bummer.

If you're talking about the artifacts on the screenshot, it's Just because of my screenshot tool which, I think, only works well under wayland,
otherwise I spent a little afternoon 😎 testing the different features, and I opted for a centralized interface like on the screenshot ,

I could also submit a new pull request with the design, but would it actually get merged? If not, I think it might be better to create a new fork or start a new project with a different vision.

If your code is hot, I think it's worth a try before launching into a new branch, I would also like to take advantage of the progress of the main branch which has Added highlighting features for code. And also without mentioning all the refactoring necessary to adapt it to the new version of gnome, but frankly if you are determined enough to launch a new branch or even a new extension with these features, it's really worth it.✨👌

No problem with Pano tho, it is great! I understand if they don't want to change the design.

😵‍💫

boerdereinar · 2025-01-24T16:27:10Z

Afaik everything works, that screenshot just has the background set to transparent and the headers enabled. I just haven't updated it since the current branch still works fine.

PauloVBettio · 2025-01-24T17:03:53Z

Sorry, I thought it was broken because of the artifacts and headers, my bad, how embarrassing 😅
Even so, is there anything I can do to speed up the merge process? I'm willing to work on this because I really like the work that was done in this PR.

JE-Amouel · 2025-01-24T17:45:00Z

@PauloVBettio

Sorry, I thought it was broken because of the artifacts and headers, my bad, how embarrassing 😅

😆 , sorry, my bad...

I send a better screenshot

I think there is still some work to be done, because there are sometimes images that are not displayed.
but still great.

is there anything I can do to speed up the merge process? I'm willing to work on this because I really like the work that was done in this PR.

since there no any activities concerning this PR, it difficult to know 😕

oae · 2025-02-13T23:44:57Z

@boerdereinar could you please resolve the conflicts so I can merge them?

Totto16 self-assigned this May 8, 2024

Totto16 added the Priority Medium Priority Medium label May 8, 2024

Totto16 requested changes May 8, 2024

View reviewed changes

boerdereinar force-pushed the gnome-theming-v2 branch from 5159092 to 101ea17 Compare May 21, 2024 12:14

boerdereinar added 25 commits May 21, 2024 14:17

Change to headerless style + add compact mode

9ba2b49

Remove redundant settings

38cb908

Shorten /home/user to ~

8e6da5c

add back headers

30c2438

add close item with middle click

fbc1bca

Add file preview + various style fixes

34f3dcc

Add file type detection for files without an extension

159be9d

Modify file item look

a9164b8

Change file styling again

4c05691

Rename preview settings

6fd2c62

Don't select on item removal

28667a1

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

Add color-string to rollup

bf4fbf8

Fix prettier problems

190473d

Re-add removed translations

a7ad086

Make item width and height configurable

5df4ea2

Change text styling

d4d8588

Only parse rgb, because color-string doesn't do conversions

7293776

Fix compact mode link style

6e0ef99

Add floating mode + fix incognito icon + modify colors to better supp…

8433bf5

…ort incognito mode

Use BinLayout for pano item

5b0f5b7

Add option to open Pano at the pointer position

75cfe3a

Fix action button coloring to follow body/header color

9e312d9

Add compact header style

efa01b7

Fix item spacing evenly

83b431c

boerdereinar added 5 commits May 21, 2024 14:17

Fix jumpy animations when filtering/deleting items + fix item spacing…

6439747

… again

Move file icons to header icon if headers are enabled

06f12d1

Fix metadata height for link item with header

d1793fd

Fix window height not updating + update resource files

f683b1c

Add favorite indicator + modify file icon placement and link preview …

ff610a6

…style in compact mode

boerdereinar force-pushed the gnome-theming-v2 branch from 101ea17 to ff610a6 Compare May 21, 2024 12:17

boerdereinar added 11 commits May 23, 2024 02:16

Fix shortcuts

47ce566

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

Store any single grapheme as an emoji item

19682f8

This adds support for ZWJ sequences

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

Decrease height of files preview if it contains less files than the h…

116e820

…eight

Fix emoji display for wide emojis like 👩🏽‍👩🏿‍👧🏻‍👧🏽

a79416c

Fix header date updater not being destroyed

3504558

Fix warnings that happen when toggling the show-controls-on-hover set…

3055ec2

…ting

Add border around window

df96c0d

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)

Fix pixel inconsistencies

bee6a39

boerdereinar mentioned this pull request Jun 21, 2024

Emoji with skin tone is not recognized as emoji #300

Closed

4 tasks

oae mentioned this pull request Feb 13, 2025

Issue tracker for Full GNOME 46 support #271

Open

4 tasks

Totto16 mentioned this pull request Feb 20, 2025

Disable code highlighting #344

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overhaul UI #280

Overhaul UI #280

boerdereinar commented May 8, 2024 •

edited

Loading

Totto16 commented May 8, 2024 •

edited

Loading

Totto16 May 8, 2024 •

edited

Loading

AshtakaOOf commented Oct 21, 2024

JE-Amouel commented Dec 11, 2024

PauloVBettio commented Jan 18, 2025

JE-Amouel commented Jan 23, 2025 •

edited

Loading

PauloVBettio commented Jan 24, 2025 •

edited

Loading

JE-Amouel commented Jan 24, 2025

boerdereinar commented Jan 24, 2025

PauloVBettio commented Jan 24, 2025

JE-Amouel commented Jan 24, 2025 •

edited

Loading

oae commented Feb 13, 2025

Overhaul UI #280

Are you sure you want to change the base?

Overhaul UI #280

Conversation

boerdereinar commented May 8, 2024 • edited Loading

Overhaul UI

Description

New Features

Misc

Dependencies

Screenshots

New UI

Compact Mode

Window Position: Pointer

Incognito Mode

Header Style: Compact

Fixes

Type of change

Checklist

Totto16 commented May 8, 2024 • edited Loading

Totto16 May 8, 2024 • edited Loading

Choose a reason for hiding this comment

AshtakaOOf commented Oct 21, 2024

JE-Amouel commented Dec 11, 2024

PauloVBettio commented Jan 18, 2025

JE-Amouel commented Jan 23, 2025 • edited Loading

PauloVBettio commented Jan 24, 2025 • edited Loading

JE-Amouel commented Jan 24, 2025

boerdereinar commented Jan 24, 2025

PauloVBettio commented Jan 24, 2025

JE-Amouel commented Jan 24, 2025 • edited Loading

oae commented Feb 13, 2025

boerdereinar commented May 8, 2024 •

edited

Loading

Totto16 commented May 8, 2024 •

edited

Loading

Totto16 May 8, 2024 •

edited

Loading

JE-Amouel commented Jan 23, 2025 •

edited

Loading

PauloVBettio commented Jan 24, 2025 •

edited

Loading

JE-Amouel commented Jan 24, 2025 •

edited

Loading