duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(chat-input): move chat-style selector to the left of the input

Browse Source 
Match the reference layout: the chat-style picker now sits before the text
field (left side) instead of after it. Adds left padding + a small gap so the
trigger, input and emoji selector are evenly spaced.
This commit is contained in:
simoleo89
2026-06-14 21:01:46 +02:00
parent 49cd06a26c
commit 11167cb9b3
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/chat-input/ChatInputView.tsx
+2 -2
View File
@@ -313,7 +313,7 @@ export const ChatInputView: FC<{}> = props =>
return ( return (
createPortal( createPortal(
<div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between overflow-visible rounded-[12px] border-2 border-black bg-white pr-[8px]"> <div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between gap-[6px] overflow-visible rounded-[12px] border-2 border-black bg-white pl-[8px] pr-[8px]">
{ commandSelectorVisible && { commandSelectorVisible &&
<ChatInputCommandSelectorView <ChatInputCommandSelectorView
commands={ filteredCommands } commands={ filteredCommands }
@@ -331,6 +331,7 @@ export const ChatInputView: FC<{}> = props =>
onSelect={ mention.apply } onSelect={ mention.apply }
onHover={ mention.setSelectedIndex } onHover={ mention.setSelectedIndex }
/> } /> }
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
<div className="flex-1 items-center input-sizer"> <div className="flex-1 items-center input-sizer">
{ !floodBlocked && { !floodBlocked &&
<input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> } <input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
@@ -338,7 +339,6 @@ export const ChatInputView: FC<{}> = props =>
<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> } <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
</div> </div>
<ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } /> <ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } />
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
</div>, document.getElementById('toolbar-chat-input-container')) </div>, document.getElementById('toolbar-chat-input-container'))
); );
}; };