WIP on modals.

Dependencies

• [2] T2DN23M7 Factor out billing create component.
• [3] ANDJ6GEY Add billing component skeleton.
• [4] VTZT2ILU Wire up billing navigation.
• [*] NJNMO72S Add zcash.com submodule and update client to modern halogen.
• [*] SAESJLLY Initial experiments in hash routing.
• [*] EA5BFM5G Split Login component into its own module.

Change contents

• edit in client/dev/index.html at line 6
  [6.2573]

  [7.3]
  + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
• edit in client/dev/index.html at line 14
  [6.2707]

  [6.2707]
  + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

  + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
• replacement in client/src/Aftok/Billing/Create.purs at line 109
  [2.2941]→[2.2941:3989](∅→∅)
  − HH.div

  − [ P.classes (ClassName <$> ["card-body"]) ]

  − [ HH.form_

  − [

  − HH.div

  − [ P.classes (ClassName <$> ["form-group"]) ]

  − [ HH.label [ P.for "billableName" ] [ HH.text "Bill Name:" ]

  − , HH.input

  − [ P.type_ P.InputText

  − , P.classes (ClassName <$> [ "form-control" ])

  − , P.id_ "billableName"

  − , P.placeholder "A name for the product or service you want to bill for"

  − , P.required true

  − , P.autofocus true

  − , E.onValueInput (Just <<< SetName)

  − ]

  − , HH.label [ P.for "billableDesc" ] [ HH.text "Bill Description:" ]

  − , HH.input

  − [ P.type_ P.InputText

  − , P.classes (ClassName <$> [ "form-control" ])

  − , P.id_ "billableDesc"

  − , P.placeholder "Description of the product or service"

  − , P.required true

  − , P.autofocus true

  − , E.onValueInput (Just <<< SetDesc)

  − ]
  [2.2941]

  [2.3989]
  + HH.form_

  + [ HH.div

  + [ P.classes (ClassName <$> ["form-group"]) ]

  + [ HH.label

  + [ P.for "billableName", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]

  + [ HH.text "Bill Name:" ]

  + , HH.input

  + [ P.type_ P.InputText

  + , P.classes (ClassName <$> [ "form-control-sm" ])

  + , P.id_ "billableName"

  + , P.placeholder "A name for the product or service you want to bill for"

  + , P.required true

  + , P.autofocus true

  + , E.onValueInput (Just <<< SetName)

  + ]

  + , HH.label

  + [ P.for "billableDesc", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]

  + [ HH.text "Bill Description:" ]

  + , HH.input

  + [ P.type_ P.InputText

  + , P.classes (ClassName <$> [ "form-control-sm" ])

  + , P.id_ "billableDesc"

  + , P.placeholder "Description of the product or service"

  + , P.required true

  + , P.autofocus true

  + , E.onValueInput (Just <<< SetDesc)
• edit in client/src/Aftok/Billing/Create.purs at line 136
  [2.4003]

  [2.4003]
  + , HH.label

  + [ P.for "billableMsg", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]

  + [ HH.text "Message to be included with bill:" ]

  + , HH.input

  + [ P.type_ P.InputText

  + , P.classes (ClassName <$> [ "form-control-sm" ])

  + , P.id_ "billableMsg"

  + , P.placeholder "Description of the product or service"

  + , P.required true

  + , P.autofocus true

  + , E.onValueInput (Just <<< SetDesc)

  + ]
• edit in client/src/Aftok/Billing/Create.purs at line 150
  [2.4021]

  [2.4021]
  +

  + colmd :: forall a s. Int -> Array (H.ComponentHTML a s m) -> H.ComponentHTML a s m

  + colmd i xs = HH.div [ P.classes (ClassName <$> [ "col-md-" <> show i ]) ] xs
• edit in client/src/Aftok/Billing/Create.purs at line 154
  [2.4022]

  [2.4022]
  +
• replacement in client/src/Aftok/Billing.purs at line 12
  [3.3072]→[2.4455:4493](∅→∅)
  − import Data.Time.Duration (Hours(..))
  [3.3072]

  [3.3072]
  + -- import Data.Time.Duration (Hours(..))
• replacement in client/src/Aftok/Billing.purs at line 21
  [3.3315]→[2.4494:4526](∅→∅)
  − import Halogen.HTML.Events as E
  [3.3315]

  [3.3315]
  + -- import Halogen.HTML.Events as E
• edit in client/src/Aftok/Billing.purs at line 37
  [3.3674]

  [3.3674]
  + import Aftok.Modals as Modals
• replacement in client/src/Aftok/Billing.purs at line 121
  [3.6127]→[2.4757:4798](∅→∅)
  − case st.selectedProject of
  [3.6127]

  [2.4798]
  + (case st.selectedProject of
• replacement in client/src/Aftok/Billing.purs at line 123
  [2.4825]→[2.4825:5078](∅→∅)
  − [ HH.slot

  − _createBillable

  − unit

  − (Create.component system caps.createBillable)

  − (unwrap p).projectId

  − (Just <<< BillableCreated)
  [2.4825]

  [2.5078]
  + [ Modals.modalButton "createBillable" "Create billable"

  + , Modals.modal "createBillable" "Create Billable"

  + [ HH.slot

  + _createBillable

  + unit

  + (Create.component system caps.createBillable)

  + (unwrap p).projectId

  + (Just <<< BillableCreated)

  + ]
• replacement in client/src/Aftok/Billing.purs at line 134
  [2.5128]→[2.5128:5164](∅→∅)
  −

  −
  [2.5128]

  [3.6162]
  + )
• file addition: HTML (d--r------)
  [8.1]
• file addition: Classes.purs (----------)
  [0.3158]
  + module Aftok.HTML.Classes where

  +

  + import Halogen.HTML.Core (ClassName(..))

  +

  + btn :: ClassName

  + btn = ClassName "btn"

  +

  + btnPrimary :: ClassName

  + btnPrimary = ClassName "btn-primary"

  +

  + btnSecondary :: ClassName

  + btnSecondary = ClassName "btn-secondary"

  +

  + close :: ClassName

  + close = ClassName "close"

  +

  + fade :: ClassName

  + fade = ClassName "fade"

  +

  + show :: ClassName

  + show = ClassName "show"

  +

  + modal :: ClassName

  + modal = ClassName "modal"

  +

  + modalBody :: ClassName

  + modalBody = ClassName "modal-body"

  +

  + modalContent :: ClassName

  + modalContent = ClassName "modal-content"

  +

  + modalDialog :: ClassName

  + modalDialog = ClassName "modal-dialog"

  +

  + modalHeader :: ClassName

  + modalHeader = ClassName "modal-header"

  +

  + modalFooter :: ClassName

  + modalFooter = ClassName "modal-footer"

  +

  + modalTitle :: ClassName

  + modalTitle = ClassName "modal-title"
• file addition: Properties.purs (----------)
  [0.3158]
  + module Aftok.HTML.Properties where

  +

  + import Halogen.HTML.Core (AttrName(..))

  + import Halogen.HTML.Properties (IProp, attr)

  +

  + dataToggle :: forall r i. String -> IProp r i

  + dataToggle = attr (AttrName "data-toggle")

  +

  + dataTarget :: forall r i. String -> IProp r i

  + dataTarget = attr (AttrName "data-target")

  +

  + dataDismiss :: forall r i. String -> IProp r i

  + dataDismiss = attr (AttrName "data-dismiss")

  +
• file addition: HTML.purs (----------)
  [8.1]
  + module Aftok.HTML where
• file addition: Modals.purs (----------)
  [8.1]
  + module Aftok.Modals where

  +

  + import Prelude ((<>), negate)

  + import DOM.HTML.Indexed.ButtonType (ButtonType(..))

  + import Halogen.HTML as HH

  + import Halogen.HTML.Properties as P

  + import Halogen.HTML.Properties.ARIA as ARIA

  +

  + import Aftok.HTML.Classes as C

  + import Aftok.HTML.Properties as AP

  +

  + modalButton :: forall w i. String -> String -> HH.HTML w i

  + modalButton target text =

  + HH.button

  + [ P.classes [ C.btn, C.btnPrimary ]

  + , AP.dataToggle "modal"

  + , AP.dataTarget ("#" <> target)

  + , P.type_ ButtonButton

  + ]

  + [ HH.text text ]

  +

  + modal :: forall w i. String -> String -> Array (HH.HTML w i) -> HH.HTML w i

  + modal modalId title contents =

  + HH.div

  + [ P.classes [ C.modal ]

  + , P.id_ modalId

  + , P.tabIndex (negate 1)

  + , ARIA.role "dialog"

  + , ARIA.labelledBy (modalId <> "Title")

  + , ARIA.hidden "true"

  + ]

  + [ HH.div

  + [ P.classes [C.modalDialog], ARIA.role "document" ]

  + [ HH.div

  + [ P.classes [C.modalContent] ]

  + [ HH.div

  + [ P.classes [C.modalHeader] ]

  + [ HH.h5 [P.classes [C.modalTitle], P.id_ (modalId <>"Title") ] [HH.text title]

  + , HH.button

  + [ P.classes [ C.close ]

  + , AP.dataDismiss "modal"

  + , ARIA.label "Close"

  + , P.type_ ButtonButton

  + ]

  + [ HH.span [ARIA.hidden "true"] [HH.text "×"]]

  + ]

  + , HH.div

  + [ P.classes [C.modalBody] ]

  + contents

  + , HH.div

  + [ P.classes [C.modalFooter] ]

  + [ HH.button

  + [ P.type_ ButtonButton

  + , P.classes [ C.btn, C.btnSecondary]

  + , AP.dataDismiss "modal"

  + ]

  + [ HH.text "Close" ]

  + , HH.button

  + [ P.type_ ButtonButton

  + , P.classes [ C.btn, C.btnPrimary ]

  + ]

  + [ HH.text "Save changes"]

  + ]

  + ]

  + ]

  + ]