Add setting for max image width when viewing .note files

[james-xli]

Per issue #22, I took a stab at adding a max px width setting in the settings pane:

Set to 500 px as shown above, my test note looks like this:

Notes are still responsive to window size below the max width.

The default value is 1400px, which is nearly the max width of a note (both A5X and A6X2) in portrait orientation. This is the same as the preexisting behavior. That same test note looks like this at the max 1400px width:

I am pretty new to contributing on Github so I would like any and all feedback, thanks!

[philips]

Hrm, I wonder how we would handle horizontal on this. My instinct is to make max-width a percentage at 5% increments or something instead. WDYT? Is there a reason you want pixel increment control?

[philips]

Note to self: I tested this branch and it works fine as described. Code looks fine. Just needs a squash after the percentage discussion above.

[james-xli]

I think you're right, a percentage will probably be more intuitive for horizontal notes, as well as future larger notes from the A5X2 device. Pixels just happened to be convenient for implementation. I am going out of town for a week but will come back to this when I return!

[philips]

I actually prototyped it and CSS supports a percentage and it is a percentage of the enclosing div. So it works as you might hope. Just a couple of lines to edit. Safe travels! Sent from a pocket terminal On May 25, 2024, at 6:29 PM, James Li @.***> wrote: I think you're right, a percentage will probably be more intuitive for horizontal notes, as well as future larger notes from the A5X2 device. Pixels just happened to be convenient for implementation. I am going out of town for a week but will come back to this when I return!

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[james-xli]

I tried the percentage but couldn't find a clean way to implement my desired behavior. Doing something like max-width: 60% would cause the max width to vary based on the window size, whereas I wanted the max width constraint to stay constant regardless of window size.

(Maybe I'm totally misunderstanding what you were describing above, or overlooking something obvious? Please let me know if so!)

Instead, to handle horizontal pages nicely (i.e., keep them at the same apparent scale as vertical pages), I changed the setting so it limits both the height and width of the image. It's now called "Max image side length" in the Settings pane. For example, the new default limit of 800 px would allow a vertical page up to 800 px tall, or a horizontal page up to 800 px wide.

Unfortunately I couldn't actually test this on any actual horizontal pages since the library doesn't support those yet, but I'm hopeful that this will play nice when that time comes!

I implemented this by creating a new parent div with the max-width attribute for each page (and then the images have a max-height attribute). Creating a div for each page presented a convenient opportunity to add a related behavior I had been planning to try: The ability to show multiple pages horizontally if the window is large enough.

Some screenshots to show what I mean:

1. When the window is narrow, the images are responsive to the window width:

2. If the window is made wider, at a certain point the image hits the maximum side length setting and stops getting bigger:

3. If you keep making the window wider, the image stays the same size:

4. If the window is made further wide enough, more than one page can be shown side by side:

Please let me know what you think, thanks! Cheers :)

[james-xli]

One more screenshot to demonstrate the added functionality: if I keep the window the same size as in the last screenshot above, but set the image side length limit to something smaller (here 400 px), now I can see a whole bunch of pages at once:

[ankit-kapur]

This looks great for being able to see pages side by side, can we merge this @philips