KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert conversation icons to buttons (accessibility) (#192) 

* update sidebar overflow

* update all clickable icons to buttons

* refactor buttons so they are not inside other buttons

* format doc

* update input background to transparent

* adjust btns size to match #202

* update text size per #202
This commit is contained in:
Brad Ullman 2023-03-26 14:19:27 -07:00 committed by GitHub
parent df7c363ccb
commit c3f2dced56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
components/Sidebar/Conversation.tsx
View File

@ -63,8 +63,22 @@ export const ConversationComponent: FC<Props> = ({
}, [isRenaming, isDeleting]);
return (
<div className="relative flex items-center">
{isRenaming && selectedConversation.id === conversation.id ? (
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
<IconMessage size={18} />
<input
className="mr-12 flex-1 overflow-hidden text-[12.5px] leading-3 overflow-ellipsis border-neutral-400 bg-transparent text-left text-white outline-none focus:border-neutral-100"
type="text"
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
onKeyDown={handleEnterDown}
autoFocus
/>
</div>
) : (
<button
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[12.5px] leading-3 transition-colors duration-200 hover:bg-[#343541]/90 ${
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
loading ? 'disabled:cursor-not-allowed' : ''
} ${
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
@ -75,78 +89,72 @@ export const ConversationComponent: FC<Props> = ({
onDragStart={(e) => handleDragStart(e, conversation)}
>
<IconMessage size={18} />
{isRenaming && selectedConversation.id === conversation.id ? (
<input
className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
type="text"
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
onKeyDown={handleEnterDown}
autoFocus
/>
) : (
<div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
<div
className={`relative max-h-5 flex-1 text-[12.5px] leading-3 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left ${
selectedConversation.id === conversation.id ? 'pr-12' : 'pr-1'
}`}
>
{conversation.name}
</div>
</button>
)}
{(isDeleting || isRenaming) &&
selectedConversation.id === conversation.id && (
<div className="-ml-2 flex gap-1">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
<div className="visible absolute right-1 z-10 flex text-gray-300">
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
if (isDeleting) {
onDeleteConversation(conversation);
} else if (isRenaming) {
handleRename(conversation);
}
setIsDeleting(false);
setIsRenaming(false);
}}
/>
<IconX
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
>
<IconCheck size={18} />
</button>
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
setIsDeleting(false);
setIsRenaming(false);
}}
/>
>
<IconX size={18} />
</button>
</div>
)}
{selectedConversation.id === conversation.id &&
!isDeleting &&
!isRenaming && (
<div className="-ml-2 flex gap-1">
<IconPencil
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
<div className="visible absolute right-1 z-10 flex text-gray-300">
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
setIsRenaming(true);
setRenameValue(selectedConversation.name);
}}
/>
<IconTrash
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
>
<IconPencil size={18} />
</button>
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
/>
>
<IconTrash size={18} />
</button>
</div>
)}
</button>
</div>
);
};

2
components/Sidebar/Sidebar.tsx
View File

@ -150,7 +150,7 @@ export const Sidebar: FC<Props> = ({
<Search searchTerm={searchTerm} onSearch={setSearchTerm} />
)}
<div className="flex-grow overflow-auto">
<div className="flex-grow overflow-y-auto overflow-x-clip">
{folders.length > 0 && (
<div className="flex border-b border-white/20 pb-2">
<Folders