From bb343edaf99aaff63f2d68fc2f8b706b1b2cd186 Mon Sep 17 00:00:00 2001 From: maxgerber Date: Sat, 10 Nov 2018 20:53:32 +0200 Subject: [PATCH] + Create Help Modal + Change Snapshot to Data Tool + Log Status of GetComments API Request in State Relates #134 --- public/assets/cross.svg | 14 ++ public/assets/help_arrow.svg | 16 ++ public/assets/help_icon_background.svg | 30 ++++ src/css/_custom.css | 35 +++- src/elm/Components/Button.elm | 1 + src/elm/Components/HelpModal.elm | 43 +++++ src/elm/Components/StyleHelpers.elm | 2 +- src/elm/Router.elm | 36 +++- src/elm/State.elm | 49 +++++- src/elm/Types.elm | 8 +- src/elm/Views/About.elm | 2 +- src/elm/Views/AddStats.elm | 2 +- src/elm/Views/ListComments.elm | 231 ------------------------- 13 files changed, 217 insertions(+), 252 deletions(-) create mode 100644 public/assets/cross.svg create mode 100644 public/assets/help_arrow.svg create mode 100644 public/assets/help_icon_background.svg create mode 100644 src/elm/Components/HelpModal.elm delete mode 100644 src/elm/Views/ListComments.elm diff --git a/public/assets/cross.svg b/public/assets/cross.svg new file mode 100644 index 0000000..6b93789 --- /dev/null +++ b/public/assets/cross.svg @@ -0,0 +1,14 @@ + + + + e-remove + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/public/assets/help_arrow.svg b/public/assets/help_arrow.svg new file mode 100644 index 0000000..c82fa7d --- /dev/null +++ b/public/assets/help_arrow.svg @@ -0,0 +1,16 @@ + + + + time + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/help_icon_background.svg b/public/assets/help_icon_background.svg new file mode 100644 index 0000000..5b5d359 --- /dev/null +++ b/public/assets/help_icon_background.svg @@ -0,0 +1,30 @@ + + + + Group + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/css/_custom.css b/src/css/_custom.css index 9f73e83..0c80b56 100644 --- a/src/css/_custom.css +++ b/src/css/_custom.css @@ -82,6 +82,38 @@ body { grid-auto-rows: max-content; } +.help-icon-above { + transform: translate(-50%, -4.9rem); + left: 50%; +} + +.w-11 { + width: 11rem; +} + +.w-1d5 { + width: 1.5rem; +} +.h-1d5 { + height: 1.5rem; +} + +.top-1d5 { + top: 1.5rem; +} + +.content-box { + box-sizing: content-box; +} + +.right-1d5 { + right: 1.5rem; +} + +.o-6-hover:hover { + opacity: 0.6; +} + /* Remove blue border highlight on inputs */ input:-webkit-autofill, @@ -93,8 +125,7 @@ input:-webkit-autofill:active { input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; + opacity: 1; } /* Modal Centering */ diff --git a/src/elm/Components/Button.elm b/src/elm/Components/Button.elm index de01736..b48b5e8 100644 --- a/src/elm/Components/Button.elm +++ b/src/elm/Components/Button.elm @@ -57,6 +57,7 @@ bigColouredButton validationPassed colour label clickMsg = "bg-gray disableButton o-30" , submitButtonStyle , topicButtonFont + , ifThenElse (clickMsg /= NoOp) "pointer" "" ] , onClick <| ifThenElse validationPassed clickMsg NoOp ] diff --git a/src/elm/Components/HelpModal.elm b/src/elm/Components/HelpModal.elm new file mode 100644 index 0000000..b62225f --- /dev/null +++ b/src/elm/Components/HelpModal.elm @@ -0,0 +1,43 @@ +module Components.HelpModal exposing (helpModal) + +import Components.StyleHelpers exposing (classes, displayElement) +import Html exposing (..) +import Html.Attributes exposing (..) +import Html.Events exposing (..) +import Types exposing (..) + + +helpModal : Model -> Html Msg +helpModal model = + section + [ classes + [ "modal fixed f3 ph5-ns ph4 pb3 pt4 bg-white br2 w-70-ns w-90 z-3 center tc content-box overflow-y-scroll overflow-y-visible-ns" + , displayElement model.displayHelpModal + ] + ] + [ img + [ src "assets/help_icon_background.svg" + , classes + [ "db-ns" + , "dn" + , "help-icon-above" + , "h4" + , "w4" + , "absolute" + , "z-3" + ] + , alt "Help" + ] + [] + , img [ src "assets/cross.svg", class "h1d5 w1d5 absolute right-1d5 top-1d5 pointer", onClick ToggleHelpModal ] [] + , section [ class "tl" ] + [ h1 [ classes [ "f2", "mb4", "mt3", "b" ] ] [ text "How do I use LCN's Data Tool?" ] + , section [ class "fw3 f3" ] + [ p [ class "mb3" ] [ text "Now you have logged in for the first time, you will go through a very short set-up." ] + , p [ class "mb3" ] [ text "This is so that when you drop by next time, you will only be asked questions relevant to what you do, and as few of them as possible." ] + , p [ class "mb3" ] [ text "The first part of the app asks how many cases you have worked on this week and what kinds. The point is not to need to go through your papers, just give your best estimate. These are just 3-4 simple questions that should take a minute to answer, anonymously." ] + , p [ class "mb3" ] [ text "When you are done logging this, you will also see a ‘dashboard’ with the wider picture across Law Centres at the moment. At this point you can leave it there or continue to the next part." ] + , p [ class "mb3" ] [ text "The second part lets you share more, this time using your name, about what you have seen during the week: what’s emerging? What has stood out? Others are sharing, too: you will be able to see what they have written, and comment on it\nHere you can also ask LCN to take up an issue you raise in its national policy work\nThe point is to help us all share what we see for maximum benefit – at minimum effort." ] + ] + ] + ] diff --git a/src/elm/Components/StyleHelpers.elm b/src/elm/Components/StyleHelpers.elm index 8bc8a36..3541c0b 100644 --- a/src/elm/Components/StyleHelpers.elm +++ b/src/elm/Components/StyleHelpers.elm @@ -46,7 +46,7 @@ inputFont = submitButtonStyle : String submitButtonStyle = - "pointer bn br2 pv3 ph3 w5 white" + "bn br2 pv3 ph3 w5 white" textareaFont : String diff --git a/src/elm/Router.elm b/src/elm/Router.elm index f24e75f..d484681 100644 --- a/src/elm/Router.elm +++ b/src/elm/Router.elm @@ -1,11 +1,14 @@ module Router exposing (getCurrentView, getHash, getView, modalBackground, view, viewFromUrl) import Components.CommentModal exposing (commentModal) +import Components.HelpModal exposing (helpModal) import Components.Nav exposing (navBar) import Components.StatsModal exposing (statsModal) -import Components.StyleHelpers exposing (classes, displayElement) +import Components.StyleHelpers exposing (classes, displayElement, emptySpan) +import Helpers exposing (ifThenElse) import Html exposing (..) import Html.Attributes exposing (..) +import Html.Events exposing (..) import Navigation exposing (..) import Types exposing (..) import Views.About exposing (..) @@ -27,7 +30,8 @@ view model = in div [ class "w-100 fixed overflow-y-scroll top-0 bottom-0 bg-light-blue m0-auto cover", id "container" ] [ modalBackground model - , helpButton + , ifThenElse (model.view == SplashScreen) emptySpan (helpButton model) + , helpModal model , statsModal model , commentModal model , div [ class "fixed w-100 bg-white flex flex-row justify-center z-1" ] [ navBar model activeLink ] @@ -35,9 +39,29 @@ view model = ] -helpButton : Html Msg -helpButton = - button [ class "bn shadow-4 br-100 h4 w4 fixed right-2 top-8 pointer", style [ ( "background", "url(./assets/help_icon.svg) no-repeat center center white" ) ] ] [] +helpButton : Model -> Html Msg +helpButton model = + div [ class "fixed right-2 top-8 flex flex-column items-end w-11" ] + [ div [ class "flex items-start justify-end w-100 mb1" ] + [ ifThenElse model.displayHelpInfo (img [ src "./assets/help_arrow.svg", class "mr2 mt3" ] []) emptySpan + , button + [ class "bn grow shadow-4 br-100 h3 w3 pointer" + , style [ ( "background", "url(./assets/help_icon.svg) no-repeat center center white" ) ] + , onClick ToggleHelpModal + ] + [] + ] + , ifThenElse model.displayHelpInfo + (div [ class "shadow-4 bg-white pa3 tc fw3 o-6-hover", onClick ToggleHelpInfo ] + [ text "You can always click here if you want to " + , span [ class "fw5" ] [ text "learn more" ] + , text " about Data Tool or need " + , span [ class "fw5" ] [ text "help" ] + , text " using the app!" + ] + ) + emptySpan + ] modalBackground : Model -> Html Msg @@ -45,7 +69,7 @@ modalBackground model = div [ classes [ "vh-100 w-100 bg-black o-70 z-2 fixed" - , displayElement (model.displayStatsModal || model.displayCommentModal) + , displayElement (model.displayStatsModal || model.displayCommentModal || model.displayHelpModal ) ] ] [] diff --git a/src/elm/State.elm b/src/elm/State.elm index 9b43827..99d939f 100644 --- a/src/elm/State.elm +++ b/src/elm/State.elm @@ -36,12 +36,15 @@ initModel = , commentBody = "" , commentType = Success , comments = [] - , commentStatus = NotAsked + , postCommentStatus = NotAsked , postStatsStatus = NotAsked , listStatsStatus = NotAsked + , listCommentsStatus = NotAsked , peopleSeenWeeklyAll = 0 , displayStatsModal = False , displayCommentModal = False + , displayHelpModal = False + , displayHelpInfo = False , problems = [] , agencies = [] , postUserDetailsStatus = NotAsked @@ -71,8 +74,12 @@ update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of UrlChange location -> + let + view = + getView location.hash + in { model - | view = getView location.hash + | view = view , displayStatsModal = False , displayCommentModal = False , peopleSeenWeekly = Nothing @@ -80,8 +87,10 @@ update msg model = , newCasesWeekly = Nothing , signpostedInternallyWeekly = Nothing , signpostedExternallyWeekly = Nothing + , displayHelpModal = False + , displayHelpInfo = view == BeforeYouBegin } - ! [ scrollToTop, handleGetComments location ] + ! [ scrollToTop, ifThenElse (view == ListComments) (msgToCmd GetComments) Cmd.none ] ChangeView view -> { model @@ -95,9 +104,15 @@ update msg model = } ! [ newUrl <| getHash view ] + ToggleHelpModal -> + { model | displayHelpModal = not model.displayHelpModal } ! [] + NoOp -> model ! [] + ToggleHelpInfo -> + { model | displayHelpInfo = not model.displayHelpInfo } ! [] + UpdateLawArea la -> let updatedModel = @@ -181,7 +196,7 @@ update msg model = updatedModel ! [] PostComment -> - { model | commentStatus = Loading } ! [ postComment model ] + { model | postCommentStatus = Loading } ! [ postComment model ] PostStats -> { model | postStatsStatus = Loading, listStatsStatus = Loading } ! [ postStats model ] @@ -195,14 +210,14 @@ update msg model = ifThenElse (model.view == AddComment) True False in { model - | commentStatus = ResponseSuccess + | postCommentStatus = ResponseSuccess , displayCommentModal = displayModal , commentBody = "" } ! [ getComments, scrollToTop ] ReceiveCommentStatus (Err err) -> - { model | commentStatus = ResponseFailure } ! [ getComments, scrollToTop ] + { model | postCommentStatus = ResponseFailure } ! [ getComments, scrollToTop ] ReceiveStats (Ok response) -> if response.getSuccess then @@ -233,11 +248,21 @@ update msg model = ToggleStatsModal -> { model | displayStatsModal = False } ! [] - ReceiveComments (Ok comments) -> - { model | comments = comments } ! [] + GetComments -> + { model | listCommentsStatus = Loading } ! [ getComments ] ReceiveComments (Err err) -> - model ! [] + { model + | listCommentsStatus = ResponseFailure + } + ! [] + + ReceiveComments (Ok comments) -> + { model + | comments = comments + , listCommentsStatus = ResponseSuccess + } + ! [] ToggleProblem string checked -> let @@ -340,6 +365,12 @@ delay time msg = |> perform (\_ -> msg) +msgToCmd : Msg -> Cmd Msg +msgToCmd msg = + Task.succeed msg + |> Task.perform identity + + updateCommentLikes : UpvoteResponse -> Comment -> Comment updateCommentLikes upvote comment = { comment diff --git a/src/elm/Types.elm b/src/elm/Types.elm index 15dcf1b..9a0b6ef 100644 --- a/src/elm/Types.elm +++ b/src/elm/Types.elm @@ -50,17 +50,20 @@ type alias Model = , commentBody : String , commentType : CommentType , comments : List Comment - , commentStatus : RemoteData + , postCommentStatus : RemoteData , postStatsStatus : RemoteData , postUpvoteStatus : RemoteData , getUserDetailsStatus : RemoteData , postUserDetailsStatus : RemoteData , listStatsStatus : RemoteData + , listCommentsStatus : RemoteData , peopleSeenWeeklyAll : Int , displayStatsModal : Bool , displayCommentModal : Bool , problems : List String , agencies : List String + , displayHelpModal : Bool + , displayHelpInfo : Bool } @@ -224,3 +227,6 @@ type Msg | UpdateMediaCoverageWeekly String | UpvoteComment Comment | ChangeView View + | ToggleHelpInfo + | ToggleHelpModal + | GetComments diff --git a/src/elm/Views/About.elm b/src/elm/Views/About.elm index 597684a..aeed5aa 100644 --- a/src/elm/Views/About.elm +++ b/src/elm/Views/About.elm @@ -20,7 +20,7 @@ about model = , section [ class "mb5 f3" ] [ p [ classes [ "tl mb3" ] ] - [ text "Snapshot is the Law Centre Network app for capturing the kinds of cases we see, and the amount of work we do on them, and pooling them to give an overall picture." ] + [ text "Data Tool is the Law Centre Network app for capturing the kinds of cases we see, and the amount of work we do on them, and pooling them to give an overall picture." ] , p [ classes [ "tl mb3" ] ] [ text "This will also help Law Centres talk about what we do in a more impactful way: giving an idea of the problems we see and how common they are, all on a current basis." ] diff --git a/src/elm/Views/AddStats.elm b/src/elm/Views/AddStats.elm index 71c12e7..514d564 100644 --- a/src/elm/Views/AddStats.elm +++ b/src/elm/Views/AddStats.elm @@ -103,7 +103,7 @@ validate model = introText : List (Html Msg) introText = - [ text "Please ", span [ class "fw5" ] [ text "tell us a little about your week " ], text "since the last time you checked in." ] + [ text "Please ", span [ class "fw5" ] [ text "tell us a little about your week " ], text "since the last time you checked in. You can ", span [ class "fw5" ] [ text "type"], text ", ", span [ class "fw5" ] [text "use the spinner buttons" ], text ", or ", span [ class "fw5"] [ text " use the arrows on your keyboard " ], text "to provide your answer." ] problemCheckboxesList : Model -> List (Html Msg) diff --git a/src/elm/Views/ListComments.elm b/src/elm/Views/ListComments.elm deleted file mode 100644 index c5c5322..0000000 --- a/src/elm/Views/ListComments.elm +++ /dev/null @@ -1,231 +0,0 @@ -module Views.ListComments exposing (addCommentButton, commentActions, commentsHeader, commentsHeaderContent, likeText, listCommentsView, parentComment, replyComponent, showParentComment, singleComment, summary, summaryText) - -import Components.ChooseTopic exposing (chooseTopic) -import Components.StyleHelpers exposing (bodyFont, buttonStyle, classes, displayElement, emptySpan, headlineFont, textareaFont, topicButtonFont) -import Data.Comment exposing (defaultComment, getCommentByCommentId, hasParentId) -import Data.CommentType exposing (commentTypeColor, commentTypeColorLight, commentTypes) -import Helpers exposing (ifThenElse, unionTypeToString) -import Html exposing (..) -import Html.Attributes exposing (..) -import Html.Events exposing (..) -import Types exposing (..) - - -listCommentsView : Model -> Html Msg -listCommentsView model = - div [ class "flex flex-column items-center w-80-ns w-90 center" ] - [ div [] - [ div [ class "mv4" ] summary - , div [ class "mv4" ] <| chooseTopic model - , div [] (commentsHeader model) - , div [] - (addCommentButton model - :: (List.map (singleComment model) <| - List.sortBy (.createdAt >> negate) <| - List.filter (\comment -> comment.commentType == model.commentType) model.comments - ) - ) - ] - ] - - -summary : List (Html Msg) -summary = - [ h1 [ classes [ headlineFont ] ] [ text "Check out what others have said" ] - , p [ classes [ bodyFont, "mt2" ] ] summaryText - ] - - -summaryText : List (Html Msg) -summaryText = - [ text "Here are the issues that Law Centres are seeing now, as " - , span [ class "fw5" ] [ text "shared by you" ] - , text ". They are grouped by categories and the latest appear first. Feel free to " - , span [ class "fw5" ] [ text "reply to colleagues " ] - , text "or simply " - , span [ class "fw5" ] [ text "\"like\" " ] - , text "their posts if they ring true. LCN " - , span [ class "fw5" ] [ text "responds to questions & requests " ] - , text " under the " - , span [ class "fw5" ] [ text "\"Ask Us\" " ] - , text "heading." - ] - - -addCommentButton : Model -> Html Msg -addCommentButton model = - a [ classes [ "dib link center flex flex-column items-center justify-center bg-near-white pointer br3 pv3 ma4 w-100" ], href "#add-comment" ] - [ img [ src <| "./assets/add_" ++ commentTypeColor model.commentType ++ ".svg", classes [ "mb3", "h3 w3" ] ] [] - , div [] - [ span [ class "fw3 f3 black" ] [ text "Add your own " ] - , span [ classes [ "fw7 f3", commentTypeColor model.commentType ] ] [ text <| String.toLower <| unionTypeToString model.commentType ] - ] - ] - - -commentsHeader : Model -> List (Html Msg) -commentsHeader model = - [ h1 [ classes [ headlineFont, "" ] ] (commentsHeaderContent model) ] - - -commentsHeaderContent : Model -> List (Html Msg) -commentsHeaderContent model = - case model.commentType of - Success -> - [ text "See what others have said about their " - , span [ classes [ commentTypeColor Success, "b" ] ] [ text "successes" ] - ] - - Annoyance -> - [ text "Check out others' " - , span [ classes [ commentTypeColor Annoyance, "b" ] ] [ text "annoyances" ] - ] - - Trend -> - [ text "See what " - , span [ classes [ commentTypeColor Trend, "b" ] ] [ text "trends " ] - , text "others have spotted" - ] - - AskUs -> - [ text "Have a look through " - , span [ classes [ commentTypeColor AskUs, "b" ] ] [ text "questions " ] - , text "others have asked" - ] - - NoType -> - [] - - -singleComment : Model -> Comment -> Html Msg -singleComment model comment = - let - parentComment = - getCommentByCommentId model (Maybe.withDefault "" comment.parentId) - in - div [ classes [ "center flex flex-column content-center bg-white br3 ph4 pt3 pb0 ma4" ] ] - [ showParentComment model comment - , div - [ classes - [ "mb3" - , commentTypeColor model.commentType - ] - ] - [ h1 [ classes [ "fw5", "f3", "b", "di" ] ] [ text <| ifThenElse (comment.name /= "") comment.name "Anonymous" ] - , span [] [ text " - " ] - , h1 [ classes [ "di", "fw3", "f3" ] ] [ text <| ifThenElse (comment.lawCentre /= NoCentre) (unionTypeToString comment.lawCentre ++ " Law Centre") "Law Centres Network" ] - , ifThenElse (hasParentId comment) - emptySpan - (h2 [ class "di fw3 f3 i" ] [ text <| " - In reply to " ++ ifThenElse (parentComment.name /= "") parentComment.name "anonymous" ]) - ] - , p [ classes [ "f4 lh-copy fw3", "mb3" ] ] [ text comment.commentBody ] - , ifThenElse comment.showReplyInput (replyComponent comment) (commentActions model comment) - ] - - -parentComment : Model -> Comment -> Html Msg -parentComment model comment = - div - [ classes - [ "center flex flex-column content-center br3 pl3 pr4 pv3 mh4 mv3 w-100 bl bw3 overflow-scroll maxh5" - , List.map (flip (++) (commentTypeColorLight model.commentType)) [ "bg-light-", "b--" ] |> List.intersperse " " |> List.foldr (++) "" - ] - ] - [ div - [ classes - [ "mb3 lh-copy" - , commentTypeColor model.commentType - ] - ] - [ h1 [ classes [ "fw5", "f3", "di" ] ] [ text <| ifThenElse (comment.name /= "") comment.name "Anonymous" ] - , span [] [ text " - " ] - , h2 [ class "di fw3 f3" ] [ text <| unionTypeToString comment.lawCentre ++ " Law Centre" ] - ] - , p [ classes [ "f5 lh-copy fw3", "mb3" ] ] [ text comment.commentBody ] - ] - - -commentActions : Model -> Comment -> Html Msg -commentActions model comment = - let - showReply = - ifThenElse (model.commentType == AskUs && model.isAdmin == False) - False - True - in - div [ classes [ "flex", "content-center", "items-center", "h2", "mb3" ] ] - [ button - [ classes - [ "pointer bn ph4 white f4 br2 mr3" - , displayElement <| hasParentId comment && showReply - , "bg-" ++ commentTypeColor comment.commentType - ] - , onClick <| ToggleReplyComponent comment - ] - [ text "reply" ] - , img [ src <| "./assets/like-" ++ commentTypeColor comment.commentType ++ ".svg", classes [ "w2", "v-mid", "ml3", "h2", "w-15", ifThenElse comment.likedByUser "disableButton" "pointer" ], onClick <| UpvoteComment comment ] [] - , span [ classes [ commentTypeColor comment.commentType, "f4", "ml2 fw3", "dn", "di-ns" ] ] [ text <| likeText comment ] - , span [ classes [ commentTypeColor comment.commentType, "f4", "ml2", "fw3", "dn-ns" ] ] [ text <| toString comment.likes ] - ] - - -likeText : Comment -> String -likeText comment = - case comment.likes of - 0 -> - "Be the first person to like this" - - 1 -> - case comment.likedByUser of - True -> - "You like this" - - False -> - "1 person likes this" - - _ -> - case comment.likedByUser of - True -> - "You and " ++ toString (comment.likes - 1) ++ " other people like this" - - False -> - toString comment.likes ++ " people like this" - - -replyComponent : Comment -> Html Msg -replyComponent parentComment = - div [ classes [ "flex", "items-center", "bt", "bw1", "b--light-gray" ] ] - [ img - [ classes [ "w2", "h2" ] - , src <| "./assets/comment-" ++ commentTypeColor parentComment.commentType ++ ".svg" - ] - [] - , textarea - [ classes [ "bn mv3 pa3", "w-100", textareaFont ] - , rows 1 - , placeholder "Write your comment here" - , onInput UpdateCommentBody - ] - [] - , img - [ classes [ "h2", "w2", "pointer", "dn-ns" ] - , src <| "./assets/send-" ++ commentTypeColor parentComment.commentType ++ ".svg" - , onClick <| PostReply parentComment - ] - [] - , button - [ classes [ "bg-" ++ commentTypeColor parentComment.commentType, "dn-s", "white", "bn br2 pv2 ph3 f5" ] - , onClick <| PostReply parentComment - ] - [ text "Send" ] - ] - - -showParentComment : Model -> Comment -> Html Msg -showParentComment model comment = - case comment.parentId of - Just commentId -> - parentComment model (getCommentByCommentId model commentId) - - Nothing -> - emptySpan