xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

Merge pull request #580 from IsaacWise06/masonry-view 

feat(links): Added Masonry View
This commit is contained in:
Daniel 2024-04-24 23:53:12 +03:30 committed by GitHub
parent f37a4b9c9e 4f6368fcbf
commit 9354842065
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 145 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/LinkViews/Layouts/MasonryView.tsx Normal file
View File

@ -0,0 +1,43 @@
import LinkCard from "@/components/LinkViews/LinkCard";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import { GridLoader } from "react-spinners";
import Masonry from "react-masonry-css";
export default function MasonryView({
links,
editMode,
isLoading,
}: {
links: LinkIncludingShortenedCollectionAndTags[];
editMode?: boolean;
isLoading?: boolean;
}) {
return (
<Masonry
breakpointCols={4}
columnClassName="!w-full flex flex-col gap-5"
className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5"
>
{links.map((e, i) => {
return (
<LinkCard
key={i}
link={e}
count={i}
flipDropdown={i === links.length - 1}
editMode={editMode}
/>
);
})}
{isLoading && links.length > 0 && (
<GridLoader
color="oklch(var(--p))"
loading={true}
size={20}
className="fixed top-5 right-5 opacity-50 z-30"
/>
)}
</Masonry>
);
}

61
components/LinkViews/LinkCard.tsx
View File

