From d652a7664035f9bb2ded5be83aa48e4655de84d0 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 5 Aug 2022 21:23:18 +0700 Subject: [PATCH] added superpowers toggle to sidebar --- .../auth/login/LoginScene/index.tsx | 34 ++--- src/components/boris/BorisSidebar/index.tsx | 32 ---- src/components/boris/Superpower/index.tsx | 10 +- src/components/containers/Zone/index.tsx | 6 +- .../containers/Zone/styles.module.scss | 8 +- .../editors/EditorButtons/index.tsx | 30 ++-- src/components/editors/ImageGrid/index.tsx | 20 +-- src/components/flow/FlowCell/index.tsx | 70 +++++---- src/components/flow/FlowSwiperHero/index.tsx | 43 +++--- src/components/node/NodeEditMenu/index.tsx | 38 +++-- .../auth/SuperPowersToggle/index.tsx | 22 +++ src/containers/boris/BorisSidebar/index.tsx | 30 ++++ src/containers/dialogs/PhotoSwipe/index.tsx | 65 +++++---- .../profile/ProfileSidebarMenu/index.tsx | 5 + .../ProfileSidebarMenu/styles.module.scss | 4 + .../profile/ProfileToggles/index.tsx | 17 +++ .../settings/UserSettingsView/index.tsx | 6 +- .../UserSettingsView/styles.module.scss | 8 +- .../sidebars/ProfileSidebar/index.tsx | 15 +- src/hooks/auth/useSuperPowers.ts | 9 ++ src/hooks/boris/useBoris.ts | 25 +--- src/hooks/dom/useWindowSize.ts | 18 ++- src/layouts/BorisLayout/index.tsx | 138 +++++++++--------- src/pages/boris.tsx | 28 ++-- tsconfig.tsbuildinfo | 2 +- 25 files changed, 400 insertions(+), 283 deletions(-) delete mode 100644 src/components/boris/BorisSidebar/index.tsx create mode 100644 src/containers/auth/SuperPowersToggle/index.tsx create mode 100644 src/containers/boris/BorisSidebar/index.tsx create mode 100644 src/containers/profile/ProfileToggles/index.tsx create mode 100644 src/hooks/auth/useSuperPowers.ts diff --git a/src/components/auth/login/LoginScene/index.tsx b/src/components/auth/login/LoginScene/index.tsx index 49fe29da..f03417af 100644 --- a/src/components/auth/login/LoginScene/index.tsx +++ b/src/components/auth/login/LoginScene/index.tsx @@ -1,10 +1,10 @@ -import { FC, memo, useCallback, useEffect, useRef, useState } from "react"; +import { FC, memo, useCallback, useEffect, useRef, useState } from 'react'; -import { debounce, throttle } from "throttle-debounce"; +import { debounce, throttle } from 'throttle-debounce'; -import { useWindowSize } from "~/hooks/dom/useWindowSize"; +import { useWindowSize } from '~/hooks/dom/useWindowSize'; -import styles from "./styles.module.scss"; +import styles from './styles.module.scss'; interface LoginSceneProps {} @@ -17,31 +17,31 @@ interface Layer { const layers: Layer[] = [ { - src: "/images/clouds__bg.svg", + src: '/images/clouds__bg.svg', velocity: -0.3, width: 3840, height: 1080, }, { - src: "/images/clouds__cube.svg", + src: '/images/clouds__cube.svg', velocity: -0.1, width: 3840, height: 1080, }, { - src: "/images/clouds__cloud.svg", + src: '/images/clouds__cloud.svg', velocity: 0.2, width: 3840, height: 1080, }, { - src: "/images/clouds__dudes.svg", + src: '/images/clouds__dudes.svg', velocity: 0.5, width: 3840, height: 1080, }, { - src: "/images/clouds__trash.svg", + src: '/images/clouds__trash.svg', velocity: 0.8, width: 3840, height: 1080, @@ -52,7 +52,7 @@ const LoginScene: FC = memo(() => { const containerRef = useRef(null); const [loaded, setLoaded] = useState(false); const imageRefs = useRef>([]); - const { isMobile } = useWindowSize(); + const { isTablet } = useWindowSize(); const domRect = useRef(); const onMouseMove = useCallback( @@ -84,11 +84,11 @@ const LoginScene: FC = memo(() => { useEffect(() => { const listener = throttle(100, onMouseMove); - document.addEventListener("mousemove", listener); - return () => document.removeEventListener("mousemove", listener); + document.addEventListener('mousemove', listener); + return () => document.removeEventListener('mousemove', listener); }, []); - if (isMobile) { + if (isTablet) { return null; } @@ -103,16 +103,16 @@ const LoginScene: FC = memo(() => { > - + - + diff --git a/src/components/boris/BorisSidebar/index.tsx b/src/components/boris/BorisSidebar/index.tsx deleted file mode 100644 index b8b8b78f..00000000 --- a/src/components/boris/BorisSidebar/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { FC } from 'react'; - -import { BorisContacts } from '~/components/boris/BorisContacts'; -import { BorisStats } from '~/components/boris/BorisStats'; -import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers'; -import { Group } from '~/components/containers/Group'; -import styles from '~/layouts/BorisLayout/styles.module.scss'; -import { BorisUsageStats } from '~/types/boris'; - -interface Props { - isUser: boolean; - isTester: boolean; - stats: BorisUsageStats; - setBetaTester: (val: boolean) => void; - isLoading: boolean; -} - -const BorisSidebar: FC = ({ isUser, stats, isLoading, isTester, setBetaTester }) => ( - -
- {isUser && } -
- - - -
- -
- -); - -export { BorisSidebar }; diff --git a/src/components/boris/Superpower/index.tsx b/src/components/boris/Superpower/index.tsx index 89348516..c29834e1 100644 --- a/src/components/boris/Superpower/index.tsx +++ b/src/components/boris/Superpower/index.tsx @@ -1,15 +1,17 @@ -import React, { FC } from 'react'; +import React, { FC } from "react"; -import { useAuth } from '~/hooks/auth/useAuth'; +import { observer } from "mobx-react-lite"; + +import { useAuth } from "~/hooks/auth/useAuth"; interface IProps {} -const Superpower: FC = ({ children }) => { +const Superpower: FC = observer(({ children }) => { const { isTester } = useAuth(); if (!isTester) return null; return <>{children}; -}; +}); export { Superpower }; diff --git a/src/components/containers/Zone/index.tsx b/src/components/containers/Zone/index.tsx index e26a63c8..2e6825eb 100644 --- a/src/components/containers/Zone/index.tsx +++ b/src/components/containers/Zone/index.tsx @@ -16,7 +16,11 @@ const Zone: FC = ({ children, color = "normal", }) => ( -
+
{!!title && (
{title} diff --git a/src/components/containers/Zone/styles.module.scss b/src/components/containers/Zone/styles.module.scss index 4767c09a..707673b0 100644 --- a/src/components/containers/Zone/styles.module.scss +++ b/src/components/containers/Zone/styles.module.scss @@ -8,7 +8,7 @@ $pad_usual: mix(white, $content_bg, 10%); span { position: absolute; - top: -5px; + top: -$gap; left: $radius; transform: translate(0, -100%); background: $pad_usual; @@ -25,7 +25,7 @@ $pad_usual: mix(white, $content_bg, 10%); } .pad { - padding: $gap * 1.5 $gap $gap; + padding: $gap; box-shadow: inset $pad_usual 0 0 0 2px; border-radius: $radius; position: relative; @@ -33,4 +33,8 @@ $pad_usual: mix(white, $content_bg, 10%); &.danger { box-shadow: inset $pad_danger 0 0 0 2px; } + + &.with_title { + padding-top: $gap * 2; + } } diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx index 1b11ddba..2e793d8c 100644 --- a/src/components/editors/EditorButtons/index.tsx +++ b/src/components/editors/EditorButtons/index.tsx @@ -1,20 +1,20 @@ -import React, { FC } from 'react'; +import React, { FC } from "react"; -import { Filler } from '~/components/containers/Filler'; -import { Group } from '~/components/containers/Group'; -import { Padder } from '~/components/containers/Padder'; -import { EditorActionsPanel } from '~/components/editors/EditorActionsPanel'; -import { Button } from '~/components/input/Button'; -import { InputText } from '~/components/input/InputText'; -import { useWindowSize } from '~/hooks/dom/useWindowSize'; -import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik'; +import { Filler } from "~/components/containers/Filler"; +import { Group } from "~/components/containers/Group"; +import { Padder } from "~/components/containers/Padder"; +import { EditorActionsPanel } from "~/components/editors/EditorActionsPanel"; +import { Button } from "~/components/input/Button"; +import { InputText } from "~/components/input/InputText"; +import { useWindowSize } from "~/hooks/dom/useWindowSize"; +import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik"; const EditorButtons: FC = () => { const { values, handleChange, isSubmitting } = useNodeFormContext(); - const { isMobile } = useWindowSize(); + const { isTablet } = useWindowSize(); return ( - + @@ -22,17 +22,17 @@ const EditorButtons: FC = () => { )} @@ -71,9 +77,9 @@ const NodeEditMenu: VFC = ({ - + diff --git a/src/containers/auth/SuperPowersToggle/index.tsx b/src/containers/auth/SuperPowersToggle/index.tsx new file mode 100644 index 00000000..29204a3a --- /dev/null +++ b/src/containers/auth/SuperPowersToggle/index.tsx @@ -0,0 +1,22 @@ +import { FC } from "react"; + +import { observer } from "mobx-react-lite"; + +import { BorisSuperpowers } from "~/components/boris/BorisSuperpowers"; +import { useAuth } from "~/hooks/auth/useAuth"; +import { useSuperPowers } from "~/hooks/auth/useSuperPowers"; + +interface SuperPowersToggleProps {} + +const SuperPowersToggle: FC = observer(() => { + const { isUser } = useAuth(); + const { isTester, setIsTester } = useSuperPowers(); + + if (!isUser) { + return null; + } + + return ; +}); + +export { SuperPowersToggle }; diff --git a/src/containers/boris/BorisSidebar/index.tsx b/src/containers/boris/BorisSidebar/index.tsx new file mode 100644 index 00000000..7a613418 --- /dev/null +++ b/src/containers/boris/BorisSidebar/index.tsx @@ -0,0 +1,30 @@ +import { FC } from "react"; + +import { BorisContacts } from "~/components/boris/BorisContacts"; +import { BorisStats } from "~/components/boris/BorisStats"; +import { Group } from "~/components/containers/Group"; +import { SuperPowersToggle } from "~/containers/auth/SuperPowersToggle"; +import styles from "~/layouts/BorisLayout/styles.module.scss"; +import { BorisUsageStats } from "~/types/boris"; + +interface Props { + isUser: boolean; + stats: BorisUsageStats; + isLoading: boolean; +} + +const BorisSidebar: FC = ({ isUser, stats, isLoading }) => ( + +
+ +
+ + + +
+ +
+ +); + +export { BorisSidebar }; diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx index 64e6ca01..11647798 100644 --- a/src/containers/dialogs/PhotoSwipe/index.tsx +++ b/src/containers/dialogs/PhotoSwipe/index.tsx @@ -1,18 +1,18 @@ -import React, { useEffect, useRef, VFC } from 'react'; +import React, { useEffect, useRef, VFC } from "react"; -import classNames from 'classnames'; -import { observer } from 'mobx-react-lite'; -import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js'; -import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js'; +import classNames from "classnames"; +import { observer } from "mobx-react-lite"; +import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js"; +import PhotoSwipeJs from "photoswipe/dist/photoswipe.js"; -import { ImagePresets } from '~/constants/urls'; -import { useWindowSize } from '~/hooks/dom/useWindowSize'; -import { useModal } from '~/hooks/modal/useModal'; -import { IFile } from '~/types'; -import { DialogComponentProps } from '~/types/modal'; -import { getURL } from '~/utils/dom'; +import { ImagePresets } from "~/constants/urls"; +import { useWindowSize } from "~/hooks/dom/useWindowSize"; +import { useModal } from "~/hooks/modal/useModal"; +import { IFile } from "~/types"; +import { DialogComponentProps } from "~/types/modal"; +import { getURL } from "~/utils/dom"; -import styles from './styles.module.scss'; +import styles from "./styles.module.scss"; export interface PhotoSwipeProps extends DialogComponentProps { items: IFile[]; @@ -22,7 +22,7 @@ export interface PhotoSwipeProps extends DialogComponentProps { const PhotoSwipe: VFC = observer(({ index, items }) => { let ref = useRef(null); const { hideModal } = useModal(); - const { isMobile } = useWindowSize(); + const { isTablet } = useWindowSize(); useEffect(() => { new Promise(async resolve => { @@ -34,7 +34,10 @@ const PhotoSwipe: VFC = observer(({ index, items }) => { img.onload = () => { resolveImage({ - src: getURL(image, isMobile ? ImagePresets[900] : ImagePresets[1600]), + src: getURL( + image, + isTablet ? ImagePresets[900] : ImagePresets[1600], + ), h: img.naturalHeight, w: img.naturalWidth, }); @@ -45,8 +48,8 @@ const PhotoSwipe: VFC = observer(({ index, items }) => { }; img.src = getURL(image, ImagePresets[1600]); - }) - ) + }), + ), ); resolve(images); @@ -58,15 +61,21 @@ const PhotoSwipe: VFC = observer(({ index, items }) => { }); ps.init(); - ps.listen('destroy', hideModal); - ps.listen('close', hideModal); + ps.listen("destroy", hideModal); + ps.listen("close", hideModal); }); - }, [hideModal, items, index, isMobile]); + }, [hideModal, items, index, isTablet]); return ( -