From c10a5eeaca83c2e3c1130739fe65d9d51691fb69 Mon Sep 17 00:00:00 2001 From: Blinko Date: Sat, 30 Nov 2024 23:16:38 +0800 Subject: [PATCH] fix: layout height style --- package.json | 2 +- src/components/BlinkoEditor/index.tsx | 9 ++--- src/components/Common/Editor/index.tsx | 6 ++- src/components/Layout/index.tsx | 4 +- src/pages/index.tsx | 12 +++--- src/styles/globals.css | 52 +++++++++++++++----------- 6 files changed, 50 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 0fc96a3..3e88fe5 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "db-seed": "prisma db seed", "build-seed": "tsc -p tsconfig.seed.json", "db-reset": "prisma migrate dev reset", - "dev": "next dev -p 1112", + "dev": "next dev -p 1111", "dev:https": "ngrok http 1111", "build": "set NODE_ENV=production & next build", "vercel-build": "prisma generate && prisma migrate deploy && prisma db seed && next build", diff --git a/src/components/BlinkoEditor/index.tsx b/src/components/BlinkoEditor/index.tsx index 5cc3e70..71dc184 100644 --- a/src/components/BlinkoEditor/index.tsx +++ b/src/components/BlinkoEditor/index.tsx @@ -28,13 +28,12 @@ export const BlinkoEditor = observer(({ mode, onSended, onHeightChange }: IProps originFiles={!isCreateMode ? blinko.curSelectedNote?.attachments : []} content={isCreateMode ? blinko.noteContent! : blinko.curSelectedNote?.content!} onChange={v => { - if (v == '') { - onHeightChange?.(editorRef.current?.clientHeight < 90 ? editorRef.current?.clientHeight : 90) - } else { - onHeightChange?.(editorRef.current?.clientHeight ?? 90) - } + onHeightChange?.(editorRef.current?.clientHeight ?? 75) isCreateMode ? (blinko.noteContent = v) : (blinko.curSelectedNote!.content = v) }} + onHeightChange={() => { + onHeightChange?.(editorRef.current?.clientHeight ?? 75) + }} isSendLoading={blinko.upsertNote.loading.value} bottomSlot={ isCreateMode ?
Drop to upload files
: diff --git a/src/components/Common/Editor/index.tsx b/src/components/Common/Editor/index.tsx index 4916214..8d17271 100644 --- a/src/components/Common/Editor/index.tsx +++ b/src/components/Common/Editor/index.tsx @@ -39,6 +39,7 @@ type IProps = { mode: 'create' | 'edit', content: string, onChange?: (content: string) => void, + onHeightChange?: () => void, onSend?: (args: OnSendContentType) => Promise, isSendLoading?: boolean, bottomSlot?: ReactElement, @@ -84,7 +85,7 @@ export const handleEditorKeyEvents = () => { }) } -const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode }: IProps) => { +const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode, onHeightChange }: IProps) => { content = ProcessCodeBlocks(content) const [canSend, setCanSend] = useState(false) const [isWriting, setIsWriting] = useState(false) @@ -375,6 +376,9 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, onChange?.('') store.files = [] } + }} + onKeyDown={e => { + onHeightChange?.() }}> { diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index f445e2b..4949a15 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -209,8 +209,8 @@ export const CommonLayout = observer(({ {/* backdrop */} - { }} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container"> -
+ {}} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container"> +
{children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6a1fe96..08902c8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -12,14 +12,15 @@ import { ScrollArea } from '@/components/Common/ScrollArea'; import { BlinkoCard } from '@/components/BlinkoCard'; import { BaseStore } from '@/store/baseStore'; import Webcam from "react-webcam"; +import { useMediaQuery } from 'usehooks-ts'; const Home = observer(() => { const { t } = useTranslation(); + const isPc = useMediaQuery('(min-width: 768px)') const blinko = RootStore.Get(BlinkoStore) blinko.useQuery(useRouter()) - const store = RootStore.Local(() => ({ - editorHeight: 75, + editorHeight: 65, get showEditor() { return !blinko.noteListFilterConfig.isArchived }, @@ -30,9 +31,10 @@ const Home = observer(() => { return (
- {store.showEditor &&
- store.editorHeight = height} /> + { + store.editorHeight = height + }} />
}
@@ -47,7 +49,7 @@ const Home = observer(() => { { !blinko.noteList.isEmpty && blinko.onBottom()} - style={{ height: store.showEditor ? `calc(100vh - ${100 + store.editorHeight}px)` : '100vh' }} + style={{ height: store.showEditor ? `calc(100% - ${(isPc ? 60 : 0) + store.editorHeight}px)` : '100%' }} className={`px-2 mt-0 md:mt-6 md:px-6 w-full h-full transition-all scroll-area`}>