@ -30,6 +30,7 @@ type Props = {
}; };
export default function LinkCard({ link, flipDropdown, editMode }: Props) { export default function LinkCard({ link, flipDropdown, editMode }: Props) {
const viewMode = localStorage.getItem("viewMode") || "card";
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account } = useAccountStore(); const { account } = useAccountStore();
@ -132,32 +133,36 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
!editMode && window.open(generateLinkHref(link, account), "_blank") !editMode && window.open(generateLinkHref(link, account), "_blank")
} }
> >
<div className="relative rounded-t-2xl h-40 overflow-hidden"> {viewMode === "masonry" && !previewAvailable(link) ? null : (
{previewAvailable(link) ? ( <>
<Image <div className="relative rounded-t-2xl h-40 overflow-hidden">
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`} {previewAvailable(link) ? (
width={1280} <Image
height={720} src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
alt="" width={1280}
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105" height={720}
style={{ filter: "blur(2px)" }} alt=""
draggable="false" className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
onError={(e) => { style={{ filter: "blur(2px)" }}
const target = e.target as HTMLElement; draggable="false"
target.style.display = "none"; onError={(e) => {
}} const target = e.target as HTMLElement;
/> target.style.display = "none";
) : link.preview === "unavailable" ? ( }}
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div> />
) : ( ) : link.preview === "unavailable" ? (
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div> <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
)} ) : (
<div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"> <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
<LinkIcon link={link} /> )}
</div> <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
</div> <LinkIcon link={link} />
</div>
</div>
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" /> <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
</>
)}
<div className="p-3 mt-1"> <div className="p-3 mt-1">
<p className="truncate w-full pr-8 text-primary"> <p className="truncate w-full pr-8 text-primary">
@ -229,7 +234,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
<LinkActions <LinkActions
link={link} link={link}
collection={collection} collection={collection}
position="top-[10.75rem] right-3" position={
!previewAvailable(link) && viewMode === "masonry"
? "top-[.75rem] right-3"
: "top-[10.75rem] right-3"
}
toggleShowInfo={() => setShowInfo(!showInfo)} toggleShowInfo={() => setShowInfo(!showInfo)}
linkInfo={showInfo} linkInfo={showInfo}
flipDropdown={flipDropdown} flipDropdown={flipDropdown}

11
components/ViewDropdown.tsx
View File

@ -35,6 +35,17 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
<i className="bi-grid w-4 h-4 text-neutral"></i> <i className="bi-grid w-4 h-4 text-neutral"></i>
</button> </button>
<button
onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
className={`btn btn-square btn-sm btn-ghost ${
viewMode == ViewMode.Masonry
? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20"
}`}
>
<i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
</button>
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.List)} onClick={(e) => onChangeViewMode(e, ViewMode.List)}
className={`btn btn-square btn-sm btn-ghost ${ className={`btn btn-square btn-sm btn-ghost ${

1
package.json
View File

@ -60,6 +60,7 @@
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-hot-toast": "^2.4.1", "react-hot-toast": "^2.4.1",
"react-image-file-resizer": "^0.4.8", "react-image-file-resizer": "^0.4.8",
"react-masonry-css": "^1.0.16",
"react-select": "^5.7.4", "react-select": "^5.7.4",
"react-spinners": "^0.13.8", "react-spinners": "^0.13.8",
"socks-proxy-agent": "^8.0.2", "socks-proxy-agent": "^8.0.2",

64
pages/api/v1/auth/[...nextauth].ts
View File

@ -98,19 +98,19 @@ if (
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: emailEnabled where: emailEnabled
? { ? {
OR: [ OR: [
{ {
username: username.toLowerCase(), username: username.toLowerCase(),
}, },
{ {
email: username?.toLowerCase(), email: username?.toLowerCase(),
}, },
], ],
emailVerified: { not: null }, emailVerified: { not: null },
} }
: { : {
username: username.toLowerCase(), username: username.toLowerCase(),
}, },
}); });
let passwordMatches: boolean = false; let passwordMatches: boolean = false;
@ -242,27 +242,25 @@ if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
// Authelia // Authelia
if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") { if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
providers.push( providers.push({
{ id: "authelia",
id: "authelia", name: "Authelia",
name: "Authelia", type: "oauth",
type: "oauth", clientId: process.env.AUTHELIA_CLIENT_ID!,
clientId: process.env.AUTHELIA_CLIENT_ID!, clientSecret: process.env.AUTHELIA_CLIENT_SECRET!,
clientSecret: process.env.AUTHELIA_CLIENT_SECRET!, wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!,
wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!, authorization: { params: { scope: "openid email profile" } },
authorization: { params: { scope: "openid email profile" } }, idToken: true,
idToken: true, checks: ["pkce", "state"],
checks: ["pkce", "state"], profile(profile) {
profile(profile) { return {
return { id: profile.sub,
id: profile.sub, name: profile.name,
name: profile.name, email: profile.email,
email: profile.email, username: profile.preferred_username,
username: profile.preferred_username, };
} },
}, });
}
);
const _linkAccount = adapter.linkAccount; const _linkAccount = adapter.linkAccount;
adapter.linkAccount = (account) => { adapter.linkAccount = (account) => {

2
pages/api/v1/logins/index.ts
View File

@ -401,7 +401,7 @@ export function getLogins() {
return { return {
credentialsEnabled: credentialsEnabled:
process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" || process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
? "true" ? "true"
: "false", : "false",
emailEnabled: emailEnabled:

2
pages/collections/[id].tsx
View File

@ -28,6 +28,7 @@ import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal"; import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal"; import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Index() { export default function Index() {
const { settings } = useLocalSettingsStore(); const { settings } = useLocalSettingsStore();
@ -110,6 +111,7 @@ export default function Index() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

2
pages/dashboard.tsx
View File

@ -16,6 +16,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import { dropdownTriggerer } from "@/lib/client/utils"; import { dropdownTriggerer } from "@/lib/client/utils";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
export default function Dashboard() { export default function Dashboard() {
@ -102,6 +103,7 @@ export default function Dashboard() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

2
pages/links/index.tsx
View File

@ -15,6 +15,7 @@ import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal"; import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Links() { export default function Links() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@ -74,6 +75,7 @@ export default function Links() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

2
pages/links/pinned.tsx
View File

@ -14,6 +14,7 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function PinnedLinks() { export default function PinnedLinks() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@ -72,6 +73,7 @@ export default function PinnedLinks() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

7
pages/public/collections/[id].tsx
View File

@ -24,6 +24,7 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
const cardVariants: Variants = { const cardVariants: Variants = {
@ -109,6 +110,7 @@ export default function PublicCollections() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore
@ -118,9 +120,8 @@ export default function PublicCollections() {
<div <div
className="h-96" className="h-96"
style={{ style={{
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${ backgroundImage: `linear-gradient(${collection?.color}30 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
settings.theme === "dark" ? "#262626" : "#f3f4f6" } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}} }}
> >
{collection ? ( {collection ? (

2
pages/search.tsx
View File

@ -12,6 +12,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
import PageHeader from "@/components/PageHeader"; import PageHeader from "@/components/PageHeader";
import { GridLoader, PropagateLoader } from "react-spinners"; import { GridLoader, PropagateLoader } from "react-spinners";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Search() { export default function Search() {
const { links } = useLinkStore(); const { links } = useLinkStore();
@ -49,6 +50,7 @@ export default function Search() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

2
pages/tags/[id].tsx
View File

@ -15,6 +15,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal"; import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal"; import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
import useCollectivePermissions from "@/hooks/useCollectivePermissions"; import useCollectivePermissions from "@/hooks/useCollectivePermissions";
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
export default function Index() { export default function Index() {
const router = useRouter(); const router = useRouter();
@ -151,6 +152,7 @@ export default function Index() {
[ViewMode.Card]: CardView, [ViewMode.Card]: CardView,
// [ViewMode.Grid]: GridView, // [ViewMode.Grid]: GridView,
[ViewMode.List]: ListView, [ViewMode.List]: ListView,
[ViewMode.Masonry]: MasonryView,
}; };
// @ts-ignore // @ts-ignore

2
types/enviornment.d.ts vendored
View File

@ -418,4 +418,4 @@ declare global {
} }
} }
export { }; export {};

1
types/global.ts
View File

@ -68,6 +68,7 @@ export enum ViewMode {
Card = "card", Card = "card",
Grid = "grid", Grid = "grid",
List = "list", List = "list",
Masonry = "masonry",
} }
export enum Sort { export enum Sort {

5
yarn.lock
View File

@ -5165,6 +5165,11 @@ react-is@^17.0.2:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-masonry-css@^1.0.16:
version "1.0.16"
resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
react-redux@^7.0.3: react-redux@^7.0.3:
version "7.2.9" version "7.2.9"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"