usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-19 17:12:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: make editor sticky

Browse Source
This commit is contained in:
boojack 2022-07-05 22:48:21 +08:00
parent 0e8d3e6907
commit 2136a954f5
11 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/MemoCardDialog.tsx
View File

@ -35,8 +35,12 @@ const MemoCardDialog: React.FC<Props> = (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: 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,

3
web/src/less/editor.less
View File

@ -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;

12
web/src/less/home.less
View File

@ -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;
}
}
}
}

2
web/src/less/memo.less
View File

@ -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;

11
web/src/less/memos-header.less
View File

@ -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;
}
}

4
web/src/less/preview-image-dialog.less
View File

@ -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;
}
}
}

3
web/src/less/share-memo-image-dialog.less
View File

@ -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 {

2
web/src/less/shortcut-list.less
View File

@ -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;

8
web/src/pages/Home.tsx
View File

@ -37,9 +37,11 @@ function Home() {
<div className="page-container">
<Sidebar />
<main className="memos-wrapper">
<MemosHeader />
<MemoEditor />
<MemoFilter />
<div className="memos-editor-wrapper">
<MemosHeader />
<MemoEditor />
<MemoFilter />
</div>
<MemoList />
</main>
</div>

3
web/src/services/memoService.ts
View File

@ -48,7 +48,8 @@ const memoService = {
getLinkedMemos: async (memoId: MemoId): Promise<Memo[]> => {
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) => {

1
web/tailwind.config.js
View File

@ -19,6 +19,7 @@ module.exports = {
180: "45rem",
},
zIndex: {
1: "1",
100: "100",
1000: "1000",
},