-
-
Notifications
You must be signed in to change notification settings - Fork 487
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
feat: add zoom control to grid view #2745
base: main
Are you sure you want to change the base?
Conversation
From my experience with similar software, like media servers or CAD, I think zooming is a feature which should not take too much space on the UI. Especially a slider in my experience has proven to be quite useless. It usually is quite hard to slide to the desired zoom level and the indicator is quite small. So I would drop the slider at all. |
I don't think we should reverse the mensing of the numbers. I can't think if anything I have seen with that, so that would be very non intuitive to me. Perhaps this should be on a little popup? Not a modal, but a little tool tip like panel that appears when clicking on a magnifying glass button. That way it won't feel like wasting space. I do think a slider is useful for quickly picking a size that you aren't sure what it will be. In other software which has just a dropdown, it's taken me some trial and error to find the correct zoom. |
I prefer the slider functionality as implemented, with 10% steps. I did test and it was useful down to 20% once I added scaling of the placeholder text. I tested with a 64x64 grid. Now, Ctrl+ scrolling would be really cool, but I like the slider. Zoom to fit is a good idea. I suppose setting a scale based on number of buttons wide isn't horrible, just noting that the size itself will be variable as the browser width changes. But that is how it used to work before the expandable grid. The popup/dropdown could work well. |
What would "Zoom to fit" do? Consider that the size of the grid could be close to infinite. It could fit any content, but again that could be 100s wide, and should it use the same scale for each page, or be based on the contents of only the visible page? I'm not keen on the idea of scaling based on number of buttons. As someone who rarely maximises windows (doing so on a 32x9 gives silly results), the size of the window varies day by day. (I feel like this is also common on macos, as macos discourages maximising windows) |
The screenshot I posted is from a different software and was only meant to be an example for the popup idea, not for the items of that popup. Personally I would consider it an advantage if the grid scales with the window. The usual way of working with windows is that you are most often using roughly the same size, wether it is maximised or not. You set up your window and then you set up how much you want to see in the grid view. If I now adjust the window size a tiny bit, I'd prefer that the grid view still shows the same cutout. If I adjust the window size a lot, I may have to readjust the grid view. So which one of the two ways is better, depends on wether we think the users will more often do large window size adjustments or more often small or no window size adjustments. So I still vote for a solution where we not are limiting the wide zoom end. Ultimately supporting both ways could please anybody. In that case I'd suggest to have a smarter entry field. If you e.g. enter |
I started remaking this as a popover, but found that the popover support in coreui is terrible.. Even though we are using a react library, it is cloning the DOM and so breaks any js being used by the popover. We are a couple of versions behind on coreui (we are using v3. v4 was released 3 years ago, and v5 a few months ago), so I am hoping that updating that will make this possible, rather than having to workaround quirks of the version we are using. But that will likely be a lot of work to do. |
I thought it would be more a https://coreui.io/react/docs/components/dropdown/ |
I like this implementation. My earlier comment that 20-150% rather than 50-200% would be a more useful range stands. |
This needs some UX/design work, but is functional.
The idea is to allow you to scale/zoom the grid, either to make it easier to read/see the buttons, or to fill the available space fully.
TODO: