Merge branch 'dev' into issue-559
This commit is contained in:
commit
ba1e096cff
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -30,6 +30,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
const viewMode = localStorage.getItem("viewMode") || "card";
|
||||
const { collections } = useCollectionStore();
|
||||
const { account } = useAccountStore();
|
||||
|
||||
|
@ -132,6 +133,8 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
!editMode && window.open(generateLinkHref(link, account), "_blank")
|
||||
}
|
||||
>
|
||||
{viewMode === "masonry" && !previewAvailable(link) ? null : (
|
||||
<>
|
||||
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
|
@ -158,6 +161,8 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
</div>
|
||||
|
||||
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="p-3 mt-1">
|
||||
<p className="truncate w-full pr-8 text-primary">
|
||||
|
@ -229,7 +234,11 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
<LinkActions
|
||||
link={link}
|
||||
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)}
|
||||
linkInfo={showInfo}
|
||||
flipDropdown={flipDropdown}
|
||||
|
|
|
@ -35,6 +35,17 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
|||
<i className="bi-grid w-4 h-4 text-neutral"></i>
|
||||
</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
|
||||
onClick={(e) => onChangeViewMode(e, ViewMode.List)}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
|
|
|
@ -60,6 +60,7 @@
|
|||
"react-dom": "18.2.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-image-file-resizer": "^0.4.8",
|
||||
"react-masonry-css": "^1.0.16",
|
||||
"react-select": "^5.7.4",
|
||||
"react-spinners": "^0.13.8",
|
||||
"socks-proxy-agent": "^8.0.2",
|
||||
|
|
|
@ -242,8 +242,7 @@ if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
|
|||
|
||||
// Authelia
|
||||
if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
|
||||
providers.push(
|
||||
{
|
||||
providers.push({
|
||||
id: "authelia",
|
||||
name: "Authelia",
|
||||
type: "oauth",
|
||||
|
@ -259,10 +258,9 @@ if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
|
|||
name: profile.name,
|
||||
email: profile.email,
|
||||
username: profile.preferred_username,
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const _linkAccount = adapter.linkAccount;
|
||||
adapter.linkAccount = (account) => {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 } =
|
||||
|
@ -74,6 +75,7 @@ export default function Links() {
|
|||
[ViewMode.Card]: CardView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
[ViewMode.Masonry]: MasonryView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
|
|
|
@ -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 } =
|
||||
|
@ -72,6 +73,7 @@ export default function PinnedLinks() {
|
|||
[ViewMode.Card]: CardView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
[ViewMode.Masonry]: MasonryView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
|
|
|
@ -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,8 +120,7 @@ export default function PublicCollections() {
|
|||
<div
|
||||
className="h-96"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
|
||||
settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||
backgroundImage: `linear-gradient(${collection?.color}30 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||
}}
|
||||
>
|
||||
|
|
|
@ -16,6 +16,7 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
|||
import toast from "react-hot-toast";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
|
||||
export default function Search() {
|
||||
const { links, selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
|
||||
|
@ -93,6 +94,7 @@ export default function Search() {
|
|||
[ViewMode.Card]: CardView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
[ViewMode.Masonry]: MasonryView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
|
|
|
@ -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();
|
||||
|
@ -151,6 +152,7 @@ export default function Index() {
|
|||
[ViewMode.Card]: CardView,
|
||||
// [ViewMode.Grid]: GridView,
|
||||
[ViewMode.List]: ListView,
|
||||
[ViewMode.Masonry]: MasonryView,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
|
|
|
@ -68,6 +68,7 @@ export enum ViewMode {
|
|||
Card = "card",
|
||||
Grid = "grid",
|
||||
List = "list",
|
||||
Masonry = "masonry",
|
||||
}
|
||||
|
||||
export enum Sort {
|
||||
|
|
|
@ -5165,6 +5165,11 @@ react-is@^17.0.2:
|
|||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
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:
|
||||
version "7.2.9"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
|
||||
|
|
Ŝarĝante…
Reference in New Issue