θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b51428f
implement alternating color rows for file picker
shatfield4 Mar 12, 2024
b2564c9
implement alternating colors for workspace directory
shatfield4 Mar 12, 2024
1d44181
remove unneeded props/variables
shatfield4 Mar 12, 2024
ca948c7
Merge branch 'master' into 890-feat-implement-correct-highlight-color…
shatfield4 Mar 12, 2024
36907d9
remove unused border classes
shatfield4 Mar 12, 2024
2458a97
remove unneeded expanded prop from filerow component
shatfield4 Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export default function FileRow({
folderName,
selected,
toggleSelection,
expanded,
fetchKeys,
setLoading,
setLoadingMessage,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 changes: 4 additions & 5 deletions frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -88,7 +88,7 @@ export default function FolderRow({
/>
)}
</div>
</div>
</tr>
{expanded && (
<div className="col-span-full">
{item.items.map((fileItem) => (
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions .../components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}