SCP-2447 - Implement outline of new designs. #3474
Conversation
| hideWhen :: Boolean -> Array String | ||
| hideWhen = flip applyWhen [ "hidden" ] | ||
| -- max-width container | ||
| container :: Array String |
There was a problem hiding this comment.
Maybe rename to maxWidthContainer?
| ViewWalletCard walletDetails -> [ walletDetailsCard walletDetails ] | ||
| PutdownWalletCard -> [ putdownWalletCard currentWalletDetails ] | ||
| WalletLibraryCard -> [ walletLibraryScreen walletLibrary ] | ||
| TemplateLibraryCard -> [ TemplateAction <$> templateLibraryCard ] |
There was a problem hiding this comment.
It's better to start using the renderSubmodule version, as it allows you to add normal HTML and also subcomponents
| dashboardBreadcrumb :: forall p. (Maybe Contract.State) -> HTML p Action | ||
| dashboardBreadcrumb mSelectedContractState = | ||
| div [ classNames [ "border-b", "border-gray" ] ] | ||
| [ nav [ classNames $ Css.container <> [ "flex", "gap-2", "py-2" ] ] | ||
| $ [ a [ onClick_ $ SelectContract Nothing ] [ text "Dashboard" ] ] | ||
| <> case mSelectedContractState of | ||
| Just { nickname } -> | ||
| [ span_ [ text ">" ] | ||
| , span_ [ text nickname ] | ||
| ] | ||
| Nothing -> [] | ||
| ] |
There was a problem hiding this comment.
We should probably create a function that receives an array of text and actions and draws a breadcrumb
There was a problem hiding this comment.
Yes, we probably should. The next PR will add a breadcrumb to some cards which will have - I think - exactly the same style. So that'll be the time to do it.
| -- Note [CardOpen]: As well as making the card a Maybe, we add an additional cardOpen flag. | ||
| -- When closing a card we set this to false instead of setting the card to Nothing, and that | ||
| -- way we can use CSS transitions to animate it on the way out as well as the way in. This is | ||
| -- preferable to using the Halogen.Animation module (used for toasts), because in this case we | ||
| -- need to simultaneously animate (fade in/out) the overlay, and because the animation for | ||
| -- cards has to be different for different screen sizes (on large screens some cards slide in | ||
| -- from the right) - and that's much easier to do with media queries. | ||
| , cardOpen :: Boolean |
There was a problem hiding this comment.
I wonder if after the refactor of the animation function next week, we could simplify this and avoid requiring an extra flag
There was a problem hiding this comment.
Possibly. But the complication here is that the animation has to be different depending on the screen size (from below for small screens, from the right for large ones). That's easily done with transitions and media queries, just using tailwind's generated utility classes. To do it with media queries (without checking in the app what the screen size is) I think we'll have to actually write some CSS by hand...? 🤔 🤯
I've tried to do as little as possible in this PR, to make things easier to review. The aim is to move things a step closer to the new designs by implementing the new sidebar card/modal, and putting things on that that were previously in separate screens. And also putting things that were on cards (notably the contract card) onto their own screens. On top of that, I did the minimum required to keep things basically functional - but the result is a lot of stuff looking a bit weird or ugly.
The next step(s), obviously, will be making all the component parts look pretty. As I do that, I'll also tidy up the names of the various view functions (some cards are still called screens here, and vice versa).
I don't think there's much point including screenshots (since I'd have to include loads). I think this is probably one you'll have to try out locally (sorry).