From 2136a954f5bb78f0d720edfe24213ecf1ceb6f6f Mon Sep 17 00:00:00 2001 From: boojack Date: Tue, 5 Jul 2022 22:48:21 +0800 Subject: [PATCH] chore: make editor sticky --- web/src/components/MemoCardDialog.tsx | 9 +++++++-- web/src/less/editor.less | 3 +-- web/src/less/home.less | 12 ++++++++---- web/src/less/memo.less | 2 +- web/src/less/memos-header.less | 11 ++++------- web/src/less/preview-image-dialog.less | 4 ++-- web/src/less/share-memo-image-dialog.less | 3 +-- web/src/less/shortcut-list.less | 2 +- web/src/pages/Home.tsx | 8 +++++--- web/src/services/memoService.ts | 3 ++- web/tailwind.config.js | 1 + 11 files changed, 33 insertions(+), 25 deletions(-) diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx index 593f39db..c8785faa 100644 --- a/web/src/components/MemoCardDialog.tsx +++ b/web/src/components/MemoCardDialog.tsx @@ -35,8 +35,12 @@ const MemoCardDialog: React.FC = (props: Props) => { const matchedArr = [...memo.content.matchAll(MEMO_LINK_REG)]; for (const matchRes of matchedArr) { if (matchRes && matchRes.length === 3) { - const id = matchRes[2]; - const memoTemp = memoService.getMemoById(Number(id)); + const id = Number(matchRes[2]); + if (id === memo.id) { + continue; + } + + const memoTemp = memoService.getMemoById(id); if (memoTemp) { linkMemos.push({ ...memoTemp, @@ -51,6 +55,7 @@ const MemoCardDialog: React.FC = (props: Props) => { const linkedMemos = await memoService.getLinkedMemos(memo.id); setLinkedMemos( linkedMemos + .filter((m) => m.rowStatus === "NORMAL" && m.id !== memo.id) .sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs)) .map((m) => ({ ...m, diff --git a/web/src/less/editor.less b/web/src/less/editor.less index 9f8b1b31..02fa74c3 100644 --- a/web/src/less/editor.less +++ b/web/src/less/editor.less @@ -9,7 +9,6 @@ min-height: 40px; max-height: 300px; .pretty-scroll-bar(2px, 0); - z-index: 1; &::placeholder { padding-left: 2px; @@ -49,7 +48,7 @@ } > .tag-list { - @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-10 rounded w-32 max-h-52 overflow-auto bg-black; + @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black; > span { @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700; diff --git a/web/src/less/home.less b/web/src/less/home.less index 8b1483fe..77e2b609 100644 --- a/web/src/less/home.less +++ b/web/src/less/home.less @@ -1,19 +1,23 @@ @import "./mixin.less"; .page-wrapper.home { - @apply relative top-0 w-full h-screen overflow-y-auto; + @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden; background-color: #f6f5f4; > .page-container { - @apply relative w-full min-h-screen mx-auto flex flex-row justify-center items-start; + @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start; - >.sidebar-wrapper{ + > .sidebar-wrapper { @apply flex-shrink-0; } > .memos-wrapper { - @apply relative w-full max-w-2xl min-h-full overflow-x-hidden flex flex-col justify-start items-start px-4 sm:pr-6; + @apply relative w-full max-w-2xl min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; + > .memos-editor-wrapper { + @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-1; + background-color: #f6f5f4; + } } } } diff --git a/web/src/less/memo.less b/web/src/less/memo.less index 9fff5f85..302a53ef 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -23,7 +23,7 @@ @apply flex flex-row justify-end items-center relative flex-shrink-0; > .more-action-btns-wrapper { - @apply hidden flex-col justify-start items-center absolute top-2 -right-4 z-10 flex-nowrap hover:flex p-3; + @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3; > .more-action-btns-container { @apply w-28 h-auto p-1 whitespace-nowrap rounded-lg bg-white; diff --git a/web/src/less/memos-header.less b/web/src/less/memos-header.less index 8a284e56..52496940 100644 --- a/web/src/less/memos-header.less +++ b/web/src/less/memos-header.less @@ -2,15 +2,13 @@ .section-header-container, .memos-header-container { - .flex(row, space-between, center); - @apply w-full h-10 flex-nowrap mt-4 mb-2 shrink-0; + @apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-1; > .title-container { @apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden; > .action-btn { - @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0; - background-color: unset; + @apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent; > .icon-img { @apply w-5 h-auto; @@ -18,12 +16,11 @@ } > .title-text { - @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden; - color: @text-black; + @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700; } } > .btns-container { - .flex(row, flex-end, center); + @apply flex flex-row justify-end items-center; } } diff --git a/web/src/less/preview-image-dialog.less b/web/src/less/preview-image-dialog.less index 51c78688..4c78afaf 100644 --- a/web/src/less/preview-image-dialog.less +++ b/web/src/less/preview-image-dialog.less @@ -20,12 +20,12 @@ } > .img-container { - @apply w-full h-full flex flex-col justify-center items-center; + @apply w-full h-full p-4 flex flex-col justify-center items-center; background-color: unset; .hide-scroll-bar(); > img { - @apply h-auto w-auto max-w-full max-h-full p-4; + @apply h-auto w-auto max-w-full max-h-full shadow; } } } diff --git a/web/src/less/share-memo-image-dialog.less b/web/src/less/share-memo-image-dialog.less index 683dde65..9cce2af5 100644 --- a/web/src/less/share-memo-image-dialog.less +++ b/web/src/less/share-memo-image-dialog.less @@ -40,8 +40,7 @@ @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start; > .memo-shortcut-img { - @apply absolute top-0 left-0 w-full h-auto rounded-b-lg; - z-index: 1; + @apply absolute top-0 left-0 w-full h-auto rounded-b-lg z-10; } > .time-text { diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less index 59ea5f04..4838d22c 100644 --- a/web/src/less/shortcut-list.less +++ b/web/src/less/shortcut-list.less @@ -83,7 +83,7 @@ } > .action-btns-wrapper { - @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-10; + @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-1; > .action-btns-container { @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index ba1493ca..b8cd578d 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -37,9 +37,11 @@ function Home() {
- - - +
+ + + +
diff --git a/web/src/services/memoService.ts b/web/src/services/memoService.ts index 9243c670..097bde00 100644 --- a/web/src/services/memoService.ts +++ b/web/src/services/memoService.ts @@ -48,7 +48,8 @@ const memoService = { getLinkedMemos: async (memoId: MemoId): Promise => { const { memos } = memoService.getState(); - return memos.filter((m) => m.content.includes(`${memoId}`)); + const regex = new RegExp(`[@(.+?)](${memoId})`); + return memos.filter((m) => m.content.match(regex)); }, createMemo: async (memoCreate: MemoCreate) => { diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 87c1a9c6..680e23a6 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -19,6 +19,7 @@ module.exports = { 180: "45rem", }, zIndex: { + 1: "1", 100: "100", 1000: "1000", },