Skip to content

Commit

Permalink
peek page menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfmow
jfmow committed Sep 11, 2024
1 parent de8c306 commit c6d78c3
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 37 deletions.
44 changes: 42 additions & 2 deletions components/editor/Menubar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import { toaster } from '@/components/toast';
import { ToolTip, ToolTipCon, ToolTipTrigger } from '@/components/UI/Tooltip';
import { DropDown, DropDownContainer, DropDownExtension, DropDownExtensionContainer, DropDownExtensionTrigger, DropDownItem, DropDownSection, DropDownSectionTitle, DropDownTrigger } from '@/lib/Pop-Cards/DropDown';
import { CalendarDays, CircleUser, TextSelect, BookDashed, Pencil, Share2, PartyPopper, Archive, ArchiveRestore, Baseline, CaseLower, Copy, Eye, EyeOff, Info, PanelRightDashed, Settings2, Share, Space, Trash2Icon, WholeWord, Settings, PanelRight, Paintbrush, Printer, Glasses, Folder } from 'lucide-react';
import { CalendarDays, CircleUser, TextSelect, BookDashed, Pencil, Share2, PartyPopper, Archive, ArchiveRestore, Baseline, CaseLower, Copy, Eye, EyeOff, Info, PanelRightDashed, Settings2, Share, Space, Trash2Icon, WholeWord, Settings, PanelRight, Paintbrush, Printer, Glasses, Folder, Fullscreen, X, PanelRightClose } from 'lucide-react';
import { CountCharacters, CountWords } from './helpers';
import { SendPageChanges } from '@/lib/Page state manager';
import { findPageListPage } from '@/components/Pages List/list-functions';
Expand All @@ -25,7 +25,7 @@ export function MenuBarButton({ ...props }) {
)
}

export default function MenuBar({ sidebarstate, currentPageData, currentPage, listedPageItems, unauthed = false }) {
export default function MenuBar({ sidebarstate, currentPageData, currentPage, listedPageItems, unauthed = false, peekPageOpen = false }) {

if (!listedPageItems || !currentPage || !currentPageData) {
return <></>
Expand Down Expand Up @@ -75,6 +75,46 @@ export default function MenuBar({ sidebarstate, currentPageData, currentPage, li
) : null}

</div>



{peekPageOpen ? (
<div className='max-w-[35vw] w-[800px] h-full -mr-2 pr-2 shrink-0 flex items-center justify-end gap-1'>
<ToolTipCon>
<ToolTipTrigger>
<MenuBarButton onClick={() => {
const queryParams = new URLSearchParams(window.location.search)
const page = queryParams.get("p")
queryParams.set("edit", page)
queryParams.delete("pm")
queryParams.delete("p")
window.location.replace(`/page?${queryParams.toString()}`)
}} type="button">
<Fullscreen />
</MenuBarButton>
</ToolTipTrigger>
<ToolTip>
Fullscreen
</ToolTip>
</ToolTipCon>
<ToolTipCon>
<ToolTipTrigger>
<MenuBarButton onClick={() => {
const queryParams = new URLSearchParams(window.location.search)
queryParams.delete("pm")
queryParams.delete("p")
window.location.replace(`/page?${queryParams.toString()}`)
}}>
<PanelRightClose />
</MenuBarButton>
</ToolTipTrigger>
<ToolTip>
Close
</ToolTip>
</ToolTipCon>
</div>
) : null}

</div>

</>
Expand Down
33 changes: 1 addition & 32 deletions components/editor/Peeks/PeekPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,8 @@ export default function PeekPageBlock({ pageId }) {
return (
<>
<>
<div onClick={() => Router.push(window.location.pathname)} className="print:hidden print:collapse flex items-center justify-center w-full h-screen">
<div onClick={() => Router.push(window.location.pathname)} className="pt-[40px] print:hidden print:collapse flex items-center justify-center w-full h-screen">
<div onClick={(e) => e.stopPropagation()} className="relative w-full bg-[var(--background)] h-full overflow-hidden">
<div className="overflow-x-hidden w-full h-[40px] min-h-[40px] max-h-[40px] z-[3] pl-2 pr-2 flex justify-between items-center bg-zinc-50 overflow-y-hidden">
<div></div>
<div className="flex items-center justify-end gap-1 min-w-[100px]">
<ToolTipCon>
<ToolTipTrigger>
<MenuBarButton onClick={() => {
const queryParams = new URLSearchParams(window.location.search)
queryParams.delete("pm")
queryParams.delete("p")
Router.push(`/page?${queryParams.toString()}`)
}} type="button">
<X />
</MenuBarButton>
</ToolTipTrigger>
<ToolTip>
Close
</ToolTip>

</ToolTipCon>
<ToolTipCon>
<ToolTipTrigger>
<MenuBarButton onClick={() => { Router.push(`/page?edit=${pageId}`) }} type="button">
<Maximize2 />
</MenuBarButton>
</ToolTipTrigger>
<ToolTip>
Fullscreen
</ToolTip>
</ToolTipCon>
</div>
</div>
<Suspense>
<EditorV3 currentPage={pageId} peek />
</Suspense>
Expand Down
5 changes: 2 additions & 3 deletions pages/page/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,10 @@ function NotionEditor() {
<EditorContext.Provider value={{ showArchivedPages, setShowArchivedPages, listedPageItems, setListedPageItems, visible, setVisible, currentPage: pageId, pageId, listedPageItemsFilter, setListedPageItemsFilters, setPrimaryVisiblePageData, primaryVisiblePageData }}>
<div>
<div className='flex flex-row'>
<MenuBar sidebarstate={visible} listedPageItems={listedPageItems} currentPage={pageId} currentPageData={findPageListPage(pageId, listedPageItems)} />
<MenuBar peekPageOpen={query.pm === "s"} sidebarstate={visible} listedPageItems={listedPageItems} currentPage={pageId} currentPageData={findPageListPage(pageId, listedPageItems)} />

<UsersPages />
<div className={`flex flex-col relative h-[100dvh] overflow-x-hidden flex-1 pt-[40px] print:pt-[0px] bg-[var(--background)] ${isMobileScreen() && visible ? "pointer-events-none select-none" : ""}`}>

{pageId && listedPageItems && listedPageItems.length >= 1 !== "" ? (
<Suspense fallback={<></>}>
<Editor currentPage={pageId} page={pageId} listedPageItems={listedPageItems} />
Expand All @@ -94,7 +93,7 @@ function NotionEditor() {
<NewPageModal pageId={query.p} />
) : null}
{query.pm === "s" ? (
<div className='print:hidden print:collapse bg-zinc-200 max-w-[35%] w-[800px] h-[100dvh] overflow-hidden'>
<div className='shrink-0 print:hidden print:collapse bg-zinc-200 max-w-[35vw] w-[800px] h-[100dvh] overflow-hidden'>
<PeekPageBlock pageId={query.p} />
</div>
) : null}
Expand Down

0 comments on commit c6d78c3

Please sign in to comment.