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

convert folders to buttons & folder icons to buttons (accessibility) (#237) 

* tabbable folders

* fix spacing
This commit is contained in:
Brad Ullman 2023-03-28 01:29:56 -07:00 committed by GitHub
parent b0c289f7a4
commit a3eb247c3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Chatbar/Conversation.tsx
View File

@ -104,7 +104,7 @@ export const ConversationComponent: FC<Props> = ({
{(isDeleting || isRenaming) &&
selectedConversation.id === conversation.id && (
<div className="visible absolute right-1 z-10 flex text-gray-300">
<div className="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) => {
@ -136,7 +136,7 @@ export const ConversationComponent: FC<Props> = ({
{selectedConversation.id === conversation.id &&
!isDeleting &&
!isRenaming && (
<div className="visible absolute right-1 z-10 flex text-gray-300">
<div className="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) => {

104
components/Folders/Chat/ChatFolder.tsx
View File

@ -100,37 +100,50 @@ export const ChatFolder: FC<Props> = ({
}, [searchTerm]);
return (
<div>
<div
className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[14px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{isOpen ? <IconCaretDown size={16} /> : <IconCaretRight size={16} />}
<>
<div className="relative flex items-center">
{isRenaming ? (
<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">
{currentFolder.name}
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<input
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 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-sm transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
{currentFolder.name}
</div>
</button>
)}
{(isDeleting || isRenaming) && (
<div className="-ml-2 flex gap-1">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
<div className="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();
@ -143,40 +156,43 @@ export const ChatFolder: FC<Props> = ({
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>
)}
{!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="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(currentFolder.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>
)}
</div>
@ -185,7 +201,7 @@ export const ChatFolder: FC<Props> = ({
? conversations.map((conversation, index) => {
if (conversation.folderId === currentFolder.id) {
return (
<div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
<div key={index} className="ml-5 gap-2 border-l pl-2">
<ConversationComponent
selectedConversation={selectedConversation}
conversation={conversation}
@ -199,6 +215,6 @@ export const ChatFolder: FC<Props> = ({
}
})
: null}
</div>
</>
);
};

2
components/Folders/Chat/ChatFolders.tsx
View File

@ -35,7 +35,7 @@ export const ChatFolders: FC<Props> = ({
onUpdateConversation,
}) => {
return (
<div className="flex w-full flex-col gap-1 pt-2">
<div className="flex w-full flex-col pt-2">
{folders.map((folder, index) => (
<ChatFolder
key={index}

103
components/Folders/Prompt/PromptFolder.tsx
View File

@ -96,37 +96,49 @@ export const PromptFolder: FC<Props> = ({
}, [searchTerm]);
return (
<div>
<div
className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[14px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{isOpen ? <IconCaretDown size={16} /> : <IconCaretRight size={16} />}
<>
<div className="relative flex items-center">
{isRenaming ? (
<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">
{currentFolder.name}
<div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<input
className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 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-sm transition-colors duration-200 hover:bg-[#343541]/90`}
onClick={() => setIsOpen(!isOpen)}
onDrop={(e) => handleDrop(e, currentFolder)}
onDragOver={allowDrop}
onDragEnter={highlightDrop}
onDragLeave={removeHighlight}
>
{isOpen ? (
<IconCaretDown size={18} />
) : (
<IconCaretRight size={18} />
)}
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
{currentFolder.name}
</div>
</button>
)}
{(isDeleting || isRenaming) && (
<div className="-ml-2 flex gap-1">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
<div className="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();
@ -139,40 +151,43 @@ export const PromptFolder: FC<Props> = ({
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>
)}
{!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="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(currentFolder.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>
)}
</div>
@ -181,7 +196,7 @@ export const PromptFolder: FC<Props> = ({
? prompts.map((prompt, index) => {
if (prompt.folderId === currentFolder.id) {
return (
<div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
<div key={index} className="ml-5 gap-2 border-l pl-2">
<PromptComponent
prompt={prompt}
onDeletePrompt={onDeletePrompt}
@ -192,6 +207,6 @@ export const PromptFolder: FC<Props> = ({
}
})
: null}
</div>
</>
);
};

2
components/Folders/Prompt/PromptFolders.tsx
View File

@ -25,7 +25,7 @@ export const PromptFolders: FC<Props> = ({
onUpdatePrompt,
}) => {
return (
<div className="flex w-full flex-col gap-1 pt-2">
<div className="flex w-full flex-col pt-2">
{folders.map((folder, index) => (
<PromptFolder
key={index}