diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx index b58405f8..7fe606a6 100644 --- a/web/src/components/CreateShortcutDialog.tsx +++ b/web/src/components/CreateShortcutDialog.tsx @@ -89,7 +89,7 @@ const CreateShortcutDialog: React.FC = (props: Props) => { <>

- 🔖 + 🎯 {shortcutId ? "Edit Shortcut" : "Create Shortcut"}

- Filter + Filters
{filters.map((f, index) => { return ( diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx index 514ec4e7..feeb281b 100644 --- a/web/src/components/Editor/Editor.tsx +++ b/web/src/components/Editor/Editor.tsx @@ -44,6 +44,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef { + if (editorRef.current) { + editorRef.current.style.height = "auto"; + editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px"; + } + }, [editorRef.current?.value]); + useImperativeHandle( ref, () => ({ @@ -60,11 +67,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef { if (editorRef.current) { editorRef.current.value = text; handleContentChangeCallback(editorRef.current.value); + refresh(); } }, getContent: (): string => { diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx index a1afdbe5..c1ab0084 100644 --- a/web/src/components/MemoFilter.tsx +++ b/web/src/components/MemoFilter.tsx @@ -25,7 +25,7 @@ const MemoFilter: React.FC = () => { locationService.setMemoShortcut(""); }} > - 🔖 {queryFilter?.title} + 🎯 {queryFilter?.title}
= (props: ShortcutCont await shortcutService.pinShortcut(shortcut.id); shortcutService.editShortcut({ ...shortcut, - rowStatus: "NORMAL", + rowStatus: "ARCHIVED", }); } } catch (error) { @@ -127,7 +127,7 @@ const ShortcutContainer: React.FC = (props: ShortcutCont <>
- # + {/* # */} {shortcut.title}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index b6c09453..6e422fa6 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -6,6 +6,7 @@ import showSettingDialog from "./SettingDialog"; import showMemoTrashDialog from "./MemoTrashDialog"; import UserBanner from "./UserBanner"; import ShortcutList from "./ShortcutList"; +import UsageHeatMap from "./UsageHeatMap"; import "../less/siderbar.less"; interface Props {} @@ -28,15 +29,6 @@ const Sidebar: React.FC = () => { return ( ); }; diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx index d1687681..7dd7b861 100644 --- a/web/src/components/UsageHeatMap.tsx +++ b/web/src/components/UsageHeatMap.tsx @@ -30,7 +30,7 @@ interface Props {} const UsageHeatMap: React.FC = () => { const todayTimeStamp = utils.getDateStampByDate(Date.now()); - const todayDay = new Date(todayTimeStamp).getDay() || 7; + const todayDay = new Date(todayTimeStamp).getDay() + 1; const nullCell = new Array(7 - todayDay).fill(0); const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay; const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP; @@ -62,9 +62,8 @@ const UsageHeatMap: React.FC = () => { } const targetEl = event.target as HTMLElement; - popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px"; - const topValue = targetEl.offsetTop; - popupRef.current.style.top = topValue + "px"; + popupRef.current.style.left = targetEl.offsetLeft + "px"; + popupRef.current.style.top = targetEl.offsetTop - 4 + "px"; }, []); const handleUsageStatItemMouseLeave = useCallback(() => { @@ -87,16 +86,15 @@ const UsageHeatMap: React.FC = () => { return (
- Mon - - Wed - - Fri - Sun + + Tue + + Thu + + Sat
- {/* popup */}
{popupStat?.count} memos on {new Date(popupStat?.timestamp as number).toDateString()}
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less index 57c055b3..b24d4bbe 100644 --- a/web/src/less/common/selector.less +++ b/web/src/less/common/selector.less @@ -7,15 +7,7 @@ > .current-value-container { .flex(row, space-between, center); - width: 100%; - height: 100%; - border: 1px solid @bg-gray; - border-radius: 4px; - padding: 0 8px; - padding-right: 4px; - background-color: white; - cursor: pointer; - user-select: none; + @apply w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none; &:hover, &.active { @@ -55,7 +47,7 @@ min-width: calc(100% + 16px); max-height: 256px; padding: 4px; - overflow: auto; + overflow-y: auto; margin-top: 2px; margin-left: -8px; z-index: 1; @@ -66,18 +58,7 @@ > .item-container { .flex(column, flex-start, flex-start); - width: 100%; - padding-left: 12px; - line-height: 30px; - white-space: nowrap; - font-size: 13px; - cursor: pointer; - border-radius: 4px; - user-select: none; - - &:hover { - background-color: @bg-whitegray; - } + @apply w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100; &.selected { color: @text-green; diff --git a/web/src/less/editor.less b/web/src/less/editor.less index 5b862979..576aee2b 100644 --- a/web/src/less/editor.less +++ b/web/src/less/editor.less @@ -2,10 +2,12 @@ .common-editor-wrapper { .flex(column, flex-start, flex-start); - @apply relative w-full h-full bg-white grow; + @apply relative w-full h-auto bg-white; > .common-editor-inputer { - @apply w-full h-full mt-1 mb-4 grow; + @apply w-full h-full mt-1 mb-1; + min-height: 40px; + max-height: 300px; .pretty-scroll-bar(2px, 0); font-size: 15px; line-height: 24px; diff --git a/web/src/less/home.less b/web/src/less/home.less index cea4e47a..4e6a22ac 100644 --- a/web/src/less/home.less +++ b/web/src/less/home.less @@ -5,6 +5,6 @@ } #page-wrapper { - @apply w-full h-full m-auto grid; - grid-template-columns: 256px 1fr; + @apply w-full h-full m-auto grid max-w-4xl mx-auto; + grid-template-columns: min-content 1fr; } diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index dbf30c7a..af800c16 100644 --- a/web/src/less/memo-editor.less +++ b/web/src/less/memo-editor.less @@ -1,7 +1,7 @@ @import "./mixin.less"; .memo-editor-container { - @apply relative w-full h-96 max-h-full flex flex-col justify-start items-start grow bg-white p-4 rounded-lg border-2 border-gray-200; + @apply relative w-full max-h-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200; &.edit-ing { border-color: @text-blue; diff --git a/web/src/less/memo-list.less b/web/src/less/memo-list.less index a6d7899c..ad331caa 100644 --- a/web/src/less/memo-list.less +++ b/web/src/less/memo-list.less @@ -28,6 +28,6 @@ } &.completed { - padding-bottom: 80px; + @apply pb-28; } } diff --git a/web/src/less/memo.less b/web/src/less/memo.less index d4ee60c2..77a6e7bb 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -3,7 +3,7 @@ .memo-wrapper { .flex(column, flex-start, flex-start); - @apply w-full max-w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200; + @apply w-full max-w-full p-4 px-6 mt-2 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200; &.deleted-memo { @apply border-gray-200; diff --git a/web/src/less/memos.less b/web/src/less/memos.less index 88ec6f2a..216a3bb2 100644 --- a/web/src/less/memos.less +++ b/web/src/less/memos.less @@ -2,16 +2,5 @@ @import "./memos-header.less"; .memos-wrapper { - @apply w-full h-full overflow-x-hidden grid; - grid-template-columns: 384px 1fr; - - > .memo-editor-wrapper { - @apply w-full h-full py-16 px-8 bg-white; - } - - > .memo-list-wrapper { - @apply w-full h-full overflow-y-auto px-16 grid; - grid-auto-rows: min-content; - grid-auto-flow: dense; - } + @apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10; } diff --git a/web/src/less/menu-btns-popup.less b/web/src/less/menu-btns-popup.less index 4aa12724..ac4f96fc 100644 --- a/web/src/less/menu-btns-popup.less +++ b/web/src/less/menu-btns-popup.less @@ -13,7 +13,7 @@ @apply w-full py-2 px-3 text-sm rounded text-left; > .icon { - @apply block w-6 text-center mr-2 text-sm; + @apply block w-6 text-center mr-2 text-base; } &:hover { diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less index b8d515e8..d2e55fbd 100644 --- a/web/src/less/shortcut-list.less +++ b/web/src/less/shortcut-list.less @@ -101,7 +101,7 @@ > .action-btns-wrapper { .flex(column, flex-start, flex-start); - @apply absolute right-0 w-auto h-auto p-2 translate-y-14 hidden z-10; + @apply absolute right-0 w-auto h-auto px-4 pt-3 translate-y-16 hidden z-10; > .action-btns-container { .flex(column, flex-start, flex-start); diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less index 7109cdbc..5223c82a 100644 --- a/web/src/less/siderbar.less +++ b/web/src/less/siderbar.less @@ -2,7 +2,7 @@ .sidebar-wrapper { .flex(column, flex-start, flex-start); - @apply w-64 h-full py-4 px-2 overflow-x-hidden overflow-y-auto shrink-0; + @apply w-64 h-full py-4 pl-2 overflow-x-hidden overflow-y-auto; .hide-scroll-bar(); > .action-btns-container { @@ -19,7 +19,7 @@ > .status-text-container { .flex(row, space-between, flex-start); - @apply w-full px-10 select-none shrink-0; + @apply w-full px-6 select-none shrink-0 pb-4; > .status-text { .flex(column, flex-start, flex-start); diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less index 2fc5abb9..64db16e9 100644 --- a/web/src/less/usage-heat-map.less +++ b/web/src/less/usage-heat-map.less @@ -9,32 +9,25 @@ .flex(row, flex-start, center); @apply w-full h-32 flex-wrap pr-6 pb-3; - &:hover { - > .day-tip-text-container { - @apply visible; - } - } - > .day-tip-text-container { - .flex(column, space-between, center); - @apply w-6 h-full flex-wrap invisible; + @apply w-6 h-full grid grid-rows-7; > .tip-text { - @apply pr-1 w-full text-right font-mono text-gray-400; + @apply pr-1 w-full h-full text-right font-mono text-gray-400; font-size: 10px; } } > .usage-heat-map { - @apply w-48 h-full grid; - grid-template-rows: repeat(7, 1fr); + @apply h-full grid grid-rows-7; + width: 200px; grid-template-columns: repeat(12, 1fr); grid-auto-flow: column; > .stat-container { @apply block rounded-sm; - width: 13px; - height: 13px; + width: 14px; + height: 14px; background-color: @bg-lightgray; margin-bottom: 2px; @@ -77,7 +70,7 @@ content: ""; position: absolute; bottom: -4px; - left: calc(50% - 6px); + left: calc(50% - 5px); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(0, 0, 0, 0.8); diff --git a/web/src/pages/Memos.tsx b/web/src/pages/Memos.tsx index 2f041e1c..1de2abeb 100644 --- a/web/src/pages/Memos.tsx +++ b/web/src/pages/Memos.tsx @@ -7,14 +7,10 @@ import "../less/memos.less"; function Memos() { return (
-
- -
-
- - - -
+ + + +
); } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 5ad1db0e..da318b4d 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -24,6 +24,9 @@ module.exports = { 100: "100", 1000: "1000", }, + gridTemplateRows: { + 7: "repeat(7, minmax(0, 1fr))", + }, }, }, plugins: [],