mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
chore: add mobile header
This commit is contained in:
Steven
@@ -1,53 +0,0 @@
|
||||
import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
|
||||
import { useEffect } from "react";
|
||||
import useNavigateTo from "@/hooks/useNavigateTo";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const FloatingNavButton = () => {
|
||||
const t = useTranslate();
|
||||
const navigateTo = useNavigateTo();
|
||||
|
||||
useEffect(() => {
|
||||
handleScrollToTop();
|
||||
}, []);
|
||||
|
||||
const handleScrollToTop = () => {
|
||||
document.body.querySelector("#root")?.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown>
|
||||
<div className="fixed bottom-6 right-6">
|
||||
<MenuButton
|
||||
slots={{ root: IconButton }}
|
||||
slotProps={{
|
||||
root: { className: "!bg-white dark:!bg-zinc-900 drop-shadow", size: "sm", variant: "outlined", color: "neutral" },
|
||||
}}
|
||||
>
|
||||
<Icon.MoreVertical className="w-4 h-auto" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
<Menu placement="top-end">
|
||||
<button
|
||||
className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
|
||||
onClick={handleScrollToTop}
|
||||
>
|
||||
<Icon.ArrowUpToLine className="w-4 h-auto mr-1 opacity-70" />
|
||||
{t("router.back-to-top")}
|
||||
</button>
|
||||
<button
|
||||
className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
|
||||
onClick={() => navigateTo("/")}
|
||||
>
|
||||
<Icon.Home className="w-4 h-auto mr-1 opacity-70" />
|
||||
{t("router.go-to-home")}
|
||||
</button>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloatingNavButton;
|
||||
@@ -2,10 +2,9 @@ import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import ArchivedMemo from "@/components/ArchivedMemo";
|
||||
import Empty from "@/components/Empty";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { useFilterStore, useMemoStore } from "@/store/module";
|
||||
import { useMemoStore } from "@/store/module";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Archived = () => {
|
||||
@@ -14,16 +13,12 @@ const Archived = () => {
|
||||
const loadingState = useLoading();
|
||||
const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
|
||||
const memos = memoStore.state.memos;
|
||||
const filterStore = useFilterStore();
|
||||
const filter = filterStore.state;
|
||||
const { text: textQuery } = filter;
|
||||
|
||||
useEffect(() => {
|
||||
memoStore
|
||||
.fetchArchivedMemos()
|
||||
.then((result) => {
|
||||
const filteredMemos = textQuery ? result.filter((memo) => memo.content.toLowerCase().includes(textQuery.toLowerCase())) : result;
|
||||
setArchivedMemos(filteredMemos);
|
||||
setArchivedMemos(result);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
@@ -32,12 +27,11 @@ const Archived = () => {
|
||||
.finally(() => {
|
||||
loadingState.setFinish();
|
||||
});
|
||||
}, [memos, textQuery]);
|
||||
}, [memos]);
|
||||
|
||||
return (
|
||||
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8">
|
||||
<MobileHeader />
|
||||
<MemoFilter />
|
||||
{loadingState.isLoading ? (
|
||||
<div className="w-full h-32 flex flex-col justify-center items-center">
|
||||
<p className="opacity-70">{t("memo.fetching-data")}</p>
|
||||
|
||||
@@ -7,6 +7,7 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
|
||||
const Home = () => {
|
||||
const { md } = useResponsiveWidth();
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-center items-start">
|
||||
<div className="w-full px-4 max-w-3xl sm:px-2 sm:pt-4">
|
||||
|
||||
@@ -3,7 +3,6 @@ import copy from "copy-to-clipboard";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import FloatingNavButton from "@/components/FloatingNavButton";
|
||||
import Icon from "@/components/Icon";
|
||||
import Memo from "@/components/Memo";
|
||||
import MemoContentV1 from "@/components/MemoContentV1";
|
||||
@@ -11,6 +10,7 @@ import MemoEditor from "@/components/MemoEditor";
|
||||
import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
|
||||
import MemoRelationListView from "@/components/MemoRelationListView";
|
||||
import MemoResourceListView from "@/components/MemoResourceListView";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import showShareMemoDialog from "@/components/ShareMemoDialog";
|
||||
import UserAvatar from "@/components/UserAvatar";
|
||||
import VisibilityIcon from "@/components/VisibilityIcon";
|
||||
@@ -110,120 +110,117 @@ const MemoDetail = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="@container 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">
|
||||
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
|
||||
{memo.parent && (
|
||||
<div className="w-auto mb-2">
|
||||
<Link
|
||||
className="px-3 py-1 border rounded-full max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
|
||||
to={`/m/${memo.parent.id}`}
|
||||
>
|
||||
<Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
|
||||
<span className="mx-1 opacity-60">#{memo.parent.id}</span>
|
||||
<span className="truncate">{memo.parent.content}</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full mb-2 flex flex-row justify-start items-center">
|
||||
<span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
|
||||
</div>
|
||||
<MemoContentV1 content={memo.content} />
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<MemoRelationListView memo={memo} relationList={referenceRelations} />
|
||||
<div className="w-full mt-4 flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<Tooltip title={"Identifier"} placement="top">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
|
||||
</Tooltip>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Link to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
|
||||
<Tooltip title={"Creator"} placement="top">
|
||||
<span className="flex flex-row justify-start items-center">
|
||||
<UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator?.avatarUrl} />
|
||||
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator?.nickname}</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
{allowEdit && (
|
||||
<>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Select
|
||||
className="w-auto text-sm"
|
||||
variant="plain"
|
||||
value={memo.visibility}
|
||||
startDecorator={<VisibilityIcon visibility={memo.visibility} />}
|
||||
onChange={(_, visibility) => {
|
||||
if (visibility) {
|
||||
handleMemoVisibilityOptionChanged(visibility);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
|
||||
<Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
|
||||
{t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row sm:justify-end items-center">
|
||||
{allowEdit && (
|
||||
<Tooltip title={"Edit"} placement="top">
|
||||
<IconButton size="sm" onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title={"Copy link"} placement="top">
|
||||
<IconButton size="sm" onClick={handleCopyLinkBtnClick}>
|
||||
<Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={"Share"} placement="top">
|
||||
<IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<section className="@container 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">
|
||||
<MobileHeader />
|
||||
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
|
||||
{memo.parent && (
|
||||
<div className="w-auto mb-2">
|
||||
<Link
|
||||
className="px-3 py-1 border rounded-full max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
|
||||
to={`/m/${memo.parent.id}`}
|
||||
>
|
||||
<Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
|
||||
<span className="mx-1 opacity-60">#{memo.parent.id}</span>
|
||||
<span className="truncate">{memo.parent.content}</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full mb-2 flex flex-row justify-start items-center">
|
||||
<span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
|
||||
</div>
|
||||
<div className="pt-8 pb-16 w-full">
|
||||
<div className="relative mx-auto flex-grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
|
||||
{comments.length === 0 ? (
|
||||
<div className="w-full flex flex-col justify-center items-center py-6 mb-2">
|
||||
<Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
|
||||
<p className="text-gray-400 italic text-sm">{t("memo.comment.no-comment")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<MemoContentV1 content={memo.content} />
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<MemoRelationListView memo={memo} relationList={referenceRelations} />
|
||||
<div className="w-full mt-4 flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<Tooltip title={"Identifier"} placement="top">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
|
||||
</Tooltip>
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Link to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
|
||||
<Tooltip title={"Creator"} placement="top">
|
||||
<span className="flex flex-row justify-start items-center">
|
||||
<UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator?.avatarUrl} />
|
||||
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator?.nickname}</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
{allowEdit && (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
|
||||
<Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
|
||||
<span className="text-gray-400 text-sm">{t("memo.comment.self")}</span>
|
||||
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
|
||||
</div>
|
||||
{comments.map((comment) => (
|
||||
<Memo key={comment.id} memo={comment} showCreator />
|
||||
))}
|
||||
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
|
||||
<Select
|
||||
className="w-auto text-sm"
|
||||
variant="plain"
|
||||
value={memo.visibility}
|
||||
startDecorator={<VisibilityIcon visibility={memo.visibility} />}
|
||||
onChange={(_, visibility) => {
|
||||
if (visibility) {
|
||||
handleMemoVisibilityOptionChanged(visibility);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
|
||||
<Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
|
||||
{t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Only show comment editor when user login */}
|
||||
{currentUser && (
|
||||
<MemoEditor
|
||||
key={memo.id}
|
||||
cacheKey={`comment-editor-${memo.id}`}
|
||||
relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
|
||||
onConfirm={handleCommentCreated}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row sm:justify-end items-center">
|
||||
{allowEdit && (
|
||||
<Tooltip title={"Edit"} placement="top">
|
||||
<IconButton size="sm" onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title={"Copy link"} placement="top">
|
||||
<IconButton size="sm" onClick={handleCopyLinkBtnClick}>
|
||||
<Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={"Share"} placement="top">
|
||||
<IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="pt-8 pb-16 w-full">
|
||||
<div className="relative mx-auto flex-grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
|
||||
{comments.length === 0 ? (
|
||||
<div className="w-full flex flex-col justify-center items-center py-6 mb-2">
|
||||
<Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
|
||||
<p className="text-gray-400 italic text-sm">{t("memo.comment.no-comment")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
|
||||
<Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
|
||||
<span className="text-gray-400 text-sm">{t("memo.comment.self")}</span>
|
||||
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
|
||||
</div>
|
||||
{comments.map((comment) => (
|
||||
<Memo key={comment.id} memo={comment} showCreator />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<FloatingNavButton />
|
||||
</>
|
||||
{/* Only show comment editor when user login */}
|
||||
{currentUser && (
|
||||
<MemoEditor
|
||||
key={memo.id}
|
||||
cacheKey={`comment-editor-${memo.id}`}
|
||||
relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
|
||||
onConfirm={handleCommentCreated}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useParams } from "react-router-dom";
|
||||
import FloatingNavButton from "@/components/FloatingNavButton";
|
||||
import MemoList from "@/components/MemoList";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import UserAvatar from "@/components/UserAvatar";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { useUserV1Store } from "@/store/v1";
|
||||
@@ -35,34 +35,31 @@ const UserProfile = () => {
|
||||
}, [params.username]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden">
|
||||
<div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
|
||||
{!loadingState.isLoading &&
|
||||
(user ? (
|
||||
<>
|
||||
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
|
||||
<div className="w-full flex flex-row justify-start items-start">
|
||||
<div className="flex-grow shrink w-full">
|
||||
<div className="w-full flex flex-col justify-start items-center py-8">
|
||||
<UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
|
||||
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
|
||||
</div>
|
||||
<MemoList />
|
||||
<section className="relative top-0 w-full min-h-full overflow-x-hidden">
|
||||
<MobileHeader />
|
||||
<div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
|
||||
{!loadingState.isLoading &&
|
||||
(user ? (
|
||||
<>
|
||||
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
|
||||
<div className="w-full flex flex-row justify-start items-start">
|
||||
<div className="flex-grow shrink w-full">
|
||||
<div className="w-full flex flex-col justify-start items-center py-8">
|
||||
<UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
|
||||
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
|
||||
</div>
|
||||
<MemoList />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>Not found</p>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<FloatingNavButton />
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>Not found</p>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user