github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

pages responsiveness (#4287)

Browse Source
This commit is contained in:
Lakhan Baheti 2024-04-29 00:52:43 +05:30 committed by GitHub
parent ac4bb1c1b4
commit 4bccbc9804
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 119 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/pages/editor/editor-body.tsx
View File

@ -104,12 +104,12 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
</div>
<div
className={cn("h-full w-full pt-5", {
"md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]": !isFullWidth,
"w-[80%]": isFullWidth,
"md:w-[calc(100%-14rem)] xl:w-[calc(100%-18rem-18rem)]": !isFullWidth,
"md:w-[80%]": isFullWidth,
})}
>
<div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
<div className="relative w-full flex-shrink-0 pl-5">
<div className="relative w-full flex-shrink-0 md:pl-5 px-4">
<PageEditorTitle
editorRef={editorRef}
title={pageTitle}
@ -134,7 +134,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
value={swrPageDetails?.description_html ?? "<p></p>"}
ref={editorRef}
containerClassName="p-0 pb-64"
editorClassName="px-10"
editorClassName="lg:px-10 pl-8"
onChange={(_description_json, description_html) => {
setIsSubmitting("submitting");
setShowAlert(true);
@ -154,7 +154,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
initialValue={pageDescription}
handleEditorReady={handleReadOnlyEditorReady}
containerClassName="p-0 pb-64 border-none"
editorClassName="px-10"
editorClassName="lg:px-10 pl-8"
mentionHandler={{
highlights: mentionHighlights,
}}
@ -163,7 +163,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
</div>
</div>
<div
className={cn("hidden lg:block h-full flex-shrink-0", {
className={cn("hidden xl:block flex-shrink-0", {
"w-56 lg:w-72": !isFullWidth,
"w-[10%]": isFullWidth,
})}

1
web/components/pages/editor/header/index.ts
View File

@ -2,4 +2,5 @@ export * from "./extra-options";
export * from "./info-popover";
export * from "./options-dropdown";
export * from "./root";
export * from "./mobile-root";
export * from "./toolbar";

70
web/components/pages/editor/header/mobile-root.tsx Normal file
View File

@ -0,0 +1,70 @@
import { observer } from "mobx-react";
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
// components
import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
// store
import { IPageStore } from "@/store/pages/page.store";
type Props = {
editorRef: React.RefObject<EditorRefApi>;
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
handleDuplicatePage: () => void;
isSyncing: boolean;
markings: IMarking[];
pageStore: IPageStore;
projectId: string;
sidePeekVisible: boolean;
setSidePeekVisible: (sidePeekState: boolean) => void;
editorReady: boolean;
readOnlyEditorReady: boolean;
};
export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
const {
editorRef,
readOnlyEditorRef,
editorReady,
markings,
readOnlyEditorReady,
handleDuplicatePage,
isSyncing,
pageStore,
projectId,
sidePeekVisible,
setSidePeekVisible,
} = props;
// derived values
const { isContentEditable, view_props } = pageStore;
const isFullWidth = !!view_props?.full_width;
if (!editorRef.current && !readOnlyEditorRef.current) return null;
return (
<>
<div className="flex items-center border-b border-custom-border-200 px-2 py-1">
<div className="flex-shrink-0">
<PageSummaryPopover
editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
isFullWidth={isFullWidth}
markings={markings}
sidePeekVisible={sidePeekVisible}
setSidePeekVisible={setSidePeekVisible}
/>
</div>
<PageExtraOptions
editorRef={editorRef}
handleDuplicatePage={handleDuplicatePage}
isSyncing={isSyncing}
pageStore={pageStore}
projectId={projectId}
readOnlyEditorRef={readOnlyEditorRef}
/>
</div>
<div className="border-b border-custom-border-200 py-1 px-2">
{(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
<PageToolbar editorRef={editorRef?.current} />
)}
</div>
</>
);
});

2
web/components/pages/editor/header/options-dropdown.tsx
View File

@ -148,7 +148,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
return (
<CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
<CustomMenu.MenuItem
className="flex w-full items-center justify-between gap-2"
className="hidden md:flex w-full items-center justify-between gap-2"
onClick={() =>
updateViewProps({
full_width: !view_props?.full_width,

21
web/components/pages/editor/header/root.tsx
View File

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
// components
import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
// helpers
import { cn } from "@/helpers/common.helper";
// store
@ -42,7 +42,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
if (!editorRef.current && !readOnlyEditorRef.current) return null;
return (
<div className="flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
<>
<div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
<div
className={cn("flex-shrink-0", {
"w-56 lg:w-72": !isFullWidth,
@ -69,5 +70,21 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
readOnlyEditorRef={readOnlyEditorRef}
/>
</div>
<div className="md:hidden">
<PageEditorMobileHeaderRoot
editorRef={editorRef}
readOnlyEditorRef={readOnlyEditorRef}
editorReady={editorReady}
readOnlyEditorReady={readOnlyEditorReady}
markings={markings}
handleDuplicatePage={handleDuplicatePage}
isSyncing={isSyncing}
pageStore={pageStore}
projectId={projectId}
sidePeekVisible={sidePeekVisible}
setSidePeekVisible={setSidePeekVisible}
/>
</div>
</>
);
});

2
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -26,7 +26,7 @@ import { NextPageWithLayout } from "@/lib/types";
const PageDetailsPage: NextPageWithLayout = observer(() => {
// states
const [sidePeekVisible, setSidePeekVisible] = useState(true);
const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768 ? true : false);
const [editorReady, setEditorReady] = useState(false);
const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
// refs