From 0c9d5467ed9d60400b28c620ee86cbb51b384ebc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
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<IProps> = () => {
const [text, setText] = useState('');
+ const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
return (
<Card className={styles.card}>
@@ -20,6 +23,9 @@ const BorisUIDemo: FC<IProps> = () => {
разработке
</p>
+ <h2>Тестовые фичи</h2>
+ <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+
<h2>Инпуты</h2>
<form autoComplete="off">
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<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }) => {
+const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
const onInputChange = useCallback(
async (event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files?.length) {
@@ -31,6 +31,8 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }
className={styles.avatar}
style={{
backgroundImage,
+ width: size,
+ height: size,
}}
>
{canEdit && <input type="file" onInput={onInputChange} />}
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<IProps> = ({ isOwn }) => {
return (
<div>
<Group className={styles.wrap} horizontal>
- <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={photo} />
+ <div className={styles.avatar}>
+ <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={photo} />
+ </div>
<div className={styles.field}>
<div className={styles.name}>
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<ProfileSidebarHeadProps> = () => {
+ const { user } = useUser();
+ const { updatePhoto } = usePatchUser();
+
+ return (
+ <Group horizontal>
+ <ProfileAvatar canEdit onChangePhoto={updatePhoto} photo={user.photo} size={72} />
+
+ <Filler>
+ <h2>{user.fullname || user.username}</h2>
+ </Filler>
+ </Group>
+ );
+};
+
+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<ProfileSidebarProps> = ({ onRequestClose }) => {
+ return (
+ <SidebarWrapper onClose={onRequestClose}>
+ <div className={styles.wrap}>
+ <div className={styles.content}>
+ <div>
+ <ProfileSidebarHead />
+ </div>
+
+ <Filler className={classNames(markdown.wrapper, styles.text)}>
+ <h3>Здесь будет профиль</h3>
+
+ <p>
+ Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки
+ </p>
+ </Filler>
+
+ <Button round onClick={onRequestClose} color="secondary">
+ Закрыть
+ </Button>
+ </div>
+ </div>
+ </SidebarWrapper>
+ );
+};
+
+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;