From 100c4c138ac25683a39f40df7bdb971c42ecc47f Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 25 Mar 2022 20:52:39 +0700 Subject: [PATCH] added sample settings page --- src/components/input/InputText/index.tsx | 3 + .../input/InputText/styles.module.scss | 2 +- src/components/lab/LabHead/index.tsx | 18 ++--- src/components/lab/LabHead/styles.module.scss | 18 ----- .../HorizontalMenu}/index.tsx | 33 ++++++--- .../HorizontalMenu}/styles.module.scss | 22 +++++- src/components/menu/VerticalMenu/index.tsx | 32 +++++++++ .../menu/VerticalMenu/styles.module.scss | 47 +++++++++++++ .../settings/SettingsMenu/index.tsx | 53 ++++++++++++++ src/constants/urls.ts | 9 +-- src/containers/App.tsx | 2 +- .../profile/ProfileSidebarMenu/index.tsx | 40 +++-------- .../ProfileSidebarMenu/styles.module.scss | 32 --------- src/containers/profile/ProfileStats/index.tsx | 42 +++++++++++ .../settings/SettingsDeleted/index.tsx | 45 ++++++++++++ .../SettingsDeleted/styles.module.scss | 13 ++++ .../settings/SettingsNotes/index.tsx | 70 +++++++++++++++++++ .../settings/SettingsNotes/styles.module.scss | 27 +++++++ src/layouts/BorisLayout/index.tsx | 19 ++++- .../main => layouts}/MainLayout/index.tsx | 0 .../MainLayout/styles.module.scss | 0 src/layouts/SettingsLayout/index.tsx | 28 ++++++++ src/layouts/SettingsLayout/styles.module.scss | 26 +++++++ src/pages/_app.tsx | 2 +- src/pages/settings/index.tsx | 18 +++++ src/pages/settings/notes.tsx | 18 +++++ src/pages/settings/trash.tsx | 18 +++++ src/types/index.ts | 1 + tsconfig.tsbuildinfo | 2 +- 29 files changed, 527 insertions(+), 113 deletions(-) rename src/components/{lab/LabHeadItem => menu/HorizontalMenu}/index.tsx (51%) rename src/components/{lab/LabHeadItem => menu/HorizontalMenu}/styles.module.scss (72%) create mode 100644 src/components/menu/VerticalMenu/index.tsx create mode 100644 src/components/menu/VerticalMenu/styles.module.scss create mode 100644 src/components/settings/SettingsMenu/index.tsx create mode 100644 src/containers/profile/ProfileStats/index.tsx create mode 100644 src/containers/settings/SettingsDeleted/index.tsx create mode 100644 src/containers/settings/SettingsDeleted/styles.module.scss create mode 100644 src/containers/settings/SettingsNotes/index.tsx create mode 100644 src/containers/settings/SettingsNotes/styles.module.scss rename src/{containers/main => layouts}/MainLayout/index.tsx (100%) rename src/{containers/main => layouts}/MainLayout/styles.module.scss (100%) create mode 100644 src/layouts/SettingsLayout/index.tsx create mode 100644 src/layouts/SettingsLayout/styles.module.scss create mode 100644 src/pages/settings/index.tsx create mode 100644 src/pages/settings/notes.tsx create mode 100644 src/pages/settings/trash.tsx diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index 3769d58d..577e0128 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -18,6 +18,7 @@ const InputText: FC = ({ error, value = '', suffix, + prefix, ...props }) => { const { focused, onFocus, onBlur } = useFocusEvent(); @@ -43,6 +44,8 @@ const InputText: FC = ({ return (
+ {!!prefix &&
{prefix}
} + = ({ isLoading }) => { return ( -
- + = ({ isLoading }) => { onClick={() => setSort(LabNodesSort.New)} > Свежие - + - = ({ isLoading }) => { onClick={() => setSort(LabNodesSort.Hot)} > Популярные - + - = ({ isLoading }) => { onClick={() => setSort(LabNodesSort.Heroic)} > Важные - -
+ + ); }; diff --git a/src/components/lab/LabHead/styles.module.scss b/src/components/lab/LabHead/styles.module.scss index 75c249db..65568e8d 100644 --- a/src/components/lab/LabHead/styles.module.scss +++ b/src/components/lab/LabHead/styles.module.scss @@ -3,21 +3,3 @@ .wrap { border-radius: $radius; } - -.group { - @include inner_shadow; - display: flex; - background-color: $content_bg; - border-radius: $radius; - - @include tablet { - flex-wrap: wrap; - align-items: stretch; - justify-content: center; - flex: 1; - } - - & > * { - padding: $gap; - } -} diff --git a/src/components/lab/LabHeadItem/index.tsx b/src/components/menu/HorizontalMenu/index.tsx similarity index 51% rename from src/components/lab/LabHeadItem/index.tsx rename to src/components/menu/HorizontalMenu/index.tsx index 2bb5437b..51daf0d2 100644 --- a/src/components/lab/LabHeadItem/index.tsx +++ b/src/components/menu/HorizontalMenu/index.tsx @@ -1,22 +1,38 @@ -import React, { FC } from 'react'; +import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; -import { Group } from '~/components/containers/Group'; import { Icon } from '~/components/input/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; +import { DivProps } from '~/utils/types'; import styles from './styles.module.scss'; -interface IProps { - icon: string; - color: 'green' | 'orange' | 'yellow'; +interface HorizontalMenuProps extends DivProps {} +interface HorizontalMenuItemProps { isLoading?: boolean; + icon?: string; + color?: 'green' | 'orange' | 'yellow'; active?: boolean; onClick?: () => void; } -const LabHeadItem: FC = ({ icon, color, children, isLoading, active, onClick }) => { +function HorizontalMenu({ children, ...props }: HorizontalMenuProps) { + return ( +
+ {children} +
+ ); +} + +HorizontalMenu.Item = ({ + icon, + color = 'green', + children, + isLoading, + active, + onClick, +}: PropsWithChildren) => { if (isLoading) { return (
@@ -31,10 +47,9 @@ const LabHeadItem: FC = ({ icon, color, children, isLoading, active, onC className={classNames(styles.item, { [styles.active]: active }, styles[color])} onClick={onClick} > - + {!!icon && } {children}
); }; - -export { LabHeadItem }; +export { HorizontalMenu }; diff --git a/src/components/lab/LabHeadItem/styles.module.scss b/src/components/menu/HorizontalMenu/styles.module.scss similarity index 72% rename from src/components/lab/LabHeadItem/styles.module.scss rename to src/components/menu/HorizontalMenu/styles.module.scss index 264cb1a8..038585a6 100644 --- a/src/components/lab/LabHeadItem/styles.module.scss +++ b/src/components/menu/HorizontalMenu/styles.module.scss @@ -1,8 +1,27 @@ @import "src/styles/variables.scss"; +.menu { + @include inner_shadow; + + display: flex; + background-color: $content_bg; + border-radius: $radius; + + @include tablet { + flex-wrap: wrap; + align-items: stretch; + justify-content: center; + flex: 1; + } + + & > * { + padding: $gap; + } +} + .item { flex: 0 0 auto; - padding: $gap * 0.5 $gap * 4 $gap * 0.5 $gap; + padding: $gap * 0.5 $gap $gap * 0.5 $gap; fill: currentColor; color: darken(white, 50%); transition: color 0.25s; @@ -43,7 +62,6 @@ .text { font: $font_14_semibold; text-transform: uppercase; - padding-bottom: 1px; padding-left: $gap * 0.75; padding-right: $gap * 0.35; diff --git a/src/components/menu/VerticalMenu/index.tsx b/src/components/menu/VerticalMenu/index.tsx new file mode 100644 index 00000000..f35c62e4 --- /dev/null +++ b/src/components/menu/VerticalMenu/index.tsx @@ -0,0 +1,32 @@ +import React, { PropsWithChildren } from 'react'; + +import classNames from 'classnames'; + +import { Card } from '~/components/containers/Card'; +import { DivProps, LinkProps } from '~/utils/types'; + +import styles from './styles.module.scss'; + +interface VerticalMenuProps extends DivProps { + appearance?: 'inset' | 'flat' | 'default'; +} + +interface VerticalMenuItemProps extends Omit {} + +function VerticalMenu({ + children, + appearance = 'default', + ...props +}: PropsWithChildren) { + return ( + + {children} + + ); +} + +VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => ( + +); + +export { VerticalMenu }; diff --git a/src/components/menu/VerticalMenu/styles.module.scss b/src/components/menu/VerticalMenu/styles.module.scss new file mode 100644 index 00000000..a211281c --- /dev/null +++ b/src/components/menu/VerticalMenu/styles.module.scss @@ -0,0 +1,47 @@ +@import "src/styles/variables"; +@import "src/styles/mixins"; + +.menu { + border-radius: $radius; + padding: 0 !important; + display: flex; + flex-direction: column; + + &.flat { + box-shadow: none; + } + + &.default { + @include outer_shadow; + } + + &.inset { + @include inner_shadow; + } +} + +a.item { + @include row_shadow; + + color: inherit; + text-decoration: none; + list-style: none; + margin: 0 !important; + padding: $gap; + font: $font_16_semibold; + cursor: pointer; + background-color: transparentize($secondary, 1); + transition: background-color 0.25s; + + &:hover { + background-color: transparentize($secondary, 0.5); + } + + &:first-child { + border-radius: $radius $radius 0 0; + } + + &:last-child { + border-radius: 0 0 $radius $radius; + } +} diff --git a/src/components/settings/SettingsMenu/index.tsx b/src/components/settings/SettingsMenu/index.tsx new file mode 100644 index 00000000..1bba1430 --- /dev/null +++ b/src/components/settings/SettingsMenu/index.tsx @@ -0,0 +1,53 @@ +import React, { VFC } from 'react'; + +import classNames from 'classnames'; +import Link from 'next/link'; + +import { Filler } from '~/components/containers/Filler'; +import { Group } from '~/components/containers/Group'; +import { Button } from '~/components/input/Button'; +import { VerticalMenu } from '~/components/menu/VerticalMenu'; +import { URLS } from '~/constants/urls'; +import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; +import styles from '~/containers/profile/ProfileSidebarMenu/styles.module.scss'; +import { ProfileStats } from '~/containers/profile/ProfileStats'; + +interface SettingsMenuProps {} + +const SettingsMenu: VFC = () => ( + + + +
+ + + + + Настройки + + + + Заметки + + + + Удалённые посты + + + +
+ + + + + + + + + + +); + +export { SettingsMenu }; diff --git a/src/constants/urls.ts b/src/constants/urls.ts index cdf91d30..5b041551 100644 --- a/src/constants/urls.ts +++ b/src/constants/urls.ts @@ -16,11 +16,12 @@ export const URLS = { BACKEND_DOWN: '/oopsie', }, NODE_URL: (id: INode['id'] | string) => `/post${id}`, - NODE_EDIT_URL: (id: INode['id'] | string) => `/post${id}/edit`, - NODE_CREATE_URL: (type: string) => `/`, - NODE_TAG_URL: (id: number, tagName: string) => `/post${id}/tag/${tagName}`, - PROFILE: (username: string) => `/~${username}`, PROFILE_PAGE: (username: string) => `/profile/${username}`, + SETTINGS: { + BASE: '/settings', + NOTES: '/settings/notes', + TRASH: '/settings/trash', + }, }; export const ImagePresets = { diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 00110ea8..a7e657a2 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -6,10 +6,10 @@ import { BrowserRouter } from 'react-router-dom'; import { PageCoverProvider } from '~/components/containers/PageCoverProvider'; import { Modal } from '~/containers/dialogs/Modal'; import { BottomContainer } from '~/containers/main/BottomContainer'; -import { MainLayout } from '~/containers/main/MainLayout'; import { MainRouter } from '~/containers/main/MainRouter'; import { DragDetectorProvider } from '~/hooks/dom/useDragDetector'; import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; +import { MainLayout } from '~/layouts/MainLayout'; import { Sprites } from '~/sprites/Sprites'; import { UserContextProvider } from '~/utils/context/UserContextProvider'; import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider'; diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx index 9c6cc2dc..6bf81045 100644 --- a/src/containers/profile/ProfileSidebarMenu/index.tsx +++ b/src/containers/profile/ProfileSidebarMenu/index.tsx @@ -8,8 +8,10 @@ import { Filler } from '~/components/containers/Filler'; import { Grid } from '~/components/containers/Grid'; import { Group } from '~/components/containers/Group'; import { Button } from '~/components/input/Button'; +import { VerticalMenu } from '~/components/menu/VerticalMenu'; import { useStackContext } from '~/components/sidebar/SidebarStack'; import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; +import { ProfileStats } from '~/containers/profile/ProfileStats'; import markdown from '~/styles/common/markdown.module.scss'; import styles from './styles.module.scss'; @@ -29,39 +31,13 @@ const ProfileSidebarMenu: VFC = ({ onClose }) => { -
    -
  • setActiveTab(0)}>Настройки
    • -
  • setActiveTab(1)}>Заметки
    • -
  • setActiveTab(2)}>Удалённые посты
    • -
+ + setActiveTab(0)}>Настройки + setActiveTab(1)}>Заметки + setActiveTab(2)}>Удалённые посты + - - -

1 год 2 месяца

- в убежище - - - - -

24 поста

- Создано - - - - - - - -

16545 лайка

- получено - - - - -

123123 комментария

- под постами - - + diff --git a/src/containers/profile/ProfileSidebarMenu/styles.module.scss b/src/containers/profile/ProfileSidebarMenu/styles.module.scss index 2d0d3a50..b2c470b1 100644 --- a/src/containers/profile/ProfileSidebarMenu/styles.module.scss +++ b/src/containers/profile/ProfileSidebarMenu/styles.module.scss @@ -11,35 +11,3 @@ .text { margin-top: $gap * 2; } - -.menu { - @include outer_shadow; - - list-style: none; - border-radius: $radius; - padding: 0 !important; - - & > li { - @include row_shadow; - - list-style: none; - margin: 0 !important; - padding: $gap; - font: $font_16_semibold; - cursor: pointer; - background-color: transparentize($secondary, 1); - transition: background-color 0.25s; - - &:hover { - background-color: transparentize($secondary, 0.5); - } - - &:first-child { - border-radius: $radius $radius 0 0; - } - - &:last-child { - border-radius: 0 0 $radius $radius; - } - } -} diff --git a/src/containers/profile/ProfileStats/index.tsx b/src/containers/profile/ProfileStats/index.tsx new file mode 100644 index 00000000..13906ef1 --- /dev/null +++ b/src/containers/profile/ProfileStats/index.tsx @@ -0,0 +1,42 @@ +import React, { VFC } from 'react'; + +import { Square } from '~/components/common/Square'; +import { Card } from '~/components/containers/Card'; +import { Grid } from '~/components/containers/Grid'; +import { Group } from '~/components/containers/Group'; + +interface ProfileStatsProps {} + +const ProfileStats: VFC = () => ( + + + +

1 год 2 месяца

+ в убежище + + + + +

24 поста

+ Создано + + + + + + + +

16545 лайка

+ получено + + + + +

123123 комментария

+ под постами + + + +); + +export { ProfileStats }; diff --git a/src/containers/settings/SettingsDeleted/index.tsx b/src/containers/settings/SettingsDeleted/index.tsx new file mode 100644 index 00000000..6c1e495e --- /dev/null +++ b/src/containers/settings/SettingsDeleted/index.tsx @@ -0,0 +1,45 @@ +import React, { VFC } from 'react'; + +import { Filler } from '~/components/containers/Filler'; +import { Group } from '~/components/containers/Group'; +import { Padder } from '~/components/containers/Padder'; +import { FlowRecentItem } from '~/components/flow/FlowRecentItem'; +import { Icon } from '~/components/input/Icon'; +import { InputText } from '~/components/input/InputText'; +import { HorizontalMenu } from '~/components/menu/HorizontalMenu'; +import { useFlowStore } from '~/store/flow/useFlowStore'; + +import styles from './styles.module.scss'; + +interface SettingsDeletedProps {} + +const SettingsDeleted: VFC = () => { + const { nodes } = useFlowStore(); + + return ( + + + + Новые + Старые + + + + + } /> + + +
+ +
+ {nodes.map(node => ( +
+ +
+ ))} +
+ + ); +}; + +export { SettingsDeleted }; diff --git a/src/containers/settings/SettingsDeleted/styles.module.scss b/src/containers/settings/SettingsDeleted/styles.module.scss new file mode 100644 index 00000000..d643e643 --- /dev/null +++ b/src/containers/settings/SettingsDeleted/styles.module.scss @@ -0,0 +1,13 @@ +@import "src/styles/variables"; + +.grid { + min-width: 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-column-gap: $gap; + grid-row-gap: $gap; +} + +.item { + min-width: 0; +} diff --git a/src/containers/settings/SettingsNotes/index.tsx b/src/containers/settings/SettingsNotes/index.tsx new file mode 100644 index 00000000..6420bf08 --- /dev/null +++ b/src/containers/settings/SettingsNotes/index.tsx @@ -0,0 +1,70 @@ +import React, { useState, VFC } from 'react'; + +import Masonry from 'react-masonry-css'; + +import { Card } from '~/components/containers/Card'; +import { Filler } from '~/components/containers/Filler'; +import { Group } from '~/components/containers/Group'; +import { Padder } from '~/components/containers/Padder'; +import { Button } from '~/components/input/Button'; +import { Icon } from '~/components/input/Icon'; +import { InputText } from '~/components/input/InputText'; +import { Textarea } from '~/components/input/Textarea'; +import { HorizontalMenu } from '~/components/menu/HorizontalMenu'; + +import styles from './styles.module.scss'; + +interface SettingsNotesProps {} + +const breakpointCols = { + default: 2, + 1280: 1, +}; + +const sampleNotes = [...new Array(40)].map((_, i) => ( + + {i} + +)); + +const SettingsNotes: VFC = () => { + const [text, setText] = useState(''); + + return ( +
+ + + + Новые + Старые + + + + + } /> + + + + + + +