Finishing implementation of card stack.

marlowe-dashboard-client/src/Css.purs

@@ -84,7 +84,7 @@ nestedLabel = [ "relative", "left-2", "top-2.5", "px-1", "bg-white", "text-xs",
 
 --- cards
 overlay :: Boolean -> Array String
-overlay invisible = [ "overflow-hidden", "absolute", "top-0", "bottom-0", "left-0", "right-0", "z-20", "flex", "justify-center", "content-end", "md:content-center", "bg-overlay", "transition-opacity", "duration-400" ] <> toggleWhen invisible [ "opacity-0", "pointer-events-none" ] [ "opacity-1" ]
+overlay invisible = [ "overflow-hidden", "absolute", "top-0", "bottom-0", "left-0", "right-0", "z-20", "flex", "justify-center", "content-end", "md:content-center", "last:bg-overlay", "transition-opacity", "duration-400" ] <> toggleWhen invisible [ "opacity-0", "pointer-events-none" ] [ "opacity-1" ]
 
 card :: Boolean -> Array String
 card invisible = [ "overflow-hidden", "bg-white", "flex-grow", "max-w-sm", "mx-2", "shadow", "rounded-t", "md:rounded-b", "transform", "transition-transform", "duration-400", "self-end", "md:self-center" ] <> applyWhen invisible [ "translate-y-20" ]

marlowe-dashboard-client/src/Play/State.purs

@@ -168,16 +168,13 @@ handleAction (ContractHomeAction a@(ContractHome.OpenContract _)) = do
 handleAction (ContractHomeAction contractAction) = void $ toContractHome $ ContractHome.handleAction contractAction
 
 -- contract actions that need to be handled here
--- FIXME: instead of toggle card I need to implement a card stack and add it to the stack
-handleAction (ContractAction (Contract.AskConfirmation action)) = handleAction $ ToggleCard $ ContractActionConfirmationCard action
+handleAction (ContractAction (Contract.AskConfirmation action)) = handleAction $ OpenCard $ ContractActionConfirmationCard action
 
--- FIXME: Once we have card stack this action should not be necesary
 handleAction (ContractAction (Contract.ConfirmAction action)) = do
   void $ toContract $ Contract.handleAction $ Contract.ConfirmAction action
-  handleAction $ ToggleCard ContractCard
+  handleAction CloseCard
 
--- FIXME: instead of ToggleCard I need to implement a card stack and pop the stack
-handleAction (ContractAction Contract.CancelConfirmation) = handleAction $ ToggleCard ContractCard
+handleAction (ContractAction Contract.CancelConfirmation) = handleAction CloseCard
 
 -- other contract  actions
 handleAction (ContractAction contractAction) = void $ toContract $ Contract.handleAction contractAction

marlowe-dashboard-client/src/Play/View.purs

@@ -94,11 +94,13 @@ renderMain wallets newWalletDetails templates playState =
     menuOpen = view _menuOpen playState
 
     screen = view _screen playState
+
+    cards = view _cards playState
   in
     main
       [ classNames [ "relative", "px-4", "md:px-5pc" ] ]
       [ renderMobileMenu menuOpen
-      , renderCards wallets newWalletDetails templates playState
+      , div_ $ renderCard wallets newWalletDetails templates playState <$> cards
       , renderScreen wallets screen playState
       ]
 
@@ -114,29 +116,27 @@ renderMobileMenu menuOpen =
         iohkLinks
     ]
 
-renderCards :: forall p. WalletLibrary -> NewWalletDetails -> Array ContractTemplate -> State -> HTML p Action
-renderCards wallets newWalletDetails templates playState =
+renderCard :: forall p. WalletLibrary -> NewWalletDetails -> Array ContractTemplate -> State -> Card -> HTML p Action
+renderCard wallets newWalletDetails templates playState card =
   let
     currentWalletDetails = view _walletDetails playState
 
-    cards = view _cards playState
-
     mSelectedContractState = preview _selectedContract playState
 
     currentSlot = view _currentSlot playState
 
