[go: nahoru, domu]

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

[CoverBrowser.MosaicMenu] Increase the thickness of the mosaic’s focus underline #12189

Merged
merged 12 commits into from
Aug 5, 2024

Conversation

Commodore64user
Copy link
Contributor
@Commodore64user Commodore64user commented Jul 19, 2024

closes #12132


This change is Reviewable

@poire-z
Copy link
Contributor
poire-z commented Jul 19, 2024

Make NT great again, and fuck the rest of the world ?! No way you'll get us waste room between thumbnails.

The solution might be to wrap a thicker linewidget in a smaller CenterContainer sized the size of the original LineWidget.

@Commodore64user
Copy link
Contributor Author

fuck the rest of the world

first of all, wash that mouth with soap and water, and second. Why couldn't you say any of this before? I specifically pointed it out and you were very nonchalant about it.

@Commodore64user
Copy link
Contributor Author
Commodore64user commented Jul 22, 2024

I haven’t updated this yet, so be nice and behave @poire-z ;)

if not Device:isTouchDevice() then
-- Make it bigger on non-touch devices, without affecting our sizing
-- we'll keep doing with that small self.underline_h
self._underline_container.linesize = 5
Copy link
Contributor

Choose a reason for hiding this comment

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

@Frenzie will probably want us to use Size.line.thin above instead of my self.underline_h = 1, and thick here, or thicker (to add to size.lua) if you need it even thicker.

Copy link
Member

Choose a reason for hiding this comment

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

That's correct. 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

well if @Frenzie isn't going to bite my head off ;), I would add a thickest = Screen:scaleBySize(5), and use that one

I could add two sizes to size.lua:

thicker = Screen:scaleBySize(3),
thickest = Screen:scaleBySize(5),

line = {
thin = Screen:scaleBySize(0.5),
medium = Screen:scaleBySize(1),
thick = Screen:scaleBySize(1.5),
progress = Screen:scaleBySize(7),
},

Copy link
Member
@Frenzie Frenzie Jul 23, 2024

Choose a reason for hiding this comment

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

I'm not sure if that value really fits within the design scheme. If you would like to put it in there because it'll be reused a name like progress might be better. If it's a one-off it can just stay here as is, just with the knowledge that it's generally to be avoided.

Edit: a name like progress meaning something in the direction of non_touch_active that isn't generic.

Copy link
Contributor Author
@Commodore64user Commodore64user Jul 23, 2024

Choose a reason for hiding this comment

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

in that case it could be focus = Screen:scaleBySize(5),? or selection?

edit: or non_touch_active

Copy link
Member

Choose a reason for hiding this comment

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

No, anything like that would imply this is what you should choose if you're doing those things, which is not the case. Where else do you intend to use the value?

Copy link
Member

Choose a reason for hiding this comment

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

Yes, something like non_touch_active could work, if reuse is intended.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Where else do you intend to use the value?

I don't. Just there for now. Perhaps it could be reused in the detailed list mode but that is all.

Copy link
Member
@Frenzie Frenzie left a comment

Choose a reason for hiding this comment

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

I defer to @poire-z but lgtm from a code perspective

