Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-25 16:09:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: use new editorSidebar

Browse Source
This commit is contained in:
Abdullah Atta
2023-08-02 13:10:23 +05:00
parent 9d0c11b051
commit a747bafa69
2 changed files with 111 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
apps/web/src/components/editor/index.tsx
View File

@@ -205,90 +205,97 @@ export default function EditorManager({
}, [noteId]);
return (
<Allotment
proportionalLayout={true}
onDragEnd={(sizes) => {
Config.set("editor:panesize", sizes[1]);
}}
>
<Allotment.Pane className="editor-pane">
<Flex
ref={dropRef}
id="editorContainer"
sx={{
position: "relative",
alignSelf: "stretch",
overflow: "hidden",
flex: 1,
flexDirection: "column",
background: "background"
}}
>
{previewSession.current && (
<PreviewModeNotice
{...previewSession.current}
onDiscard={() => openSession(noteId)}
/>
)}
<Editor
nonce={timestamp}
content={() =>
previewSession.current?.content?.data ||
editorstore.get().session?.content?.data
}
onPreviewDocument={(url) => setDocPreview(url)}
onContentChange={() => (lastSavedTime.current = Date.now())}
options={{
readonly: isReadonly || isPreviewSession,
onRequestFocus: () => toggleProperties(false),
onLoadMedia: loadMedia,
focusMode: isFocusMode,
isMobile: isMobile || isTablet
<ScopedThemeProvider scope="editor" sx={{ flex: 1 }}>
<Allotment
proportionalLayout={true}
onDragEnd={(sizes) => {
Config.set("editor:panesize", sizes[1]);
}}
>
<Allotment.Pane className="editor-pane">
<Flex
ref={dropRef}
id="editorContainer"
sx={{
position: "relative",
alignSelf: "stretch",
overflow: "hidden",
flex: 1,
flexDirection: "column",
background: "background"
}}
/>
{arePropertiesVisible && (
<Properties
onOpenPreviewSession={async (session: PreviewSession) => {
previewSession.current = session;
setTimestamp(Date.now());
>
{previewSession.current && (
<PreviewModeNotice
{...previewSession.current}
onDiscard={() => openSession(noteId)}
/>
)}
<Editor
nonce={timestamp}
content={() =>
previewSession.current?.content?.data ||
editorstore.get().session?.content?.data
}
onPreviewDocument={(url) => setDocPreview(url)}
onContentChange={() => (lastSavedTime.current = Date.now())}
options={{
readonly: isReadonly || isPreviewSession,
onRequestFocus: () => toggleProperties(false),
onLoadMedia: loadMedia,
focusMode: isFocusMode,
isMobile: isMobile || isTablet
}}
/>
)}
<DropZone overlayRef={overlayRef} />
</Flex>
</Allotment.Pane>
{docPreview && (
<Allotment.Pane
minSize={450}
preferredSize={Config.get("editor:panesize", 500)}
>
{docPreview.url ? (
<Flex
{arePropertiesVisible && (
<Properties
onOpenPreviewSession={async (session: PreviewSession) => {
previewSession.current = session;
setTimestamp(Date.now());
}}
/>
)}
<DropZone overlayRef={overlayRef} />
</Flex>
</Allotment.Pane>
{docPreview && (
<Allotment.Pane
minSize={450}
preferredSize={Config.get("editor:panesize", 500)}
>
<ScopedThemeProvider
scope="editorSidebar"
id="editorSidebar"
sx={{
display: "flex",
flexDirection: "column",
overflow: "hidden",
borderLeft: "1px solid var(--border)",
height: "100%"
height: "100%",
bg: "background"
}}
>
<Suspense
fallback={<DownloadAttachmentProgress hash={docPreview.hash} />}
>
<PDFPreview
fileUrl={docPreview.url}
hash={docPreview.hash}
onClose={() => setDocPreview(undefined)}
/>
</Suspense>
</Flex>
) : (
<DownloadAttachmentProgress hash={docPreview.hash} />
)}
</Allotment.Pane>
)}
</Allotment>
{docPreview.url ? (
<Suspense
fallback={
<DownloadAttachmentProgress hash={docPreview.hash} />
}
>
<PDFPreview
fileUrl={docPreview.url}
hash={docPreview.hash}
onClose={() => setDocPreview(undefined)}
/>
</Suspense>
) : (
<DownloadAttachmentProgress hash={docPreview.hash} />
)}
</ScopedThemeProvider>
</Allotment.Pane>
)}
</Allotment>
</ScopedThemeProvider>
);
}
@@ -317,7 +324,7 @@ function DownloadAttachmentProgress(props: DownloadAttachmentProgressProps) {
return (
<Flex
sx={{
height: "100%",
flex: 1,
alignItems: "center",
justifyContent: "center",
flexDirection: "column"

52
apps/web/src/components/properties/index.jsx
View File

@@ -48,6 +48,7 @@ import Notebook from "../notebook";
import { getTotalNotes } from "@notesnook/common";
import Reminder from "../reminder";
import { getFormattedDate } from "@notesnook/common";
import { ScopedThemeProvider } from "../theme-provider";
const tools = [
{ key: "pin", property: "pinned", icon: Pin, label: "Pin" },
@@ -149,33 +150,38 @@ function Properties(props) {
if (isFocusMode || !sessionId) return null;
return (
<>
<AnimatedFlex
animate={{
x: 0
}}
transition={{
duration: 0.1,
bounceDamping: 1,
bounceStiffness: 1,
ease: "easeOut"
}}
initial={{ x: 600 }}
<AnimatedFlex
animate={{
x: 0
}}
transition={{
duration: 0.1,
bounceDamping: 1,
bounceStiffness: 1,
ease: "easeOut"
}}
initial={{ x: 600 }}
sx={{
display: "flex",
position: "absolute",
right: 0,
zIndex: 3,
height: "100%",
width: "300px",
borderLeft: "1px solid",
borderLeftColor: "border"
}}
>
<ScopedThemeProvider
scope="editorSidebar"
sx={{
flex: 1,
display: "flex",
position: "absolute",
right: 0,
zIndex: 3,
height: "100%",
width: "300px",
borderLeft: "1px solid",
borderLeftColor: "border",
bg: "background",
overflowY: "hidden",
overflowX: "hidden",
flexDirection: "column"
}}
bg="background"
// px={2}
>
<ScrollContainer>
<Card
@@ -392,8 +398,8 @@ function Properties(props) {
})}
</Card>
</ScrollContainer>
</AnimatedFlex>
</>
</ScopedThemeProvider>
</AnimatedFlex>
);
}
export default React.memo(Properties);