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/roomview: include avatar and name in header

Browse source
This commit is contained in:
Tulir Asokan 2024-10-12 13:18:22 +03:00
parent 821701dec6
commit dcb2b61435
6 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,10 +3,22 @@ div.room-view {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template: grid-template:
"header" 2rem "header" 3rem
"messageview" 1fr "messageview" 1fr
"input" 2rem "input" 2rem
/ 1fr; / 1fr;
> div.room-header {
display: flex;
align-items: center;
gap: .5rem;
padding-left: 1rem;
border-bottom: 2px solid #ccc;
> span.room-name {
font-weight: bold;
}
}
} }
form.message-composer { form.message-composer {

11
web/src/ui/RoomView.tsx
View file

@ -14,6 +14,7 @@
// 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, useState } from "react" import React, { use, useState } from "react"
import { getMediaURL } from "../api/media.ts"
import { RoomStateStore } from "../api/statestore.ts" import { RoomStateStore } from "../api/statestore.ts"
import { useNonNullEventAsState } from "../util/eventdispatcher.ts" import { useNonNullEventAsState } from "../util/eventdispatcher.ts"
import { ClientContext } from "./ClientContext.ts" import { ClientContext } from "./ClientContext.ts"
@ -38,7 +39,15 @@ const RoomView = ({ room }: RoomViewProps) => {
} }
return <div className="room-view"> return <div className="room-view">
<div className="room-header"> <div className="room-header">
{roomMeta.room_id} <img
className="avatar"
loading="lazy"
src={getMediaURL(roomMeta.avatar)}
alt=""
/>
<span className="room-name">
{roomMeta.name ?? roomMeta.room_id}
</span>
</div> </div>
<TimelineView room={room}/> <TimelineView room={room}/>
<form className="message-composer" onSubmit={sendMessage}> <form className="message-composer" onSubmit={sendMessage}>

2
web/src/ui/roomlist/Entry.tsx
View file

@ -36,7 +36,7 @@ const Entry = ({ room, setActiveRoom }: RoomListEntryProps) => {
const previewText = makePreviewText(room.preview_event) const previewText = makePreviewText(room.preview_event)
return <div className="room-entry" onClick={setActiveRoom} data-room-id={room.room_id}> return <div className="room-entry" onClick={setActiveRoom} data-room-id={room.room_id}>
<div className="room-entry-left"> <div className="room-entry-left">
<img loading="lazy" className="room-avatar" src={getMediaURL(room.avatar)} alt=""/> <img loading="lazy" className="avatar room-avatar" src={getMediaURL(room.avatar)} alt=""/>
</div> </div>
<div className="room-entry-right"> <div className="room-entry-right">
<div className="room-name">{room.name}</div> <div className="room-name">{room.name}</div>

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

@ -15,13 +15,10 @@ div.room-list {
} }
> div.room-entry-left { > div.room-entry-left {
height: 48px; height: 3rem;
width: 48px; width: 3rem;
> img.room-avatar { > img.room-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
padding: 4px; padding: 4px;
} }
} }
@ -48,3 +45,10 @@ div.room-list {
} }
} }
} }
img.avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
object-fit: cover;
}

7
web/src/ui/timeline/TimelineEvent.css
View file

@ -15,13 +15,6 @@ div.timeline-event {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-top: 2px; margin-top: 2px;
> img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
} }
> div.event-sender-and-time { > div.event-sender-and-time {

7
web/src/ui/timeline/TimelineEvent.tsx
View file

@ -69,7 +69,12 @@ const TimelineEvent = ({ room, evt }: TimelineEventProps) => {
const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null
return <div className={`timeline-event ${BodyType === HiddenEvent ? "hidden-event" : ""}`}> return <div className={`timeline-event ${BodyType === HiddenEvent ? "hidden-event" : ""}`}>
<div className="sender-avatar" title={evt.sender}> <div className="sender-avatar" title={evt.sender}>
<img loading="lazy" src={getAvatarURL(evt.sender, memberEvtContent?.avatar_url)} alt="" /> <img
className="avatar"
loading="lazy"
src={getAvatarURL(evt.sender, memberEvtContent?.avatar_url)}
alt=""
/>
</div> </div>
<div className="event-sender-and-time"> <div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span> <span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>