From 8f43d00d06df838724b3a974cb8877b764f575a3 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sun, 13 Oct 2024 18:43:01 +0300 Subject: [PATCH] web/roomlist: make background color prettier --- web/src/ui/RoomView.css | 3 +- web/src/ui/roomlist/RoomList.css | 99 +++++++++++++++++--------------- web/src/ui/roomlist/RoomList.tsx | 19 ++++-- 3 files changed, 67 insertions(+), 54 deletions(-) diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css index fd10288..f6262ea 100644 --- a/web/src/ui/RoomView.css +++ b/web/src/ui/RoomView.css @@ -2,7 +2,6 @@ div.room-view { overflow: hidden; height: 100%; display: grid; - border-left: 2px solid #ccc; grid-template: "header" 3rem "messageview" 1fr @@ -14,7 +13,7 @@ div.room-view { align-items: center; gap: .5rem; padding-left: 1rem; - border-bottom: 2px solid #ccc; + border-bottom: 1px solid #ccc; > span.room-name { font-weight: bold; diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css index 6ca52b9..8cb768c 100644 --- a/web/src/ui/roomlist/RoomList.css +++ b/web/src/ui/roomlist/RoomList.css @@ -1,60 +1,67 @@ -div.room-list { +div.room-list-wrapper { grid-area: roomlist; + background: linear-gradient(in hsl longer hue, red 0 0, magenta); + box-sizing: border-box; overflow-y: auto; +} - div.room-entry { +div.room-list { + background-color: hsla(0, 0%, 96%, .9); + min-height: 100vh; +} + +div.room-entry { + width: 100%; + display: flex; + gap: 4px; + /*border-radius: 4px;*/ + user-select: none; + cursor: pointer; + + &:hover { + background-color: rgba(5, 38, 87, 0.1); + } + + &.active { + background-color: rgba(5, 38, 87, 0.15); + } + + > div.room-entry-left { + height: 3rem; + width: 3rem; + + > img.room-avatar { + padding: 4px; + } + } + + > div.room-entry-right { width: 100%; display: flex; - gap: 4px; - /*border-radius: 4px;*/ - user-select: none; - cursor: pointer; + flex-direction: column; + overflow: hidden; + justify-content: space-around; - &:hover { - background-color: #EEE; - } - - &.active { - background-color: #DDD; - } - - > div.room-entry-left { - height: 3rem; - width: 3rem; - - > img.room-avatar { - padding: 4px; - } - } - - > div.room-entry-right { - width: 100%; - display: flex; - flex-direction: column; + > div.room-name { + font-weight: bold; overflow: hidden; - justify-content: space-around; + white-space: nowrap; + text-overflow: ellipsis; + } - > div.room-name { - font-weight: bold; + > div.message-preview { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + > span.sender-name { + display: block; + max-width: 6rem; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - > div.message-preview { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - > span.sender-name { - display: block; - max-width: 6rem; - overflow: hidden; - } - - > span.preview-text { - display: block; - } + > span.preview-text { + display: block; } } } diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx index 8d5080b..fa03624 100644 --- a/web/src/ui/roomlist/RoomList.tsx +++ b/web/src/ui/roomlist/RoomList.tsx @@ -14,8 +14,8 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React, { use, useCallback } from "react" -import type { RoomID } from "../../api/types" -import { useNonNullEventAsState } from "../../util/eventdispatcher.ts" +import type { RoomID } from "@/api/types" +import { useNonNullEventAsState } from "@/util/eventdispatcher.ts" import { ClientContext } from "../ClientContext.ts" import Entry from "./Entry.tsx" import "./RoomList.css" @@ -36,10 +36,17 @@ const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => { } }, [setActiveRoom]) - return
- {reverseMap(roomList, room => - , - )} + return
+
+ {reverseMap(roomList, room => + , + )} +
}