From cd7000da705a2cf693190464f1087a9f7fb953f4 Mon Sep 17 00:00:00 2001 From: STEVEN Date: Sun, 19 Jun 2022 11:32:49 +0800 Subject: [PATCH] feat: responsive view (#75) * chore: add license * feat: mobile view --- LICENSE | 21 ++++++++++ web/package.json | 3 +- web/src/components/MemoCardDialog.tsx | 16 ++++---- web/src/components/MemoEditor.tsx | 2 +- web/src/components/MemosHeader.tsx | 14 +++++-- web/src/components/SettingDialog.tsx | 40 ++++++++++--------- web/src/components/Sidebar.tsx | 15 +++++++ web/src/helpers/api.ts | 2 + web/src/less/app.less | 2 - web/src/less/global.less | 29 +------------- web/src/less/home.less | 20 ++++++---- web/src/less/memo-card-dialog.less | 8 ++-- web/src/less/memo-trash-dialog.less | 3 +- web/src/less/memos-header.less | 16 ++++---- web/src/less/menu-btns-popup.less | 12 +----- web/src/less/mixin.less | 4 -- web/src/less/search-bar.less | 3 +- web/src/less/setting-dialog.less | 25 +++++++----- web/src/less/settings/my-account-section.less | 6 ++- web/src/less/siderbar.less | 15 ++++++- web/src/less/signin.less | 2 +- web/src/pages/Home.tsx | 8 ++-- web/tsconfig.json | 2 +- 23 files changed, 149 insertions(+), 119 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..8b929a44 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Memos + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/web/package.json b/web/package.json index a61a4632..c1635893 100644 --- a/web/package.json +++ b/web/package.json @@ -33,6 +33,5 @@ "tailwindcss": "^3.0.18", "typescript": "^4.3.2", "vite": "^2.9.0" - }, - "license": "MIT" + } } diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx index de035c20..4d844408 100644 --- a/web/src/components/MemoCardDialog.tsx +++ b/web/src/components/MemoCardDialog.tsx @@ -150,11 +150,11 @@ const MemoCardDialog: React.FC = (props: Props) => { {linkMemos.length > 0 ? (

{linkMemos.length} related MEMO

- {linkMemos.map((m) => { - const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " "); + {linkMemos.map((memo, index) => { + const rawtext = parseHtmlToRawText(formatMemoContent(memo.content)).replaceAll("\n", " "); return ( -
handleLinkedMemoClick(m)}> - {m.dateStr} +
handleLinkedMemoClick(memo)}> + {memo.dateStr} {rawtext}
); @@ -164,11 +164,11 @@ const MemoCardDialog: React.FC = (props: Props) => { {linkedMemos.length > 0 ? (

{linkedMemos.length} linked MEMO

- {linkedMemos.map((m) => { - const rawtext = parseHtmlToRawText(formatMemoContent(m.content)).replaceAll("\n", " "); + {linkedMemos.map((memo, index) => { + const rawtext = parseHtmlToRawText(formatMemoContent(memo.content)).replaceAll("\n", " "); return ( -
handleLinkedMemoClick(m)}> - {m.dateStr} +
handleLinkedMemoClick(memo)}> + {memo.dateStr} {rawtext}
); diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 5d138bde..1e89d8f7 100644 --- a/web/src/components/MemoEditor.tsx +++ b/web/src/components/MemoEditor.tsx @@ -294,7 +294,7 @@ const MemoEditor: React.FC = () => { />
0 ? "" : "hidden"}`} + className={`tag-list ${isTagSeletorShown && tags.length > 0 ? "" : "!hidden"}`} onClick={handleTagSeletorClick} > {tags.map((t) => { diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index 10e3efb6..6d6e6683 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -1,7 +1,8 @@ import { useCallback, useEffect, useState } from "react"; +import { memoService, shortcutService } from "../services"; import { useAppSelector } from "../store"; import SearchBar from "./SearchBar"; -import { memoService, shortcutService } from "../services"; +import { toggleSiderbar } from "./Sidebar"; import "../less/memos-header.less"; let prevRequestTimestamp = Date.now(); @@ -25,7 +26,7 @@ const MemosHeader: React.FC = () => { } }, [query, shortcuts]); - const handleMemoTextClick = useCallback(() => { + const handleTitleTextClick = useCallback(() => { const now = Date.now(); if (now - prevRequestTimestamp > 10 * 1000) { prevRequestTimestamp = now; @@ -37,8 +38,13 @@ const MemosHeader: React.FC = () => { return (
-
- {titleText} +
+
+ +
+ + {titleText} +
diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx index 9168d07a..de969fc3 100644 --- a/web/src/components/SettingDialog.tsx +++ b/web/src/components/SettingDialog.tsx @@ -34,27 +34,31 @@ const SettingDialog: React.FC = (props: Props) => {
Basic - handleSectionSelectorItemClick("my-account")} - className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`} - > - My account - - handleSectionSelectorItemClick("preferences")} - className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`} - > - Preferences - +
+ handleSectionSelectorItemClick("my-account")} + className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`} + > + My account + + handleSectionSelectorItemClick("preferences")} + className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`} + > + Preferences + +
{user?.role === "OWNER" ? ( <> Admin - handleSectionSelectorItemClick("member")} - className={`section-item ${state.selectedSection === "member" ? "selected" : ""}`} - > - Member - +
+ handleSectionSelectorItemClick("member")} + className={`section-item ${state.selectedSection === "member" ? "selected" : ""}`} + > + Member + +
) : null}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index ab90337a..c865fb0f 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -27,6 +27,11 @@ const Sidebar: React.FC = () => { return (