mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2025-12-28 02:21:53 +00:00
5516a906b6
## About The Pull Request
Added preference for layout selection in some interfaces such as
SmartFridge and Vending, where there is an option to switch between grid
view and list view
This should cut out the default layout selection dilemma in UI's, since
the selection will now be available to the user forever, not just until
the interface closes and resetting the selection
Also, Vending UI now use Grid layout by default
### How do i implement that to my UI?
Simple, just import all required stuff into your UI:
`import { getLayoutState, LAYOUT, LayoutToggle } from
'./common/LayoutToggle';`
Next, create state: `const [toggleLayout, setToggleLayout] =
useState(getLayoutState());`
`getLayoutState()` can accept value, Make sure you fill it, if have no
plans to handle layouts through DM, like in SmartFridge
`getLayoutState(LAYOUT.Grid)`. Returns LAYOUT.Default... by default
And finally, put a layout switch somewhere, for example in Section
buttons: `<LayoutToggle state={toggleLayout} setState={setToggleLayout}
/>`
Where `state` is the actual value of useState, and `setState` is the
function to set the state
After all theese little manipulations, you can finally dEsIgN your
beautifull UI with 2 layouts. Don't forget to use enum for this:
`<Button fluid={LAYOUT.List) />` for example.
Seems pretty simple
## Why It's Good For The Game
No more arguing what is better and what is more convenient, everyone is
free to choose for themselves
## Demo
<details><summary> Video </summary>
https://github.com/user-attachments/assets/5752e354-81b4-4bdb-acb2-7e228be0f90c
</details>
## Changelog
🆑
qol: You can choose in preferences what layout use into the Smartfridge
or Vending machines: Grid or List. Default TGUI Layout preference. In
the future there may be more interfaces where there will be 2 layout
options. Also Vending UI now use Grid layout by default.
/🆑