aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update sidebar style

Browse Source
pull/42/head
email 3 years ago
parent 1cebf1dbd0
commit 4f88221bce
7 changed files with 107 additions and 96 deletions
Show Stats Download Patch File Download Diff File

17
web/src/components/MenuBtnsPopup.tsx
Unescape Escape View File

@ -1,8 +1,6 @@
import { useEffect, useRef } from "react";
import { locationService, userService } from "../services";
import showAboutSiteDialog from "./AboutSiteDialog";
import showSettingDialog from "./SettingDialog";
import showMemoTrashDialog from "./MemoTrashDialog";
import "../less/menu-btns-popup.less";
interface Props {
@ -12,7 +10,6 @@ interface Props {
const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
const { shownStatus, setShownStatus } = props;
const popupElRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -30,14 +27,6 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
}
}, [shownStatus]);
const handleMyAccountBtnClick = () => {
showSettingDialog();
};
const handleMemosTrashBtnClick = () => {
showMemoTrashDialog();
};
const handleAboutBtnClick = () => {
showAboutSiteDialog();
};
@ -50,12 +39,6 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
return (
<div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
<button className="btn action-btn" onClick={handleMyAccountBtnClick}>
<span className="icon">👤</span> Setting
</button>
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
<span className="icon">🗑️</span> Recycle Bin
</button>
<button className="btn action-btn" onClick={handleAboutBtnClick}>
<span className="icon">🤠</span> About
</button>

47
web/src/components/Sidebar.tsx
Unescape Escape View File

@ -1,19 +1,56 @@
import { useRef } from "react";
import { useContext } from "react";
import appContext from "../stores/appContext";
import utils from "../helpers/utils";
import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
import showSettingDialog from "./SettingDialog";
import showMemoTrashDialog from "./MemoTrashDialog";
import UserBanner from "./UserBanner";
import ShortcutList from "./ShortcutList";
import UsageHeatMap from "./UsageHeatMap";
import "../less/siderbar.less";
interface Props {}
const Sidebar: React.FC<Props> = () => {
const wrapperElRef = useRef<HTMLElement>(null);
const {
memoState: { memos, tags },
userState: { user },
} = useContext(appContext);
const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdAt)) / 1000 / 3600 / 24) : 0;
const handleMyAccountBtnClick = () => {
showSettingDialog();
};
const handleMemosTrashBtnClick = () => {
showMemoTrashDialog();
};
return (
<aside className="sidebar-wrapper" ref={wrapperElRef}>
<aside className="sidebar-wrapper">
<UserBanner />
<UsageHeatMap />
<div className="action-btns-container">
<button className="btn action-btn" onClick={handleMyAccountBtnClick}>
<span className="icon">👤</span> Setting
</button>
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
<span className="icon">🗑️</span> Recycle Bin
</button>
</div>
<ShortcutList />
<div className="status-text-container">
<div className="status-text memos-text">
<span className="amount-text">{memos.length}</span>
<span className="type-text">MEMO</span>
</div>
<div className="status-text tags-text">
<span className="amount-text">{tags.length}</span>
<span className="type-text">TAG</span>
</div>
<div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
<span className="amount-text">{createdDays}</span>
<span className="type-text">DAY</span>
</div>
</div>
</aside>
);
};

20
web/src/components/UserBanner.tsx
Unescape Escape View File

