From 0c9d5467ed9d60400b28c620ee86cbb51b384ebc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 11 Jan 2022 16:34:26 +0700 Subject: [PATCH] added empty profile sidebar --- src/components/boris/BorisUIDemo/index.tsx | 6 +++ .../NodeImageSwiperBlock/styles.module.scss | 2 + .../profile/ProfileAvatar/index.tsx | 6 ++- .../profile/ProfileAvatar/styles.module.scss | 4 +- src/constants/modal/index.ts | 3 ++ src/containers/profile/ProfileInfo/index.tsx | 4 +- .../profile/ProfileInfo/styles.module.scss | 7 ---- .../profile/ProfileSidebarHead/index.tsx | 25 ++++++++++++ .../sidebars/ProfileSidebar/index.tsx | 39 +++++++++++++++++++ .../ProfileSidebar/styles.module.scss | 22 +++++++++++ src/styles/_global.scss | 33 ++++++++++++++++ src/styles/common/markdown.module.scss | 30 -------------- 12 files changed, 138 insertions(+), 43 deletions(-) create mode 100644 src/containers/profile/ProfileSidebarHead/index.tsx create mode 100644 src/containers/sidebars/ProfileSidebar/index.tsx create mode 100644 src/containers/sidebars/ProfileSidebar/styles.module.scss diff --git a/src/components/boris/BorisUIDemo/index.tsx b/src/components/boris/BorisUIDemo/index.tsx index d8b3a0db..38cd6529 100644 --- a/src/components/boris/BorisUIDemo/index.tsx +++ b/src/components/boris/BorisUIDemo/index.tsx @@ -5,11 +5,14 @@ import markdown from '~/styles/common/markdown.module.scss'; import { Group } from '~/components/containers/Group'; import { Button } from '~/components/input/Button'; import { InputText } from '~/components/input/InputText'; +import { useShowModal } from '~/hooks/modal/useShowModal'; +import { Dialog } from '~/constants/modal'; interface IProps {} const BorisUIDemo: FC = () => { const [text, setText] = useState(''); + const openProfileSidebar = useShowModal(Dialog.ProfileSidebar); return ( @@ -20,6 +23,9 @@ const BorisUIDemo: FC = () => { разработке

+

Тестовые фичи

+ +

Инпуты

diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index 19176721..dc800a8f 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -25,6 +25,8 @@ :global(.swiper-button-next), :global(.swiper-button-prev) { + @include outer_shadow; + color: white; font-size: 10px; width: 40px; diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index 75be4b4f..f272c391 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -2,17 +2,17 @@ import React, { ChangeEvent, FC, useCallback } from 'react'; import styles from './styles.module.scss'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; -import { Icon } from '~/components/input/Icon'; import { IFile } from '~/types'; import { Button } from '~/components/input/Button'; export interface ProfileAvatarProps { + size?: number; canEdit: boolean; photo?: IFile; onChangePhoto: (file: File) => void; } -const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit }) => { +const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit, size }) => { const onInputChange = useCallback( async (event: ChangeEvent) => { if (!event.target.files?.length) { @@ -31,6 +31,8 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit } className={styles.avatar} style={{ backgroundImage, + width: size, + height: size, }} > {canEdit && } diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index 8d4db746..3d18310c 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -8,10 +8,8 @@ height: 100px; background: $content_bg 50% 50% no-repeat; background-size: cover; - position: absolute; - bottom: 0; - left: $gap; cursor: pointer; + position: relative; input { position: absolute; diff --git a/src/constants/modal/index.ts b/src/constants/modal/index.ts index 9f7ada36..949af46a 100644 --- a/src/constants/modal/index.ts +++ b/src/constants/modal/index.ts @@ -9,6 +9,7 @@ import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe'; import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog'; import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog'; import { TagSidebar } from '~/containers/sidebars/TagSidebar'; +import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar'; export enum Dialog { Login = 'Login', @@ -22,6 +23,7 @@ export enum Dialog { CreateNode = 'CreateNode', EditNode = 'EditNode', TagSidebar = 'TagNodes', + ProfileSidebar = 'ProfileSidebar', } export const DIALOG_CONTENT = { @@ -36,4 +38,5 @@ export const DIALOG_CONTENT = { [Dialog.CreateNode]: EditorCreateDialog, [Dialog.EditNode]: EditorEditDialog, [Dialog.TagSidebar]: TagSidebar, + [Dialog.ProfileSidebar]: ProfileSidebar, } as const; diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx index fb687e5a..8046eb09 100644 --- a/src/containers/profile/ProfileInfo/index.tsx +++ b/src/containers/profile/ProfileInfo/index.tsx @@ -27,7 +27,9 @@ const ProfileInfo: FC = ({ isOwn }) => { return (
- +
+ +
diff --git a/src/containers/profile/ProfileInfo/styles.module.scss b/src/containers/profile/ProfileInfo/styles.module.scss index abbee948..7e490d63 100644 --- a/src/containers/profile/ProfileInfo/styles.module.scss +++ b/src/containers/profile/ProfileInfo/styles.module.scss @@ -8,13 +8,6 @@ } .avatar { - @include outer_shadow(); - - border-radius: $radius; - width: 100px; - height: 100px; - background: $content_bg 50% 50% no-repeat; - background-size: cover; position: absolute; bottom: 0; left: $gap; diff --git a/src/containers/profile/ProfileSidebarHead/index.tsx b/src/containers/profile/ProfileSidebarHead/index.tsx new file mode 100644 index 00000000..64e23194 --- /dev/null +++ b/src/containers/profile/ProfileSidebarHead/index.tsx @@ -0,0 +1,25 @@ +import React, { VFC } from 'react'; +import { Group } from '~/components/containers/Group'; +import { Filler } from '~/components/containers/Filler'; +import { ProfileAvatar } from '~/components/profile/ProfileAvatar'; +import { usePatchUser } from '~/hooks/auth/usePatchUser'; +import { useUser } from '~/hooks/auth/useUser'; + +interface ProfileSidebarHeadProps {} + +const ProfileSidebarHead: VFC = () => { + const { user } = useUser(); + const { updatePhoto } = usePatchUser(); + + return ( + + + + +

{user.fullname || user.username}

+ + + ); +}; + +export { ProfileSidebarHead }; diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx new file mode 100644 index 00000000..b1143f0d --- /dev/null +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -0,0 +1,39 @@ +import React, { VFC } from 'react'; +import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper'; +import styles from './styles.module.scss'; +import { DialogComponentProps } from '~/types/modal'; +import markdown from '~/styles/common/markdown.module.scss'; +import { Button } from '~/components/input/Button'; +import { Filler } from '~/components/containers/Filler'; +import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead'; +import classNames from 'classnames'; + +interface ProfileSidebarProps extends DialogComponentProps {} + +const ProfileSidebar: VFC = ({ onRequestClose }) => { + return ( + +
+
+
+ +
+ + +

Здесь будет профиль

+ +

+ Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки +

+ + + +
+
+ + ); +}; + +export { ProfileSidebar }; diff --git a/src/containers/sidebars/ProfileSidebar/styles.module.scss b/src/containers/sidebars/ProfileSidebar/styles.module.scss new file mode 100644 index 00000000..7e37ee0c --- /dev/null +++ b/src/containers/sidebars/ProfileSidebar/styles.module.scss @@ -0,0 +1,22 @@ +@import "src/styles/variables"; + +.wrap { + @include sidebar_content(400px); +} + +.content { + border-radius: $radius; + height: 100%; + box-sizing: border-box; + overflow: auto; + display: flex; + min-height: 0; + flex-direction: column; + width: 100%; + max-width: 400px; + padding: $gap; +} + +.text { + margin-top: $gap * 2; +} diff --git a/src/styles/_global.scss b/src/styles/_global.scss index e2ab3236..c073498c 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -128,3 +128,36 @@ button { background-color: transparent; outline: none; } + +h5, h4, h3, h2, h1 { + color: white; + font-weight: 800; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.8em; +} + +h3 { + font-size: 1.6em; +} + +h4 { + font-size: 1.4em; +} + +h5 { + font-size: 1.2em; +} + +p { + margin-bottom: $gap; + + &:last-child { + margin-bottom: 0; + } +} diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index 875b3de3..cba76dc7 100644 --- a/src/styles/common/markdown.module.scss +++ b/src/styles/common/markdown.module.scss @@ -53,17 +53,7 @@ $margin: 1em; margin-bottom: $margin; } - p { - margin-bottom: $margin; - - &:last-child { - margin-bottom: 0; - } - } - h5, h4, h3, h2, h1 { - color: white; - font-weight: 800; line-height: 1.2em; margin: $margin * 1.5 0 $margin / 2; @@ -72,26 +62,6 @@ $margin: 1em; } } - h1 { - font-size: 2em; - } - - h2 { - font-size: 1.8em; - } - - h3 { - font-size: 1.6em; - } - - h4 { - font-size: 1.4em; - } - - h5 { - font-size: 1.2em; - } - ul { list-style: disc; padding-left: 20px;