mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-09 16:50:28 +03:00
Change username color in chat with power level color (#2282)
* add active theme context * add chroma js library * add hook for accessible tag color * disable reply user color - temporary * render user color based on tag in room timeline * remove default tag icons * move accessible color function to plugins * render user power color in reply * increase username weight in timeline * add default color for member power level tag * show red slash in power color badge with no color * show power level color in room input reply * show power level username color in notifications * show power level color in notification reply * show power level color in message search * render power level color in room pin menu * add toggle for legacy username colors * drop over saturation from member default color * change border color of power color badge * show legacy username color in direct rooms
This commit is contained in:
parent
7d54eef95b
commit
08e975cd8e
26 changed files with 463 additions and 91 deletions
|
|
@ -21,6 +21,8 @@ import { editableActiveElement } from '../../utils/dom';
|
|||
import navigation from '../../../client/state/navigation';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
|
||||
import { useTheme } from '../../hooks/useTheme';
|
||||
|
||||
const FN_KEYS_REGEX = /^F\d+$/;
|
||||
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
||||
|
|
@ -74,6 +76,10 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
|||
? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
|
||||
: false;
|
||||
|
||||
const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
|
||||
const theme = useTheme();
|
||||
const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
|
||||
|
||||
useKeyDown(
|
||||
window,
|
||||
useCallback(
|
||||
|
|
@ -103,6 +109,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
|||
eventId={eventId}
|
||||
roomInputRef={roomInputRef}
|
||||
editor={editor}
|
||||
getPowerLevelTag={getPowerLevelTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
/>
|
||||
<RoomViewTyping room={room} />
|
||||
</Box>
|
||||
|
|
@ -123,6 +131,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
|||
roomId={roomId}
|
||||
fileDropContainerRef={roomViewRef}
|
||||
ref={roomInputRef}
|
||||
getPowerLevelTag={getPowerLevelTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
/>
|
||||
)}
|
||||
{!canMessage && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue