Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/roomlist: make background color prettier

Browse source
This commit is contained in:
Tulir Asokan 2024-10-13 18:43:01 +03:00
parent 6c55f1654c
commit 8f43d00d06
3 changed files with 67 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/ui/RoomView.css
View file

@ -2,7 +2,6 @@ div.room-view {
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
display: grid; display: grid;
border-left: 2px solid #ccc;
grid-template: grid-template:
"header" 3rem "header" 3rem
"messageview" 1fr "messageview" 1fr
@ -14,7 +13,7 @@ div.room-view {
align-items: center; align-items: center;
gap: .5rem; gap: .5rem;
padding-left: 1rem; padding-left: 1rem;
border-bottom: 2px solid #ccc; border-bottom: 1px solid #ccc;
> span.room-name { > span.room-name {
font-weight: bold; font-weight: bold;

17
web/src/ui/roomlist/RoomList.css
View file

@ -1,8 +1,16 @@
div.room-list { div.room-list-wrapper {
grid-area: roomlist; grid-area: roomlist;
background: linear-gradient(in hsl longer hue, red 0 0, magenta);
box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
}
div.room-entry { div.room-list {
background-color: hsla(0, 0%, 96%, .9);
min-height: 100vh;
}
div.room-entry {
width: 100%; width: 100%;
display: flex; display: flex;
gap: 4px; gap: 4px;
@ -11,11 +19,11 @@ div.room-list {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #EEE; background-color: rgba(5, 38, 87, 0.1);
} }
&.active { &.active {
background-color: #DDD; background-color: rgba(5, 38, 87, 0.15);
} }
> div.room-entry-left { > div.room-entry-left {
@ -57,7 +65,6 @@ div.room-list {
} }
} }
} }
}
} }
img.avatar { img.avatar {

15
web/src/ui/roomlist/RoomList.tsx
View file

@ -14,8 +14,8 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { use, useCallback } from "react" import React, { use, useCallback } from "react"
import type { RoomID } from "../../api/types" import type { RoomID } from "@/api/types"
import { useNonNullEventAsState } from "../../util/eventdispatcher.ts" import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
import { ClientContext } from "../ClientContext.ts" import { ClientContext } from "../ClientContext.ts"
import Entry from "./Entry.tsx" import Entry from "./Entry.tsx"
import "./RoomList.css" import "./RoomList.css"
@ -36,11 +36,18 @@ const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
} }
}, [setActiveRoom]) }, [setActiveRoom])
return <div className="room-list"> return <div className="room-list-wrapper">
<div className="room-list">
{reverseMap(roomList, room => {reverseMap(roomList, room =>
<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>, <Entry
key={room.room_id}
isActive={room.room_id === activeRoomID}
room={room}
setActiveRoom={clickRoom}
/>,
)} )}
</div> </div>
</div>
} }
function reverseMap<T, O>(arg: T[], fn: (a: T) => O) { function reverseMap<T, O>(arg: T[], fn: (a: T) => O) {