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

Pinning UI improvements #3490

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 2 commits into from
Mar 18, 2025
Merged

Pinning UI improvements #3490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e632343
improve pinning ui + sort pinned docs to top
shatfield4 Mar 17, 2025
9bd4b4d
lint
shatfield4 Mar 17, 2025
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
32 changes: 21 additions & 11 deletions ...components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,18 +164,28 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
<div
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2"
onClick={updatePinStatus}
className="flex items-center ml-2 cursor-pointer"
data-tooltip-id="pin-document"
data-tooltip-content={
pinned ? "Un-pin from workspace" : "Pin to workspace"
}
>
<PushPin
data-tooltip-id="pin-document"
data-tooltip-content={
pinned ? "Un-Pin from workspace" : "Pin to workspace"
}
size={16}
onClick={updatePinStatus}
weight={hover || pinned ? "fill" : "regular"}
className="outline-none text-base font-bold flex-shrink-0 cursor-pointer"
/>
{pinned ? (
<div
className={`bg-theme-settings-input-active rounded-3xl whitespace-nowrap ${hover ? "bg-red-500/20" : ""}`}
>
<p className={`text-xs px-2 py-0.5 ${hover ? "text-red-500" : ""}`}>
{hover ? "Un-pin" : "Pinned"}
</p>
</div>
) : (
<PushPin
size={16}
weight="regular"
className="outline-none text-base font-bold flex-shrink-0"
/>
)}
</div>
);
});
Expand Down
15 changes: 13 additions & 2 deletions frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,11 @@ function WorkspaceDirectory({
<div className="overflow-y-auto h-[calc(100%-40px)]">
{files.items.some((folder) => folder.items.length > 0) ||
movedItems.length > 0 ? (
<RenderFileRows files={files} movedItems={movedItems}>
<RenderFileRows
files={files}
movedItems={movedItems}
workspace={workspace}
>
{({ item, folder }) => (
<WorkspaceFileRow
key={item.id}
Expand Down Expand Up @@ -384,12 +388,19 @@ const DocumentWatchAlert = memo(() => {
);
});

function RenderFileRows({ files, movedItems, children }) {
function RenderFileRows({ files, movedItems, children, workspace }) {
function sortMovedItemsAndFiles(a, b) {
const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id);
const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id);
if (aIsMovedItem && !bIsMovedItem) return -1;
if (!aIsMovedItem && bIsMovedItem) return 1;

// Sort pinned items to the top
const aIsPinned = a.pinnedWorkspaces?.includes(workspace.id);
const bIsPinned = b.pinnedWorkspaces?.includes(workspace.id);
if (aIsPinned && !bIsPinned) return -1;
if (!aIsPinned && bIsPinned) return 1;

return 0;
}

Expand Down