Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some refactoring ahead of implementing the new designs. #3455

Merged
merged 2 commits into from
Jun 30, 2021
Merged

Some refactoring ahead of implementing the new designs. #3455

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
725e8cf
Combining Play and ContractHome into Dashboard.
merivale Jun 29, 2021
3e3e846
Moving part of the dashboard contract box view into Contract.View.
merivale Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Moving part of the dashboard contract box view into Contract.View.
  • Loading branch information
@merivale
merivale committed Jun 29, 2021
commit 3e3e846c4d35eb489899117b1a6a1d007f836707
40 changes: 37 additions & 3 deletions marlowe-dashboard-client/src/Contract/View.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
module Contract.View
( contractDetailsCard
( contractInnerBox
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm more keen into renaming the current cards into modal or dialog and keeping card for this widget. Or even keeping just card for modals and this being a contractCard.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

InnerBox is particulary noisy, as a Box is a 3d element, and an inner box I'm thinking about a box inside a box.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point. I'll leave it for now and rename things in the next PR - when I expect these things will become clearer. I'm not opposed to either of your suggestions.

, contractDetailsCard
, actionConfirmationCard
) where

import Prelude hiding (div)
import Contract.Lenses (_executionState, _metadata, _namedActions, _nickname, _participants, _pendingTransaction, _previousSteps, _selectedStep, _tab, _userParties)
import Contract.Lenses (_executionState, _mMarloweParams, _metadata, _namedActions, _nickname, _participants, _pendingTransaction, _previousSteps, _selectedStep, _tab, _userParties)
import Contract.State (currentStep, isContractClosed)
import Contract.Types (Action(..), PreviousStep, PreviousStepState(..), State, Tab(..), scrollContainerRef)
import Css (applyWhen, classNames, toggleWhen)
Expand All @@ -21,7 +22,7 @@ import Data.Map (keys, lookup, toUnfoldable) as Map
import Data.Maybe (Maybe(..), isJust, maybe, maybe')
import Data.Set (Set)
import Data.Set as Set
import Data.String (take, trim)
import Data.String (null, take, trim)
import Data.String.Extra (capitalize)
import Data.Tuple (Tuple(..), fst, uncurry)
import Data.Tuple.Nested ((/\))
Expand All @@ -40,6 +41,39 @@ import Marlowe.Slot (secondsDiff, slotToDateTime)
import Material.Icons (Icon(..), icon)
import WalletData.State (adaToken, getAda)

-- I'm moving this view here so that we can easily call Contract.Actions from inside it. I'm not
-- actually calling any Contract.Actions from here yet, but that's a TODO for the next PR...
contractInnerBox :: forall p. Slot -> State -> HTML p Action
contractInnerBox currentSlot state =
Comment on lines +44 to +47
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the same that previous ContractHome.View (contractCard) ?

If so, it looks a lot smaller, it's missing the contractType, Acronym and contractInstanceId 🤔 .

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't the whole box (hence "inner"). I left the parent div and the header in the dashboard view, because that needs to have a clickable element that opens the screen for that contract - which is a dashboard action. But then the rest goes here in the contract view, because it will have contract actions.

let
nickname = state ^. _nickname

mMarloweParams = state ^. _mMarloweParams

stepNumber = currentStep state + 1

mNextTimeout = state ^. (_executionState <<< _mNextTimeout)

timeoutStr =
maybe'
(\_ -> if isContractClosed state then "Contract closed" else "Timed out")
(\nextTimeout -> humanizeDuration $ secondsDiff nextTimeout currentSlot)
mNextTimeout
in
div_
[ div
[ classNames [ "flex-1", "px-4", "py-2", "text-lg" ] ]
-- TODO: make (new) nicknames editable directly from here
[ text if null nickname then "My new contract" else nickname ]
, div
[ classNames [ "bg-lightgray", "flex", "flex-col", "px-4", "py-2" ] ] case mMarloweParams of
Nothing -> [ text "pending confirmation" ]
_ ->
[ span [ classNames [ "text-xs", "font-semibold" ] ] [ text $ "Step " <> show stepNumber <> ":" ]
, span [ classNames [ "text-xl" ] ] [ text timeoutStr ]
]
]

-- NOTE: Currently, the horizontal scrolling for this element does not match the exact desing. In the designs, the active card is always centered and you
-- can change which card is active via scrolling or the navigation buttons. To implement this we would probably need to add snap scrolling to the center of the
-- big container and create a smaller absolute positioned element of the size of a card (positioned in the middle), and with JS check that if a card enters
Expand Down
4 changes: 3 additions & 1 deletion marlowe-dashboard-client/src/Dashboard/State.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,9 @@ handleAction _ (CloseCard card) = do

handleAction _ (SelectView view) = assign _status view

handleAction _ (OpenContract ix) = assign _selectedContractIndex $ Just ix
handleAction input (OpenContract ix) = do
assign _selectedContractIndex $ Just ix
handleAction input $ OpenCard ContractCard

-- Until everything is working in the PAB, we are simulating persistent and shared data using localStorage; this
-- action updates the state to match the localStorage, and should be called whenever the stored data changes.
Expand Down
44 changes: 7 additions & 37 deletions marlowe-dashboard-client/src/Dashboard/View.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,28 @@
module Dashboard.View (renderDashboardState) where

import Prelude hiding (div)
import Contract.Lenses (_executionState, _followerAppId, _mMarloweParams, _metadata, _nickname)
import Contract.State (currentStep, isContractClosed)
import Contract.Lenses (_followerAppId, _mMarloweParams, _metadata)
import Contract.Types (State) as Contract
import Contract.View (actionConfirmationCard, contractDetailsCard)
import Contract.View (actionConfirmationCard, contractDetailsCard, contractInnerBox)
import Css (applyWhen, classNames, hideWhen, toggleWhen)
import Css as Css
import Dashboard.Lenses (_cards, _menuOpen, _remoteWalletInfo, _screen, _selectedContract, _status, _templateState, _walletDetails, _walletIdInput, _walletLibrary, _walletNicknameInput)
import Dashboard.State (partitionContracts)
import Dashboard.Types (Action(..), Card(..), ContractStatus(..), Screen(..), State, PartitionedContracts)
import Data.Array (length)
import Data.Lens (preview, view, (^.))
import Data.Maybe (Maybe(..), maybe')
import Data.String (null, take)
import Data.Maybe (Maybe(..))
import Data.String (take)
import Effect.Aff.Class (class MonadAff)
import Halogen (ComponentHTML)
import Halogen.Extra (renderSubmodule)
import Halogen.HTML (HTML, a, div, div_, footer, h2, header, img, main, nav, p_, span, text)
import Halogen.HTML.Events.Extra (onClick_)
import Halogen.HTML.Properties (href, id_, src)
import Humanize (humanizeDuration)
import Images (marloweRunNavLogo, marloweRunNavLogoDark)
import MainFrame.Types (ChildSlots)
import Marlowe.Execution.Lenses (_mNextTimeout)
import Marlowe.Extended (contractTypeInitials, contractTypeName)
import Marlowe.Semantics (PubKey, Slot)
import Marlowe.Slot (secondsDiff)
import Material.Icons (Icon(..), icon, icon_)
import Popper (Placement(..))
import Prim.TypeError (class Warn, Text)
Expand Down Expand Up @@ -260,28 +256,12 @@ contractGrid currentSlot contracts =
contractBox :: forall p. Slot -> Contract.State -> HTML p Action
contractBox currentSlot contractState =
let
nickname = contractState ^. _nickname

mMarloweParams = contractState ^. _mMarloweParams

metadata = contractState ^. _metadata

contractType = contractTypeName metadata.contractType

contractAcronym = contractTypeInitials metadata.contractType

stepNumber = currentStep contractState + 1

mNextTimeout = contractState ^. (_executionState <<< _mNextTimeout)

contractInstanceId = contractState ^. _followerAppId

timeoutStr =
maybe'
(\_ -> if isContractClosed contractState then "Contract closed" else "Timed out")
(\nextTimeout -> humanizeDuration $ secondsDiff nextTimeout currentSlot)
mNextTimeout

attributes = case mMarloweParams of
Just _ ->
-- NOTE: The overflow hidden helps fix a visual bug in which the background color eats away the border-radius
Expand All @@ -296,21 +276,11 @@ contractBox currentSlot contractState =
-- TODO: This part is really similar to contractTitle in Template.View, see if it makes sense to factor a component out
[ div
[ classNames [ "flex", "px-4", "pt-4", "items-center" ] ]
[ span [ classNames [ "text-2xl", "leading-none", "font-semibold" ] ] [ text contractAcronym ]
, span [ classNames [ "flex-grow", "ml-2", "self-start", "text-xs", "uppercase" ] ] [ text contractType ]
[ span [ classNames [ "text-2xl", "leading-none", "font-semibold" ] ] [ text $ contractTypeInitials metadata.contractType ]
, span [ classNames [ "flex-grow", "ml-2", "self-start", "text-xs", "uppercase" ] ] [ text $ contractTypeName metadata.contractType ]
, icon ArrowRight [ "text-28px" ]
]
, div
[ classNames [ "flex-1", "px-4", "py-2", "text-lg" ] ]
-- TODO: make (new) nicknames editable directly from here
[ text if null nickname then "My new contract" else nickname ]
, div
[ classNames [ "bg-lightgray", "flex", "flex-col", "px-4", "py-2" ] ] case mMarloweParams of
Nothing -> [ text "pending confirmation" ]
_ ->
[ span [ classNames [ "text-xs", "font-semibold" ] ] [ text $ "Step " <> show stepNumber <> ":" ]
, span [ classNames [ "text-xl" ] ] [ text timeoutStr ]
]
, ContractAction <$> contractInnerBox currentSlot contractState
]

------------------------------------------------------------
Expand Down