YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update some detail styles (#2168)

Browse Source 
* chore: update some detail styls

* chore: update
This commit is contained in:
boojack
2023-08-24 21:52:16 +08:00
committed by GitHub
parent 6c01e84099
commit d3bd3ddab0
12 changed files with 98 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -10,6 +10,7 @@ Discuss in <a href="https://discord.gg/tfPJa4UmAv">Discord</a> / <a href="https:
<p>
<a href="https://github.com/usememos/memos/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/usememos/memos?logo=github" /></a>
<a href="https://hub.docker.com/r/neosmemo/memos"><img alt="Docker pull" src="https://img.shields.io/docker/pulls/neosmemo/memos.svg"/></a>
<a href="https://discord.gg/tfPJa4UmAv"><img alt="Discord" src="https://img.shields.io/badge/discord-chat-5865f2?logo=discord&logoColor=f5f5f5" /></a>
</p>

20
web/src/components/Dialog/CommonDialog.tsx
View File

@ -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: Props) => {
</div>
<div className="dialog-content-container">
<p className="content-text">{content}</p>
<div className="btns-container">
<span className="btn cancel-btn" onClick={handleCloseBtnClick}>
<div className="mt-4 w-full flex flex-row justify-end items-center gap-2">
<Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
{closeBtnText}
</span>
<span className={`btn confirm-btn ${style}`} onClick={handleConfirmBtnClick}>
</Button>
<Button color={style} onClick={handleConfirmBtnClick}>
{confirmBtnText}
</span>
</Button>
</div>
</div>
</>
@ -71,7 +71,7 @@ interface CommonDialogProps {
title: string;
content: string;
className?: string;
style?: DialogStyle;
style?: DefaultColorPalette;
dialogName: string;
closeBtnText?: string;
confirmBtnText?: string;

191
web/src/components/Header.tsx
View File

@ -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: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />,
};
const dailyReviewNavLink: NavLinkItem = {
id: "header-daily-review",
path: "/review",
title: t("daily-review.title"),
icon: <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" />,
};
const exploreNavLink: NavLinkItem = {
id: "header-explore",
path: "/explore",
title: t("common.explore"),
icon: <Icon.Hash className="mr-3 w-6 h-auto opacity-70" />,
};
const resourcesNavLink: NavLinkItem = {
id: "header-resources",
path: "/resources",
title: t("common.resources"),
icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
};
const archivedNavLink: NavLinkItem = {
id: "header-archived",
path: "/archived",
title: t("common.archived"),
icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />,
};
const settingNavLink: NavLinkItem = {
id: "header-setting",
path: "/setting",
title: t("common.settings"),
icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
};
const authNavLink: NavLinkItem = {
id: "header-auth",
path: "/auth",
title: t("common.sign-in"),
icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
};
const navLinks: NavLinkItem[] = !isVisitorMode
? [homeNavLink, dailyReviewNavLink, exploreNavLink, resourcesNavLink, archivedNavLink, settingNavLink]
: [exploreNavLink, authNavLink];
return (
<div
className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
@ -48,122 +100,23 @@ const Header = () => {
>
<UserBanner />
<div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{!isVisitorMode && (
<>
<NavLink
to="/"
id="header-home"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Home className="mr-3 w-6 h-auto opacity-70" /> {t("common.home")}
</>
</NavLink>
<NavLink
to="/review"
id="header-review"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Calendar className="mr-3 w-6 h-auto opacity-70" /> {t("daily-review.title")}
</>
</NavLink>
<NavLink
to="/resources"
id="header-resources"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" /> {t("common.resources")}
</>
</NavLink>
</>
)}
{!globalStore.getDisablePublicMemos() && (
<>
<NavLink
to="/explore"
id="header-explore"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Hash className="mr-3 w-6 h-auto opacity-70" /> {t("common.explore")}
</>
</NavLink>
</>
)}
{!isVisitorMode && (
<>
<NavLink
to="/archived"
id="header-archived"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Archive className="mr-3 w-6 h-auto opacity-70" /> {t("common.archived")}
</>
</NavLink>
<NavLink
to="/setting"
id="header-setting"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
</>
</NavLink>
<UpgradeVersionView />
</>
)}
{isVisitorMode && (
<>
<NavLink
to="/auth"
id="header-auth"
className={({ isActive }) =>
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"
)
}
>
<>
<Icon.LogIn className="mr-3 w-6 h-auto opacity-70" /> {t("common.sign-in")}
</>
</NavLink>
</>
)}
{navLinks.map((navLink) => (
<NavLink
key={navLink.id}
to={navLink.path}
id={navLink.id}
className={({ isActive }) =>
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}
</>
</NavLink>
))}
</div>
</header>
</div>

24
web/src/components/Memo.tsx
View File

@ -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: 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: Props) => {
}
};
const handleMemoVisibilityClick = (visibility: Visibility) => {
const currVisibilityQuery = filterStore.getState().visibility;
if (currVisibilityQuery === visibility) {
filterStore.setMemoVisibilityFilter(undefined);
} else {
filterStore.setMemoVisibilityFilter(visibility);
}
};
return (
<>
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
@ -271,17 +262,6 @@ const Memo: React.FC<Props> = (props: Props) => {
</Link>
</div>
<div className="btns-container space-x-2">
{showVisibility && memo.visibility !== "PRIVATE" && (
<Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase() as Lowercase<typeof memo.visibility>}`)} placement="top">
<div onClick={() => handleMemoVisibilityClick(memo.visibility)}>
{memo.visibility === "PUBLIC" ? (
<Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" />
) : (
<Icon.Users className="w-4 h-auto cursor-pointer rounded text-gray-500 dark:text-gray-400" />
)}
</div>
</Tooltip>
)}
{memo.pinned && <Icon.Bookmark className="w-4 h-auto rounded text-green-600" />}
{!readonly && (
<>

15
web/src/components/Settings/MemberSection.tsx
View File

@ -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 ? (
<span>{t("common.yourself")}</span>
) : (
<Dropdown
actions={
<Dropdown>
<MenuButton size="sm">
<Icon.MoreVertical className="w-4 h-auto" />
</MenuButton>
<Menu>
<>
<button
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
@ -196,8 +199,8 @@ const PreferencesSection = () => {
</>
)}
</>
}
/>
</Menu>
</Dropdown>
)}
</td>
</tr>

2
web/src/components/Settings/MyAccountSection.tsx
View File

@ -53,7 +53,7 @@ const MyAccountSection = () => {
<p className="title-text">Open ID</p>
<div className="w-full flex flex-row justify-start items-center">
<Input className="grow mr-2" value={user.openId} readOnly />
<Button className="shrink-0" color="warning" onClick={handleResetOpenIdBtnClick}>
<Button className="shrink-0" color="neutral" variant="outlined" onClick={handleResetOpenIdBtnClick}>
<Icon.RefreshCw className="h-4 w-4" />
</Button>
</div>

2
web/src/components/UserBanner.tsx
View File

@ -38,7 +38,7 @@ const UserBanner = () => {
return (
<div className="flex flex-row justify-between items-center relative w-full h-auto px-2 flex-nowrap shrink-0">
<Dropdown
className="w-full"
className="w-auto"
trigger={
<div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<UserAvatar avatarUrl={user?.avatarUrl} />

5
web/src/helpers/datetime.ts
View File

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

28
web/src/helpers/utils.ts
View File

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

4
web/src/pages/Archived.tsx
View File

@ -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 = () => {
<section className="w-full min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="archived-memo-page">
<div className="mb-2 mt-2 w-full">
<SearchBar />
</div>
<MemoFilter />
{loadingState.isLoading ? (
<div className="tip-text-container">

4
web/src/pages/DailyReview.tsx
View File

@ -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<HTMLDivElement>(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);

9
web/src/pages/Explore.tsx
View File

@ -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 (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
{globalStore.isDev() && (
<div className="mb-4 mt-2 w-full">
<SearchBar />
</div>
)}
{!loadingState.isLoading && (
<main className="relative w-full h-auto flex flex-col justify-start items-start">
<MemoFilter />