diff --git a/src/Main.elm b/src/Main.elm index dbc447f..aceb903 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -93,6 +93,10 @@ update msg model = case msg of SendImageResponse _ -> (model, Cmd.none) SendFileResponse _ -> (model, Cmd.none) ReceiveMarkdown md -> updateMarkdown model md + DismissError i -> updateDismissError model i + +updateDismissError : Model -> Int -> (Model, Cmd Msg) +updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none) updateMarkdown : Model -> MarkdownResponse -> (Model, Cmd Msg) updateMarkdown m { roomId, text, markdown } = diff --git a/src/Scylla/Model.elm b/src/Scylla/Model.elm index 459a956..6fb8a6b 100644 --- a/src/Scylla/Model.elm +++ b/src/Scylla/Model.elm @@ -63,6 +63,7 @@ type Msg = | SendImageResponse (Result Http.Error ()) | SendFileResponse (Result Http.Error ()) | ReceiveMarkdown MarkdownResponse + | DismissError Int displayName : Model -> Username -> String displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index c0e7db8..0e62ec7 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -50,10 +50,10 @@ viewFull model = [ errorList ] ++ [ core ] errorsView : List String -> Html Msg -errorsView = div [] << List.map errorView +errorsView = div [ class "errors-wrapper" ] << List.indexedMap errorView -errorView : String -> Html Msg -errorView s = div [] [ text s ] +errorView : Int -> String -> Html Msg +errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconView "alert-triangle", text s ] baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg baseView m jr = diff --git a/static/scss/style.scss b/static/scss/style.scss index 6158dc3..471ce39 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -5,6 +5,8 @@ $primary-color-light: #9FDBFB; $active-input-color: white; $background-color: #fafafa; $background-color-dark: darken($background-color, 4%); +$error-color: #f01d43; +$error-color-dark: darken(#f01d43, 10%); $transition-duration: .125s; $inactive-input-color: darken($active-input-color, 3%); @@ -70,6 +72,37 @@ h2 { margin-bottom: 3px; } +div.errors-wrapper { + position: fixed; + pointer-events: none; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + + overflow: hidden; +} + +div.error-wrapper { + pointer-events: auto; + width: 400px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, .25); + padding: 5px; + background-color: $error-color; + border: 1px solid $error-color-dark; + color: white; + margin: auto; + margin-top: 10px; + margin-bottom: 10px; + font-size: 14px; + display: flex; + align-items: center; + + .feather-icon { + margin-right: 10px; + } +} + /* * Login Screen */