Skip to content

ENG-1183: Button to minimise clipboard #626

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

Open
sid597 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

ENG-1183: Button to minimise clipboard #626

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
91 changes: 52 additions & 39 deletions apps/roam/src/components/canvas/Clipboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1048,6 +1048,7 @@ const ClipboardPageSection = ({
export const ClipboardPanel = () => {
const { isOpen, pages, closeClipboard, addPage, removePage } = useClipboard();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);

if (!isOpen) return null;

Expand Down Expand Up @@ -1075,6 +1076,14 @@ export const ClipboardPanel = () => {
Clipboard
</h2>
<div className="flex-shrink-0">
<Button
icon={<Icon icon="minus" />}
onClick={() => setIsCollapsed(!isCollapsed)}
minimal
small
className="h-6 min-h-0 p-1"
title={isCollapsed ? "Expand clipboard" : "Collapse clipboard"}
/>
<Button
icon={<Icon icon="cross" />}
onClick={closeClipboard}
Expand All @@ -1085,50 +1094,54 @@ export const ClipboardPanel = () => {
/>
</div>
</div>
<div
className="max-h-96 overflow-y-auto p-4"
style={{ borderTop: "1px solid hsl(0, 0%, 91%)" }}
>
{pages.length === 0 ? (
<NonIdealState
action={
{!isCollapsed && (
<>
<div
className="max-h-96 overflow-y-auto p-4"
style={{ borderTop: "1px solid hsl(0, 0%, 91%)" }}
>
{pages.length === 0 ? (
<NonIdealState
action={
<Button
icon="plus"
onClick={() => setIsModalOpen(true)}
minimal
small
text="Add page"
/>
}
/>
) : (
<div className="space-y-2">
{pages.map((page) => (
<ClipboardPageSection
key={page.uid}
page={page}
onRemove={removePage}
/>
))}
</div>
)}
</div>
{pages.length > 0 ? (
<div
className="flex flex-shrink-0 items-center justify-end border-t border-gray-200 p-2"
style={{
borderTop: "1px solid hsl(0, 0%, 91%)",
}}
>
<Button
icon="plus"
onClick={() => setIsModalOpen(true)}
minimal
small
text="Add page"
/>
}
/>
) : (
<div className="space-y-2">
{pages.map((page) => (
<ClipboardPageSection
key={page.uid}
page={page}
onRemove={removePage}
/>
))}
</div>
)}
</div>
{pages.length > 0 ? (
<div
className="flex flex-shrink-0 items-center justify-end border-t border-gray-200 p-2"
style={{
borderTop: "1px solid hsl(0, 0%, 91%)",
}}
>
<Button
icon="plus"
onClick={() => setIsModalOpen(true)}
minimal
small
title="Add page"
/>{" "}
</div>
) : null}
title="Add page"
/>{" "}
</div>
) : null}
</>
)}

<AddPageModal
isOpen={isModalOpen}
Expand Down