From b4a68fbaf2cb85a3ae55609a0e32e17f87e540a1 Mon Sep 17 00:00:00 2001 From: Philippe Pittoli Date: Sun, 3 Mar 2024 01:15:38 +0100 Subject: [PATCH] Nice tags before tables. --- src/App/ZoneInterface.purs | 37 +++-- src/Bulma.purs | 5 +- src/CSSClasses.purs | 309 +++++++++++++------------------------ 3 files changed, 135 insertions(+), 216 deletions(-) diff --git a/src/App/ZoneInterface.purs b/src/App/ZoneInterface.purs index 33765d6..babc14c 100644 --- a/src/App/ZoneInterface.purs +++ b/src/App/ZoneInterface.purs @@ -674,17 +674,26 @@ handleQuery = case _ of -- Rendering bg_color_ro = C.has_background_warning_light :: Array HH.ClassName +tag :: forall w i. String -> HH.HTML w i +tag str = HH.span [HP.classes (C.tag <> C.is_dark)] [HH.text str] + +tag_ro :: forall w i. String -> HH.HTML w i +tag_ro str = HH.span [HP.classes (C.tag <> C.is_warning)] [HH.text str] + +tags :: forall w i. Array (HH.HTML w i) -> HH.HTML w i +tags xs = HH.span [HP.classes (C.tags <> C.no_margin_bottom <> C.no_padding_bottom)] xs + -- | Render all Resource Records. render_resources :: forall w. Array ResourceRecord -> HH.HTML w Action render_resources [] = Bulma.box [Bulma.zone_rr_title "Resource records", Bulma.subtitle "No records for now"] render_resources records = HH.div_ $ - (rr_box "SOA" bg_color_ro Bulma.soa_table_header table_content all_soa_rr) - <> (rr_box "Basic RRs" [] Bulma.simple_table_header table_content_w_seps all_basic_rr) - <> (rr_box "MX" [] Bulma.mx_table_header table_content all_mx_rr) - <> (rr_box "SRV" [] Bulma.srv_table_header table_content all_srv_rr) - <> (rr_box "SPF" [] Bulma.spf_table_header table_content all_spf_rr) - <> (rr_box "Basic RRs (read only)" bg_color_ro Bulma.simple_table_header_ro table_content_w_seps all_basic_ro_rr) + (rr_box tag_soa bg_color_ro Bulma.soa_table_header table_content all_soa_rr) + <> (rr_box tag_basic [] Bulma.simple_table_header table_content_w_seps all_basic_rr) + <> (rr_box tag_mx [] Bulma.mx_table_header table_content all_mx_rr) + <> (rr_box tag_srv [] Bulma.srv_table_header table_content all_srv_rr) + <> (rr_box tag_spf [] Bulma.spf_table_header table_content all_spf_rr) + <> (rr_box tag_basic_ro bg_color_ro Bulma.simple_table_header_ro table_content_w_seps all_basic_ro_rr) where all_basic_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && not rr.readonly) records all_basic_ro_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && rr.readonly) records @@ -694,7 +703,14 @@ render_resources records all_srv_rr = all_XX_rr "SRV" all_spf_rr = all_XX_rr "SPF" - rr_box :: String -- box title (type of data) + tag_soa = tags [tag_ro "SOA", tag_ro "read only"] + tag_basic = tags [tag "Basic RRs (A, AAAA, PTR, NS, TXT)"] + tag_mx = tags [tag "MX"] + tag_srv = tags [tag "SRV"] + tag_spf = tags [tag "SPF"] + tag_basic_ro = tags [tag_ro "Basic RRs", tag_ro "read only"] + + rr_box :: HH.HTML w Action -- box title (type of data) -> Array HH.ClassName -> HH.HTML w Action -- table title -> (Array ResourceRecord -> HH.HTML w Action) @@ -702,11 +718,8 @@ render_resources records -> Array (HH.HTML w Action) rr_box title colors header dp rrs = if A.length rrs > 0 - then [ Bulma.columns_ - [ Bulma.column title_col_props [Bulma.box [Bulma.div_content [HH.text title]]] - , Bulma.column_ [ Bulma.box_ colors [Bulma.table [] [header, dp rrs]] ] - ] - ] + then [ Bulma.box_ (C.no_padding_left <> C.no_padding_top <> colors) + [title, Bulma.table_ (C.margin_left 3) [] [header, dp rrs]] ] else [] title_col_props = C.is 1 diff --git a/src/Bulma.purs b/src/Bulma.purs index 58ee730..4c5634d 100644 --- a/src/Bulma.purs +++ b/src/Bulma.purs @@ -57,6 +57,9 @@ input_classes = C.input <> C.is_small <> C.is_info table :: forall w i. HH.Node DHI.HTMLtable w i table prop xs = HH.table ([ HP.classes $ C.table ] <> prop) xs +table_ :: forall w i. Array HH.ClassName -> HH.Node DHI.HTMLtable w i +table_ classes prop xs = HH.table ([ HP.classes $ C.table <> classes] <> prop) xs + mechanism_table_header :: forall w i. HH.HTML w i mechanism_table_header = HH.thead_ [ HH.tr_ [ HH.th [ HP.style "width: 50px;" ] [ HH.text "Qualifier" ] @@ -462,7 +465,7 @@ selection action values selected = HH.div [HP.classes $ C.select <> C.is_normal] ] tag_light_info :: forall w i. String -> HH.HTML w i -tag_light_info str = HH.span [HP.classes (C.is_info <> C.is_light)] [HH.text str] +tag_light_info str = HH.span [HP.classes (C.tag <> C.is_info <> C.is_light)] [HH.text str] div_large_content :: forall w i. Array (HH.HTML w i) -> HH.HTML w i div_large_content content = HH.div [HP.classes (C.is_large <> C.content)] content diff --git a/src/CSSClasses.purs b/src/CSSClasses.purs index 67f2604..e408051 100644 --- a/src/CSSClasses.purs +++ b/src/CSSClasses.purs @@ -4,206 +4,109 @@ import Prelude (show, ($), (<>)) import Halogen.HTML as HH -is_spaced :: Array HH.ClassName -is_spaced = [HH.ClassName "is-spaced"] - -is_ancestor :: Array HH.ClassName -is_ancestor = [HH.ClassName "is-ancestor"] -is_vertical :: Array HH.ClassName -is_vertical = [HH.ClassName "is-vertical"] -is_parent :: Array HH.ClassName -is_parent = [HH.ClassName "is-parent"] -is_child :: Array HH.ClassName -is_child = [HH.ClassName "is-child"] -notification :: Array HH.ClassName -notification = [HH.ClassName "notification"] -is_warning :: Array HH.ClassName -is_warning = [HH.ClassName "is-warning"] - -message :: Array HH.ClassName -message = [HH.ClassName "message"] - -message_header :: Array HH.ClassName -message_header = [HH.ClassName "message-header"] - -has_text_centered :: Array HH.ClassName -has_text_centered = [HH.ClassName "has-text-centered"] - -message_body :: Array HH.ClassName -message_body = [HH.ClassName "message-body"] - -box :: Array HH.ClassName -box = [HH.ClassName "box"] -button :: Array HH.ClassName -button = [HH.ClassName "button"] -buttons :: Array HH.ClassName -buttons = [HH.ClassName "buttons"] -breadcrumb :: Array HH.ClassName -breadcrumb = [HH.ClassName "breadcrumb"] -column :: Array HH.ClassName -column = [HH.ClassName "column"] -columns :: Array HH.ClassName -columns = [HH.ClassName "columns"] -container :: Array HH.ClassName -container = [HH.ClassName "container"] -control :: Array HH.ClassName -control = [HH.ClassName "control"] -delete :: Array HH.ClassName -delete = [HH.ClassName "delete"] -field :: Array HH.ClassName -field = [HH.ClassName "field"] -field_body :: Array HH.ClassName -field_body = [HH.ClassName "field-body"] -field_label :: Array HH.ClassName -field_label = [HH.ClassName "field-label"] -has_addons :: Array HH.ClassName -has_addons = [HH.ClassName "has-addons"] -has_background_dark :: Array HH.ClassName -has_background_dark = [HH.ClassName "has-background-dark"] -has_background_warning :: Array HH.ClassName -has_background_warning = [HH.ClassName "has-background-warning"] - -has_background_primary_dark :: Array HH.ClassName -has_background_primary_dark = [HH.ClassName "has-background-primary-dark"] -has_background_link_dark :: Array HH.ClassName -has_background_link_dark = [HH.ClassName "has-background-link-dark"] -has_background_info_dark :: Array HH.ClassName -has_background_info_dark = [HH.ClassName "has-background-info-dark"] -has_background_success_dark :: Array HH.ClassName -has_background_success_dark = [HH.ClassName "has-background-success-dark"] -has_background_warning_dark :: Array HH.ClassName -has_background_warning_dark = [HH.ClassName "has-background-warning-dark"] -has_background_danger_dark :: Array HH.ClassName -has_background_danger_dark = [HH.ClassName "has-background-danger-dark"] -has_background_danger :: Array HH.ClassName -has_background_danger = [HH.ClassName "has-background-danger"] - -has_background_primary_light :: Array HH.ClassName -has_background_primary_light = [HH.ClassName "has-background-primary-light"] -has_background_link_light :: Array HH.ClassName -has_background_link_light = [HH.ClassName "has-background-link-light"] -has_background_info_light :: Array HH.ClassName -has_background_info_light = [HH.ClassName "has-background-info-light"] -has_background_success_light :: Array HH.ClassName -has_background_success_light = [HH.ClassName "has-background-success-light"] -has_background_warning_light :: Array HH.ClassName -has_background_warning_light = [HH.ClassName "has-background-warning-light"] -has_background_danger_light :: Array HH.ClassName -has_background_danger_light = [HH.ClassName "has-background-danger-light"] - -has_text_dark :: Array HH.ClassName -has_text_dark = [HH.ClassName "has-text-dark"] -has_text_light :: Array HH.ClassName -has_text_light = [HH.ClassName "has-text-light"] -has_succeeds_separator :: Array HH.ClassName -has_succeeds_separator = [HH.ClassName "has-succeeds-separator"] -has_dropdown :: Array HH.ClassName -has_dropdown = [HH.ClassName "has-dropdown"] -help :: Array HH.ClassName -help = [HH.ClassName "help"] -hero :: Array HH.ClassName -hero = [HH.ClassName "hero"] -hero_body :: Array HH.ClassName -hero_body = [HH.ClassName "hero-body"] -input :: Array HH.ClassName -input = [HH.ClassName "input"] -is4 :: Array HH.ClassName -is4 = [HH.ClassName "is-4"] -is5 :: Array HH.ClassName -is5 = [HH.ClassName "is-5"] -is_active :: Array HH.ClassName -is_active = [HH.ClassName "is-active"] -is_centered :: Array HH.ClassName -is_centered = [HH.ClassName "is-centered"] -is_danger :: Array HH.ClassName -is_danger = [HH.ClassName "is-danger"] -is_large :: Array HH.ClassName -is_large = [HH.ClassName "is-large"] -content :: Array HH.ClassName -content = [HH.ClassName "content"] -is :: Int -> Array HH.ClassName -is size = [HH.ClassName $ "is-" <> show size] -is_size :: Int -> Array HH.ClassName -is_size size = [HH.ClassName $ "is-size-" <> show size] -is_horizontal :: Array HH.ClassName -is_horizontal = [HH.ClassName "is-horizontal"] -is_hoverable :: Array HH.ClassName -is_hoverable = [HH.ClassName "is-hoverable"] -is_info :: Array HH.ClassName -is_info = [HH.ClassName "is-info"] -is_light :: Array HH.ClassName -is_light = [HH.ClassName "is-light"] -is_normal :: Array HH.ClassName -is_normal = [HH.ClassName "is-normal"] -is_primary :: Array HH.ClassName -is_primary = [HH.ClassName "is-primary"] -is_small :: Array HH.ClassName -is_small = [HH.ClassName "is-small"] -is_success :: Array HH.ClassName -is_success = [HH.ClassName "is-success"] -is_selected :: Array HH.ClassName -is_selected = [HH.ClassName "is-selected"] -is_static :: Array HH.ClassName -is_static = [HH.ClassName "is-static"] -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 -modal = [HH.ClassName "modal"] -modal_background :: Array HH.ClassName -modal_background = [HH.ClassName "modal-background"] -modal_card :: Array HH.ClassName -modal_card = [HH.ClassName "modal-card"] -modal_card_body :: Array HH.ClassName -modal_card_body = [HH.ClassName "modal-card-body"] -modal_card_foot :: Array HH.ClassName -modal_card_foot = [HH.ClassName "modal-card-foot"] -modal_card_head :: Array HH.ClassName -modal_card_head = [HH.ClassName "modal-card-head"] -modal_card_title :: Array HH.ClassName -modal_card_title = [HH.ClassName "modal-card-title"] -navbar :: Array HH.ClassName -navbar = [HH.ClassName "navbar"] -navbar_brand :: Array HH.ClassName -navbar_brand = [HH.ClassName "navbar-brand"] -navbar_burger :: Array HH.ClassName -navbar_burger = [HH.ClassName "navbar-burger"] -navbar_divider :: Array HH.ClassName -navbar_divider = [HH.ClassName "navbar-divider"] -navbar_dropdown :: Array HH.ClassName -navbar_dropdown = [HH.ClassName "navbar-dropdown"] -navbar_end :: Array HH.ClassName -navbar_end = [HH.ClassName "navbar-end"] -navbar_item :: Array HH.ClassName -navbar_item = [HH.ClassName "navbar-item"] -navbar_link :: Array HH.ClassName -navbar_link = [HH.ClassName "navbar-link"] -navbar_menu :: Array HH.ClassName -navbar_menu = [HH.ClassName "navbar-menu"] -navbar_start :: Array HH.ClassName -navbar_start = [HH.ClassName "navbar-start"] -normal :: Array HH.ClassName -normal = [HH.ClassName "is-normal"] -section :: Array HH.ClassName -section = [HH.ClassName "section"] -select :: Array HH.ClassName -select = [HH.ClassName "select"] -subtitle :: Array HH.ClassName -subtitle = [HH.ClassName "subtitle"] -table :: Array HH.ClassName -table = [HH.ClassName "table"] -textarea :: Array HH.ClassName -textarea = [HH.ClassName "textarea"] -tile :: Array HH.ClassName -tile = [HH.ClassName "tile"] -title :: Array HH.ClassName -title = [HH.ClassName "title"] +box = [HH.ClassName "box"] :: Array HH.ClassName +breadcrumb = [HH.ClassName "breadcrumb"] :: Array HH.ClassName +button = [HH.ClassName "button"] :: Array HH.ClassName +buttons = [HH.ClassName "buttons"] :: Array HH.ClassName +column = [HH.ClassName "column"] :: Array HH.ClassName +columns = [HH.ClassName "columns"] :: Array HH.ClassName +container = [HH.ClassName "container"] :: Array HH.ClassName +content = [HH.ClassName "content"] :: Array HH.ClassName +control = [HH.ClassName "control"] :: Array HH.ClassName +delete = [HH.ClassName "delete"] :: Array HH.ClassName +field_body = [HH.ClassName "field-body"] :: Array HH.ClassName +field = [HH.ClassName "field"] :: Array HH.ClassName +field_label = [HH.ClassName "field-label"] :: Array HH.ClassName +has_addons = [HH.ClassName "has-addons"] :: Array HH.ClassName +has_background_danger_dark = [HH.ClassName "has-background-danger-dark"] :: Array HH.ClassName +has_background_danger = [HH.ClassName "has-background-danger"] :: Array HH.ClassName +has_background_danger_light = [HH.ClassName "has-background-danger-light"] :: Array HH.ClassName +has_background_dark = [HH.ClassName "has-background-dark"] :: Array HH.ClassName +has_background_info_dark = [HH.ClassName "has-background-info-dark"] :: Array HH.ClassName +has_background_info_light = [HH.ClassName "has-background-info-light"] :: Array HH.ClassName +has_background_link_dark = [HH.ClassName "has-background-link-dark"] :: Array HH.ClassName +has_background_link_light = [HH.ClassName "has-background-link-light"] :: Array HH.ClassName +has_background_primary_dark = [HH.ClassName "has-background-primary-dark"] :: Array HH.ClassName +has_background_primary_light = [HH.ClassName "has-background-primary-light"] :: Array HH.ClassName +has_background_success_dark = [HH.ClassName "has-background-success-dark"] :: Array HH.ClassName +has_background_success_light = [HH.ClassName "has-background-success-light"] :: Array HH.ClassName +has_background_warning_dark = [HH.ClassName "has-background-warning-dark"] :: Array HH.ClassName +has_background_warning = [HH.ClassName "has-background-warning"] :: Array HH.ClassName +has_background_warning_light = [HH.ClassName "has-background-warning-light"] :: Array HH.ClassName +has_dropdown = [HH.ClassName "has-dropdown"] :: Array HH.ClassName +has_succeeds_separator = [HH.ClassName "has-succeeds-separator"] :: Array HH.ClassName +has_text_centered = [HH.ClassName "has-text-centered"] :: Array HH.ClassName +has_text_dark = [HH.ClassName "has-text-dark"] :: Array HH.ClassName +has_text_light = [HH.ClassName "has-text-light"] :: Array HH.ClassName +help = [HH.ClassName "help"] :: Array HH.ClassName +hero_body = [HH.ClassName "hero-body"] :: Array HH.ClassName +hero = [HH.ClassName "hero"] :: Array HH.ClassName +input = [HH.ClassName "input"] :: Array HH.ClassName +is4 = [HH.ClassName "is-4"] :: Array HH.ClassName +is5 = [HH.ClassName "is-5"] :: Array HH.ClassName +is_active = [HH.ClassName "is-active"] :: Array HH.ClassName +is_ancestor = [HH.ClassName "is-ancestor"] :: Array HH.ClassName +is_centered = [HH.ClassName "is-centered"] :: Array HH.ClassName +is_child = [HH.ClassName "is-child"] :: Array HH.ClassName +is_danger = [HH.ClassName "is-danger"] :: Array HH.ClassName +is_dark = [HH.ClassName "is-dark"] :: Array HH.ClassName +is_horizontal = [HH.ClassName "is-horizontal"] :: Array HH.ClassName +is_hoverable = [HH.ClassName "is-hoverable"] :: Array HH.ClassName +is_info = [HH.ClassName "is-info"] :: Array HH.ClassName +is_large = [HH.ClassName "is-large"] :: Array HH.ClassName +is_light = [HH.ClassName "is-light"] :: Array HH.ClassName +is_normal = [HH.ClassName "is-normal"] :: Array HH.ClassName +is_parent = [HH.ClassName "is-parent"] :: Array HH.ClassName +is_primary = [HH.ClassName "is-primary"] :: Array HH.ClassName +is_selected = [HH.ClassName "is-selected"] :: Array HH.ClassName +is size = [HH.ClassName $ "is-" <> show size] :: Array HH.ClassName +is_size size = [HH.ClassName $ "is-size-" <> show size] :: Array HH.ClassName +is_small = [HH.ClassName "is-small"] :: Array HH.ClassName +is_spaced = [HH.ClassName "is-spaced"] :: Array HH.ClassName +is_static = [HH.ClassName "is-static"] :: Array HH.ClassName +is_success = [HH.ClassName "is-success"] :: Array HH.ClassName +is_vertical = [HH.ClassName "is-vertical"] :: Array HH.ClassName +is_warning = [HH.ClassName "is-warning"] :: Array HH.ClassName +label = [HH.ClassName "label"] :: Array HH.ClassName +level = [HH.ClassName "level"] :: Array HH.ClassName +level_item = [HH.ClassName "level-item"] :: Array HH.ClassName +level_left = [HH.ClassName "level-left"] :: Array HH.ClassName +level_right = [HH.ClassName "level-right"] :: Array HH.ClassName +margin_left size = [HH.ClassName $ "ml-" <> show size] :: Array HH.ClassName +medium = [HH.ClassName "is-medium"] :: Array HH.ClassName +message_body = [HH.ClassName "message-body"] :: Array HH.ClassName +message_header = [HH.ClassName "message-header"] :: Array HH.ClassName +message = [HH.ClassName "message"] :: Array HH.ClassName +modal_background = [HH.ClassName "modal-background"] :: Array HH.ClassName +modal_card_body = [HH.ClassName "modal-card-body"] :: Array HH.ClassName +modal_card_foot = [HH.ClassName "modal-card-foot"] :: Array HH.ClassName +modal_card_head = [HH.ClassName "modal-card-head"] :: Array HH.ClassName +modal_card = [HH.ClassName "modal-card"] :: Array HH.ClassName +modal_card_title = [HH.ClassName "modal-card-title"] :: Array HH.ClassName +modal = [HH.ClassName "modal"] :: Array HH.ClassName +navbar_brand = [HH.ClassName "navbar-brand"] :: Array HH.ClassName +navbar_burger = [HH.ClassName "navbar-burger"] :: Array HH.ClassName +navbar_divider = [HH.ClassName "navbar-divider"] :: Array HH.ClassName +navbar_dropdown = [HH.ClassName "navbar-dropdown"] :: Array HH.ClassName +navbar_end = [HH.ClassName "navbar-end"] :: Array HH.ClassName +navbar = [HH.ClassName "navbar"] :: Array HH.ClassName +navbar_item = [HH.ClassName "navbar-item"] :: Array HH.ClassName +navbar_link = [HH.ClassName "navbar-link"] :: Array HH.ClassName +navbar_menu = [HH.ClassName "navbar-menu"] :: Array HH.ClassName +navbar_start = [HH.ClassName "navbar-start"] :: Array HH.ClassName +no_margin_bottom = [HH.ClassName "mb-0"] :: Array HH.ClassName +no_padding_left = [HH.ClassName "pl-0"] :: Array HH.ClassName +no_padding_bottom = [HH.ClassName "pb-0"] :: Array HH.ClassName +no_padding_top = [HH.ClassName "pt-0"] :: Array HH.ClassName +normal = [HH.ClassName "is-normal"] :: Array HH.ClassName +notification = [HH.ClassName "notification"] :: Array HH.ClassName +padding_left size = [HH.ClassName $ "pl-" <> show size] :: Array HH.ClassName +section = [HH.ClassName "section"] :: Array HH.ClassName +select = [HH.ClassName "select"] :: Array HH.ClassName +subtitle = [HH.ClassName "subtitle"] :: Array HH.ClassName +table = [HH.ClassName "table"] :: Array HH.ClassName +tag = [HH.ClassName "tag"] :: Array HH.ClassName +tags = [HH.ClassName "tags"] :: Array HH.ClassName +textarea = [HH.ClassName "textarea"] :: Array HH.ClassName +tile = [HH.ClassName "tile"] :: Array HH.ClassName +title = [HH.ClassName "title"] :: Array HH.ClassName