kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-09-21 11:50:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

[FEAT] Implement correct highlight colors on document picker (#897)

Browse Source 
* implement alternating color rows for file picker

* implement alternating colors for workspace directory

* remove unneeded props/variables

* remove unused border classes

* remove unneeded expanded prop from filerow component
This commit is contained in:
Sean Hatfield 2024-03-14 10:52:35 -07:00 committed by GitHub
parent ac0e62d490
commit 1352b18b5f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
View File

@ -13,7 +13,6 @@ export default function FileRow({
folderName,
selected,
toggleSelection,
expanded,
fetchKeys,
setLoading,
setLoadingMessage,
@ -53,12 +52,13 @@ export default function FileRow({
const handleMouseEnter = debounce(handleShowTooltip, 500);
const handleMouseLeave = debounce(handleHideTooltip, 500);
return (
<div
<tr
onClick={() => toggleSelection(item)}
className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer ${`${
selected ? "bg-sky-500/20" : ""
} ${expanded ? "bg-sky-500/10" : ""}`}`}
className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
selected ? "selected" : ""
}`}
>
<div className="pl-2 col-span-5 flex gap-x-[4px] items-center">
<div
@ -105,6 +105,6 @@ export default function FileRow({
className="text-base font-bold w-4 h-4 ml-2 flex-shrink-0 cursor-pointer"
/>
</div>
</div>
</tr>
);
}

9
frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
View File

@ -47,10 +47,10 @@ export default function FolderRow({
return (
<>
<div
<tr
onClick={onRowClick}
className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer w-full ${
selected ? "bg-sky-500/20" : ""
className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#2C2C2C] hover:bg-sky-500/20 cursor-pointer w-full file-row:0 ${
selected ? "selected" : ""
}`}
>
<div className="col-span-6 flex gap-x-[4px] items-center">
@ -88,7 +88,7 @@ export default function FolderRow({
/>
)}
</div>
</div>
</tr>
{expanded && (
<div className="col-span-full">
{item.items.map((fileItem) => (
@ -97,7 +97,6 @@ export default function FolderRow({
item={fileItem}
folderName={item.name}
selected={isSelected(fileItem.id)}
expanded={expanded}
toggleSelection={toggleSelection}
fetchKeys={fetchKeys}
setLoading={setLoading}

4
frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View File

@ -53,8 +53,8 @@ export default function WorkspaceFileRow({
const handleMouseLeave = debounce(handleHideTooltip, 500);
return (
<div
className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer
${isMovedItem ? "bg-green-800/40" : ""}`}
className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
${isMovedItem ? "bg-green-800/40" : "file-row"}`}
>
<div className="col-span-5 flex gap-x-[4px] items-center">
<File

4
frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
View File

@ -29,7 +29,7 @@ function WorkspaceDirectory({
</h3>
</div>
<div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
<p className="col-span-5">Name</p>
<p className="col-span-3">Date</p>
<p className="col-span-2">Kind</p>
@ -148,7 +148,7 @@ const PinAlert = memo(() => {
<ModalWrapper isOpen={showAlert}>
<div className="relative w-full max-w-2xl max-h-full">
<div className="relative bg-main-gradient rounded-lg shadow">
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
<div className="flex items-start justify-between p-4 rounded-t border-gray-500/50">
<div className="flex items-center gap-2">
<PushPin className="text-red-600 text-lg w-6 h-6" weight="fill" />
<h3 className="text-xl font-semibold text-white">

16
frontend/src/index.css
View File

@ -597,3 +597,19 @@ dialog::backdrop {
font-weight: 600;
color: #fff;
}
.file-row:nth-child(odd) {
@apply bg-[#1C1E21];
}
.file-row:nth-child(even) {
@apply bg-[#2C2C2C];
}
.file-row.selected:nth-child(odd) {
@apply bg-sky-500/20;
}
.file-row.selected:nth-child(even) {
@apply bg-sky-500/10;
}