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: tweak memo detail styles

Browse Source
This commit is contained in:
Steven
2023-12-27 23:25:02 +08:00
parent cc40803b06
commit 9ee4b75bbd
6 changed files with 51 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/MemoView.tsx
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} />