From 48a20c2b381c31b730da80b2e4cdc23556c0a3af Mon Sep 17 00:00:00 2001 From: boojack Date: Wed, 4 May 2022 12:05:50 +0800 Subject: [PATCH] chore: update setting dialog --- web/package.json | 8 ++-- web/src/components/SettingDialog.tsx | 57 +++++++++++++++++++--------- web/src/less/setting-dialog.less | 51 ++++++++++++++++++------- web/tailwind.config.js | 4 +- web/yarn.lock | 45 +++++++++++++--------- 5 files changed, 109 insertions(+), 56 deletions(-) diff --git a/web/package.json b/web/package.json index 83c505b1..b8ab5407 100644 --- a/web/package.json +++ b/web/package.json @@ -9,13 +9,13 @@ }, "dependencies": { "lodash-es": "^4.17.21", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "^18.1.0", + "react-dom": "^18.1.0" }, "devDependencies": { "@types/lodash-es": "^4.17.5", - "@types/react": "^18.0.5", - "@types/react-dom": "^18.0.1", + "@types/react": "^18.0.8", + "@types/react-dom": "^18.0.3", "@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/parser": "^5.6.0", "@vitejs/plugin-react": "^1.0.0", diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx index 3045b558..cfb600f8 100644 --- a/web/src/components/SettingDialog.tsx +++ b/web/src/components/SettingDialog.tsx @@ -1,5 +1,4 @@ -import { useEffect } from "react"; -import { memoService } from "../services"; +import { useState } from "react"; import { showDialog } from "./Dialog"; import MyAccountSection from "./MyAccountSection"; import PreferencesSection from "./PreferencesSection"; @@ -7,29 +6,51 @@ import "../less/setting-dialog.less"; interface Props extends DialogProps {} +type SettingSection = "my-account" | "preferences"; + +interface State { + selectedSection: SettingSection; +} + const SettingDialog: React.FC = (props: Props) => { const { destroy } = props; + const [state, setState] = useState({ + selectedSection: "my-account", + }); - useEffect(() => { - memoService.fetchAllMemos(); - }, []); + const handleSectionSelectorItemClick = (settingSection: SettingSection) => { + setState({ + selectedSection: settingSection, + }); + }; return ( - <> -
-

- 👤 - Setting -

- +
+ +
+ handleSectionSelectorItemClick("my-account")} + className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`} + > + My account + + handleSectionSelectorItemClick("preferences")} + className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`} + > + Preferences +
-
- - +
+ {state.selectedSection === "my-account" ? ( + + ) : state.selectedSection === "preferences" ? ( + + ) : null}
- +
); }; diff --git a/web/src/less/setting-dialog.less b/web/src/less/setting-dialog.less index 2ad44115..d26ed2df 100644 --- a/web/src/less/setting-dialog.less +++ b/web/src/less/setting-dialog.less @@ -3,28 +3,53 @@ .setting-dialog { > .dialog-container { - @apply w-168 max-w-full mb-8; + @apply w-168 max-w-full mb-8 p-0; > .dialog-content-container { .flex(column, flex-start, flex-start); - @apply w-full overflow-y-scroll px-3; + @apply relative w-full overflow-y-scroll p-0 flex flex-row justify-start items-start; .hide-scroll-bar(); - > .section-container { - .flex(column, flex-start, flex-start); - @apply w-full my-2; + > .close-btn { + .flex(column, center, center); + @apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200; - > .title-text { - @apply text-base font-bold mb-2; - color: @text-black; + > .icon-img { + @apply w-5 h-5; } + } - > .form-label { - .flex(row, flex-start, center); - @apply w-full text-sm mb-2; + > .section-selector-container { + @apply w-40 h-full shrink-0 rounded-l-lg p-4 bg-gray-100 flex flex-col justify-start items-start; - > .normal-text { - @apply shrink-0; + > .section-item { + @apply text-sm left-6 mt-2 cursor-pointer hover:opacity-80; + + &.selected { + @apply font-bold hover:opacity-100; + } + } + } + + > .section-content-container { + @apply w-auto p-4 grow flex flex-col justify-start items-start; + + > .section-container { + .flex(column, flex-start, flex-start); + @apply w-full my-2; + + > .title-text { + @apply text-base font-bold mb-2; + color: @text-black; + } + + > .form-label { + .flex(row, flex-start, center); + @apply w-full text-sm mb-2; + + > .normal-text { + @apply shrink-0; + } } } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index da318b4d..a574b203 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -11,14 +11,12 @@ module.exports = { "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", - "5xl": "3rem", - "6xl": "4rem", - "7xl": "5rem", }, extend: { spacing: { 128: "32rem", 168: "42rem", + 200: "50rem", }, zIndex: { 100: "100", diff --git a/web/yarn.lock b/web/yarn.lock index 6a1551db..c6858707 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -333,14 +333,14 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-dom@^18.0.1": - version "18.0.1" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.1.tgz#cb3cc10ea91141b12c71001fede1017acfbce4db" - integrity sha512-jCwTXvHtRLiyVvKm9aEdHXs8rflVOGd5Sl913JZrPshfXjn8NYsTNZOz70bCsA31IR0TOqwi3ad+X4tSCBoMTw== +"@types/react-dom@^18.0.3": + version "18.0.3" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831" + integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ== dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.5": +"@types/react@*": version "18.0.5" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301" integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ== @@ -349,6 +349,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^18.0.8": + version "18.0.8" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87" + integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/scheduler@*": version "0.16.2" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" @@ -1896,13 +1905,13 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -react-dom@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" - integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== +react-dom@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" + integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w== dependencies: loose-envify "^1.1.0" - scheduler "^0.21.0" + scheduler "^0.22.0" react-is@^16.13.1: version "16.13.1" @@ -1914,10 +1923,10 @@ react-refresh@^0.12.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.12.0.tgz#28ac0a2c30ef2bb3433d5fd0621e69a6d774c3a4" integrity sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A== -react@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" - integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== +react@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" + integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ== dependencies: loose-envify "^1.1.0" @@ -2004,10 +2013,10 @@ sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.21.0: - version "0.21.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" - integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== +scheduler@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" + integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ== dependencies: loose-envify "^1.1.0"