Matrix-Programs/Scylla
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

Change alert indicator to work better.

Browse Source
This commit is contained in:
Danila Fedorin 2019-05-19 15:01:02 -07:00
parent 151ff413c7
commit 150af81847
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Scylla/Views.elm
View File

@ -128,23 +128,24 @@ roomListElementView m s jr =
, ("hidden", not isVisible) , ("hidden", not isVisible)
] ]
] ]
[ a [ href <| roomUrl s ] [ text name ] <| roomNotificationCountView jr.unreadNotifications ++
, roomNotificationCountView jr.unreadNotifications [ a [ href <| roomUrl s ] [ text name ] ]
]
roomNotificationCountView : Maybe UnreadNotificationCounts -> Html Msg roomNotificationCountView : Maybe UnreadNotificationCounts -> List (Html Msg)
roomNotificationCountView ns = roomNotificationCountView ns =
let let
spanNumber = case Maybe.andThen .notificationCount ns of wrap b = span
Nothing -> "" [ classList
Just 0 -> "" [ ("notification-count", True)
Just i -> String.fromInt i , ("bright", b)
spanSuffix = case Maybe.andThen .highlightCount ns of ]
Nothing -> "" ]
Just 0 -> "" getCount f = Maybe.withDefault 0 << Maybe.andThen f
Just i -> "!"
in in
span [ class "notification-count" ] [ text (spanNumber ++ spanSuffix) ] case (getCount .notificationCount ns, getCount .highlightCount ns) of
(0, 0) -> []
(i, 0) -> [ wrap False [ iconView "bell", text <| String.fromInt i ] ]
(i, j) -> [ wrap True [ iconView "alert-circle", text <| String.fromInt i ] ]
loginView : Model -> Html Msg loginView : Model -> Html Msg
loginView m = div [ class "login-wrapper" ] loginView m = div [ class "login-wrapper" ]

18
static/scss/style.scss
View File

@ -7,6 +7,8 @@ $background-color-light: lighten($background-color, 4%);
$background-color-dark: darken($background-color, 4%); $background-color-dark: darken($background-color, 4%);
$error-color: #f01d43; $error-color: #f01d43;
$error-color-dark: darken(#f01d43, 10%); $error-color-dark: darken(#f01d43, 10%);
$alert-color: #18f49c;
$alert-color-bright: rgb(240, 244, 24);
$inactive-input-color: lighten($background-color-light, 5%); $inactive-input-color: lighten($background-color-light, 5%);
$active-input-color: lighten($inactive-input-color, 5%); $active-input-color: lighten($inactive-input-color, 5%);
@ -175,8 +177,22 @@ div.room-link-wrapper {
margin: 3px; margin: 3px;
align-items: center; align-items: center;
span, a { .feather-icon {
margin-right: 3px;
}
span {
color: $alert-color;
display: flex;
align-items: center;
margin-right: 5px; margin-right: 5px;
&.bright {
color: $alert-color-bright;
}
}
a {
color: lightgrey; color: lightgrey;
} }