From e19bba7e3aafa32ffa9f8570609700343430be06 Mon Sep 17 00:00:00 2001 From: Artus Date: Mon, 11 Nov 2019 23:57:13 +0100 Subject: [PATCH] works on design, completes AddLoot form --- src/Page/Chest.elm | 222 ++++++++++++++++++++++++++++----------------- src/Utils.elm | 2 +- 2 files changed, 140 insertions(+), 84 deletions(-) diff --git a/src/Page/Chest.elm b/src/Page/Chest.elm index 67700fc..f2dda91 100644 --- a/src/Page/Chest.elm +++ b/src/Page/Chest.elm @@ -133,11 +133,11 @@ debugSandbox = viewHeaderBar : String -> Model -> Html Msg viewHeaderBar title model = - nav [ class "navbar container", class "is-info" ] + nav [ class "navbar", class "is-transparent" ] [ div [ class "navbar-brand" ] [ a [ class "navbar-item", href "/" ] [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" } - , span [] [ text title ] + , span [ class "title is-4" ] [ text title ] ] , a [ class "navbar-burger is-active" ] [ span [ attribute "aria-hidden" "true" ] [] @@ -183,26 +183,33 @@ viewHeaderBar title model = viewPlayerBar : Api.Player -> List (Html Msg) -> Html Msg viewPlayerBar player actionControls = - section [ class "level container is-mobile box" ] - [ div [ class "level-left" ] - ([ div [ class "level-item" ] - [ span [ class "icon is-large" ] - [ i [ class "fas fa-2x fa-piggy-bank" ] [] ] - ] - ] - ++ viewWealth player.wealth - ++ (if player.debt > 0 then - [ div [ class "level-item" ] - [ p [ class "heading is-size-4 has-text-danger" ] - [ text ("Dette : " ++ String.fromInt player.debt ++ "po") ] - ] + section [ class "hero is-dark is-bold" ] + [ div [ class "hero-body" ] + [ div [ class "level container is-mobile" ] + [ div [ class "level-left" ] + ([ div [ class "level-item" ] + [ p [ class "title is-3" ] [ text player.name ] ] + , div [ class "level-item" ] + [ span [ class "icon is-large" ] + [ i [ class "fas fa-2x fa-piggy-bank" ] [] ] ] + ] + ++ viewWealth player.wealth + ++ [ span [ class "icon has-text-danger" ] [ i [ class "fas fa-tools" ] [] ] ] + ++ (if player.debt > 0 then + [ div [ class "level-item" ] + [ p [ class "heading is-size-4 has-text-danger" ] + [ text ("Dette : " ++ String.fromInt player.debt ++ "po") ] + ] + ] - else - [] - ) - ) - , div [ class "level-right" ] actionControls + else + [] + ) + ) + , div [ class "level-right" ] actionControls + ] + ] ] @@ -219,7 +226,7 @@ showWealthField : String -> String -> Html Msg showWealthField name value = div [ class "level-item" ] [ p [ class "has-text-right" ] - [ strong [ class "heading is-marginless" ] [ text name ] + [ strong [ class "heading is-marginless has-text-white" ] [ text name ] , span [ class <| "is-size-4" ] [ text value ] ] ] @@ -281,46 +288,47 @@ view model = , main_ [ class "container" ] [ viewNotification model.state.notification + -- TODO: viewAddLoot when in Add mode , case model.state.mode of - Add -> - viewAddLoot model - - _ -> - text "" + Add -> + viewAddLoot model + _ -> + text "" , viewLoot header model.searchText rowRenderer canSelect isSelected <| shownItems model ] , hr [] [] , section [ class "container" ] [ viewDebugSection model ] ] + + {- -module ActionMode + module ActionMode -type Model - = Add - | Sell - | ... + type Model + = Add + | Sell + | ... -rowRenderer mode = - ... + rowRenderer mode = + ... -controlButtons mode = - ... + controlButtons mode = + ... -cancelAction toMsg mode = - ... + cancelAction toMsg mode = + ... -confirmAction toMsg items mode = - ... + confirmAction toMsg items mode = + ... -} - -- VIEW LOOT @@ -329,7 +337,7 @@ viewLoot header searchText maybeRowRenderer canSelect isSelected items = let filteredItems = List.filter - (\i -> String.toLower i.name |> String.contains (String.toLower searchText) ) + (\i -> String.toLower i.name |> String.contains (String.toLower searchText)) items in article @@ -354,9 +362,12 @@ viewSearchBar : String -> Html Msg viewSearchBar textValue = div [ class "field" ] [ p [ class "control has-icons-left" ] - [ input [ class "input" - , onInput SearchTextChanged - , value textValue ] [] + [ input + [ class "input" + , onInput SearchTextChanged + , value textValue + ] + [] , span [ class "icon is-left" ] [ i [ class "fas fa-search" ] [] ] ] ] @@ -433,58 +444,101 @@ viewItemTableRow isSelected canSelect rowRenderer item = ] ] + + -- Adding new loot -- + + viewAddLoot : Model -> Html Msg viewAddLoot model = let - showCompletionTips = True - newItem = Item 0 "New one #1" 2000 + showCompletionTips = + False + + newItem = + Item 0 "New one #1" 2000 + + itemIsValid = + False in - div [ class "box is-primary container" ] + div [ class "box is-primary" ] [ div [ class "field is-horizontal" ] - [ div [ class "field-label" ] - [ label [ class "label" ] [ text "Nouvel objet" ]] - , div [ class "field-body" ] - [ div [ class "field" ] - [ div [ class "control is-expanded" ] - [ input [ class "input", type_ "text" ] [] ] - , div [ class "dropdown" - , classList [("is-active", showCompletionTips)] ] - [ div [ class "dropdown-menu" ] - [ div [ class "dropdown-content" ] - [ a [ class "dropdown-item" ] [ text "item" ] ] - ] - ] + [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Source du loot" ] ] + , div [ class "field-body" ] + [ div [ class "field" ] + [ div [ class "control is-expanded" ] + [ input + [ class "input" + , type_ "text" + ] + [] ] - , div [ class "field is-expanded has-addons" ] - [ p [ class "control" ] [ a [class "button is-static"] [ text "PO" ] ] - , p [ class "control" ] - [ input [ type_ "text" - , class "input" - , classList [ ("is-danger", True) ]] - [] + , p [ class "help" ] [ text "Personnage, lieu ou événement d'où provient ce loot." ] + ] + ] + ] + , hr [] [] + , div [ class "field is-horizontal" ] + [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Nouvel objet" ] ] + , div [ class "field-body" ] + [ div [ class "field" ] + [ div [ class "control" ] + [ input + [ class "input" + , type_ "text" + , value newItem.name + ] + [] + ] + , div + [ class "dropdown" + , classList [ ( "is-active", showCompletionTips ) ] + ] + [ div [ class "dropdown-menu" ] + [ div [ class "dropdown-content" ] + [ a [ class "dropdown-item" ] [ text "item" ] ] ] ] - , div [ class "field" ] - [ div [ class "control" ] - [ button [ class "button is-primary" - , disabled True - , onClick <| NewItemAdded newItem ] - [ text "Ajouter au coffre" ] ] - ] - ] - ] - , div [ class "field is-horizontal" ] - [ div [ class "field-label" ] [ label [ class "label" ] [ text "ou" ] ] - , div [ class "field-body" ] - [ div [ class "control" ] - [ button [ class "button" ] [ text "Depuis une liste" ] ] ] - ] + , div [ class "field is-narrow" ] + [ div [ class "field has-addons" ] + [ p [ class "control" ] [ a [ class "button is-static" ] [ text "PO" ] ] + , p [ class "control" ] + [ input + [ type_ "number" + , class "input" + , value <| String.fromInt newItem.base_price + , classList [ ( "is-danger", True ) ] + ] + [] + ] + ] + , p [ class "help has-text-danger" ] [ text "Vous devez renseigner le prix !" ] + ] + , div [ class "field is-narrow" ] + [ div [ class "control" ] + [ button + [ class "button is-primary" + , disabled <| not itemIsValid + , onClick <| NewItemAdded newItem + ] + [ text "Ajouter au coffre" ] + ] + ] + ] + ] + , div [ class "field is-horizontal" ] + [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "ou" ] ] + , div [ class "field-body" ] + [ div [ class "control" ] + [ button [ class "button" ] [ text "Depuis une liste" ] ] + ] + ] ] + -- ACTION MODES -- @@ -555,9 +609,11 @@ update msg model = case msg of NewItemAdded item -> let - state = model.state + state = + model.state in ( { model | state = { state | newLoot = item :: state.newLoot } }, Cmd.none ) + ApiMsg apiMsg -> case apiMsg of Api.GotActionResult response -> diff --git a/src/Utils.elm b/src/Utils.elm index dcb9b66..b779170 100644 --- a/src/Utils.elm +++ b/src/Utils.elm @@ -11,7 +11,7 @@ renderIcon params = actionButton msg t icon color = button - [ class <| "button level-item is-" ++ color + [ class <| "button is-medium level-item is-" ++ color , onClick msg ] [ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ]