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
• get rid of any HTML elements made unnecessary by this change
• maybe make some things configurable, like min-max column widths etc

[djahandarie]

Current status:

2024-01-06.12-09-38.mp4

[github-actions]

⚠️ Visual changes detected by playwright; please check the report to verify if they are desirable.

[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.

[Casheeew]

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.

[djahandarie]

I made some improvements, mostly toning back some of the more experimental things I was doing like getting rid of the scrollbar, and introducing things like sticky headers for better context when you're scrolled down.

new-design.mp4

[shiki-tm]

This is very exciting feature. Thank you Yomidevs !

Now that asbplayer is very usable for lookups and mining on Android now, would these updates be able to be taken advantage of when on Android device in the horizontal position like in this screenshot?