forked from github/plane
pages responsiveness (#4287)
This commit is contained in:
Lakhan Baheti
GitHub
parent
ac4bb1c1b4
commit
4bccbc9804
@ -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,
|
||||
})}
|
||||
|
||||
@ -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
70
web/components/pages/editor/header/mobile-root.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user