diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index 72f3fcb..1fc9b53 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -15,7 +15,7 @@ import Svg.Attributes import Url.Builder import Json.Decode as Decode import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, h3, table, td, tr, img, textarea, video, source, p) -import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src) +import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src, classList) import Html.Events exposing (onInput, onClick, preventDefaultOn) import Dict exposing (Dict) import Tuple @@ -110,8 +110,15 @@ roomListElementView : Model -> String -> JoinedRoom -> Html Msg roomListElementView m s jr = let name = roomDisplayName m jr + isCurrentRoom = case currentRoomId m of + Nothing -> False + Just cr -> cr == s in - div [ class "room-link-wrapper" ] + div [ classList + [ ("room-link-wrapper", True) + , ("active", isCurrentRoom) + ] + ] [ a [ href <| roomUrl s ] [ text name ] , roomNotificationCountView jr.unreadNotifications ] diff --git a/static/scss/style.scss b/static/scss/style.scss index 1b734d8..0a0508e 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -2,14 +2,11 @@ $primary-color: #53C0FA; $primary-color-highlight: #4298C7; $primary-color-light: #9FDBFB; - $background-color: #1b1e21; $background-color-light: lighten($background-color, 4%); $background-color-dark: darken($background-color, 4%); - $error-color: #f01d43; $error-color-dark: darken(#f01d43, 10%); - $inactive-input-color: lighten($background-color-light, 5%); $active-input-color: lighten($inactive-input-color, 5%); @@ -17,6 +14,8 @@ $transition-duration: .250s; $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25); +$border-radius: 3px; + html, body { height: 100vh; } @@ -31,7 +30,7 @@ body { @mixin input-common { padding: 5px; - border-radius: 3px; + border-radius: $border-radius; outline: none; font-family: inherit; @@ -163,9 +162,22 @@ div.room-link-wrapper { whitespace: nowrap; display: flex; padding: 0px; + border-left: solid 2px $background-color-light; + padding-left: 5px; + margin: 3px; + align-items: center; span, a { margin-right: 5px; + color: lightgrey; + } + + &:hover a { + color: $primary-color; + } + + &.active { + border-left: solid 2px $primary-color; } } @@ -176,7 +188,7 @@ div.reconnect-wrapper { display: flex; align-items: center; background-color: $inactive-input-color; - border-radius: 3px; + border-radius: $border-radius; .feather-icon { margin-right: 10px; @@ -290,13 +302,13 @@ div.message { box-sizing: border-box; padding: 10px; background-color: $background-color-dark; - border-radius: 3px; + border-radius: $border-radius; box-shadow: $inset-shadow; } } span.sender-wrapper { - border-radius: 3px; + border-radius: $border-radius; padding-left: 5px; padding-right: 5px; display: inline-block;