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;

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

@ -1,60 +1,67 @@
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%;
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%; width: 100%;
display: flex; display: flex;
gap: 4px; flex-direction: column;
/*border-radius: 4px;*/ overflow: hidden;
user-select: none; justify-content: space-around;
cursor: pointer;
&:hover { > div.room-name {
background-color: #EEE; font-weight: bold;
}
&.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;
overflow: hidden; overflow: hidden;
justify-content: space-around; white-space: nowrap;
text-overflow: ellipsis;
}
> div.room-name { > div.message-preview {
font-weight: bold; text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
> span.sender-name {
display: block;
max-width: 6rem;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
> div.message-preview { > span.preview-text {
text-overflow: ellipsis; display: block;
white-space: nowrap;
overflow: hidden;
> span.sender-name {
display: block;
max-width: 6rem;
overflow: hidden;
}
> 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 // 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,10 +36,17 @@ const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
} }
}, [setActiveRoom]) }, [setActiveRoom])
return <div className="room-list"> return <div className="room-list-wrapper">
{reverseMap(roomList, room => <div className="room-list">
<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>, {reverseMap(roomList, room =>
)} <Entry
key={room.room_id}
isActive={room.room_id === activeRoomID}
room={room}
setActiveRoom={clickRoom}
/>,
)}
</div>
</div> </div>
} }