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

Make small tweaks to room list.

Browse Source
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 Url.Builder
import Json.Decode as Decode 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 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 Html.Events exposing (onInput, onClick, preventDefaultOn)
import Dict exposing (Dict) import Dict exposing (Dict)
import Tuple import Tuple
@ -110,8 +110,15 @@ roomListElementView : Model -> String -> JoinedRoom -> Html Msg
roomListElementView m s jr = roomListElementView m s jr =
let let
name = roomDisplayName m jr name = roomDisplayName m jr
isCurrentRoom = case currentRoomId m of
Nothing -> False
Just cr -> cr == s
in in
div [ class "room-link-wrapper" ] div [ classList
[ ("room-link-wrapper", True)
, ("active", isCurrentRoom)
]
]
[ a [ href <| roomUrl s ] [ text name ] [ a [ href <| roomUrl s ] [ text name ]
, roomNotificationCountView jr.unreadNotifications , roomNotificationCountView jr.unreadNotifications
] ]

26
static/scss/style.scss
View File

@ -2,14 +2,11 @@
$primary-color: #53C0FA; $primary-color: #53C0FA;
$primary-color-highlight: #4298C7; $primary-color-highlight: #4298C7;
$primary-color-light: #9FDBFB; $primary-color-light: #9FDBFB;
$background-color: #1b1e21; $background-color: #1b1e21;
$background-color-light: lighten($background-color, 4%); $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%);
$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%);
@ -17,6 +14,8 @@ $transition-duration: .250s;
$inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25); $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
$border-radius: 3px;
html, body { html, body {
height: 100vh; height: 100vh;
} }
@ -31,7 +30,7 @@ body {
@mixin input-common { @mixin input-common {
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: $border-radius;
outline: none; outline: none;
font-family: inherit; font-family: inherit;
@ -163,9 +162,22 @@ div.room-link-wrapper {
whitespace: nowrap; whitespace: nowrap;
display: flex; display: flex;
padding: 0px; padding: 0px;
border-left: solid 2px $background-color-light;
padding-left: 5px;
margin: 3px;
align-items: center;
span, a { span, a {
margin-right: 5px; 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; display: flex;
align-items: center; align-items: center;
background-color: $inactive-input-color; background-color: $inactive-input-color;
border-radius: 3px; border-radius: $border-radius;
.feather-icon { .feather-icon {
margin-right: 10px; margin-right: 10px;
@ -290,13 +302,13 @@ div.message {
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
background-color: $background-color-dark; background-color: $background-color-dark;
border-radius: 3px; border-radius: $border-radius;
box-shadow: $inset-shadow; box-shadow: $inset-shadow;
} }
} }
span.sender-wrapper { span.sender-wrapper {
border-radius: 3px; border-radius: $border-radius;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
display: inline-block; display: inline-block;