Repository navigation
Conversation
With several pictures the carousel only shows one at a time and the others have to be paged through. Hovering the picture now fans all pictures of the part out to its right as thumbnails (pure CSS, only on devices with a real hover and from the md breakpoint up, so touch devices and single-picture parts keep the plain carousel). A click on a thumbnail shows that picture in the carousel. If the user may edit the part, the click also saves the picture as the part's preview picture through a new CSRF-protected POST route (part_set_master_picture), so the choice sticks and shows up in the tables. Like the master picture select of the edit form, only picture attachments of the part itself are accepted; pictures inherited from the footprint, category etc. and time travel views are view-only.
The fanned out pictures were 76px, too small to tell similar photos apart; they are 160px now (four per row, from the 250px thumbnails). The carousel's dark hover overlay made the picture one is choosing for harder to see, so it is not shown for parts that have the fan.
|
Being honest I had some hard time to understand, what this feature should do based from your text. But i get it now and tried it out. I think at the moment this looks more like just some reading overview of all pictures, but users wont really understand that it changes the preview image, and that happens to easily, without much feedback on what happened. I could see this as some purely read only view to scroll through all associated images at quick glance (but then the flickering overscoll bars should be fixed). If you want to have this as some editing feature, it should be behind some button, etc. that explains the meaning of the following action. To be honest i am not sure if that is really a useful feature, as I normally do not need to change the preview image and I prefer a clear seperation of editing and viewing a part. Maybe something like this could be useful for selecting the preview image on the part edit page. But I have (inspired by your PR) added already some small preview images to the preview picture selector, which should make picking the right one a bit easier. |
This branch has not been deployed
2 participants
A part with several pictures only shows one at a time on its info page; finding a particular one means clicking through the carousel, and making another one the preview picture means going to the edit form.
With this, hovering the picture of a part that has more than one fans all of its pictures out to the right as thumbnails (160px, four per row, further ones wrap). Hovering a thumbnail highlights it, clicking it shows it in the main slot, and moving the mouse away from the picture and the fan collapses it again.
If the user may edit the part, the click also saves that picture as the part's preview picture, so the choice sticks and shows up in tables:
POST /{id}/set_master_picture(part_set_master_picture),denyAccessUnlessGranted('edit', $part)plus a CSRF tokenDetails:
(hover: hover) and (pointer: fine) and (min-width: 768px): touch devices and narrow layouts keep the plain carousel, and the carousel controls stay usable by keyboard.One new translation string (
part.info.picture_fan.label).Not covered: no PHPUnit test for the new route, and a failed save is only logged to the console (the picture still switches).