chore: add heat map to sidebar (#1255)

This commit is contained in:
boojack 2023-03-05 01:03:37 +08:00 committed by GitHub
parent c6d43581f9
commit bf46a9af68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 24 additions and 14 deletions

View File

@ -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"

View File

@ -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)) {

View File

@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
import "../less/usage-heat-map.less";
const tableConfig = {
width: 12,
width: 11,
height: 7,
};

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -5,6 +5,7 @@
"resources": "Resources",
"settings": "Settings",
"daily-review": "Daily Review",
"archived": "Archived",
"email": "Email",
"password": "Password",
"avatar": "Avatar",

View File

@ -5,6 +5,7 @@
"resources": "资源库",
"settings": "设置",
"daily-review": "每日回顾",
"archived": "归档",
"email": "邮箱",
"password": "密码",
"username": "用户名",