mirror of
https://github.com/usememos/memos.git
synced 2024-12-19 00:51:30 +03:00
chore: update style of home sidebar (#1311)
This commit is contained in:
boojack
GitHub
parent
ccf6af4dc3
commit
3a466ad2a1
@ -12,7 +12,7 @@ const HomeSidebar = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const handleWindowResize = () => {
|
||||
if (window.innerWidth < resolution.sm) {
|
||||
if (window.innerWidth < resolution.md) {
|
||||
layoutStore.setHomeSidebarStatus(false);
|
||||
} else {
|
||||
layoutStore.setHomeSidebarStatus(true);
|
||||
@ -24,22 +24,22 @@ const HomeSidebar = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full flex-shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
|
||||
className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full flex-shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
|
||||
showHomeSidebar && "pointer-events-auto"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
|
||||
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
|
||||
showHomeSidebar && "opacity-60 pointer-events-auto"
|
||||
}`}
|
||||
onClick={() => layoutStore.setHomeSidebarStatus(false)}
|
||||
></div>
|
||||
<aside
|
||||
className={`absolute sm:relative top-0 right-0 w-56 pr-2 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 translate-x-full sm:translate-x-0 ${
|
||||
className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
|
||||
showHomeSidebar && "!translate-x-0 shadow-2xl"
|
||||
}`}
|
||||
>
|
||||
<div className="pl-6 pr-4 mb-4 w-full">
|
||||
<div className="px-4 pr-8 mb-4 w-full">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<UsageHeatMap />
|
||||
|
||||
@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
|
||||
import Icon from "./Icon";
|
||||
import toastHelper from "./Toast";
|
||||
import showCreateShortcutDialog from "./CreateShortcutDialog";
|
||||
import "../less/shortcut-list.less";
|
||||
|
||||
const ShortcutList = () => {
|
||||
const { t } = useTranslation();
|
||||
@ -37,14 +36,17 @@ const ShortcutList = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="shortcuts-wrapper">
|
||||
<p className="title-text">
|
||||
<span className="normal-text">{t("common.shortcuts")}</span>
|
||||
<button className="btn" onClick={() => showCreateShortcutDialog()}>
|
||||
<Icon.Plus className="icon-img" />
|
||||
<div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
|
||||
<div className="flex flex-row justify-start items-center w-full px-4">
|
||||
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.shortcuts")}</span>
|
||||
<button
|
||||
className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
|
||||
onClick={() => showCreateShortcutDialog()}
|
||||
>
|
||||
<Icon.Plus className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</p>
|
||||
<div className="shortcuts-container">
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2">
|
||||
{sortedShortcuts.map((s) => {
|
||||
return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === Number(query?.shortcutId)} />;
|
||||
})}
|
||||
@ -117,24 +119,39 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
|
||||
<div className="shortcut-text-container">
|
||||
<span className="shortcut-text">{shortcut.title}</span>
|
||||
<div
|
||||
className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700"
|
||||
onClick={handleShortcutClick}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
|
||||
isActive && "text-green-600"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{shortcut.title}</span>
|
||||
</div>
|
||||
<div className="btns-container">
|
||||
<span className="action-btn toggle-btn">
|
||||
<Icon.MoreHorizontal className="icon-img" />
|
||||
<div className="flex-row justify-end items-center hidden group/btns group-hover:flex shrink-0">
|
||||
<span className="flex flex-row justify-center items-center toggle-btn">
|
||||
<Icon.MoreHorizontal className="w-4 h-auto" />
|
||||
</span>
|
||||
<div className="action-btns-wrapper">
|
||||
<div className="action-btns-container">
|
||||
<span className="btn" onClick={handlePinShortcutBtnClick}>
|
||||
<div className="absolute top-4 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden group-hover/btns:flex z-1">
|
||||
<div className="flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700 shadow">
|
||||
<span
|
||||
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
|
||||
onClick={handlePinShortcutBtnClick}
|
||||
>
|
||||
{shortcut.rowStatus === "ARCHIVED" ? t("common.unpin") : t("common.pin")}
|
||||
</span>
|
||||
<span className="btn" onClick={handleEditShortcutBtnClick}>
|
||||
<span
|
||||
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
|
||||
onClick={handleEditShortcutBtnClick}
|
||||
>
|
||||
{t("common.edit")}
|
||||
</span>
|
||||
<span
|
||||
className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`}
|
||||
className={`w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800 text-orange-600 ${
|
||||
showConfirmDeleteBtn && "font-black"
|
||||
}`}
|
||||
onClick={handleDeleteMemoClick}
|
||||
onMouseLeave={handleDeleteBtnMouseLeave}
|
||||
>
|
||||
|
||||
@ -4,7 +4,6 @@ import { useLocationStore, useTagStore } from "../store/module";
|
||||
import useToggle from "../hooks/useToggle";
|
||||
import Icon from "./Icon";
|
||||
import showCreateTagDialog from "./CreateTagDialog";
|
||||
import "../less/tag-list.less";
|
||||
|
||||
interface Tag {
|
||||
key: string;
|
||||
@ -69,8 +68,8 @@ const TagList = () => {
|
||||
}, [tagsText]);
|
||||
|
||||
return (
|
||||
<div className="tags-wrapper">
|
||||
<div className="w-full flex flex-row justify-start items-center px-4 mb-1">
|
||||
<div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
|
||||
<div className="flex flex-row justify-start items-center w-full px-4">
|
||||
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
|
||||
<button
|
||||
onClick={() => showCreateTagDialog()}
|
||||
@ -79,7 +78,7 @@ const TagList = () => {
|
||||
<Icon.Plus className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="tags-container">
|
||||
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mt-2 mb-2">
|
||||
{tags.map((t, idx) => (
|
||||
<TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />
|
||||
))}
|
||||
@ -115,22 +114,35 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`tag-item-container ${isActive ? "active" : ""}`} onClick={handleTagClick}>
|
||||
<div className="tag-text-container">
|
||||
<span className="icon-text">#</span>
|
||||
<span className="tag-text">{tag.key}</span>
|
||||
<div
|
||||
className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-1 rounded-lg text-base cursor-pointer select-none shrink-0 hover:opacity-60"
|
||||
onClick={handleTagClick}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
|
||||
isActive && "text-green-600"
|
||||
}`}
|
||||
>
|
||||
<span className="block w-4 shrink-0">#</span>
|
||||
<span className="truncate">{tag.key}</span>
|
||||
</div>
|
||||
<div className="btns-container">
|
||||
<div className="flex flex-row justify-end items-center">
|
||||
{hasSubTags ? (
|
||||
<span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
|
||||
<Icon.ChevronRight className="icon-img" />
|
||||
<span
|
||||
className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`}
|
||||
onClick={handleToggleBtnClick}
|
||||
>
|
||||
<Icon.ChevronRight className="w-5 h-5 opacity-80 dark:text-gray-400" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasSubTags ? (
|
||||
<div className={`subtags-container ${showSubTags ? "" : "!hidden"}`}>
|
||||
<div
|
||||
className={`w-full flex flex-col justify-start items-start h-auto ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
|
||||
!showSubTags && "!hidden"
|
||||
}`}
|
||||
>
|
||||
{tag.subTags.map((st, idx) => (
|
||||
<TagItemContainer key={st.text + "-" + idx} tag={st} tagQuery={tagQuery} />
|
||||
))}
|
||||
|
||||
@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
|
||||
import "../less/usage-heat-map.less";
|
||||
|
||||
const tableConfig = {
|
||||
width: 11,
|
||||
width: 10,
|
||||
height: 7,
|
||||
};
|
||||
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
.shortcuts-wrapper {
|
||||
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
|
||||
|
||||
> .title-text {
|
||||
@apply flex flex-row justify-start items-center w-full px-4;
|
||||
|
||||
> .normal-text {
|
||||
@apply text-sm leading-6 font-mono text-gray-400;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-4 text-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .shortcuts-container {
|
||||
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
|
||||
|
||||
> .shortcut-container {
|
||||
@apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
|
||||
|
||||
&:hover {
|
||||
> .btns-container {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .shortcut-text-container {
|
||||
@apply !text-green-600;
|
||||
}
|
||||
}
|
||||
|
||||
> .shortcut-text-container {
|
||||
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
|
||||
|
||||
> .icon-text {
|
||||
@apply block w-4 shrink-0;
|
||||
}
|
||||
|
||||
> .shortcut-text {
|
||||
@apply truncate;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex-row justify-end items-center hidden shrink-0;
|
||||
|
||||
> .action-btn {
|
||||
@apply flex flex-row justify-center items-center;
|
||||
|
||||
&.toggle-btn {
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& + .action-btns-wrapper {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .action-btns-wrapper {
|
||||
@apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
|
||||
|
||||
> .action-btns-container {
|
||||
@apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
> .btn {
|
||||
@apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
|
||||
|
||||
&.delete-btn {
|
||||
@apply text-orange-600;
|
||||
|
||||
&.final-confirm {
|
||||
@apply font-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
.tags-wrapper {
|
||||
@apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
|
||||
|
||||
> .tags-container {
|
||||
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
|
||||
|
||||
.subtags-container {
|
||||
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
|
||||
width: calc(100% - 18px);
|
||||
min-width: 80px;
|
||||
|
||||
> .tag-item-container {
|
||||
@apply first:mt-0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-item-container {
|
||||
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
|
||||
|
||||
&.active {
|
||||
> .tag-text-container {
|
||||
@apply !text-green-600;
|
||||
}
|
||||
}
|
||||
|
||||
> .tag-text-container {
|
||||
@apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
|
||||
max-width: calc(100% - 24px);
|
||||
|
||||
> .icon-text {
|
||||
@apply block w-4 shrink-0;
|
||||
}
|
||||
|
||||
> .tag-text {
|
||||
@apply truncate;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-end items-center;
|
||||
|
||||
> .action-btn {
|
||||
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-5 h-5 opacity-80 dark:text-gray-400;
|
||||
}
|
||||
|
||||
&.shown {
|
||||
@apply rotate-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tip-text {
|
||||
@apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-6 rounded text-sm text-gray-400 font-mono;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,8 @@
|
||||
.usage-heat-map-wrapper {
|
||||
@apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-6 pb-3 shrink-0;
|
||||
@apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-4 pb-3 shrink-0;
|
||||
|
||||
> .usage-heat-map {
|
||||
@apply h-full grid grid-rows-7;
|
||||
width: 196px;
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
grid-auto-flow: column;
|
||||
@apply w-full h-full grid grid-rows-7 grid-cols-10 grid-flow-col;
|
||||
|
||||
> .stat-wrapper {
|
||||
> .stat-container {
|
||||
@ -41,10 +38,10 @@
|
||||
}
|
||||
|
||||
> .day-tip-text-container {
|
||||
@apply w-6 h-full grid grid-rows-7;
|
||||
@apply w-8 h-full grid grid-rows-7;
|
||||
|
||||
> .tip-text {
|
||||
@apply pl-1 w-full h-full text-right font-mono text-gray-400;
|
||||
@apply pl-1 w-full h-full text-left font-mono text-gray-400;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user