feat: update sidebar style

3 years ago · 4f88221bce
parent 1cebf1dbd0
commit 4f88221bce
7 changed files with 107 additions and 96 deletions
--- a/web/src/components/MenuBtnsPopup.tsx
+++ b/web/src/components/MenuBtnsPopup.tsx
@ -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>
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@ -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>
  );
 };
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@ -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,29 +28,13 @@ const UserBanner: React.FC<Props> = () => {

  return (
    <div className="user-banner-container">
-      <div className="userinfo-header-container">
-        <p className="username-text" onClick={handleUsernameClick}>
-          {username}
-        </p>
-        <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
-          <img src="/icons/more.svg" className="icon-img" />
-        </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>
+      <p className="username-text" onClick={handleUsernameClick}>
+        {username}
+      </p>
+      <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
+        <img src="/icons/more.svg" className="icon-img" />
+      </span>
+      <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
    </div>
  );
 };
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@ -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);
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@ -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;
+      }
+    }
  }
 }
--- a/web/src/less/user-banner.less
+++ b/web/src/less/user-banner.less
@ -1,47 +1,22 @@
@import "./mixin.less";

 .user-banner-container {
-  .flex(column, flex-start, flex-start);
-  @apply w-full h-auto;
+  .flex(row, space-between, center);
+  @apply w-full h-auto px-6 flex-nowrap mb-1;

-  > .userinfo-header-container {
-    .flex(row, space-between, center);
-    @apply w-full 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);
-    }
-
-    > .action-btn {
-      @apply flex-shrink-0 select-none border-none;
-      background-color: unset;
-
-      &.menu-popup-btn {
-        .flex(column, center, center);
-        @apply w-9 h-10 -mr-2 cursor-pointer;
-
-        > .icon-img {
-          @apply w-5 h-auto;
-        }
-      }
-    }
+  > .username-text {
+    @apply font-bold text-lg pr-2 text-slate-800 cursor-pointer shrink truncate;
  }

-  > .status-text-container {
-    .flex(row, space-between, flex-start);
-    @apply px-6 w-full select-none mb-3;
+  > .action-btn {
+    @apply shrink-0 select-none border-none;

-    > .status-text {
-      .flex(column, flex-start, flex-start);
-
-      > .amount-text {
-        @apply font-bold text-2xl opacity-80 leading-10;
-        color: @text-black;
-      }
+    &.menu-popup-btn {
+      .flex(column, center, center);
+      @apply w-9 h-10 -mr-2 cursor-pointer;

-      > .type-text {
-        @apply text-gray-400 text-xs font-mono;
+      > .icon-img {
+        @apply w-5 h-auto;
      }
    }
  }
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -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",