thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: pages table of content drop down close on click and app sidebar expansion by default on big screens (#3629)

Browse Source
This commit is contained in:
Ramesh Kumar Chandra 2024-02-12 19:11:56 +05:30 committed by GitHub
parent 042ed04a03
commit 41a9dc3603
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/editor/document-editor/src/ui/components/content-browser.tsx
View File

@ -6,10 +6,16 @@ import { scrollSummary } from "src/utils/editor-summary-utils";
interface ContentBrowserProps { interface ContentBrowserProps {
editor: Editor; editor: Editor;
markings: IMarking[]; markings: IMarking[];
setSidePeekVisible?: (sidePeekState: boolean) => void;
} }
export const ContentBrowser = (props: ContentBrowserProps) => { export const ContentBrowser = (props: ContentBrowserProps) => {
const { editor, markings } = props; const { editor, markings, setSidePeekVisible } = props;
const handleOnClick = (marking: IMarking) => {
scrollSummary(editor, marking);
if (setSidePeekVisible) setSidePeekVisible(false);
}
return ( return (
<div className="flex h-full flex-col overflow-hidden"> <div className="flex h-full flex-col overflow-hidden">
@ -18,11 +24,11 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
{markings.length !== 0 ? ( {markings.length !== 0 ? (
markings.map((marking) => markings.map((marking) =>
marking.level === 1 ? ( marking.level === 1 ? (
<HeadingComp onClick={() => scrollSummary(editor, marking)} heading={marking.text} /> <HeadingComp onClick={() => handleOnClick(marking)} heading={marking.text} />
) : marking.level === 2 ? ( ) : marking.level === 2 ? (
<SubheadingComp onClick={() => scrollSummary(editor, marking)} subHeading={marking.text} /> <SubheadingComp onClick={() => handleOnClick(marking)} subHeading={marking.text} />
) : ( ) : (
<HeadingThreeComp heading={marking.text} onClick={() => scrollSummary(editor, marking)} /> <HeadingThreeComp heading={marking.text} onClick={() => handleOnClick(marking)} />
) )
) )
) : ( ) : (

5
packages/editor/document-editor/src/ui/components/summary-popover.tsx
View File

@ -33,8 +33,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
<button <button
type="button" type="button"
ref={setReferenceElement} ref={setReferenceElement}
className={`grid h-7 w-7 place-items-center rounded ${ className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
}`} }`}
onClick={() => setSidePeekVisible(!sidePeekVisible)} onClick={() => setSidePeekVisible(!sidePeekVisible)}
> >
@ -48,7 +47,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
style={summaryPopoverStyles.popper} style={summaryPopoverStyles.popper}
{...summaryPopoverAttributes.popper} {...summaryPopoverAttributes.popper}
> >
<ContentBrowser editor={editor} markings={markings} /> <ContentBrowser setSidePeekVisible={setSidePeekVisible} editor={editor} markings={markings} />
</div> </div>
)} )}
</div> </div>

3
web/layouts/app-layout/sidebar.tsx
View File

@ -32,6 +32,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
themStore.toggleSidebar(true); themStore.toggleSidebar(true);
} }
if (window.innerWidth > 768) {
themStore.toggleSidebar(false);
}
}; };
handleResize(); handleResize();
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);