@Frenzie Frenzie added this to the 2024.08 milestone Jul 29, 2024
self._underline_container = UnderlineContainer:new{
vertical_align = "top",
padding = 0,
padding = Size.padding.tiny,
Copy link
Contributor

Choose a reason for hiding this comment

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

Do you really need to change this padding?
This change may impact normal (not NT) users, that may get covers size changed and get their thumbnail refreshed. But it looks like it may not be the case.
But if I exagerate this value and use 10, I get some drawing issues:
image
So, we probably have some problem somewhere (or something else somewhere to adjust for this change), and you and I will be happy if we keep using 0 so we can pretend wi didn't notice it :)

Copy link
Contributor

Choose a reason for hiding this comment

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

But if I exagerate this value and use 10, I get some drawing issues:

This was to mean that if you don't exagerate it and use 1 or 2 (that Size.padding.tiny would do), you may not notice the issue (because the shift/sliding/sizing change would be small), but it would still be there.

Copy link
Contributor Author
@Commodore64user Commodore64user Jul 29, 2024

Choose a reason for hiding this comment

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

Do you really need to change this padding?

Yes, it is there to separate book covers with max possible length and width, otherwise it looks indiscernible or as if one was trying to swallow the other. Incidentally that is exactly what is happening in the original screenshots in #12132. These screenshots #12132 (comment) happen to be using padding (1) and the focus happens to be in a potentially problematic book (if you were wanting the answer to the original challenge, focus on pic B was on that same Bulgakov book, pic A was The Pigeon)

This was to mean that if you don't exagerate it and use 1 or 2 (that Size.padding.tiny would do), you may not notice the issue (because the shift/sliding/sizing change would be small), but it would still be there.

Honestly I haven't noticed anything so probably fine with padding.tiny

@poire-z
Copy link
Contributor
poire-z commented Jul 29, 2024

(Continuing the above "conversation" here in the main thread to have more room.)

OK, I understand the need for some padding.
And OK, it looks like my yellow highlight is actually the underline for the item above, and its the item below that's draw over it. It is not like it is that small or cut like I thought :)

Anyway, you may have not noticed anything, but I do, just poking stuff here and there, there may need for adjusting things elsewhere.
Here's the current rendering (with underline=1 and padding=0), with some bash windows used as fixed rulers:
image
Here's with underline=5 and padding=0: notice how the dogear leaks/overflows below:
image
Here's with underline=1 and padding=5:
image

So, it seems different padding values do not change the look (just the position of the underline), hopefully because we force our size elsewhere and the added height (by the padding) to the underline container does not interfere with the overall geometry.
But the underline size does: the thumbnail bottom edge is a bit higher up, and the dogear is badly positionned.

Putting now a ruler at the top of the thumbnail (forgot to do that above):
Here's the current rendering (with underline=1 and padding=0):
image

Here's with underline=5 and padding=0
image

The top edge of the thumbnail does not move, but its bottom edge does - which means it is smaller with underline=5, but my thumbnail did not get refreched. Which means it is either truncated or resized, which is not good :/
Actually resized, here's with underline_h=25:
image

May be there is already something fishy with using 1, and it's either not noticable or stuff rounded so there's no thumbnail resize - or may be there is one and we just never noticed it :/ Or we hardcoded a 1 somewhere that we need to update to 5 or using underline_h...

(I'm a bit sick that your PRs take so much time and energy, even the most innofensive looking like this one :( )

@poire-z
Copy link
Contributor
poire-z commented Jul 29, 2024

At least, the thumbnail gets refreshed when I move back from underline_h=25 to 1, so the code seems to re-use higher sized cached thumbnails - but when the cached one is smaller, it gets refreshed. @hius07 : I think we kept that behaviour last time you revamped that, right?
So there may be no issue, but it needs some checking that everything is right, and if that behaviour (the underline taking room from the thumbnail instead of growing below, expecting there's enough margin to not overlap on the thumbnail below) is the one we want. (And if it is alright NT users will get to reuse higher sized cached thumbnails that will get resized forever.)

@Commodore64user
Copy link
Contributor Author
Commodore64user commented Jul 29, 2024

(I'm a bit sick that your PRs take so much time and energy, even the most inoffensive looking like this one :( )

cut it out, I know you enjoy every bit of it.

Interesting observations, my experience is rather 'mixed' to describe it somehow. this is as per PR, padding = tiny, underline = non_touch_active

FileManager_2024-07-29_234006

some books appear to have their dog ear sticking out (horizontally paint stroked), whilst others seem unaffected and even some have it higher up (vertically paint stroked).

then again, it appears a lot of this behaviour occurs today with 2024.07...

FileManager_2024-07-30_001714

@poire-z
Copy link
Contributor
poire-z commented Aug 4, 2024

I think this may work (replace my 5 and 1 with your proper things from size.lua):

--- a/plugins/coverbrowser.koplugin/mosaicmenu.lua
+++ b/plugins/coverbrowser.koplugin/mosaicmenu.lua
@@ -408,19 +408,24 @@ function MosaicMenuItem:init()
     -- for compatibility with keyboard navigation
     -- (which does not seem to work well when multiple pages,
     -- even with classic menu)
-    self.underline_h = 1 -- smaller than default (3), don't waste space
+    local underline_h = 5 -- smaller than default (3), don't waste space
+    local underline_padding = 1
     self._underline_container = UnderlineContainer:new{
         vertical_align = "top",
-        padding = 0,
+        padding = underline_padding,
         dimen = Geom:new{
             x = 0, y = 0,
             w = self.width,
-            h = self.height
+            h = self.height + underline_h + underline_padding,
         },
-        linesize = self.underline_h,
+        linesize = underline_h,
         -- widget : will be filled in self:update()
     }
     self[1] = self._underline_container
+    -- (This MosaicMenuItem will be taller than self.height, but will be put
+    -- in a Container with a fixed height=item_height, so it will overflow it
+    -- on the bottom, in the room made by item_margin=Screen:scaleBySize(10),
+    -- so we should ensure underline_h + underline_padding stays below that.)

     -- Remaining part of initialization is done in update(), because we may
     -- have to do it more than once if item not found in db
@@ -435,7 +440,7 @@ function MosaicMenuItem:update()

     local dimen = Geom:new{
         w = self.width,
-        h = self.height - self.underline_h
+        h = self.height,
     }

     -- We'll draw a border around cover images, it may not be

It would request cached thumbnails 1px taller, so they would get refreshed (which is better than the opposite, requesting smaller ones and getting taller ones that would have to be resized each time).
Is that the case for you too ?

I noticed the dogear sometimes overflowing, even with the previous code - a "Refresh cached book info" somehow solves it (so, the thumbnail we get from the cache may influence the sizing/positionning ?! :/).
So, if it overflows, and if the thumbnail does not refresh, force a "Refresh cached book info" to see if it solves the overflow.

I believe that we could even go with underline_h = 5 (rather, your equivalent from size.lua) even on the emulator (so, no if Device:isCrappy() check needed). With 5, the underilne is somehow centered in the margin (on my emulator), so one could think they apply to the thumbnail below instead of the above - with 4 it's a bit nearer to the thumbnail above).

Anyway, to be tested on your Kindle - and may be on the emulator by people who have higher resolution than my little PC (where scaleBySize does x1).

@Commodore64user
Copy link
Contributor Author
Commodore64user commented Aug 4, 2024
+    local underline_h = 5 -- smaller than default (3), don't waste space
+    local underline_padding = 1

sorry just to clarify, you want underline_h = 5 for ALL?

-if not Device:isTouchDevice() then
-     -- Make it bigger on non-touch devices, without affecting our sizing
-     -- we'll keep doing with that small self.underline_h
-     self._underline_container.linesize = Size.line.non_touch_active
-end

and that goes too?

@poire-z
Copy link
Contributor
poire-z commented Aug 4, 2024

Yes to both. With your Size.line.something instead of my 5, and Size.padding.somethingelse isntead of my 1.
Well, I don't know what is really ALL, devices that would see it. On the emulator, we usually don't see it (it's not displayed until we first use an arrow key), and people probably don't use it. But if they do, I don't think they would be bothered by it being thicker.

@Commodore64user
Copy link
Contributor Author
Commodore64user commented Aug 4, 2024

so, no if Device:isCrappy() check needed)

no, I don't use kobo.


first off, I want to say that pixel peeping like I have with these dog ears, makes me feel like I am doing something hugely inappropriate :)

Is that the case for you too ?

it looks like it, at least all covers seem to be perfectly aligned with their dog ears now.

Anyway, to be tested on your Kindle

looks good so far, will update if anything changes.

speaking of dog ears, could we you add drop shadows to the ones used for bookmarks?

@poire-z
Copy link
Contributor
poire-z commented Aug 4, 2024

speaking of dog ears, could we you add drop shadows to the ones used for bookmarks?

I'm not a SVG artist, I can't do that.
Also, about our current dogear, it somehow fits the rusticity of our UI: we don't have any 3D/shadow/gray icon, so it would need to stay black & white, with just stroke thickness tricks. But again, I like our current one.

Anyway, if you want to change your dogear icon or test various ones, no need to hack the code, you can just create koreader/icons/ (alongside styletweaks/ and settings/) and put in it a SVG that you name dogear.alpha.png and it will be used instead of our shipped one.
Someone did that in #7514 (comment).

Comment on lines 64 to 68
thin = Screen:scaleBySize(0.5),
medium = Screen:scaleBySize(1),
thick = Screen:scaleBySize(1.5),
non_touch_active = Screen:scaleBySize(5),
progress = Screen:scaleBySize(7),
Copy link
Contributor

Choose a reason for hiding this comment

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

If we're using it always, it doesn't need to be named "non_touch_*".
We need to find another adjective for that little bar indicating an item is focused/selected.
(I would say you being English is the best to find one, but this could lead us into complications :))

Copy link
Contributor Author

Choose a reason for hiding this comment

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

active selection indicator, focus underline, focus bar have your pick

Copy link
Contributor

Choose a reason for hiding this comment

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

Size.line.focus then

Copy link
Contributor Author

Choose a reason for hiding this comment

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

just focus? surely you could have said that from the start

Copy link
Contributor Author
@Commodore64user Commodore64user left a comment

Choose a reason for hiding this comment

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

that good enough @poire-z ? ;)

frontend/ui/size.lua Outdated Show resolved Hide resolved
plugins/coverbrowser.koplugin/mosaicmenu.lua Outdated Show resolved Hide resolved
@Frenzie Frenzie merged commit 3992438 into koreader:master Aug 5, 2024
4 checks passed
@Commodore64user Commodore64user deleted the mosaic-focus-underline branch August 5, 2024 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FR: Make selection (underline focus) visible on NT [great again]
3 participants