Skip to content

C
canifa_note
Commit 48a20c2b authored by boojack's avatar boojack
Browse files
Options

chore: update setting dialog

parent f5aaaca9
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 56 deletions
web/package.json
View file @ 48a20c2b
......@@ -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",
......
web/src/components/SettingDialog.tsx
View file @ 48a20c2b
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: Props) => {
const { destroy } = props;
const [state, setState] = useState<State>({
selectedSection: "my-account",
});
useEffect(() => {
memoService.fetchAllMemos();
}, []);
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
setState({
selectedSection: settingSection,
});
};
return (
<>
<div className="dialog-header-container">
<p className="title-text">
<span className="icon-text">👤</span>
Setting
</p>
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
</button>
<div className="dialog-content-container">
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
</button>
<div className="section-selector-container">
<span
onClick={() => handleSectionSelectorItemClick("my-account")}
className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`}
>
My account
</span>
<span
onClick={() => handleSectionSelectorItemClick("preferences")}
className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
>
Preferences
</span>
</div>
<div className="dialog-content-container">
<MyAccountSection />
<PreferencesSection />
<div className="section-content-container">
{state.selectedSection === "my-account" ? (
<MyAccountSection />
) : state.selectedSection === "preferences" ? (
<PreferencesSection />
) : null}
</div>
</>
</div>
);
};
......
web/src/less/setting-dialog.less
View file @ 48a20c2b
......@@ -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;
}
}
> .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;
> .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;
> .form-label {
.flex(row, flex-start, center);
@apply w-full text-sm mb-2;
> .normal-text {
@apply shrink-0;
> .normal-text {
@apply shrink-0;
}
}
}
}
......
web/tailwind.config.js
View file @ 48a20c2b
......@@ -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",
......
web/yarn.lock
View file @ 48a20c2b
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment