Popup UI improvements

[djahandarie]

I'm starting to do a popup UI overhaul for Yomitan, with some of the following goals:

1. Improve information density and usage of screen real restate (note: this is particularly important for advanced learners who have very many dictionaries loaded in)
2. Start adopting some more modern styling techniques that are more likely to better match modern browser and OS UIs

High-level concerns:

• One concern will be breaking people who are using very custom CSS, but honestly, I think, that is to some degree a risk of using custom CSS that the user takes on, and shouldn't prevent us from making changes that could benefit the entire userbase significantly.
• Another concern is that someone simply doesn't like the new UI, as is often the case with any new UI. We could consider a toggle for the old UI, but it would be quite a bit of extra complexity to carry around with the extension, so I'd like to avoid this, and instead do as much user testing as possible to make sure that everyone actually likes the new version.

Remaining items:

• continue to tweak padding, colors, border colors, shadow colors, other minor visual details
• test the full range of Yomitan UI (e.g., freq dicts, Anki integration, etc) with it
• make the popup resizer visible even when the fade out gradient present
• introduce the fade on any side of the popup which is not scrolled to the edge (so it becomes a more accurate indication that there is more content available in that direction)
• make the scroll position reset to the top when a new popup is opened (I think this functionality exists already but broken since I changed the scroll element)
• get rid of any HTML elements made unnecessary by this change
• maybe make some things configurable, like how many columns will be used in the layout (though it might be better to auto-calculate this based on popup width)

[djahandarie]

Current status:

2024-01-06.12-09-38.mp4

[github-actions]

⚠️ Visual differences introduced by this PR; please validate if they are desirable.

View Playwright Report (note: open the "playwright-report" artifact)

[MarvNC]

Very cool stuff! However I feel like the wide popup is somewhat obtrusive and probably wouldn't be favored for general use. Would this be a separate view that could be entered into?

I've been thinking about how better to display dictionaries in a small popup and have been thinking about potentially using tabs or a dropdown menu or even a custom scroll bar of some sort, as I find the main pain point is scrolling between definitions and use alt + scroll to navigate.

[cashewnuttynuts]

potential enhancement: #77

[praschke]

the only thing i actually like about this is the increased separation of dictionaries with the greater use of horizontal space, wider name headers, and more color.

the horizontal separation won't work on a phone, which is fine, but i think column count shouldn't be purely inferred from width. limit variables on column count and width would make it configurable.

i'm concerned about how the color tinting would look in dark mode. when i'm reading at night i need the background color to be pure black and the foreground colors to have limited contrast because my screen doesn't dim enough.

the missing scrollbar, round borders, transparent gaps, and overflow fade are viscerally disgusting to me. seeing the background site leaking through the gaps between entries as you scroll is incredibly distracting. i don't think any modern browser or os ui uses transparency to separate elements, this is just rice.

i also have the action bar always on on my phone so i can always use the close button in order to select japanese text, and i don't see how the action bar would work at all without the frame being a solid window.

how do collapsible dictionaries look?

some other concerns i'm noticing from the video: images being displayed inline causes the vertical size of the whole row to explode. a term containing less dictionaries than the column count results in wider columns, which looks especially weird when the colored header extends across the entire width, but the dictionary name and entry are both very small and to the left.

[djahandarie]

@praschke I appreciate the feedback, but the way its written sounds a bit harsh. 😅

[praschke]

@djahandarie i'm sorry for shooting off the cuff. i genuinely love the improved use of horizontal space, but the translucency effects seem like a primarily aesthetic change. i also don't see how the popup resizer or the action bar will work with this when the popup itself is missing. if the translucency effects can be configured away i promise i won't care.

rounded borders and missing scrollbars shouldn't have been included in that list because they are consistent with modern browser and os ui, and can probably be changed with custom css anyway.

[toasted-nutbread]

rounded borders and missing scrollbars shouldn't have been included in that list because they are consistent with modern browser and os ui, and can probably be changed with custom css anyway.

Rounded borders are modern right now in 2024, but I swear there is a perpetual cycle with UI design where the general consensus switches from "rounded good" to "square good" every several years, so take that with a grain of salt.

With regards to scrollbar, keep in mind situations where someone may not have a touchscreen or a mouse wheel, which are rightfully rare these days, but still.

[ganqqwerty]

Looks like an amazing view for the large screen where it's possible to utilize all this space! Not quite sure about removing the scrollbars though. The colors and corners look much more modern and cool than the current yomitan appearance.