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

chore: tweak memo detail styles

Browse Source
pull/2683/head
Steven 1 year ago
parent cc40803b06
commit 9ee4b75bbd
6 changed files with 51 additions and 95 deletions
Show Stats Download Patch File Download Diff File

8
web/src/components/AboutSiteDialog.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { Divider } from "@mui/joy";
import { Divider, IconButton } from "@mui/joy";
import { useGlobalStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import { generateDialog } from "./Dialog";
@ -22,9 +22,9 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
<p className="title-text flex items-center">
{t("common.about")} {customizedProfile.name}
</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X />
</button>
<IconButton size="sm" onClick={handleCloseBtnClick}>
<Icon.X className="opacity-70" />
</IconButton>
</div>
<div className="flex flex-col justify-start items-start max-w-full w-96">
<p className="text-xs">{t("about.memos-description")}</p>

1
web/src/components/Inbox/VersionUpdateMessage.tsx
Unescape Escape View File

@ -36,6 +36,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
if (!activity?.payload?.versionUpdate?.version) {
return;
}
window.open(`https://github.com/usememos/memos/releases/tag/v${activity?.payload?.versionUpdate?.version}`);
if (inbox.status === Inbox_Status.UNREAD) {
handleArchiveMessage(true);

54
web/src/components/MemoView.tsx
Unescape Escape View File

@ -46,7 +46,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
const user = useCurrentUser();
const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
const memoContainerRef = useRef<HTMLDivElement>(null);
const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const readonly = memo.creator !== user?.name;
@ -56,15 +55,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
const user = await userStore.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
setCreator(user);
})();
const parentMemoId = memo.relations.find(
(relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
)?.relatedMemoId;
if (parentMemoId) {
memoStore.getOrFetchMemoById(parentMemoId, { skipStore: true }).then((memo: Memo) => {
setParentMemo(memo);
});
}
}, []);
// Update display time string.
@ -210,16 +200,11 @@ const MemoView: React.FC<Props> = (props: Props) => {
</Tooltip>
</>
)}
</div>
<div className="btns-container space-x-2">
<div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`} unstable_viewTransition>
<Tooltip title={"Identifier"} placement="top">
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
</Tooltip>
</Link>
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility)}` as any)} placement="top">
<span>
<VisibilityIcon visibility={memo.visibility} />
@ -228,8 +213,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
</>
)}
</div>
</div>
<div className="btns-container space-x-2">
{!readonly && (
<>
<span className="btn more-action-btn">
@ -237,22 +220,18 @@ const MemoView: React.FC<Props> = (props: Props) => {
</span>
<div className="more-action-btns-wrapper">
<div className="more-action-btns-container min-w-[6em]">
{!parentMemo && (
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
{memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
{memo.pinned ? t("common.unpin") : t("common.pin")}
</span>
)}
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
{memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
{memo.pinned ? t("common.unpin") : t("common.pin")}
</span>
<span className="btn" onClick={handleEditMemoClick}>
<Icon.Edit3 className="w-4 h-auto mr-2" />
{t("common.edit")}
</span>
{!parentMemo && (
<span className="btn" onClick={handleMarkMemoClick}>
<Icon.Link className="w-4 h-auto mr-2" />
{t("common.mark")}
</span>
)}
<span className="btn" onClick={handleMarkMemoClick}>
<Icon.Link className="w-4 h-auto mr-2" />
{t("common.mark")}
</span>
<span className="btn" onClick={() => showShareMemoDialog(memo)}>
<Icon.Share className="w-4 h-auto mr-2" />
{t("common.share")}
@ -272,19 +251,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
)}
</div>
</div>
{props.showParent && parentMemo && (
<div className="w-auto max-w-full mb-1">
<Link
className="px-2 py-0.5 border rounded-full max-w-xs w-auto text-xs 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/${parentMemo.id}`}
unstable_viewTransition
>
<Icon.ArrowUpRightFromCircle className="w-3 h-auto shrink-0 opacity-60" />
<span className="mx-1 opacity-60">#{parentMemo.id}</span>
<span className="truncate">{parentMemo.content}</span>
</Link>
</div>
)}
<MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
<MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={referenceRelations} />

10
web/src/components/UserBanner.tsx
Unescape Escape View File

@ -2,7 +2,6 @@ import * as api from "@/helpers/api";
import useCurrentUser from "@/hooks/useCurrentUser";
import useNavigateTo from "@/hooks/useNavigateTo";
import { useGlobalStore } from "@/store/module";
import { User_Role } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";
import showAboutSiteDialog from "./AboutSiteDialog";
import Icon from "./Icon";
@ -36,12 +35,9 @@ const UserBanner = () => {
<Dropdown
className="w-auto"
trigger={
<div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<UserAvatar className="shadow shrink-0" avatarUrl={user?.avatarUrl} />
<span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
{user?.role === User_Role.HOST ? (
<span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>
) : null}
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
<span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
</div>
}
actionsClassName="min-w-[128px] max-w-full"

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

@ -74,6 +74,8 @@ const MemoDetail = () => {
memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
setParentMemo(memo);
});
} else {
setParentMemo(undefined);
}
await Promise.all(commentRelations.map((relation) => memoStore.getOrFetchMemoById(relation.memoId)));
})();
@ -114,60 +116,52 @@ const MemoDetail = () => {
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<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">
<div className="mb-3">
<Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
<span className="w-full flex flex-row justify-start items-center">
<UserAvatar className="!w-10 !h-10 mr-2" avatarUrl={creator?.avatarUrl} />
<div className="flex flex-col justify-start items-start gap-1">
<span className="text-lg leading-none text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator?.nickname}</span>
<span className="text-sm leading-none text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
</div>
</span>
</Link>
</div>
{parentMemo && (
<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"
className="px-3 py-1 border rounded-lg 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/${parentMemo.id}`}
unstable_viewTransition
>
<Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
<span className="mx-1 opacity-60">#{parentMemo.id}</span>
<Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60 mr-2" />
<span className="truncate">{parentMemo.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.displayTime)}</span>
</div>
<MemoContent content={memo.content} />
<MemoResourceListView resourceList={memo.resources} />
<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="w-full mt-3 flex flex-row justify-between 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.creator)}`} unstable_viewTransition>
<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.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
<Option key={item} value={item} className="whitespace-nowrap">
{t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
</Option>
))}
</Select>
</>
<Select
className="w-auto text-sm"
variant="plain"
value={memo.visibility}
startDecorator={<VisibilityIcon visibility={memo.visibility} />}
onChange={(_, visibility) => {
if (visibility) {
handleMemoVisibilityOptionChanged(visibility);
}
}}
>
{[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
<Option key={item} value={item} className="whitespace-nowrap">
{t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
</Option>
))}
</Select>
)}
</div>
<div className="flex flex-row sm:justify-end items-center">

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

@ -77,7 +77,6 @@ const Resources = () => {
<div>
<Input
className="max-w-[8rem]"
variant="plain"
placeholder={t("common.search")}
startDecorator={<Icon.Search className="w-4 h-auto" />}
value={state.searchQuery}

Write Preview
Loading…
Cancel
Save