From 2c3f4ffc57414f2530a30fa9c4b86d677c290f1c Mon Sep 17 00:00:00 2001 From: Artus Date: Thu, 5 Dec 2019 21:19:05 +0100 Subject: [PATCH] unifies styling with bulma --- src/Bulma.elm | 68 +++++++++++++++++++++++++++++++++++++++++ src/Page/Dashboard.elm | 13 ++++---- src/Page/GroupChest.elm | 62 +++++++++++++++---------------------- src/Page/Shop.elm | 57 +++++++++++++--------------------- 4 files changed, 120 insertions(+), 80 deletions(-) create mode 100644 src/Bulma.elm diff --git a/src/Bulma.elm b/src/Bulma.elm new file mode 100644 index 0000000..ab5c0c8 --- /dev/null +++ b/src/Bulma.elm @@ -0,0 +1,68 @@ +module Bulma exposing (..) + +{- + + Helper to style with Bulma.css + +-} + +import Html exposing (..) +import Html.Attributes exposing (..) +import Html.Events exposing (..) +import Svg.Attributes + + + +-- ICONS + + +icon : { icon : String, size : Maybe String, ratio : Maybe String } -> Html msg +icon params = + span [ class <| "icon " ++ Maybe.withDefault "" params.size ] + [ i [ Svg.Attributes.class <| params.icon ++ " " ++ Maybe.withDefault "" params.ratio ] [] ] + + + +-- BUTTONS + + +btn : msg -> { text : String, icon : String, color : String } -> Html msg +btn msg params = + button + [ class <| "button is-medium level-item " ++ params.color + , onClick msg + ] + [ icon { icon = params.icon, size = Nothing, ratio = Nothing } + , p [] [ text params.text ] + ] + + +buttons btns = + div [ class "buttons" ] btns + + +confirmButtons confirm cancel = + buttons [ confirmBtn confirm, cancelBtn cancel ] + + +confirmBtn msg = + btn msg { text = "Ok", icon = "fas fa-check", color = "is-primary" } + + +cancelBtn msg = + btn msg { text = "Annuler", icon = "fas fa-times", color = "is-danger" } + + + +-- TABLES +-- + + +datatable headers rows = + table [ class "table is-fullwidth is-striped" ] + [ thead [ class "table-header" ] <| + List.map + (\header -> th [] [ text header ]) + headers + , tbody [] rows + ] diff --git a/src/Page/Dashboard.elm b/src/Page/Dashboard.elm index 12e0b55..20c5376 100644 --- a/src/Page/Dashboard.elm +++ b/src/Page/Dashboard.elm @@ -2,6 +2,7 @@ module Page.Dashboard exposing (Model, Msg(..), getSession, init, update, update import Api import Api.Player as Player exposing (Player, Wealth) +import Bulma as B import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) @@ -125,10 +126,10 @@ view model = Admin (AdminConfig session players playerForm) -> ( case playerForm of Nothing -> - modeButton "Ajouter un joueur" (AdminViewer EditPlayer) + B.btn (AdminViewer EditPlayer) { text = "Ajouter un joueur", icon = "fas fa-plus", color = "is-primary" } Just _ -> - buttons [ modeButton "Ok" ConfirmNewPlayer, modeButton "Annuler" CloseEdit ] + B.confirmButtons ConfirmNewPlayer CloseEdit |> Html.map AdminViewer , [ div [ class "section" ] [ case playerForm of @@ -137,11 +138,9 @@ view model = Just form -> editNewPlayer form - , table [ class "table is-fullwidth is-striped" ] - [ thead [ class "table-header" ] - [ th [] [ text "Joueurs" ] ] - , tbody [] <| List.map viewPlayer players - ] + , B.datatable + [ "Joueurs" ] + (List.map viewPlayer players) ] ] ) diff --git a/src/Page/GroupChest.elm b/src/Page/GroupChest.elm index 2d067e7..25605bf 100644 --- a/src/Page/GroupChest.elm +++ b/src/Page/GroupChest.elm @@ -1,14 +1,12 @@ -module Page.GroupChest exposing (Model, Msg(..), init, refresh, update, view) +module Page.GroupChest exposing (Model, Msg(..), init, update, view) import Api exposing (HttpResult, Loot) +import Bulma as B import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import Page.Chest as Chest exposing (Chest) import Session exposing (Session, User(..)) -import Set -import Table -import Utils exposing (renderIcon) type alias Model = @@ -26,7 +24,7 @@ type State getClaimsFromSession session = case Session.user session of - Session.Player data -> + Player data -> if data.player.id /= 0 then data.claims -- TODO: The group and admin case should be impossible ! @@ -34,7 +32,7 @@ getClaimsFromSession session = else [] - Session.Admin _ -> + Admin _ -> [] @@ -66,23 +64,20 @@ view model = let ( isPlayer, isGroup ) = case Session.user model.session of - Session.Admin _ -> + Admin _ -> ( False, False ) - Session.Player data -> + Player data -> ( True, data.player.id == 0 ) in case ( model.chest, isPlayer && not isGroup ) of ( Chest.View _, True ) -> - button - [ class "button" - , onClick - (GotChestMsg <| Chest.claim (getClaimsFromSession model.session)) - ] - [ text "Demander" ] + B.btn + (GotChestMsg <| Chest.claim (getClaimsFromSession model.session)) + { text = "Demander", icon = "fas fa-praying-hands", color = "is-primary" } ( Chest.Claim _, True ) -> - button [ class "button", onClick ConfirmGrab ] [ text "Valider" ] + B.confirmButtons ConfirmGrab (GotChestMsg Chest.show) ( _, _ ) -> text "" @@ -103,10 +98,6 @@ type InnerMsg | ConfirmGrab -refresh model = - update (Internal <| GotChestMsg (Chest.intoMode (Chest.IntoViewWithClaims (getClaimsFromSession model.session)))) model - - update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of @@ -115,7 +106,7 @@ update msg model = Internal ConfirmGrab -> case ( Session.user model.session, model.loot, model.chest ) of - ( Session.Player data, Loaded loot, Chest.Claim _ ) -> + ( Player data, Loaded loot, Chest.Claim _ ) -> ( model , Chest.confirmGrab data.player.id @@ -128,24 +119,19 @@ update msg model = ( model, Cmd.none ) Internal innerMsg -> - (case innerMsg of - GotLoot _ (Ok loot) -> - ( { model | loot = Loaded loot }, Cmd.none ) + Tuple.mapSecond (Cmd.map Internal) <| + case innerMsg of + GotLoot _ (Ok loot) -> + ( { model | loot = Loaded loot }, Cmd.none ) - GotLoot _ (Err _) -> - ( { model | loot = LoadError "Le chargement a échoué" }, Cmd.none ) + GotLoot _ (Err _) -> + ( { model | loot = LoadError "Le chargement a échoué" }, Cmd.none ) - GotChestMsg chestMsg -> - Chest.update chestMsg model.chest - |> updateChest model + GotChestMsg chestMsg -> + Chest.update chestMsg model.chest + |> Tuple.mapBoth + (\chest -> { model | chest = chest }) + (Cmd.map GotChestMsg) - _ -> - ( model, Cmd.none ) - ) - |> Tuple.mapSecond (Cmd.map Internal) - - -updateChest model ( chestModel, chestCmd ) = - ( { model | chest = chestModel } - , Cmd.map GotChestMsg chestCmd - ) + _ -> + ( model, Cmd.none ) diff --git a/src/Page/Shop.elm b/src/Page/Shop.elm index 6c9ca4d..bb40377 100644 --- a/src/Page/Shop.elm +++ b/src/Page/Shop.elm @@ -1,15 +1,13 @@ module Page.Shop exposing (Model, Msg(..), init, update, view) import Api exposing (HttpResult, Item, Loot) -import Dict exposing (Dict) +import Bulma as B import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import Page.Chest as Chest exposing (Chest) import Page.Chest.NewFromInventory as NewChest import Session exposing (Session, getSession) -import Set exposing (Set) -import Table type alias Model = @@ -29,21 +27,6 @@ init session = ( Model session Loading Chest.init, fetchShopItems ) -fetchShopItems = - Api.fetchLoot GotLoot Api.OfShop - |> Cmd.map Internal - - -btn : String -> msg -> Html msg -btn t msg = - button [ class "button", onClick msg ] [ text t ] - - -buttons : List (Html msg) -> Html msg -buttons bs = - div [ class "buttons" ] bs - - view : Model -> ( Html Msg, List (Html Msg) ) view model = case model.loot of @@ -58,27 +41,26 @@ view model = ) Loaded loot -> - let - controls = - Html.map Internal <| - case ( model.chest, Session.user model.session ) of - ( Chest.View _, Session.Admin _ ) -> - btn "Remplacer" (GotChestMsg Chest.new) + ( Html.map Internal <| + case ( model.chest, Session.user model.session ) of + ( Chest.View _, Session.Admin _ ) -> + B.btn (GotChestMsg Chest.new) { text = "Remplacer", icon = "fas fa-refresh", color = "is-primary" } - ( Chest.View _, Session.Player _ ) -> - btn "Acheter" (GotChestMsg Chest.buy) + ( Chest.View _, Session.Player _ ) -> + B.btn (GotChestMsg Chest.buy) { text = "Acheter", icon = "fas fa-coins", color = "is-primary" } - ( Chest.Buy _, Session.Player _ ) -> - buttons [ btn "Ok" ConfirmBuy, btn "Annuler" (GotChestMsg Chest.show) ] + ( Chest.Buy _, Session.Player _ ) -> + B.confirmButtons ConfirmBuy (GotChestMsg Chest.show) - ( Chest.New _, Session.Admin _ ) -> - buttons [ btn "Ok" ConfirmRefresh, btn "Annuler" (GotChestMsg Chest.show) ] + ( Chest.New _, Session.Admin _ ) -> + B.confirmButtons ConfirmRefresh (GotChestMsg Chest.show) - _ -> - text "" - in - ( controls - , [ Chest.view model.chest loot |> Html.map (Internal << GotChestMsg) ] + _ -> + text "" + , List.map + (Html.map Internal) + [ Chest.view model.chest loot |> Html.map GotChestMsg + ] ) @@ -180,3 +162,8 @@ update msg model = _ -> ( model, Cmd.none ) + + +fetchShopItems = + Api.fetchLoot GotLoot Api.OfShop + |> Cmd.map Internal