n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

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

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

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

19
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
// along with this program. If not, see <https://www.gnu.org/licenses/>.
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 <div className="room-list">
{reverseMap(roomList, room =>
<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>,
)}
return <div className="room-list-wrapper">
<div className="room-list">
{reverseMap(roomList, room =>
<Entry
key={room.room_id}
isActive={room.room_id === activeRoomID}
room={room}
setActiveRoom={clickRoom}
/>,
)}
</div>
</div>
}