github/planning-poker
1
0
Fork 0
mirror of https://github.com/correl/planning-poker.git synced 2024-11-24 11:09:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

Consolidate common UI elements

Browse source
This commit is contained in:
Correl Roush 2020-05-03 01:03:24 -04:00
parent 66480b31aa
commit dc6afd40be
3 changed files with 68 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
assets/src/PlanningPokerEntry.elm
View file

@ -8,6 +8,7 @@ import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html exposing (Html)
import PlanningPokerUI as UI
type User
@ -67,49 +68,18 @@ layout model =
, placeholder = Just (Input.placeholder [] (text "Your name"))
}
, el [ centerX ] (text "then")
, let
ready =
not (String.isEmpty model.name)
( color, event ) =
if ready then
( blue, Just CreateRoom )
else
( lightGrey, Nothing )
in
Input.button
[ centerX
, padding 20
, Background.color color
, Font.color white
]
{ onPress = event
, UI.actionButton [ centerX ]
{ isActive = not (String.isEmpty model.name)
, onPress = CreateRoom
, label = text "Make a room!"
}
, el
[ centerX
, Background.color red
, Background.color UI.red
, padding 20
, Font.color white
, Font.color UI.white
, transparent (model.error == Nothing)
]
<|
text (Maybe.withDefault " " model.error)
]
blue =
rgb255 100 100 255
red =
rgb255 255 100 100
white =
rgb255 255 255 255
lightGrey =
rgb255 200 200 200

36
assets/src/PlanningPokerRoom.elm
View file

@ -9,6 +9,7 @@ import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html exposing (Html)
import PlanningPokerUI as UI
type alias Model =
@ -118,20 +119,20 @@ navBar model =
|> Maybe.withDefault ""
in
row
[ Background.color blue
[ Background.color UI.blue
, height (px 50)
, width fill
, padding 10
]
[ el
[ Font.alignLeft
, Font.color white
, Font.color UI.white
, width fill
]
(text model.name)
, el
[ Font.alignRight
, Font.color white
, Font.color UI.white
]
(text myName)
]
@ -151,10 +152,10 @@ cards selected =
, Border.rounded 10
, Background.color <|
if selected == Just value then
blue
UI.blue
else
white
UI.white
, Font.size 50
]
{ onPress = Just (Vote value)
@ -184,7 +185,7 @@ players playerList =
el
[ padding 10
, Font.alignRight
, Background.color lightGrey
, Background.color UI.lightGrey
]
(text <| Maybe.withDefault " " player.vote)
}
@ -194,24 +195,9 @@ players playerList =
moderatorTools : Element Msg
moderatorTools =
Input.button
[ centerX
, padding 20
, Background.color blue
, Font.color white
]
{ onPress = Just Reset
UI.actionButton
[ centerX ]
{ isActive = True
, onPress = Reset
, label = text "Reset"
}
blue =
rgb255 100 100 255
lightGrey =
rgb255 200 200 200
white =
rgb255 255 255 255

51
assets/src/PlanningPokerUI.elm Normal file
View file

@ -0,0 +1,51 @@
module PlanningPokerUI exposing (actionButton, blue, lightGrey, red, white)
import Element exposing (Element)
import Element.Background as Background
import Element.Font as Font
import Element.Input as Input
blue : Element.Color
blue =
Element.rgb255 100 100 255
lightGrey : Element.Color
lightGrey =
Element.rgb255 200 200 200
red : Element.Color
red =
Element.rgb255 255 100 100
white : Element.Color
white =
Element.rgb255 255 255 255
actionButton :
List (Element.Attribute msg)
-> { isActive : Bool, onPress : msg, label : Element msg }
-> Element msg
actionButton attrs { isActive, onPress, label } =
let
( color, maybeEvent ) =
if isActive then
( blue, Just onPress )
else
( lightGrey, Nothing )
in
Input.button
([ Element.padding 20
, Background.color color
, Font.color white
]
++ attrs
)
{ onPress = maybeEvent
, label = label
}