diff --git a/package.json b/package.json index 651db62a..5a83f55c 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "sharp": "0.32.0", "sortablejs": "1.15.0", "tailwind-merge": "^1.12.0", + "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss-animate": "^1.0.5", "unidata.js": "0.7.18", "unified": "10.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f9290f4..af5a551e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -253,6 +253,9 @@ dependencies: tailwind-merge: specifier: ^1.12.0 version: 1.12.0 + tailwind-scrollbar-hide: + specifier: ^1.1.7 + version: 1.1.7 tailwindcss-animate: specifier: ^1.0.5 version: 1.0.5(tailwindcss@3.3.1) @@ -12129,6 +12132,10 @@ packages: resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==} dev: false + /tailwind-scrollbar-hide@1.1.7: + resolution: {integrity: sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==} + dev: false + /tailwindcss-animate@1.0.5(tailwindcss@3.3.1): resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==} peerDependencies: diff --git a/src/components/dashboard/DashboardTopbar.tsx b/src/components/dashboard/DashboardTopbar.tsx index e01b77b4..c92b9673 100644 --- a/src/components/dashboard/DashboardTopbar.tsx +++ b/src/components/dashboard/DashboardTopbar.tsx @@ -14,11 +14,11 @@ export const DashboardTopbar: React.FC<{ return (
{({ open, close }) => ( - <> +
- +
{drawerWidget(close)}
- +
)} diff --git a/src/components/dashboard/OptionsButton.tsx b/src/components/dashboard/OptionsButton.tsx new file mode 100644 index 00000000..07cd7e6f --- /dev/null +++ b/src/components/dashboard/OptionsButton.tsx @@ -0,0 +1,126 @@ +import { Menu, Transition } from "@headlessui/react" +import { Dispatch, Fragment, SetStateAction, useState } from "react" +import { useTranslation } from "react-i18next" +import { PageVisibilityEnum } from "~/lib/types" +import { cn } from "~/lib/utils" + +export const OptionsButton: React.FC<{ + visibility: PageVisibilityEnum | undefined + previewPage: () => void + renderPage: Dispatch> + savePage: (published: boolean) => any + isRendering: boolean + published: boolean +}> = ({ + visibility, + previewPage, + savePage, + isRendering, + renderPage, + published, +}) => { + const { t } = useTranslation("dashboard") + + return ( + <> +
renderPage(!isRendering)} + > + {isRendering ? ( + + ) : ( + + )} +
+ + {({ open, close }) => { + return ( + <> + +
+ {open ? ( + + ) : ( + + )} +
+ + + + +
+ + {({ active }) => ( + + )} + +
+
+ + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + + + {({ active }) => ( + + )} + +
+ + + + ) + }} + + + ) +} diff --git a/src/components/ui/Editor.tsx b/src/components/ui/Editor.tsx index f617b0f0..3812b230 100644 --- a/src/components/ui/Editor.tsx +++ b/src/components/ui/Editor.tsx @@ -5,6 +5,7 @@ import { scroll } from "@uiw/codemirror-extensions-events" import type { EditorState } from "@codemirror/state" import { useState, useEffect, useMemo } from "react" import { useTranslation } from "next-i18next" +import { useMobileLayout } from "~/hooks/useMobileLayout" export const Editor: React.FC<{ value: string @@ -25,6 +26,7 @@ export const Editor: React.FC<{ }) => { const { t } = useTranslation("dashboard") const [extensions, setExtensions] = useState([]) + const isMobileLayout = useMobileLayout() useEffect(() => { setExtensions([ markdown(), @@ -34,6 +36,7 @@ export const Editor: React.FC<{ fontSize: "1rem", overflow: "auto", height: "100%", + padding: isMobileLayout ? "0 1.25rem" : "unset", }, ".cm-content": { paddingBottom: "600px", @@ -85,7 +88,7 @@ export const Editor: React.FC<{ return useMemo( () => ( { @@ -163,6 +165,9 @@ export default function SubdomainEditor() { const createOrUpdatePage = useCreateOrUpdatePage() + const isMobileLayout = useMobileLayout() + const [isRendering, setIsRendering] = useState(false) + const savePage = async (published: boolean) => { const check = await checkPageSlug({ slug: values.slug || defaultSlug, @@ -406,8 +411,18 @@ export default function SubdomainEditor() {
) : ( <> -
-
+
+
-
- - {t(visibility as string)} - - - -
+ {isMobileLayout ? ( +
+ {/* + {t(visibility as string)} + */} + {/* */} + {/* */} + { + window.open( + `/_site/${subdomain}/preview/${draftKey.replace( + `draft-${subdomain}-`, + "", + )}`, + ) + }} + /> +
+ ) : ( +
+ + {t(visibility as string)} + + + +
+ )}
-
+
@@ -474,30 +550,62 @@ export default function SubdomainEditor() { />
- { - setCurrentScrollArea("editor") - }} - /> - { - setCurrentScrollArea("preview") - }} - > + {isMobileLayout ? ( + !isRendering ? ( + { + setCurrentScrollArea("editor") + }} + /> + ) : ( + { + setCurrentScrollArea("preview") + }} + > + ) + ) : ( + <> + { + setCurrentScrollArea("editor") + }} + /> + { + setCurrentScrollArea("preview") + }} + > + + )}
-
+ {/*
-
+
*/}
)} diff --git a/tailwind.config.js b/tailwind.config.js index cc5e112d..f29ade6a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -60,5 +60,5 @@ module.exports = { }, }, variants: {}, - plugins: [require("tailwindcss-animate")], + plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar-hide")], }