search

kenny-designs / voxel-edit

A web based voxel art program.
https://kenny-designs.github.io/voxel-edit/
5 stars 3 forks source link

Rework Mobile Modal #42

Closed kenny-designs closed 3 years ago

kenny-designs commented 3 years ago

The modal on the mobile version of the GUI can be improved. For one, it needs to be made more generic. Right now, it only houses the color palette but will be needed for additional menus later on such as for project settings or camera settings. As such, move it to its own function or perhaps create a new React component from it.

Also, I would prefer that the modal has the inverted color scheme that the rest of the program has. Or, perhaps we should, for example, mimic how the segments work for the color palette and brush on the desktop GUI. Let the modal retain it's white color and just have the components that it houses have the inverted color scheme.

In either case, the mobile modal needs to be reworked.

kenny-designs commented 3 years ago

Just finished this issue and pushed to the live site.

Instead of having a bunch of modals for each mobile component that needs one, there is only a single modal that is reused for all of them. Said modal looks at the this.state.mobile.modalContentType of GUIController to decide what content needs to be rendered. Currently, this is just done with the ColorPalette component.

In addition, there is now a GUIController.css file with a .mobileModal class. Semantic-ui-react does not appear to have an inverted property for modals. As such, the .mobileModal class places the colors I wanted from inverted into the modal.

Lastly, there was a bug reported regarding the ColorPalette component when used on Firefox. Turns out, the issue was with the outline property. This is supported by Firefox but the style was set to auto. When testing on Chrome, this gave a nice white, rounded border on top of the black border for each color cell. On other browsers, this gave almost random behavior. For one person, a blue outline. On my Android phone, an incredibly thin white outline. Instead, box-shadow is now being used with a hard shadow and it works perfectly.

My only gripe is that the createMobileModalContent() method looks like it can get very messy very quickly. Be sure to refactor this later.

All in all, this issue is complete!