From e28fdd2c05e8e80b59352e10b605949fada41843 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 17 Nov 2020 18:00:03 +0700 Subject: [PATCH] added settings tab to profile --- .../ProfileSettings/styles.module.scss | 1 + .../profile/ProfileSidebarMenu/index.tsx | 11 +++++--- .../ProfileSidebarMenu/styles.module.scss | 3 +++ .../profile/ProfileSidebarSettings/index.tsx | 22 ++++++++++++++++ .../ProfileSidebarSettings/styles.module.scss | 24 +++++++++++++++++ .../sidebars/ProfileSidebar/index.tsx | 22 ++++++++++++---- .../ProfileSidebar/styles.module.scss | 26 +++++++++++++++++++ .../sidebars/SidebarWrapper/index.tsx | 6 ++--- .../SidebarWrapper/styles.module.scss | 4 --- src/styles/variables.scss | 2 +- 10 files changed, 103 insertions(+), 18 deletions(-) create mode 100644 src/components/profile/ProfileSidebarSettings/index.tsx create mode 100644 src/components/profile/ProfileSidebarSettings/styles.module.scss diff --git a/src/components/profile/ProfileSettings/styles.module.scss b/src/components/profile/ProfileSettings/styles.module.scss index 03139f25..14c05b56 100644 --- a/src/components/profile/ProfileSettings/styles.module.scss +++ b/src/components/profile/ProfileSettings/styles.module.scss @@ -3,6 +3,7 @@ $pad_usual: mix(white, $content_bg, 10%); .wrap { padding: $gap; + z-index: 4; } .pad { diff --git a/src/components/profile/ProfileSidebarMenu/index.tsx b/src/components/profile/ProfileSidebarMenu/index.tsx index af89fb41..c01ead4c 100644 --- a/src/components/profile/ProfileSidebarMenu/index.tsx +++ b/src/components/profile/ProfileSidebarMenu/index.tsx @@ -1,15 +1,18 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Icon } from '~/components/input/Icon'; +import { Link } from 'react-router-dom'; -interface IProps {} +interface IProps { + path: string; +} -const ProfileSidebarMenu: FC = () => ( +const ProfileSidebarMenu: FC = ({ path }) => (
-
+ Настройки -
+
diff --git a/src/components/profile/ProfileSidebarMenu/styles.module.scss b/src/components/profile/ProfileSidebarMenu/styles.module.scss index c1541578..7bf2a3a9 100644 --- a/src/components/profile/ProfileSidebarMenu/styles.module.scss +++ b/src/components/profile/ProfileSidebarMenu/styles.module.scss @@ -22,6 +22,9 @@ justify-content: flex-start; height: 30px; opacity: 0.5; + text-decoration: none; + fill: white; + color: white; &:hover { background-color: transparentize($wisegreen, 0.5); diff --git a/src/components/profile/ProfileSidebarSettings/index.tsx b/src/components/profile/ProfileSidebarSettings/index.tsx new file mode 100644 index 00000000..8e30fc7d --- /dev/null +++ b/src/components/profile/ProfileSidebarSettings/index.tsx @@ -0,0 +1,22 @@ +import React, { FC } from 'react'; +import { ProfileSettings } from '~/components/profile/ProfileSettings'; +import styles from './styles.module.scss'; +import { Filler } from '~/components/containers/Filler'; +import { Button } from '~/components/input/Button'; + +interface IProps {} + +const ProfileSidebarSettings: FC = () => ( +
+
+ +
+
+ + + +
+
+); + +export { ProfileSidebarSettings }; diff --git a/src/components/profile/ProfileSidebarSettings/styles.module.scss b/src/components/profile/ProfileSidebarSettings/styles.module.scss new file mode 100644 index 00000000..012d20c1 --- /dev/null +++ b/src/components/profile/ProfileSidebarSettings/styles.module.scss @@ -0,0 +1,24 @@ +.wrap { + @include sidebar_content(600px); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + z-index: 4; +} + +.scroller { + flex: 1; + overflow: auto; + padding: $gap; +} + +.buttons { + width: 100%; + padding: $gap; + box-shadow: $sidebar_border 0 -1px; + box-sizing: border-box; + display: grid; + grid-template-columns: 1fr auto auto; + grid-column-gap: $gap; +} diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index 7b7895a3..308cad8f 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect, useState } from 'react'; import styles from './styles.module.scss'; import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper'; import { connect } from 'react-redux'; @@ -6,10 +6,13 @@ import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors'; import pick from 'ramda/es/pick'; import { ProfileSidebarInfo } from '~/components/profile/ProfileSidebarInfo'; import { Filler } from '~/components/containers/Filler'; -import { useHistory, useRouteMatch } from 'react-router'; +import { Route, Switch, useHistory, useRouteMatch } from 'react-router'; import * as USER_ACTIONS from '~/redux/auth/actions'; import { ProfileSidebarMenu } from '~/components/profile/ProfileSidebarMenu'; import { useCloseOnEscape } from '~/utils/hooks'; +import { Icon } from '~/components/input/Icon'; +import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings'; +import classNames from 'classnames'; const mapStateToProps = state => ({ profile: selectAuthProfile(state), @@ -23,7 +26,7 @@ const mapDispatchToProps = { type Props = ReturnType & typeof mapDispatchToProps & {}; const ProfileSidebarUnconnected: FC = ({ - profile: { is_loading, user, tab }, + profile: { is_loading, user }, user: { id }, authLoadProfile, }) => { @@ -39,13 +42,22 @@ const ProfileSidebarUnconnected: FC = ({ const history = useHistory(); const basePath = url.replace(new RegExp(`\/~${username}$`), ''); const onClose = useCallback(() => history.push(basePath), [basePath]); + useCloseOnEscape(onClose); return ( -
+
+ +
+ + + + + +
- +
diff --git a/src/containers/sidebars/ProfileSidebar/styles.module.scss b/src/containers/sidebars/ProfileSidebar/styles.module.scss index 079b500c..652ef206 100644 --- a/src/containers/sidebars/ProfileSidebar/styles.module.scss +++ b/src/containers/sidebars/ProfileSidebar/styles.module.scss @@ -1,5 +1,31 @@ .wrap { @include sidebar_content; + display: flex; flex-direction: column; + position: relative; + z-index: 2; + + &.secondary { + background: transparentize($content_bg, 0.2); + } +} + +.close { + position: absolute; + right: 0; + top: 0; + padding: $gap / 2; + background: $content_bg; + z-index: 6; + border-radius: 0 0 0 $radius; + cursor: pointer; + transition: all 100ms; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + fill: $red; + } } diff --git a/src/containers/sidebars/SidebarWrapper/index.tsx b/src/containers/sidebars/SidebarWrapper/index.tsx index 28c2b7db..757d25e5 100644 --- a/src/containers/sidebars/SidebarWrapper/index.tsx +++ b/src/containers/sidebars/SidebarWrapper/index.tsx @@ -21,11 +21,9 @@ const SidebarWrapper: FC = ({ children, onClose }) => { }, [ref.current]); return createPortal( -
+
-
- {children} -
+ {children}
, document.body ); diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss index 7c806159..fe6b7def 100644 --- a/src/containers/sidebars/SidebarWrapper/styles.module.scss +++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss @@ -24,10 +24,6 @@ } .content { - flex: 0 1 33vw; - width: 33vw; - min-width: 480px; - max-width: 100vw; height: 100%; overflow: auto; display: flex; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 2a0623be..8577202c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -203,7 +203,7 @@ $sidebar_border: transparentize(white, 0.95); height: 100%; box-sizing: border-box; display: flex; - flex: 0 1 400px; + flex: 0 1 $width; max-width: 100vw; position: relative; background: transparentize($content_bg, 0.4);