aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: add mobile header

Browse Source
pull/2650/head
Steven 1 year ago
parent 40bc8df63d
commit 4d54463aeb
5 changed files with 130 additions and 194 deletions
Show Stats Download Patch File Download Diff File

53
web/src/components/FloatingNavButton.tsx
Unescape Escape View File

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

12
web/src/pages/Archived.tsx
Unescape Escape View File

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

1
web/src/pages/Home.tsx
Unescape Escape View File

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

209
web/src/pages/MemoDetail.tsx
Unescape Escape View File

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

49
web/src/pages/UserProfile.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save