egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Masonry View

Browse Source
This commit is contained in:
Isaac Wise
2024-04-23 20:48:15 -05:00
parent f37a4b9c9e
commit 2b04bcb1df
13 changed files with 134 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collections/[id].tsx
+8 -10
View File
@@ -28,6 +28,7 @@ import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
import toast from "react-hot-toast";
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Index() {
const { settings } = useLocalSettingsStore();
@@ -110,6 +111,7 @@ export default function Index() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
@@ -125,8 +127,7 @@ export default function Index() {
const bulkDeleteLinks = async () => {
const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}...`
);
@@ -138,8 +139,7 @@ export default function Index() {
response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}!`
);
};
@@ -149,9 +149,8 @@ export default function Index() {
<div
className="h-[60rem] p-5 flex gap-3 flex-col"
style={{
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
>
{activeCollection && (
@@ -326,11 +325,10 @@ export default function Index() {
setEditMode(!editMode);
setSelectedLinks([]);
}}
className={`btn btn-square btn-sm btn-ghost ${
editMode
className={`btn btn-square btn-sm btn-ghost ${editMode
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`}
}`}
>
<i className="bi-pencil-fill text-neutral text-xl"></i>
</div>
pages/dashboard.tsx
+2
View File
@@ -16,6 +16,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView";
import ViewDropdown from "@/components/ViewDropdown";
import { dropdownTriggerer } from "@/lib/client/utils";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
// import GridView from "@/components/LinkViews/Layouts/GridView";
export default function Dashboard() {
@@ -102,6 +103,7 @@ export default function Dashboard() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
pages/links/index.tsx
+6 -7
View File
@@ -15,6 +15,7 @@ import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
// import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Links() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -51,8 +52,7 @@ export default function Links() {
const bulkDeleteLinks = async () => {
const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}...`
);
@@ -64,8 +64,7 @@ export default function Links() {
response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}!`
);
};
@@ -74,6 +73,7 @@ export default function Links() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
@@ -97,11 +97,10 @@ export default function Links() {
setEditMode(!editMode);
setSelectedLinks([]);
}}
className={`btn btn-square btn-sm btn-ghost ${
editMode
className={`btn btn-square btn-sm btn-ghost ${editMode
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`}
}`}
>
<i className="bi-pencil-fill text-neutral text-xl"></i>
</div>
pages/links/pinned.tsx
+6 -7
View File
@@ -14,6 +14,7 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
import toast from "react-hot-toast";
// import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function PinnedLinks() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@@ -49,8 +50,7 @@ export default function PinnedLinks() {
const bulkDeleteLinks = async () => {
const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}...`
);
@@ -62,8 +62,7 @@ export default function PinnedLinks() {
response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}!`
);
};
@@ -72,6 +71,7 @@ export default function PinnedLinks() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
@@ -94,11 +94,10 @@ export default function PinnedLinks() {
setEditMode(!editMode);
setSelectedLinks([]);
}}
className={`btn btn-square btn-sm btn-ghost ${
editMode
className={`btn btn-square btn-sm btn-ghost ${editMode
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`}
}`}
>
<i className="bi-pencil-fill text-neutral text-xl"></i>
</div>
pages/public/collections/[id].tsx
+4 -3
View File
@@ -24,6 +24,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
// import GridView from "@/components/LinkViews/Layouts/GridView";
const cardVariants: Variants = {
@@ -109,6 +110,7 @@ export default function PublicCollections() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
@@ -118,9 +120,8 @@ export default function PublicCollections() {
<div
className="h-96"
style={{
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}}
>
{collection ? (
pages/search.tsx
+2
View File
@@ -12,6 +12,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView";
import PageHeader from "@/components/PageHeader";
import { GridLoader, PropagateLoader } from "react-spinners";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Search() {
const { links } = useLinkStore();
@@ -49,6 +50,7 @@ export default function Search() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
pages/tags/[id].tsx
+8 -10
View File
@@ -15,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Index() {
const router = useRouter();
@@ -124,8 +125,7 @@ export default function Index() {
const bulkDeleteLinks = async () => {
const load = toast.loading(
`Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}...`
);
@@ -137,8 +137,7 @@ export default function Index() {
response.ok &&
toast.success(
`Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
}!`
);
};
@@ -151,6 +150,7 @@ export default function Index() {
[ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
};
// @ts-ignore
@@ -197,11 +197,10 @@ export default function Index() {
</p>
<div className="relative">
<div
className={`dropdown dropdown-bottom font-normal ${
activeTag?.name.length && activeTag?.name.length > 8
className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
? "dropdown-end"
: ""
}`}
}`}
>
<div
tabIndex={0}
@@ -253,11 +252,10 @@ export default function Index() {
setEditMode(!editMode);
setSelectedLinks([]);
}}
className={`btn btn-square btn-sm btn-ghost ${
editMode
className={`btn btn-square btn-sm btn-ghost ${editMode
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`}
}`}
>
<i className="bi-pencil-fill text-neutral text-xl"></i>
</div>