Fix #29: Allow clearing notifications. (#137)

public/style.css

@@ -4,6 +4,32 @@ body {
   overflow: hidden;
 }
 
+/* Alert messages */
+
+.error-list {
+  position: fixed;
+  top: 12px;
+  left: 25%;
+  right: 25%;
+  z-index: 999;
+}
+
+.error-list .alert {
+  margin: 0 0 4px 0;
+  padding: 8.5px 10px;
+  border-radius: 2px;
+  opacity: .95;
+  z-index: 9999;
+}
+
+.error-list .alert .close {
+  color: #fff;
+  opacity: .7;
+  outline: 0;
+}
+
+/* Columns */
+
 .column .panel {
   min-height: calc(100vh - 20px);
   max-height: calc(100vh - 20px);
@@ -21,6 +47,7 @@ body {
   overflow-y: scroll;
 }
 
+
 .notifications-panel .timeline {
   max-height: calc(100vh - 100px);
 }

src/Model.elm

@@ -2,6 +2,7 @@ module Model exposing (..)
 
 import Autocomplete
 import Command
+import List.Extra exposing (removeAt)
 import Navigation
 import Mastodon.Decoder
 import Mastodon.Helper
@@ -856,6 +857,9 @@ update msg model =
         NoOp ->
             model ! []
 
+        ClearError index ->
+            { model | errors = removeAt index model.errors } ! []
+
         MastodonEvent msg ->
             let
                 ( newModel, commands ) =

src/Types.elm

@@ -68,6 +68,7 @@ type WebSocketMsg
 
 type Msg
     = AddFavorite Int
+    | ClearError Int
     | CloseAccount
     | CloseThread
     | DeleteStatus Int

src/View/Error.elm

@@ -6,12 +6,21 @@ module View.Error
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 import Types exposing (..)
 
 
-errorView : String -> Html Msg
-errorView error =
-    div [ class "alert alert-danger" ] [ text error ]
+errorView : Int -> String -> Html Msg
+errorView index error =
+    div [ class "alert alert-danger" ]
+        [ button
+            [ type_ "button"
+            , class "close"
+            , onClick <| ClearError index
+            ]
+            [ text "×" ]
+        , text error
+        ]
 
 
 errorsListView : Model -> Html Msg
@@ -21,4 +30,4 @@ errorsListView model =
             text ""
 
         errors ->
-            div [] <| List.map errorView model.errors
+            div [ class "error-list" ] <| List.indexedMap errorView model.errors