diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx index 593f39dbc..c8785faa4 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 9f8b1b315..02fa74c35 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 8b1483fe0..77e2b6094 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 9fff5f850..302a53ef1 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 8a284e560..524969403 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 51c78688c..4c78afafb 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 683dde656..9cce2af5a 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 59ea5f04b..4838d22c7 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 ba1493cac..b8cd578d3 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 9243c6701..097bde005 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 87c1a9c63..680e23a61 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", },