From 3288d86e29dd5a0e73781f440f70c33f2b9e1608 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Sat, 7 Dec 2024 18:31:48 -0700 Subject: [PATCH 1/9] web/util: fix oxfordHumanJoin(React)? for two-element arrays Signed-off-by: Sumner Evans --- web/src/util/join.ts | 11 +++++++++-- web/src/util/reactjoin.tsx | 17 ++++++++++++----- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/web/src/util/join.ts b/web/src/util/join.ts index 2252efb..af7500e 100644 --- a/web/src/util/join.ts +++ b/web/src/util/join.ts @@ -13,7 +13,12 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -export function humanJoin(arr: string[], sep: string = ", ", lastSep: string = " and "): string { +export function humanJoin( + arr: string[], + sep: string = ", ", + sep2: string = " and ", + lastSep: string = " and ", +): string { if (arr.length === 0) { return "" } @@ -21,7 +26,9 @@ export function humanJoin(arr: string[], sep: string = ", ", lastSep: string = " return arr[0] } if (arr.length === 2) { - return arr.join(lastSep) + return arr.join(sep2) } return arr.slice(0, -1).join(sep) + lastSep + arr[arr.length - 1] } + +export const oxfordHumanJoin = (arr: string[]) => humanJoin(arr, ", ", " and ", ", and ") diff --git a/web/src/util/reactjoin.tsx b/web/src/util/reactjoin.tsx index 96f450d..9997251 100644 --- a/web/src/util/reactjoin.tsx +++ b/web/src/util/reactjoin.tsx @@ -18,13 +18,20 @@ import { Fragment, JSX } from "react" export function humanJoinReact( arr: (string | JSX.Element)[], sep: string | JSX.Element = ", ", + sep2: string | JSX.Element = " and ", lastSep: string | JSX.Element = " and ", ): JSX.Element[] { - return arr.map((elem, idx) => - + return arr.map((elem, idx) => { + let separator = sep + if (idx === arr.length - 2) { + separator = (arr.length === 2) ? sep2 : lastSep + } + return {elem} - {idx < arr.length - 1 ? (idx === arr.length - 2 ? lastSep : sep) : null} - ) + {idx < arr.length - 1 ? separator : null} + + }) } -export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ") +export const oxfordHumanJoinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, ", ", " and ", ", and ") +export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ", " ") From cf2c79e89e0110e42f6e5ebc6e1de2a72847b3a1 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Sat, 7 Dec 2024 19:14:43 -0700 Subject: [PATCH 2/9] web/composer: make floating Signed-off-by: Sumner Evans --- web/src/index.css | 6 +++++- web/src/ui/composer/Autocompleter.css | 8 +++++--- web/src/ui/composer/MessageComposer.css | 7 ++++++- web/src/ui/timeline/TimelineView.css | 2 +- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index 98d8732..6adcd44 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -27,6 +27,8 @@ --button-hover-color: rgba(0, 0, 0, .2); --light-hover-color: rgba(0, 0, 0, .1); + --composer-background-color: #eeeeee; + --timeline-hover-bg-color: #eee; --timeline-highlight-bg-color: rgba(255, 255, 0, .1); --timeline-highlight-hover-bg-color: #eec; @@ -103,6 +105,8 @@ --button-hover-color: rgba(255, 255, 255, .2); --light-hover-color: rgba(255, 255, 255, .1); + --composer-background-color: #0a0a0a; + --timeline-hover-bg-color: #111; --timeline-highlight-bg-color: rgba(255, 255, 0, .1); --timeline-highlight-hover-bg-color: #331; @@ -115,7 +119,7 @@ --room-list-entry-hover-color: rgba(255, 255, 255, 0.075); --room-list-entry-selected-color: rgba(255, 255, 255, 0.125); - --modal-box-shadow-color: rgba(255, 255, 255, 0.1); + --modal-box-shadow-color: rgba(255, 255, 255, 0.04); --emoji-selected-border-color: #131; diff --git a/web/src/ui/composer/Autocompleter.css b/web/src/ui/composer/Autocompleter.css index bd013b5..f437174 100644 --- a/web/src/ui/composer/Autocompleter.css +++ b/web/src/ui/composer/Autocompleter.css @@ -5,9 +5,11 @@ div.autocompletions-wrapper { div.autocompletions { position: absolute; - bottom: 0; - border-top: 1px solid var(--border-color); - border-right: 1px solid var(--border-color); + bottom: 1.2rem; + left: 1.6rem; + border: 1px solid var(--border-color); + border-radius: 0.5rem; + box-shadow: 0 0 1rem var(--modal-box-shadow-color); background-color: var(--background-color); padding: .5rem; max-height: 20rem; diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css index 6c02fd1..b15258e 100644 --- a/web/src/ui/composer/MessageComposer.css +++ b/web/src/ui/composer/MessageComposer.css @@ -1,9 +1,14 @@ div.message-composer { - border-top: 1px solid var(--border-color); + margin: -1rem 1.6rem 0 1.6rem; + background-color: var(--composer-background-color); + border: 1px solid var(--border-color); + border-radius: 0.5rem; overflow: hidden; grid-area: input; /* WebKit/Safari requires this hack for some reason, works fine without in other browsers */ min-height: 2.25rem; + z-index: 999; + box-shadow: 0 0 1rem var(--modal-box-shadow-color); blockquote.reply-body > pre { text-wrap: auto !important; diff --git a/web/src/ui/timeline/TimelineView.css b/web/src/ui/timeline/TimelineView.css index 9620bc0..dda9cbf 100644 --- a/web/src/ui/timeline/TimelineView.css +++ b/web/src/ui/timeline/TimelineView.css @@ -1,5 +1,5 @@ div.timeline-view { - padding: 1rem; + padding: 1rem 0 2rem 0; overflow-y: scroll; display: flex; From 35b9397381dc5e908dbf759006b83df3f28c44cb Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Sat, 7 Dec 2024 18:14:32 -0700 Subject: [PATCH 3/9] web/typing: render typing notifications below composer Signed-off-by: Sumner Evans --- web/src/api/client.ts | 2 + web/src/api/statestore/hooks.ts | 4 ++ web/src/api/statestore/main.ts | 10 +++ web/src/api/statestore/room.ts | 7 ++ web/src/ui/composer/TypingNotifications.css | 19 ++++++ web/src/ui/composer/TypingNotifications.tsx | 71 +++++++++++++++++++++ web/src/ui/roomview/RoomView.css | 1 + web/src/ui/roomview/RoomView.tsx | 2 + 8 files changed, 116 insertions(+) create mode 100644 web/src/ui/composer/TypingNotifications.css create mode 100644 web/src/ui/composer/TypingNotifications.tsx diff --git a/web/src/api/client.ts b/web/src/api/client.ts index f64973e..5b9e8fe 100644 --- a/web/src/api/client.ts +++ b/web/src/api/client.ts @@ -116,6 +116,8 @@ export default class Client { this.store.applySendComplete(ev.data) } else if (ev.command === "image_auth_token") { this.store.imageAuthToken = ev.data + } else if (ev.command === "typing") { + this.store.applyTyping(ev.data) } } diff --git a/web/src/api/statestore/hooks.ts b/web/src/api/statestore/hooks.ts index d2763b3..61d80e6 100644 --- a/web/src/api/statestore/hooks.ts +++ b/web/src/api/statestore/hooks.ts @@ -27,6 +27,10 @@ export function useRoomTimeline(room: RoomStateStore): (MemDBEvent | null)[] { ) } +export function useRoomTyping(room: RoomStateStore): string[] { + return useSyncExternalStore(room.typingSub.subscribe, () => room.typing) +} + export function useRoomState( room?: RoomStateStore, type?: EventType, stateKey: string | undefined = "", ): MemDBEvent | null { diff --git a/web/src/api/statestore/main.ts b/web/src/api/statestore/main.ts index 08b63a9..548f3ca 100644 --- a/web/src/api/statestore/main.ts +++ b/web/src/api/statestore/main.ts @@ -32,6 +32,7 @@ import { SendCompleteData, SyncCompleteData, SyncRoom, + TypingEventData, UnknownEventContent, UserID, roomStateGUIDToString, @@ -382,6 +383,15 @@ export class StateStore { } } + applyTyping(typing: TypingEventData) { + const room = this.rooms.get(typing.room_id) + if (!room) { + // TODO log or something? + return + } + room.applyTyping(typing.user_ids) + } + doGarbageCollection() { const maxLastOpened = Date.now() - window.gcSettings.lastOpenedCutoff let deletedEvents = 0 diff --git a/web/src/api/statestore/room.ts b/web/src/api/statestore/room.ts index 70d1f59..86c65d2 100644 --- a/web/src/api/statestore/room.ts +++ b/web/src/api/statestore/room.ts @@ -90,10 +90,12 @@ export class RoomStateStore { timelineCache: (MemDBEvent | null)[] = [] state: Map> = new Map() stateLoaded = false + typing: UserID[] = [] fullMembersLoaded = false readonly eventsByRowID: Map = new Map() readonly eventsByID: Map = new Map() readonly timelineSub = new Subscribable() + readonly typingSub = new Subscribable() readonly stateSubs = new MultiSubscribable() readonly eventSubs = new MultiSubscribable() readonly requestedEvents: Set = new Set() @@ -418,6 +420,11 @@ export class RoomStateStore { } } + applyTyping(users: string[]) { + this.typing = users + this.typingSub.notify() + } + doGarbageCollection() { const memberEventsToKeep = new Set() const eventsToKeep = new Set() diff --git a/web/src/ui/composer/TypingNotifications.css b/web/src/ui/composer/TypingNotifications.css new file mode 100644 index 0000000..fdac12b --- /dev/null +++ b/web/src/ui/composer/TypingNotifications.css @@ -0,0 +1,19 @@ +div.typing-notifications { + grid-area: typing; + height: 1.6rem; + margin: 0 1.6rem; + display: flex; + gap: 0.5rem; + align-items: center; + font-size: 0.9rem; + + > div.avatars { + display: flex; + align-items: center; + margin-left: 0.35rem; + + > img { + margin-left: -0.35rem; + } + } +} diff --git a/web/src/ui/composer/TypingNotifications.tsx b/web/src/ui/composer/TypingNotifications.tsx new file mode 100644 index 0000000..499f94f --- /dev/null +++ b/web/src/ui/composer/TypingNotifications.tsx @@ -0,0 +1,71 @@ +// gomuks - A Matrix client written in Go. +// Copyright (C) 2024 Sumner Evans +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +import { JSX, use } from "react" +import { PulseLoader } from "react-spinners" +import { getAvatarURL } from "@/api/media.ts" +import { useRoomTyping } from "@/api/statestore" +import { MemberEventContent } from "@/api/types/mxtypes.ts" +import { oxfordHumanJoinReact } from "@/util/reactjoin.tsx" +import ClientContext from "../ClientContext.ts" +import { useRoomContext } from "../roomview/roomcontext.ts" +import "./TypingNotifications.css" + +const TypingNotifications = () => { + const roomCtx = useRoomContext() + const client = use(ClientContext)! + const room = roomCtx.store + const typing = useRoomTyping(room).filter(u => u !== client.userID) + let loader: JSX.Element | null = null + if (typing.length > 0) { + loader = + } + const avatars: JSX.Element[] = [] + const memberNames: string[] = [] + for (let i = 0; i < 5 && i < typing.length; i++) { + const sender = typing[i] + const memberEvt = room.getStateEvent("m.room.member", sender) + const member = (memberEvt?.content ?? null) as MemberEventContent | null + if (!memberEvt) { + use(ClientContext)?.requestMemberEvent(room, sender) + } + avatars.push() + memberNames.push(member?.displayname ?? sender) + } + + let description: JSX.Element | null = null + if (typing.length > 4) { + description =
{typing.length} users are typing
+ } else if (typing.length > 0) { + description =
+ {oxfordHumanJoinReact(memberNames)} + {typing.length === 1 ? " is " : " are "} + typing +
+ } + + return
+
{avatars}
+ {description} + {loader} +
+} + +export default TypingNotifications diff --git a/web/src/ui/roomview/RoomView.css b/web/src/ui/roomview/RoomView.css index 9bc1efd..3f696f9 100644 --- a/web/src/ui/roomview/RoomView.css +++ b/web/src/ui/roomview/RoomView.css @@ -9,6 +9,7 @@ div.room-view { "messageview" 1fr "autocomplete" 0 "input" auto + "typing" auto / 1fr; contain: strict; } diff --git a/web/src/ui/roomview/RoomView.tsx b/web/src/ui/roomview/RoomView.tsx index 47398cc..fef442a 100644 --- a/web/src/ui/roomview/RoomView.tsx +++ b/web/src/ui/roomview/RoomView.tsx @@ -16,6 +16,7 @@ import { JSX, useRef } from "react" import { RoomStateStore } from "@/api/statestore" import MessageComposer from "../composer/MessageComposer.tsx" +import TypingNotifications from "../composer/TypingNotifications.tsx" import RightPanel, { RightPanelProps } from "../rightpanel/RightPanel.tsx" import TimelineView from "../timeline/TimelineView.tsx" import RoomViewHeader from "./RoomViewHeader.tsx" @@ -38,6 +39,7 @@ const RoomView = ({ room, rightPanelResizeHandle, rightPanel }: RoomViewProps) = + {rightPanelResizeHandle} {rightPanel && } From ac3438ad25b82a8ed00c273db8f2aedf8582b927 Mon Sep 17 00:00:00 2001 From: Sumner Evans Date: Sun, 8 Dec 2024 00:53:49 -0700 Subject: [PATCH 4/9] timeline: make events go across entire width but with padding Signed-off-by: Sumner Evans Signed-off-by: Sumner Evans --- web/src/ui/timeline/TimelineEvent.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index ad729ac..6e3bfbc 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -1,8 +1,8 @@ div.timeline-event { - width: 100%; - max-width: 100%; + width: calc(100% - 2 * 1.6rem); + max-width: calc(100% - 2 * 1.6rem); + padding: calc(var(--timeline-message-gap)/2) 1.6rem; display: grid; - margin-top: var(--timeline-message-gap); grid-template: "cmc cmc cmc cmc" 0 "avatar gap sender sender" auto @@ -120,7 +120,7 @@ div.timeline-event { "cmc cmc cmc" 0 "timestamp content status" auto / var(--timeline-avatar-total-size) 1fr 2rem; - margin-top: var(--timeline-message-gap-same-sender); + padding-top: calc(var(--timeline-message-gap-same-sender)/2); > div.sender-avatar, > div.event-sender-and-time { display: none; @@ -209,6 +209,7 @@ div.date-separator { display: flex; align-items: center; gap: .5rem; + padding: calc(var(--timeline-message-gap)/2) 0; > hr { flex: 1; From 8ee34be466fe7565a6fd755878c371d1c802cb21 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Tue, 10 Dec 2024 23:24:12 +0200 Subject: [PATCH 5/9] Revert "web/util: fix oxfordHumanJoin(React)? for two-element arrays" This reverts commit 3288d86e29dd5a0e73781f440f70c33f2b9e1608. --- web/src/ui/composer/TypingNotifications.tsx | 4 ++-- web/src/util/join.ts | 11 ++--------- web/src/util/reactjoin.tsx | 17 +++++------------ 3 files changed, 9 insertions(+), 23 deletions(-) diff --git a/web/src/ui/composer/TypingNotifications.tsx b/web/src/ui/composer/TypingNotifications.tsx index 499f94f..e901ad6 100644 --- a/web/src/ui/composer/TypingNotifications.tsx +++ b/web/src/ui/composer/TypingNotifications.tsx @@ -18,7 +18,7 @@ import { PulseLoader } from "react-spinners" import { getAvatarURL } from "@/api/media.ts" import { useRoomTyping } from "@/api/statestore" import { MemberEventContent } from "@/api/types/mxtypes.ts" -import { oxfordHumanJoinReact } from "@/util/reactjoin.tsx" +import { humanJoinReact } from "@/util/reactjoin.tsx" import ClientContext from "../ClientContext.ts" import { useRoomContext } from "../roomview/roomcontext.ts" import "./TypingNotifications.css" @@ -55,7 +55,7 @@ const TypingNotifications = () => { description =
{typing.length} users are typing
} else if (typing.length > 0) { description =
- {oxfordHumanJoinReact(memberNames)} + {humanJoinReact(memberNames)} {typing.length === 1 ? " is " : " are "} typing
diff --git a/web/src/util/join.ts b/web/src/util/join.ts index af7500e..2252efb 100644 --- a/web/src/util/join.ts +++ b/web/src/util/join.ts @@ -13,12 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -export function humanJoin( - arr: string[], - sep: string = ", ", - sep2: string = " and ", - lastSep: string = " and ", -): string { +export function humanJoin(arr: string[], sep: string = ", ", lastSep: string = " and "): string { if (arr.length === 0) { return "" } @@ -26,9 +21,7 @@ export function humanJoin( return arr[0] } if (arr.length === 2) { - return arr.join(sep2) + return arr.join(lastSep) } return arr.slice(0, -1).join(sep) + lastSep + arr[arr.length - 1] } - -export const oxfordHumanJoin = (arr: string[]) => humanJoin(arr, ", ", " and ", ", and ") diff --git a/web/src/util/reactjoin.tsx b/web/src/util/reactjoin.tsx index 9997251..96f450d 100644 --- a/web/src/util/reactjoin.tsx +++ b/web/src/util/reactjoin.tsx @@ -18,20 +18,13 @@ import { Fragment, JSX } from "react" export function humanJoinReact( arr: (string | JSX.Element)[], sep: string | JSX.Element = ", ", - sep2: string | JSX.Element = " and ", lastSep: string | JSX.Element = " and ", ): JSX.Element[] { - return arr.map((elem, idx) => { - let separator = sep - if (idx === arr.length - 2) { - separator = (arr.length === 2) ? sep2 : lastSep - } - return + return arr.map((elem, idx) => + {elem} - {idx < arr.length - 1 ? separator : null} - - }) + {idx < arr.length - 1 ? (idx === arr.length - 2 ? lastSep : sep) : null} + ) } -export const oxfordHumanJoinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, ", ", " and ", ", and ") -export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ", " ") +export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ") From 8052c29955f8c6a49c26952e719620d4d594ba84 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Tue, 10 Dec 2024 23:38:28 +0200 Subject: [PATCH 6/9] web/timeline: revert vertical padding changes in messages --- web/src/ui/timeline/TimelineEvent.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index 6e3bfbc..12aad1b 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -1,7 +1,7 @@ div.timeline-event { width: calc(100% - 2 * 1.6rem); max-width: calc(100% - 2 * 1.6rem); - padding: calc(var(--timeline-message-gap)/2) 1.6rem; + padding: 0 1.6rem; display: grid; grid-template: "cmc cmc cmc cmc" 0 @@ -9,6 +9,7 @@ div.timeline-event { "avatar gap content status" auto / var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr 2rem; contain: layout; + margin-top: var(--timeline-message-gap); &.highlight { background-color: var(--timeline-highlight-bg-color); @@ -120,7 +121,7 @@ div.timeline-event { "cmc cmc cmc" 0 "timestamp content status" auto / var(--timeline-avatar-total-size) 1fr 2rem; - padding-top: calc(var(--timeline-message-gap-same-sender)/2); + margin-top: var(--timeline-message-gap-same-sender); > div.sender-avatar, > div.event-sender-and-time { display: none; From a31b309e2e5bcff775d69b967ff77cf13c11d67c Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Tue, 10 Dec 2024 23:42:42 +0200 Subject: [PATCH 7/9] web/timeline: move horizontal padding to variable --- web/src/index.css | 5 +++++ web/src/ui/MainScreen.css | 2 +- web/src/ui/composer/Autocompleter.css | 4 ++-- web/src/ui/composer/MessageComposer.css | 2 +- web/src/ui/composer/TypingNotifications.css | 2 +- web/src/ui/timeline/TimelineEvent.css | 6 +++--- 6 files changed, 13 insertions(+), 8 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index 6adcd44..b095ed8 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -81,6 +81,11 @@ --timeline-message-gap-small-event: 0; --timeline-sender-name-timestamp-gap: .25rem; --timeline-sender-name-content-gap: 0; + --timeline-horizontal-padding: 1.5rem; + + @media screen and (max-width: 45rem) { + --timeline-horizontal-padding: .5rem; + } @media (prefers-color-scheme: dark) { color-scheme: dark; diff --git a/web/src/ui/MainScreen.css b/web/src/ui/MainScreen.css index 769c6f0..9539e76 100644 --- a/web/src/ui/MainScreen.css +++ b/web/src/ui/MainScreen.css @@ -16,7 +16,7 @@ main.matrix-main { / var(--room-list-width) 0 1fr 0 var(--right-panel-width); } - @media screen and (max-width: 750px) { + @media screen and (max-width: 45rem) { &.right-panel-open { grid-template: "rightpanel" 1fr / 1fr; > div.room-list-wrapper { diff --git a/web/src/ui/composer/Autocompleter.css b/web/src/ui/composer/Autocompleter.css index f437174..fb8b4bd 100644 --- a/web/src/ui/composer/Autocompleter.css +++ b/web/src/ui/composer/Autocompleter.css @@ -5,8 +5,8 @@ div.autocompletions-wrapper { div.autocompletions { position: absolute; - bottom: 1.2rem; - left: 1.6rem; + bottom: 1.25rem; + left: var(--timeline-horizontal-padding); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 0 1rem var(--modal-box-shadow-color); diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css index b15258e..7805c21 100644 --- a/web/src/ui/composer/MessageComposer.css +++ b/web/src/ui/composer/MessageComposer.css @@ -1,5 +1,5 @@ div.message-composer { - margin: -1rem 1.6rem 0 1.6rem; + margin: -1rem var(--timeline-horizontal-padding) 0; background-color: var(--composer-background-color); border: 1px solid var(--border-color); border-radius: 0.5rem; diff --git a/web/src/ui/composer/TypingNotifications.css b/web/src/ui/composer/TypingNotifications.css index fdac12b..c8af016 100644 --- a/web/src/ui/composer/TypingNotifications.css +++ b/web/src/ui/composer/TypingNotifications.css @@ -1,7 +1,7 @@ div.typing-notifications { grid-area: typing; height: 1.6rem; - margin: 0 1.6rem; + margin: 0 var(--timeline-horizontal-padding); display: flex; gap: 0.5rem; align-items: center; diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index 12aad1b..f97c2c7 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -1,7 +1,7 @@ div.timeline-event { - width: calc(100% - 2 * 1.6rem); - max-width: calc(100% - 2 * 1.6rem); - padding: 0 1.6rem; + width: calc(100% - 2 * var(--timeline-horizontal-padding)); + max-width: calc(100% - 2 * var(--timeline-horizontal-padding)); + padding: 0 var(--timeline-horizontal-padding); display: grid; grid-template: "cmc cmc cmc cmc" 0 From 6d744d90ba770b557230faef26ff8db833a088c4 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Tue, 10 Dec 2024 23:51:09 +0200 Subject: [PATCH 8/9] web/css: adjust some values --- web/src/index.css | 4 ++-- web/src/ui/composer/MessageComposer.css | 2 +- web/src/ui/composer/TypingNotifications.css | 2 +- web/src/ui/composer/TypingNotifications.tsx | 2 +- web/src/ui/timeline/ReplyBody.css | 4 ++++ web/src/ui/timeline/TimelineEvent.css | 5 +++-- 6 files changed, 12 insertions(+), 7 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index b095ed8..807114e 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -27,7 +27,7 @@ --button-hover-color: rgba(0, 0, 0, .2); --light-hover-color: rgba(0, 0, 0, .1); - --composer-background-color: #eeeeee; + --composer-background-color: #f0f0f0; --timeline-hover-bg-color: #eee; --timeline-highlight-bg-color: rgba(255, 255, 0, .1); @@ -44,7 +44,7 @@ --room-list-entry-selected-color: rgba(0, 0, 0, 0.125); --dimmed-overlay-background-color: rgba(0, 0, 0, .75); - --modal-box-shadow-color: rgba(0, 0, 0, 0.15); + --modal-box-shadow-color: rgba(0, 0, 0, 0.1); --emoji-selected-border-color: #cec; diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css index 7805c21..9e3f26c 100644 --- a/web/src/ui/composer/MessageComposer.css +++ b/web/src/ui/composer/MessageComposer.css @@ -43,7 +43,7 @@ div.message-composer { > div.composer-media, > div.composer-location { display: flex; - padding: .5rem; + padding: .5rem .5rem 0; justify-content: space-between; > button { diff --git a/web/src/ui/composer/TypingNotifications.css b/web/src/ui/composer/TypingNotifications.css index c8af016..fca9c07 100644 --- a/web/src/ui/composer/TypingNotifications.css +++ b/web/src/ui/composer/TypingNotifications.css @@ -1,6 +1,6 @@ div.typing-notifications { grid-area: typing; - height: 1.6rem; + height: 1.5rem; margin: 0 var(--timeline-horizontal-padding); display: flex; gap: 0.5rem; diff --git a/web/src/ui/composer/TypingNotifications.tsx b/web/src/ui/composer/TypingNotifications.tsx index e901ad6..545b3a9 100644 --- a/web/src/ui/composer/TypingNotifications.tsx +++ b/web/src/ui/composer/TypingNotifications.tsx @@ -30,7 +30,7 @@ const TypingNotifications = () => { const typing = useRoomTyping(room).filter(u => u !== client.userID) let loader: JSX.Element | null = null if (typing.length > 0) { - loader = + loader = } const avatars: JSX.Element[] = [] const memberNames: string[] = [] diff --git a/web/src/ui/timeline/ReplyBody.css b/web/src/ui/timeline/ReplyBody.css index 8dcea96..de3b617 100644 --- a/web/src/ui/timeline/ReplyBody.css +++ b/web/src/ui/timeline/ReplyBody.css @@ -22,6 +22,10 @@ blockquote.reply-body { } } + &.composer { + margin: .5rem .5rem 0; + } + &:hover, &.composer { > div.message-text { color: var(--text-color); diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index f97c2c7..64afb5f 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -1,6 +1,7 @@ div.timeline-event { - width: calc(100% - 2 * var(--timeline-horizontal-padding)); - max-width: calc(100% - 2 * var(--timeline-horizontal-padding)); + width: 100%; + max-width: 100%; + box-sizing: border-box; padding: 0 var(--timeline-horizontal-padding); display: grid; grid-template: From a1231c875b1ff8538405d1598f997c972298caa6 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Wed, 11 Dec 2024 00:21:05 +0200 Subject: [PATCH 9/9] web/composer: fix weird 1px scroll --- web/src/ui/composer/MessageComposer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx index f89337c..5bdc5a2 100644 --- a/web/src/ui/composer/MessageComposer.tsx +++ b/web/src/ui/composer/MessageComposer.tsx @@ -374,11 +374,17 @@ const MessageComposer = () => { // checking scrollHeight seems to be the only reliable way to get the size of the text. textInput.current.rows = 1 const newTextRows = Math.min((textInput.current.scrollHeight - 16) / 20, MAX_TEXTAREA_ROWS) + if (newTextRows === MAX_TEXTAREA_ROWS) { + textInput.current.style.overflowY = "auto" + } else { + // There's a weird 1px scroll when using line-height, so set overflow to hidden when it's not needed + textInput.current.style.overflowY = "hidden" + } textInput.current.rows = newTextRows textRows.current = newTextRows // This has to be called unconditionally, because setting rows = 1 messes up the scroll state otherwise roomCtx.scrollToBottom() - }, [state, roomCtx]) + }, [state.text, roomCtx]) // Saving to localStorage could be done in the reducer, but that's not very proper, so do it in an effect. useEffect(() => { roomCtx.isEditing.emit(editing !== null)