-    cardClasses card = case card of
+    cardClasses = case card of
       TemplateLibraryCard -> Css.largeCard false
       ContractCard -> Css.largeCard false
       _ -> Css.card false
 
-    hasCloseButton card = case card of
+    hasCloseButton = case card of
       (ContractActionConfirmationCard _) -> false
       ContractSetupConfirmationCard -> false
       _ -> true
 
-    closeButton card =
-      if hasCloseButton card then
+    closeButton =
+      if hasCloseButton then
         [ a
             [ classNames [ "absolute", "top-4", "right-4" ]
             , onClick_ CloseCard
@@ -145,32 +145,29 @@ renderCards wallets newWalletDetails templates playState =
         ]
       else
         []
-
-    renderCard card =
-      div
-        [ classNames $ Css.overlay false ]
-        [ div
-            [ classNames $ cardClasses card ]
-            $ closeButton card
-            <> case card of
-                -- TODO: Should this be renamed to CreateContactCard?
-                (CreateWalletCard mTokenName) -> [ newWalletCard wallets newWalletDetails mTokenName ]
-                (ViewWalletCard walletDetails) -> [ walletDetailsCard walletDetails ]
-                PutdownWalletCard -> [ putdownWalletCard currentWalletDetails ]
-                TemplateLibraryCard -> [ TemplateAction <$> templateLibraryCard templates ]
-                ContractSetupConfirmationCard -> [ TemplateAction <$> contractSetupConfirmationCard ]
-                -- FIXME: We need to pattern match on the Maybe because the selectedContractState
-                --        could be Nothing. We could add the state as part of the view, but is not ideal
-                --        Will have to rethink how to deal with this once the overall state is more mature.
-                ContractCard -> case mSelectedContractState of
-                  Just contractState -> [ ContractAction <$> contractDetailsCard currentSlot contractState ]
-                  Nothing -> []
-                (ContractActionConfirmationCard action) -> case mSelectedContractState of
-                  Just contractState -> [ ContractAction <$> actionConfirmationCard contractState action ]
-                  Nothing -> []
-        ]
   in
-    div_ (renderCard <$> cards)
+    div
+      [ classNames $ Css.overlay false ]
+      [ div
+          [ classNames cardClasses ]
+          $ closeButton
+          <> case card of
+              -- TODO: Should this be renamed to CreateContactCard?
+              CreateWalletCard mTokenName -> [ newWalletCard wallets newWalletDetails mTokenName ]
+              ViewWalletCard walletDetails -> [ walletDetailsCard walletDetails ]
+              PutdownWalletCard -> [ putdownWalletCard currentWalletDetails ]
+              TemplateLibraryCard -> [ TemplateAction <$> templateLibraryCard templates ]
+              ContractSetupConfirmationCard -> [ TemplateAction <$> contractSetupConfirmationCard ]
+              -- FIXME: We need to pattern match on the Maybe because the selectedContractState
+              --        could be Nothing. We could add the state as part of the view, but is not ideal
+              --        Will have to rethink how to deal with this once the overall state is more mature.
+              ContractCard -> case mSelectedContractState of
+                Just contractState -> [ ContractAction <$> contractDetailsCard currentSlot contractState ]
+                Nothing -> []
+              ContractActionConfirmationCard action -> case mSelectedContractState of
+                Just contractState -> [ ContractAction <$> actionConfirmationCard contractState action ]
+                Nothing -> []
+      ]
 
 renderScreen :: forall p. WalletLibrary -> Screen -> State -> HTML p Action
 renderScreen wallets screen playState =

marlowe-dashboard-client/tailwind.config.js

@@ -86,7 +86,7 @@ module.exports = {
   variants: {
     extend: {
       // note 'disabled' goes last so that it takes priority
-      backgroundColor: ["hover", "disabled"],
+      backgroundColor: ["last",, "hover", "disabled"],
       backgroundImage: ["hover", "disabled"],
       boxShadow: ["hover", "disabled"],
       cursor: ["hover", "disabled"],