mirror of
https://github.com/usememos/memos.git
synced 2025-02-19 04:40:40 +01:00
chore: add heat map to sidebar (#1255)
This commit is contained in:
parent
c6d43581f9
commit
bf46a9af68
@ -64,7 +64,7 @@ const Header = () => {
|
||||
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={() => showArchivedMemoDialog()}
|
||||
>
|
||||
<Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archive")}
|
||||
<Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")}
|
||||
</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"
|
||||
|
@ -4,6 +4,7 @@ import { useLocationStore } from "../store/module";
|
||||
import ShortcutList from "./ShortcutList";
|
||||
import TagList from "./TagList";
|
||||
import SearchBar from "./SearchBar";
|
||||
import UsageHeatMap from "./UsageHeatMap";
|
||||
import "../less/home-sidebar.less";
|
||||
|
||||
const HomeSidebar = () => {
|
||||
@ -17,10 +18,11 @@ const HomeSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="mask" onClick={() => toggleHomeSidebar(false)}></div>
|
||||
<aside className="sidebar-wrapper">
|
||||
<div className="pl-6 pr-2 mb-4 w-full">
|
||||
<aside className="home-sidebar-wrapper">
|
||||
<div className="pl-6 pr-4 mb-4 w-full">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<UsageHeatMap />
|
||||
<ShortcutList />
|
||||
<TagList />
|
||||
</aside>
|
||||
@ -29,7 +31,7 @@ const HomeSidebar = () => {
|
||||
};
|
||||
|
||||
export const toggleHomeSidebar = (show?: boolean) => {
|
||||
const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
|
||||
const sidebarEl = document.body.querySelector(".home-sidebar-wrapper") as HTMLDivElement;
|
||||
const maskEl = sidebarEl.previousSibling as HTMLDivElement;
|
||||
|
||||
if (isUndefined(show)) {
|
||||
|
@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
|
||||
import "../less/usage-heat-map.less";
|
||||
|
||||
const tableConfig = {
|
||||
width: 12,
|
||||
width: 11,
|
||||
height: 7,
|
||||
};
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
.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;
|
||||
.home-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 md:mr-2 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;
|
||||
|
@ -13,7 +13,7 @@
|
||||
@apply absolute top-0 right-0 z-1;
|
||||
|
||||
&::after {
|
||||
@apply absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600 rounded-tr;
|
||||
@apply absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600 rounded-tr-md;
|
||||
content: "";
|
||||
border-width: 6px;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
> .search-bar-inputer {
|
||||
@apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200 dark:bg-zinc-700;
|
||||
@apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-md bg-gray-200 dark:bg-zinc-700;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto opacity-30 dark:text-gray-200;
|
||||
|
@ -1,8 +1,14 @@
|
||||
.usage-heat-map-wrapper {
|
||||
@apply flex flex-row justify-start items-center w-full h-32 flex-wrap pr-6 pb-3 shrink-0;
|
||||
@apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pr-2 pb-3 shrink-0;
|
||||
|
||||
&:hover {
|
||||
> .day-tip-text-container {
|
||||
@apply visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .day-tip-text-container {
|
||||
@apply w-6 h-full grid grid-rows-7;
|
||||
@apply w-6 h-full grid grid-rows-7 invisible;
|
||||
|
||||
> .tip-text {
|
||||
@apply pr-1 w-full h-full text-right font-mono text-gray-400;
|
||||
@ -12,13 +18,13 @@
|
||||
|
||||
> .usage-heat-map {
|
||||
@apply h-full grid grid-rows-7;
|
||||
width: 200px;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
width: 186px;
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
grid-auto-flow: column;
|
||||
|
||||
> .stat-wrapper {
|
||||
> .stat-container {
|
||||
@apply block rounded-sm bg-gray-200 dark:bg-zinc-700;
|
||||
@apply block rounded bg-gray-200 dark:bg-zinc-700;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
|
@ -5,6 +5,7 @@
|
||||
"resources": "Resources",
|
||||
"settings": "Settings",
|
||||
"daily-review": "Daily Review",
|
||||
"archived": "Archived",
|
||||
"email": "Email",
|
||||
"password": "Password",
|
||||
"avatar": "Avatar",
|
||||
|
@ -5,6 +5,7 @@
|
||||
"resources": "资源库",
|
||||
"settings": "设置",
|
||||
"daily-review": "每日回顾",
|
||||
"archived": "归档",
|
||||
"email": "邮箱",
|
||||
"password": "密码",
|
||||
"username": "用户名",
|
||||
|
Loading…
x
Reference in New Issue
Block a user