From d3bd3ddab03345083de159433cdaf03f074d1c85 Mon Sep 17 00:00:00 2001 From: boojack Date: Thu, 24 Aug 2023 21:52:16 +0800 Subject: [PATCH] chore: update some detail styles (#2168) * chore: update some detail styls * chore: update --- README.md | 1 + web/src/components/Dialog/CommonDialog.tsx | 20 +- web/src/components/Header.tsx | 191 +++++++----------- web/src/components/Memo.tsx | 24 +-- web/src/components/Settings/MemberSection.tsx | 15 +- .../components/Settings/MyAccountSection.tsx | 2 +- web/src/components/UserBanner.tsx | 2 +- web/src/helpers/datetime.ts | 5 - web/src/helpers/utils.ts | 28 --- web/src/pages/Archived.tsx | 4 - web/src/pages/DailyReview.tsx | 4 +- web/src/pages/Explore.tsx | 9 +- 12 files changed, 98 insertions(+), 207 deletions(-) diff --git a/README.md b/README.md index 69436f74..5cd1cd59 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ Discuss in Discord / GitHub stars + Docker pull Discord

diff --git a/web/src/components/Dialog/CommonDialog.tsx b/web/src/components/Dialog/CommonDialog.tsx index 4bd9aba8..f0cc40ad 100644 --- a/web/src/components/Dialog/CommonDialog.tsx +++ b/web/src/components/Dialog/CommonDialog.tsx @@ -1,14 +1,14 @@ +import { Button } from "@mui/joy"; +import { DefaultColorPalette } from "@mui/joy/styles/types"; import { useTranslate } from "@/utils/i18n"; import Icon from "../Icon"; import { generateDialog } from "./BaseDialog"; import "@/less/common-dialog.less"; -type DialogStyle = "info" | "warning"; - interface Props extends DialogProps { title: string; content: string; - style?: DialogStyle; + style?: DefaultColorPalette; closeBtnText?: string; confirmBtnText?: string; onClose?: () => void; @@ -18,7 +18,7 @@ interface Props extends DialogProps { const defaultProps = { title: "", content: "", - style: "info", + style: "neutral", closeBtnText: "common.close", confirmBtnText: "common.confirm", onClose: () => null, @@ -54,13 +54,13 @@ const CommonDialog: React.FC = (props: Props) => {

{content}

-
- +
+ +
@@ -71,7 +71,7 @@ interface CommonDialogProps { title: string; content: string; className?: string; - style?: DialogStyle; + style?: DefaultColorPalette; dialogName: string; closeBtnText?: string; confirmBtnText?: string; diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index a271efa6..f65d2857 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -1,17 +1,22 @@ import classNames from "classnames"; import { useEffect } from "react"; import { NavLink, useLocation } from "react-router-dom"; -import { useGlobalStore, useLayoutStore, useUserStore } from "@/store/module"; +import { useLayoutStore, useUserStore } from "@/store/module"; import { useTranslate } from "@/utils/i18n"; import { resolution } from "@/utils/layout"; import Icon from "./Icon"; -import UpgradeVersionView from "./UpgradeVersionBanner"; import UserBanner from "./UserBanner"; +interface NavLinkItem { + id: string; + path: string; + title: string; + icon: React.ReactNode; +} + const Header = () => { const t = useTranslate(); const location = useLocation(); - const globalStore = useGlobalStore(); const userStore = useUserStore(); const layoutStore = useLayoutStore(); const showHeader = layoutStore.state.showHeader; @@ -29,6 +34,53 @@ const Header = () => { handleWindowResize(); }, [location]); + const homeNavLink: NavLinkItem = { + id: "header-home", + path: "/", + title: t("common.home"), + icon: , + }; + const dailyReviewNavLink: NavLinkItem = { + id: "header-daily-review", + path: "/review", + title: t("daily-review.title"), + icon: , + }; + const exploreNavLink: NavLinkItem = { + id: "header-explore", + path: "/explore", + title: t("common.explore"), + icon: , + }; + const resourcesNavLink: NavLinkItem = { + id: "header-resources", + path: "/resources", + title: t("common.resources"), + icon: , + }; + const archivedNavLink: NavLinkItem = { + id: "header-archived", + path: "/archived", + title: t("common.archived"), + icon: , + }; + const settingNavLink: NavLinkItem = { + id: "header-setting", + path: "/setting", + title: t("common.settings"), + icon: , + }; + const authNavLink: NavLinkItem = { + id: "header-auth", + path: "/auth", + title: t("common.sign-in"), + icon: , + }; + + const navLinks: NavLinkItem[] = !isVisitorMode + ? [homeNavLink, dailyReviewNavLink, exploreNavLink, resourcesNavLink, archivedNavLink, settingNavLink] + : [exploreNavLink, authNavLink]; + return (
{ >
- {!isVisitorMode && ( - <> - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.home")} - - - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("daily-review.title")} - - - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.resources")} - - - - )} - {!globalStore.getDisablePublicMemos() && ( - <> - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.explore")} - - - - )} - - {!isVisitorMode && ( - <> - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.archived")} - - - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.settings")} - - - - - )} - {isVisitorMode && ( - <> - - classNames( - "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", - isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" - ) - } - > - <> - {t("common.sign-in")} - - - - )} + {navLinks.map((navLink) => ( + + classNames( + "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700", + isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent" + ) + } + > + <> + {navLink.icon} {navLink.title} + + + ))}
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index fe85f0cb..8a0e9c2c 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -1,4 +1,4 @@ -import { Divider, Tooltip } from "@mui/joy"; +import { Divider } from "@mui/joy"; import { isEqual, uniqWith } from "lodash-es"; import { memo, useEffect, useRef, useState } from "react"; import { toast } from "react-hot-toast"; @@ -31,7 +31,7 @@ interface Props { } const Memo: React.FC = (props: Props) => { - const { memo, showCreator, showFull, showVisibility, showRelatedMemos, lazyRendering } = props; + const { memo, showCreator, showFull, showRelatedMemos, lazyRendering } = props; const { i18n } = useTranslation(); const t = useTranslate(); const filterStore = useFilterStore(); @@ -243,15 +243,6 @@ const Memo: React.FC = (props: Props) => { } }; - const handleMemoVisibilityClick = (visibility: Visibility) => { - const currVisibilityQuery = filterStore.getState().visibility; - if (currVisibilityQuery === visibility) { - filterStore.setMemoVisibilityFilter(undefined); - } else { - filterStore.setMemoVisibilityFilter(visibility); - } - }; - return ( <>
@@ -271,17 +262,6 @@ const Memo: React.FC = (props: Props) => {
- {showVisibility && memo.visibility !== "PRIVATE" && ( - }`)} placement="top"> -
handleMemoVisibilityClick(memo.visibility)}> - {memo.visibility === "PUBLIC" ? ( - - ) : ( - - )} -
- - )} {memo.pinned && } {!readonly && ( <> diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx index 7f02ab3c..645010f4 100644 --- a/web/src/components/Settings/MemberSection.tsx +++ b/web/src/components/Settings/MemberSection.tsx @@ -1,4 +1,4 @@ -import { Button, Input } from "@mui/joy"; +import { Button, Dropdown, Input, Menu, MenuButton } from "@mui/joy"; import React, { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import * as api from "@/helpers/api"; @@ -6,7 +6,7 @@ import { useUserStore } from "@/store/module"; import { useTranslate } from "@/utils/i18n"; import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog"; import { showCommonDialog } from "../Dialog/CommonDialog"; -import Dropdown from "../kit/Dropdown"; +import Icon from "../Icon"; interface State { createUserUsername: string; @@ -163,8 +163,11 @@ const PreferencesSection = () => { {currentUser?.id === user.id ? ( {t("common.yourself")} ) : ( - + + + + <> + )} diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx index e4a1ad80..bf4f211b 100644 --- a/web/src/components/Settings/MyAccountSection.tsx +++ b/web/src/components/Settings/MyAccountSection.tsx @@ -53,7 +53,7 @@ const MyAccountSection = () => {

Open ID

-
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx index 3a2728c9..48866f3d 100644 --- a/web/src/components/UserBanner.tsx +++ b/web/src/components/UserBanner.tsx @@ -38,7 +38,7 @@ const UserBanner = () => { return (
diff --git a/web/src/helpers/datetime.ts b/web/src/helpers/datetime.ts index 99d90658..8904ea4e 100644 --- a/web/src/helpers/datetime.ts +++ b/web/src/helpers/datetime.ts @@ -5,10 +5,6 @@ export function convertToMillis(localSetting: LocalSetting) { return hoursToMillis; } -export function getNowTimeStamp(): number { - return Date.now(); -} - export function getTimeStampByDate(t: Date | number | string): number { if (typeof t === "string") { t = t.replaceAll("-", "/"); @@ -113,7 +109,6 @@ export function getDateString(t?: Date | number | string, locale = i18n.language * - "x months ago" * - "last year" * - "x years ago" - * */ export const getRelativeTimeString = (time: number, locale = i18n.language, formatStyle: "long" | "short" | "narrow" = "long"): string => { const pastTimeMillis = Date.now() - time; diff --git a/web/src/helpers/utils.ts b/web/src/helpers/utils.ts index 629ea0f9..c5982c02 100644 --- a/web/src/helpers/utils.ts +++ b/web/src/helpers/utils.ts @@ -2,21 +2,6 @@ export const isNullorUndefined = (value: any) => { return value === null || value === undefined; }; -export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" { - const appVersion = navigator.userAgent; - let detectedOS: "Windows" | "MacOS" | "Linux" | "Unknown" = "Unknown"; - - if (appVersion.indexOf("Win") != -1) { - detectedOS = "Windows"; - } else if (appVersion.indexOf("Mac") != -1) { - detectedOS = "MacOS"; - } else if (appVersion.indexOf("Linux") != -1) { - detectedOS = "Linux"; - } - - return detectedOS; -} - export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElement) => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; @@ -67,14 +52,6 @@ export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElemen }); }; -export const parseHTMLToRawText = (htmlStr: string): string => { - const tempEl = document.createElement("div"); - tempEl.className = "memo-content-text"; - tempEl.innerHTML = htmlStr; - const text = tempEl.innerText; - return text; -}; - export function absolutifyLink(rel: string): string { const anchor = document.createElement("a"); anchor.setAttribute("href", rel); @@ -107,11 +84,6 @@ export const formatBytes = (bytes: number) => { return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; }; -export const getContentQueryParam = (): string | undefined => { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get("content") ?? undefined; -}; - export const clearContentQueryParam = () => { const urlParams = new URLSearchParams(window.location.search); urlParams.delete("content"); diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index 636824d4..6c5548c5 100644 --- a/web/src/pages/Archived.tsx +++ b/web/src/pages/Archived.tsx @@ -4,7 +4,6 @@ import ArchivedMemo from "@/components/ArchivedMemo"; import Empty from "@/components/Empty"; import MemoFilter from "@/components/MemoFilter"; import MobileHeader from "@/components/MobileHeader"; -import SearchBar from "@/components/SearchBar"; import useLoading from "@/hooks/useLoading"; import { useFilterStore, useMemoStore } from "@/store/module"; import { useTranslate } from "@/utils/i18n"; @@ -40,9 +39,6 @@ const Archived = () => {
-
- -
{loadingState.isLoading ? (
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx index 6a11b903..f9909376 100644 --- a/web/src/pages/DailyReview.tsx +++ b/web/src/pages/DailyReview.tsx @@ -19,15 +19,13 @@ import { findNearestLanguageMatch, useTranslate } from "@/utils/i18n"; const DailyReview = () => { const t = useTranslate(); const memoStore = useMemoStore(); - const memos = memoStore.state.memos; - const userStore = useUserStore(); const { localSetting } = userStore.state.user as User; const [currentDateStamp, setCurrentDateStamp] = useState(getDateStampByDate(getNormalizedDateString())); const [showDatePicker, toggleShowDatePicker] = useToggle(false); const memosElRef = useRef(null); const currentDate = new Date(currentDateStamp); - const dailyMemos = memos + const dailyMemos = memoStore.state.memos .filter((m) => { const displayTimestamp = getTimeStampByDate(m.displayTs); const currentDateStampWithOffset = currentDateStamp + convertToMillis(localSetting); diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index 4c35070e..79520495 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -5,17 +5,15 @@ import Empty from "@/components/Empty"; import Memo from "@/components/Memo"; import MemoFilter from "@/components/MemoFilter"; import MobileHeader from "@/components/MobileHeader"; -import SearchBar from "@/components/SearchBar"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import useLoading from "@/hooks/useLoading"; import { TAG_REG } from "@/labs/marked/parser"; -import { useFilterStore, useGlobalStore, useMemoStore } from "@/store/module"; +import { useFilterStore, useMemoStore } from "@/store/module"; import { useTranslate } from "@/utils/i18n"; const Explore = () => { const t = useTranslate(); const location = useLocation(); - const globalStore = useGlobalStore(); const filterStore = useFilterStore(); const memoStore = useMemoStore(); const filter = filterStore.state; @@ -91,11 +89,6 @@ const Explore = () => { return (
- {globalStore.isDev() && ( -
- -
- )} {!loadingState.isLoading && (