mirror of https://github.com/usememos/memos
feat: update home layout (#1242)
boojack
2 years ago
committed by
GitHub
parent
9d4bb5b3af
commit
6ab58f294e
@ -0,0 +1,92 @@
|
||||
import { isUndefined } from "lodash-es";
|
||||
import { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocationStore, useUserStore } from "../store/module";
|
||||
import Icon from "./Icon";
|
||||
import showDailyReviewDialog from "./DailyReviewDialog";
|
||||
import showResourcesDialog from "./ResourcesDialog";
|
||||
import showSettingDialog from "./SettingDialog";
|
||||
import UserBanner from "./UserBanner";
|
||||
import "../less/header.less";
|
||||
|
||||
const Header = () => {
|
||||
const { t } = useTranslation();
|
||||
const userStore = useUserStore();
|
||||
const locationStore = useLocationStore();
|
||||
const query = locationStore.state.query;
|
||||
|
||||
useEffect(() => {
|
||||
toggleHeader(false);
|
||||
}, [query]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mask" onClick={() => toggleHeader(false)}></div>
|
||||
<header className="header-wrapper">
|
||||
<UserBanner />
|
||||
<div className="w-full px-2 my-2 mt-4 flex flex-col justify-start items-start shrink-0 space-y-2">
|
||||
<Link
|
||||
to="/"
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
>
|
||||
<Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")}
|
||||
</Link>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => showDailyReviewDialog()}
|
||||
>
|
||||
<Icon.Calendar className="mr-4 w-6 h-auto opacity-80" /> {t("common.daily-review")}
|
||||
</button>
|
||||
<Link
|
||||
to="/explore"
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
>
|
||||
<Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")}
|
||||
</Link>
|
||||
{!userStore.isVisitorMode() && (
|
||||
<>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => showResourcesDialog()}
|
||||
>
|
||||
<Icon.Paperclip className="mr-4 w-6 h-auto opacity-80" /> {t("common.resources")}
|
||||
</button>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => showDailyReviewDialog()}
|
||||
>
|
||||
<Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archive")}
|
||||
</button>
|
||||
<button
|
||||
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||||
onClick={() => showSettingDialog()}
|
||||
>
|
||||
<Icon.Settings className="mr-4 w-6 h-auto opacity-80" /> {t("common.settings")}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const toggleHeader = (show?: boolean) => {
|
||||
const headerEl = document.body.querySelector(".header-wrapper") as HTMLDivElement;
|
||||
const maskEl = headerEl.previousSibling as HTMLDivElement;
|
||||
|
||||
if (isUndefined(show)) {
|
||||
show = !headerEl.classList.contains("show");
|
||||
}
|
||||
|
||||
if (show) {
|
||||
headerEl.classList.add("show");
|
||||
maskEl.classList.add("show");
|
||||
} else {
|
||||
headerEl.classList.remove("show");
|
||||
maskEl.classList.remove("show");
|
||||
}
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -0,0 +1,48 @@
|
||||
import { isUndefined } from "lodash-es";
|
||||
import { useEffect } from "react";
|
||||
import { useLocationStore } from "../store/module";
|
||||
import ShortcutList from "./ShortcutList";
|
||||
import TagList from "./TagList";
|
||||
import SearchBar from "./SearchBar";
|
||||
import "../less/home-sidebar.less";
|
||||
|
||||
const HomeSidebar = () => {
|
||||
const locationStore = useLocationStore();
|
||||
const query = locationStore.state.query;
|
||||
|
||||
useEffect(() => {
|
||||
toggleHomeSidebar(false);
|
||||
}, [query]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mask" onClick={() => toggleHomeSidebar(false)}></div>
|
||||
<aside className="sidebar-wrapper">
|
||||
<div className="pl-6 pr-2 mb-4 w-full">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<ShortcutList />
|
||||
<TagList />
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const toggleHomeSidebar = (show?: boolean) => {
|
||||
const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
|
||||
const maskEl = sidebarEl.previousSibling as HTMLDivElement;
|
||||
|
||||
if (isUndefined(show)) {
|
||||
show = !sidebarEl.classList.contains("show");
|
||||
}
|
||||
|
||||
if (show) {
|
||||
sidebarEl.classList.add("show");
|
||||
maskEl.classList.add("show");
|
||||
} else {
|
||||
sidebarEl.classList.remove("show");
|
||||
maskEl.classList.remove("show");
|
||||
}
|
||||
};
|
||||
|
||||
export default HomeSidebar;
|
||||
@ -1,62 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useLocationStore, useMemoStore, useShortcutStore, useUserStore } from "../store/module";
|
||||
import Icon from "./Icon";
|
||||
import SearchBar from "./SearchBar";
|
||||
import { toggleSidebar } from "./Sidebar";
|
||||
import "../less/memos-header.less";
|
||||
|
||||
let prevRequestTimestamp = Date.now();
|
||||
|
||||
const MemosHeader = () => {
|
||||
const locationStore = useLocationStore();
|
||||
const memoStore = useMemoStore();
|
||||
const shortcutStore = useShortcutStore();
|
||||
const userStore = useUserStore();
|
||||
const user = userStore.state.user;
|
||||
const query = locationStore.state.query;
|
||||
const shortcuts = shortcutStore.state.shortcuts;
|
||||
const [titleText, setTitleText] = useState("MEMOS");
|
||||
|
||||
useEffect(() => {
|
||||
if (!query?.shortcutId) {
|
||||
setTitleText("MEMOS");
|
||||
return;
|
||||
}
|
||||
|
||||
const shortcut = shortcutStore.getShortcutById(query?.shortcutId);
|
||||
if (shortcut) {
|
||||
setTitleText(shortcut.title);
|
||||
}
|
||||
}, [query, shortcuts]);
|
||||
|
||||
const handleTitleTextClick = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - prevRequestTimestamp > 1 * 1000) {
|
||||
prevRequestTimestamp = now;
|
||||
memoStore.fetchMemos().catch(() => {
|
||||
// do nth
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="memos-header-container">
|
||||
<div className="title-container">
|
||||
<div className="action-btn" onClick={() => toggleSidebar(true)}>
|
||||
<Icon.Menu className="icon-img" />
|
||||
</div>
|
||||
<span className="title-text" onClick={handleTitleTextClick}>
|
||||
{titleText}
|
||||
</span>
|
||||
{user && (
|
||||
<a className="dark:text-white" href={"/u/" + user.id + "/rss.xml"} target="_blank" rel="noreferrer">
|
||||
<Icon.Rss className="w-4 h-auto opacity-40 hover:opacity-60" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<SearchBar />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemosHeader;
|
||||
@ -0,0 +1,62 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useLocationStore, useMemoStore, useShortcutStore } from "../store/module";
|
||||
import Icon from "./Icon";
|
||||
import { toggleHeader } from "./Header";
|
||||
import { toggleHomeSidebar } from "./HomeSidebar";
|
||||
|
||||
let prevRequestTimestamp = Date.now();
|
||||
|
||||
const MobileHeader = () => {
|
||||
const locationStore = useLocationStore();
|
||||
const memoStore = useMemoStore();
|
||||
const shortcutStore = useShortcutStore();
|
||||
const query = locationStore.state.query;
|
||||
const shortcuts = shortcutStore.state.shortcuts;
|
||||
const [titleText, setTitleText] = useState("MEMOS");
|
||||
|
||||
useEffect(() => {
|
||||
if (!query?.shortcutId) {
|
||||
setTitleText("MEMOS");
|
||||
return;
|
||||
}
|
||||
|
||||
const shortcut = shortcutStore.getShortcutById(query?.shortcutId);
|
||||
if (shortcut) {
|
||||
setTitleText(shortcut.title);
|
||||
}
|
||||
}, [query, shortcuts]);
|
||||
|
||||
const handleTitleTextClick = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - prevRequestTimestamp > 1 * 1000) {
|
||||
prevRequestTimestamp = now;
|
||||
memoStore.fetchMemos().catch(() => {
|
||||
// do nth
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex sm:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-10">
|
||||
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
|
||||
<div
|
||||
className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"
|
||||
onClick={() => toggleHeader(true)}
|
||||
>
|
||||
<Icon.Menu className="w-5 h-auto dark:text-gray-200" />
|
||||
</div>
|
||||
<span
|
||||
className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
|
||||
onClick={handleTitleTextClick}
|
||||
>
|
||||
{titleText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center pr-1">
|
||||
<Icon.Search className="w-5 h-auto dark:text-gray-200" onClick={() => toggleHomeSidebar(true)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileHeader;
|
||||
@ -1,53 +0,0 @@
|
||||
.page-wrapper.explore {
|
||||
@apply w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800;
|
||||
|
||||
> .page-container {
|
||||
@apply relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-8;
|
||||
|
||||
> .page-header {
|
||||
@apply sticky top-0 z-10 max-w-2xl w-full h-auto flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2 ml-calc;
|
||||
|
||||
> .title-container {
|
||||
@apply flex flex-row justify-start items-center;
|
||||
|
||||
> .logo-img {
|
||||
@apply h-12 w-auto rounded-md mr-2;
|
||||
}
|
||||
|
||||
> .title-text {
|
||||
@apply text-xl sm:text-4xl text-gray-700 dark:text-gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .memos-wrapper {
|
||||
@apply relative flex-grow max-w-2xl w-full h-auto flex flex-col justify-start items-start px-4 sm:pr-6 ml-calc;
|
||||
|
||||
> .memo-container {
|
||||
@apply relative flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;
|
||||
|
||||
&.pinned {
|
||||
@apply border-gray-200 border-2 dark:border-zinc-600;
|
||||
}
|
||||
|
||||
> .corner-container {
|
||||
@apply absolute top-0 right-0 z-1;
|
||||
|
||||
&::after {
|
||||
@apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
|
||||
content: "";
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
> .memo-header {
|
||||
@apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
|
||||
|
||||
> .name-text {
|
||||
@apply ml-2 hover:text-green-600 hover:underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
.sidebar-wrapper {
|
||||
@apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-auto max-h-screen py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
|
||||
.header-wrapper {
|
||||
@apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-56 h-full py-4 pl-2 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
|
||||
|
||||
&.show {
|
||||
@apply translate-x-0 shadow-2xl sm:shadow-none;
|
||||
@ -0,0 +1,15 @@
|
||||
.sidebar-wrapper {
|
||||
@apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 h-full py-4 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
|
||||
|
||||
&.show {
|
||||
@apply flex translate-x-0 right-0 shadow-2xl sm:shadow-none;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
@apply fixed top-0 left-0 w-full h-full bg-black opacity-0 transition-opacity duration-300 pointer-events-none z-20 sm:hidden;
|
||||
|
||||
&.show {
|
||||
@apply opacity-60 pointer-events-auto;
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
.memos-header-container {
|
||||
@apply sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-10;
|
||||
|
||||
> .title-container {
|
||||
@apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden;
|
||||
|
||||
> .action-btn {
|
||||
@apply flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-5 h-auto dark:text-gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
> .title-text {
|
||||
@apply font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-end items-center;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue