From c9552677ab4e027b25d299a5d430cb66a63172ac Mon Sep 17 00:00:00 2001 From: Philippe Pittoli Date: Sun, 21 Jan 2024 05:33:10 +0100 Subject: [PATCH] Bulma "level" layout. --- src/App/Nav.purs | 12 ++++++++ src/App/ZoneInterface.purs | 62 +++++++++++++++++--------------------- src/Bulma.purs | 11 ++++++- src/CSSClasses.purs | 8 +++++ 4 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/App/Nav.purs b/src/App/Nav.purs index 756df2c..330967f 100644 --- a/src/App/Nav.purs +++ b/src/App/Nav.purs @@ -8,6 +8,18 @@ import Halogen.HTML.Properties as HP import Halogen.HTML.Properties.ARIA as ARIA import Bulma as Bulma +-- | `netlibre_navbar` is a complex function with many parameters. +-- | +-- | In order: authenticated (is the user authenticated) +-- | `admin` (is the user an administrator) +-- | `actionHome` (the action to get to the home page) +-- | `actionDomainList` (the action to get to the domain list page) +-- | `actionAuthdAdmin` (the action to get to the administration page) +-- | `_` (not used parameter) +-- | `actionLogin` (the action to get to the login page) +-- | `actionDisconnection` (the action to disconnect the user) +-- | +-- | TODO: make the "burger" component actually useful. For now, it's empty. netlibre_navbar :: forall w i. Boolean -> Boolean -> i -> i -> i -> i -> i -> i -> HH.HTML w i netlibre_navbar authenticated admin actionHome actionDomainList actionAuthdAdmin _ actionLogin actionDisconnection = main_nav diff --git a/src/App/ZoneInterface.purs b/src/App/ZoneInterface.purs index 6fc537d..1161bb8 100644 --- a/src/App/ZoneInterface.purs +++ b/src/App/ZoneInterface.purs @@ -133,7 +133,6 @@ data Action = DeleteRRModal RRId | CancelModal | NewRRModal AcceptedRRTypes - -- | NewAModal | Initialize @@ -227,7 +226,7 @@ render state [ case state.wsUp, state.active_modal, state.active_new_rr_modal of false, _, _ -> Bulma.p "You are disconnected." true, Just rr_id, _ -> modal_rr_delete rr_id - true, Nothing, Just t -> modal_add_new_rr t + true, Nothing, Just t -> modal_add_new_rr t state true, Nothing, Nothing -> HH.div_ [ Bulma.h1 state._domain , Bulma.hr , render_soa state._soa @@ -244,13 +243,6 @@ render state $ map NonEmpty.toArray $ A.groupAllBy (comparing (_.rrtype)) array - -- TODO: these components can have a broader use. --- generic_modal_header :: forall w. String -> HH.HTML w Action --- generic_modal_header t = HH.header [HP.classes C.modal_card_head] --- [ HH.p [HP.classes C.modal_card_title] [HH.text t] --- ] --- generic_modal_body x = HH.section [HP.classes C.modal_card_body] [ x ] - modal_rr_delete :: forall w. Int -> HH.HTML w Action modal_rr_delete rr_id = Bulma.modal @@ -270,22 +262,22 @@ render state , HH.text "." ] - modal_add_new_rr :: forall w. AcceptedRRTypes -> HH.HTML w Action - modal_add_new_rr = case _ of - A -> - Bulma.modal - [ Bulma.modal_background - , Bulma.modal_card [Bulma.modal_header "New A resource record" - , Bulma.modal_body [ Bulma.p "hello, new A RR!" ]] - , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal] - ] - _ -> - Bulma.modal - [ Bulma.modal_background - , Bulma.modal_card [Bulma.modal_header "New ?? resource record" - , Bulma.modal_body [ Bulma.p "hello, new ?? RR!" ]] - , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal] - ] + modal_add_new_rr :: forall w. AcceptedRRTypes -> State -> HH.HTML w Action + modal_add_new_rr t state = case t of + A -> template "A" [ Bulma.p "hello, new A RR!" ] + AAAA -> template "AAAA" [ Bulma.p "hello, new AAAA RR!" ] + TXT -> template "TXT" [ Bulma.p "hello, new TXT RR!" ] + CNAME -> template "CNAME" [ Bulma.p "hello, new CNAME RR!" ] + NS -> template "NS" [ Bulma.p "hello, new NS RR!" ] + MX -> template "MX" [ Bulma.p "hello, new MX RR!" ] + SRV -> template "SRV" [ Bulma.p "hello, new SRV RR!" ] + where + template t content = Bulma.modal + [ Bulma.modal_background + , Bulma.modal_card [Bulma.modal_header $ "New " <> t <> " resource record" + , Bulma.modal_body content ] + , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal] + ] handleAction :: forall m. MonadAff m => Action -> H.HalogenM State Action () Output m Unit handleAction = case _ of @@ -299,9 +291,6 @@ handleAction = case _ of NewRRModal t -> do H.modify_ _ { active_new_rr_modal = Just t } --- NewAModal -> do --- H.modify_ _ { active_modal = Just rr_id } - Initialize -> do { _domain } <- H.get H.raise $ Log $ SimpleLog $ "Asking the server for the zone" <> _domain @@ -780,13 +769,16 @@ render_new_records state = Bulma.hdiv [ Bulma.h1 "Adding new records" , Bulma.hr - , Bulma.columns [] [ - Bulma.column_ [ - Bulma.p "List of buttons:" - , Bulma.btn_add_new_rr (NewRRModal A) "A" - , Bulma.btn_add_new_rr (NewRRModal AAAA) "AAAA" - ] - ] + -- use "level" to get horizontal buttons next to each other (probably vertical on mobile) + , Bulma.level [ + Bulma.btn_add_new_rr (NewRRModal A) "A" + , Bulma.btn_add_new_rr (NewRRModal AAAA) "AAAA" + , Bulma.btn_add_new_rr (NewRRModal TXT) "TXT" + , Bulma.btn_add_new_rr (NewRRModal CNAME) "CNAME" + , Bulma.btn_add_new_rr (NewRRModal NS) "NS" + , Bulma.btn_add_new_rr (NewRRModal MX) "MX" + , Bulma.btn_add_new_rr (NewRRModal SRV) "SRV" + ] [] , Bulma.columns [] [ render_new_record_column_simple state._newSRR state._errors , render_new_record_colunm_mx state._newMXRR state._errors diff --git a/src/Bulma.purs b/src/Bulma.purs index c81f7f7..4eb2f68 100644 --- a/src/Bulma.purs +++ b/src/Bulma.purs @@ -296,6 +296,15 @@ btn_add action1 action2 validity , HP.classes $ btn_classes validity ] [ HH.text "Add" ] +-- | Create a `level`, different components that should appear on the same horizontal line. +-- | First argument, elements that should appear on the left, second on the right. +level :: forall w i. Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i +level left right = HH.nav [ HP.classes C.level ] + [ HH.div [ HP.classes C.level_left ] $ itemize left + , HH.div [ HP.classes C.level_right ] $ itemize right + ] + where itemize = map (\v -> HH.div [ HP.classes C.level_item ] [v]) + btn_add_new_rr :: forall w i. i -> String -> HH.HTML w i btn_add_new_rr action title = HH.button @@ -454,7 +463,7 @@ modal_header title = HH.header [HP.classes C.modal_card_head] [ HH.p [HP.classes C.modal_card_title] [HH.text title] ] modal_body :: forall w i. Array (HH.HTML w i) -> HH.HTML w i -modal_body = HH.section [HP.classes C.modal_card_body] +modal_body = HH.section [HP.classes C.modal_card_body] modal_foot :: forall w i. Array (HH.HTML w i) -> HH.HTML w i modal_foot = HH.div [HP.classes C.modal_card_foot] diff --git a/src/CSSClasses.purs b/src/CSSClasses.purs index 2ebd9cf..abeed22 100644 --- a/src/CSSClasses.purs +++ b/src/CSSClasses.purs @@ -72,6 +72,14 @@ is_success :: Array HH.ClassName is_success = [HH.ClassName "is-success"] label :: Array HH.ClassName label = [HH.ClassName "label"] +level :: Array HH.ClassName +level = [HH.ClassName "level"] +level_item :: Array HH.ClassName +level_item = [HH.ClassName "level-item"] +level_left :: Array HH.ClassName +level_left = [HH.ClassName "level-left"] +level_right :: Array HH.ClassName +level_right = [HH.ClassName "level-right"] medium :: Array HH.ClassName medium = [HH.ClassName "is-medium"] modal :: Array HH.ClassName