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

Make small tweaks to room list.

This commit is contained in:
Danila Fedorin 2019-05-19 13:23:16 -07:00
parent 6e5702290a
commit 7be4e8d9e2
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Scylla/Views.elm
View File

@ -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
]

26
static/scss/style.scss
View File

@ -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;