Add a fancy tabulation system.

src/App/Page/Zone.purs

@@ -24,6 +24,7 @@ import Prelude (Unit, unit, void
                , (+), (&&), ($), (/=), (<<<), (<>), (==), (>), (#))
 
 
+import Data.Eq (class Eq)
 import Data.Array as A
 import Data.Int (fromString)
 import Data.Tuple (Tuple(..))
@@ -131,6 +132,9 @@ data Action
   -- | Create a modal to ask confirmation before deleting a resource record.
   | DeleteRRModal RRId
 
+  -- | Change the current tab.
+  | ChangeTab Tab
+
   -- | Update new entry form (in the `rr_modal` modal).
   | UpdateCurrentRR Field
 
@@ -210,6 +214,9 @@ string_to_acceptedtype str = case str of
   "DKIM"  -> Just  DKIM
   _       -> Nothing
 
+data Tab = Zone | TokenExplanation
+derive instance eqTab :: Eq Tab
+
 type State =
   { _domain :: String
   , wsUp :: Boolean
@@ -235,6 +242,8 @@ type State =
   , dkim :: DKIM.DKIM
 
   , _zonefile :: Maybe String
+
+  , current_tab :: Tab
   }
 
 component :: forall m. MonadAff m => H.Component Query Input Output m
@@ -284,6 +293,8 @@ initialState domain =
   , spf_modifier_t:  "redirect"
   , spf_modifier_v:  ""
   , dkim: DKIM.emptyDKIMRR
+
+  , current_tab: Zone
   }
 
 type SortableRecord l = Record (rrtype :: String, rrid :: Int | l)
@@ -291,7 +302,23 @@ type SortableRecord l = Record (rrtype :: String, rrid :: Int | l)
 render :: forall m. State -> H.ComponentHTML Action () m
 render state
   = Bulma.section_small
-      [ case state.wsUp, state.rr_modal of
+      [ fancy_tab
+      , case state.current_tab of
+          Zone -> render_zone
+          TokenExplanation -> render_token_explanation
+      ]
+  where
+    fancy_tab =
+      Bulma.fancy_tabs
+        [ Bulma.tab_entry (is_tab_active Zone)             "Zone"       (ChangeTab Zone)
+        , Bulma.tab_entry (is_tab_active TokenExplanation) "Tokens? 🤨" (ChangeTab TokenExplanation)
+        ]
+    is_tab_active tab = state.current_tab == tab
+
+    render_token_explanation = Bulma.explanation Explanations.token_introduction
+
+    render_zone =
+      case state.wsUp, state.rr_modal of
           false, _                   -> Bulma.p "You are disconnected."
           true,  RemoveRRModal rr_id -> modal_rr_delete rr_id
           true,  NewRRModal _        -> render_current_rr_modal
@@ -304,8 +331,7 @@ render state
             , render_new_records state
             , render_zonefile state._zonefile
             ]
-      ]
+
-  where
     sorted :: forall l. Array (SortableRecord (l)) -> Array (SortableRecord (l))
     sorted array =
       A.groupAllBy (comparing (_.rrtype)) array    -- [x2 z2 x1 y z1 z3] -> [ NE[x2x1] NE[y] NE[z2z1z3] ]
@@ -525,6 +551,10 @@ handleAction = case _ of
   DeleteRRModal rr_id -> do
     H.modify_ _ { rr_modal = RemoveRRModal rr_id }
 
+  -- | Change the current tab.
+  ChangeTab new_tab -> do
+    H.modify_ _ { current_tab = new_tab }
+
   -- | Create modal (a form) for a resource record to update.
   CreateUpdateRRModal rr_id -> do
     state <- H.get

src/App/Text/Explanations.purs

@@ -2,6 +2,13 @@ module App.Text.Explanations where
 import Halogen.HTML as HH
 import Bulma as Bulma
 
+token_introduction :: forall w i. Array (HH.HTML w i)
+token_introduction =
+  [ Bulma.p """
+    Tokens are a way to update a resource record (A or AAAA) in a very simple way.
+    """
+  ]
+
 dkim_introduction :: forall w i. Array (HH.HTML w i)
 dkim_introduction =
   [ Bulma.p """

src/Bulma.purs

@@ -494,3 +494,15 @@ div_content content = HH.div [HP.classes (C.content)] content
 
 explanation :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
 explanation content = HH.blockquote [HP.classes [HH.ClassName "justified"]] content
+
+
+tabs :: forall w i. Array HH.ClassName -> Array (HH.HTML w i) -> HH.HTML w i
+tabs classes tab_list = HH.div [HP.classes $ C.tabs <> classes] [HH.ul_ tab_list]
+
+fancy_tabs :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
+fancy_tabs arr = tabs (C.is_medium <> C.is_boxed <> C.is_centered) arr
+
+tab_entry :: forall w i. Boolean -> String -> i -> HH.HTML w i
+tab_entry active name action =
+  HH.li (if active then [HP.classes C.is_active] else [])
+    [ HH.a [HE.onClick \_ -> action] [HH.text name] ]

src/CSSClasses.purs

@@ -4,6 +4,18 @@ import Prelude (show, ($), (<>))
 
 import Halogen.HTML as HH
 
+margin_left :: Int -> Array HH.ClassName
+margin_left size = [HH.ClassName $ "ml-" <> show size]
+
+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]
+
+padding_left :: Int -> Array HH.ClassName
+padding_left size = [HH.ClassName $ "pl-" <> show size]
+
 box                          = [HH.ClassName "box"]                          :: Array HH.ClassName
 breadcrumb                   = [HH.ClassName "breadcrumb"]                   :: Array HH.ClassName
 button                       = [HH.ClassName "button"]                       :: Array HH.ClassName
@@ -46,6 +58,7 @@ is4                          = [HH.ClassName "is-4"]                         ::
 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_boxed                     = [HH.ClassName "is-boxed"]                     :: 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
@@ -55,12 +68,11 @@ is_hoverable                 = [HH.ClassName "is-hoverable"]                 ::
 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_medium                    = [HH.ClassName "is-medium"]                    :: 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
@@ -72,7 +84,6 @@ level                        = [HH.ClassName "level"]                        ::
 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
@@ -95,16 +106,16 @@ navbar_link                  = [HH.ClassName "navbar-link"]                  ::
 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_left              = [HH.ClassName "pl-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
+tabs                         = [HH.ClassName "tabs"]                         :: Array HH.ClassName
 tag                          = [HH.ClassName "tag"]                          :: Array HH.ClassName
 tags                         = [HH.ClassName "tags"]                         :: Array HH.ClassName
 textarea                     = [HH.ClassName "textarea"]                     :: Array HH.ClassName