@ -1,20 +1,16 @@
import { useCallback, useContext, useState } from "react";
import appContext from "../stores/appContext";
import { locationService } from "../services";
import utils from "../helpers/utils";
import MenuBtnsPopup from "./MenuBtnsPopup";
import showDailyMemoDiaryDialog from "./DailyMemoDiaryDialog";
import "../less/user-banner.less";
interface Props {}
const UserBanner: React.FC<Props> = () => {
const {
memoState: { memos, tags },
userState: { user },
} = useContext(appContext);
const username = user ? user.name : "Memos";
const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdAt)) / 1000 / 3600 / 24) : 0;
const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false);
@ -32,7 +28,6 @@ const UserBanner: React.FC<Props> = () => {
return (
<div className="user-banner-container">
<div className="userinfo-header-container">
<p className="username-text" onClick={handleUsernameClick}>
{username}
</p>
@ -41,21 +36,6 @@ const UserBanner: React.FC<Props> = () => {
</span>
<MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
</div>
<div className="status-text-container">
<div className="status-text memos-text">
<span className="amount-text">{memos.length}</span>
<span className="type-text">MEMO</span>
</div>
<div className="status-text tags-text">
<span className="amount-text">{tags.length}</span>
<span className="type-text">TAG</span>
</div>
<div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
<span className="amount-text">{createdDays}</span>
<span className="type-text">DAY</span>
</div>
</div>
</div>
);
};

13
web/src/less/shortcut-list.less
Unescape Escape View File

@ -2,12 +2,12 @@
.shortcuts-wrapper {
.flex(column, flex-start, flex-start);
@apply w-full py-0 px-2 h-auto flex-nowrap;
@apply w-full py-0 px-2 mt-1 h-auto grow shrink flex-nowrap;
.hide-scroll-bar();
> .title-text {
.flex(row, space-between, center);
@apply w-full py-1 px-4;
@apply w-full px-4;
> .normal-text {
@apply text-xs leading-6 font-bold text-black opacity-50;
@ -58,8 +58,6 @@
background-color: @text-green !important;
> .shortcut-text-container {
@apply font-bold;
> * {
@apply text-white;
}
@ -68,8 +66,7 @@
> .shortcut-text-container {
.flex(row, flex-start, center);
@apply overflow-hidden text-ellipsis shrink-0 leading-5;
max-width: calc(100% - 24px);
@apply truncate shrink leading-5 mr-1;
color: @text-black;
> .icon-text {
@ -77,13 +74,13 @@
}
> .shortcut-text {
@apply shrink-0;
@apply truncate;
}
}
> .btns-container {
.flex(row, flex-end, center);
@apply hidden;
@apply hidden shrink-0;
> .action-btn {
.flex(row, center, center);

32
web/src/less/siderbar.less
Unescape Escape View File

@ -2,10 +2,36 @@
.sidebar-wrapper {
.flex(column, flex-start, flex-start);
@apply w-60 h-full py-4 overflow-x-hidden overflow-y-auto shrink-0;
@apply w-64 h-full py-4 px-2 overflow-x-hidden overflow-y-auto shrink-0;
.hide-scroll-bar();
> * {
@apply shrink-0;
> .action-btns-container {
@apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
> .action-btn {
@apply leading-10 px-4 rounded-lg text-base hover:bg-white;
> .icon {
@apply mr-1;
}
}
}
> .status-text-container {
.flex(row, space-between, flex-start);
@apply w-full px-10 select-none shrink-0;
> .status-text {
.flex(column, flex-start, flex-start);
> .amount-text {
@apply font-bold text-2xl opacity-80 leading-10;
color: @text-black;
}
> .type-text {
@apply text-gray-400 text-xs font-mono;
}
}
}
}

31
web/src/less/user-banner.less
Unescape Escape View File

@ -1,21 +1,15 @@
@import "./mixin.less";
.user-banner-container {
.flex(column, flex-start, flex-start);
@apply w-full h-auto;
> .userinfo-header-container {
.flex(row, space-between, center);
@apply w-full px-6 flex-nowrap mb-1;
@apply w-full h-auto px-6 flex-nowrap mb-1;
> .username-text {
@apply font-bold text-lg text-slate-800 overflow-hidden cursor-pointer shrink-0 text-ellipsis;
max-width: calc(100% - 32px);
@apply font-bold text-lg pr-2 text-slate-800 cursor-pointer shrink truncate;
}
> .action-btn {
@apply flex-shrink-0 select-none border-none;
background-color: unset;
@apply shrink-0 select-none border-none;
&.menu-popup-btn {
.flex(column, center, center);
@ -26,23 +20,4 @@
}
}
}
}
> .status-text-container {
.flex(row, space-between, flex-start);
@apply px-6 w-full select-none mb-3;
> .status-text {
.flex(column, flex-start, flex-start);
> .amount-text {
@apply font-bold text-2xl opacity-80 leading-10;
color: @text-black;
}
> .type-text {
@apply text-gray-400 text-xs font-mono;
}
}
}
}

13
web/tailwind.config.js
Unescape Escape View File

@ -2,6 +2,19 @@
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,tsx}"],
theme: {
fontSize: {
xs: ".75rem",
sm: ".875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "5rem",
},
extend: {
spacing: {
128: "32rem",

Write Preview
Loading…
Cancel
Save