From 8f0ed347908d6253de0472522630584f1fc47f03 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Sun, 9 Jan 2022 20:52:02 +0700
Subject: [PATCH 01/28] fixed toasts
---
src/hooks/auth/useLoginForm.ts | 1 -
src/hooks/auth/useLoginLogoutRestore.ts | 9 ++++++++-
src/utils/toast/styles.module.scss | 1 +
3 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/hooks/auth/useLoginForm.ts b/src/hooks/auth/useLoginForm.ts
index bd325a7a..ab783ffe 100644
--- a/src/hooks/auth/useLoginForm.ts
+++ b/src/hooks/auth/useLoginForm.ts
@@ -24,7 +24,6 @@ export const useLoginForm = (
try {
await fetcher(values.username, values.password);
onSuccess();
- showToastSuccess(getRandomPhrase('WELCOME'));
} catch (error) {
showErrorToast(error);
diff --git a/src/hooks/auth/useLoginLogoutRestore.ts b/src/hooks/auth/useLoginLogoutRestore.ts
index ea4c7618..671aeef2 100644
--- a/src/hooks/auth/useLoginLogoutRestore.ts
+++ b/src/hooks/auth/useLoginLogoutRestore.ts
@@ -1,16 +1,23 @@
import { useAuthStore } from '~/store/auth/useAuthStore';
import { useCallback } from 'react';
import { apiUserLogin } from '~/api/auth';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { getRandomPhrase } from '~/constants/phrases';
+import { showToastInfo, showToastSuccess } from '~/utils/toast';
export const useLoginLogoutRestore = () => {
const auth = useAuthStore();
- const logout = useCallback(() => auth.logout(), [auth]);
+ const logout = useCallback(() => {
+ auth.logout();
+ showToastInfo(getRandomPhrase('GOODBYE'));
+ }, [auth]);
const login = useCallback(
async (username: string, password: string) => {
const result = await apiUserLogin({ username, password });
auth.setToken(result.token);
+ showToastInfo(getRandomPhrase('WELCOME'));
return result.user;
},
[auth]
diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss
index e0738133..2b0c3f8e 100644
--- a/src/utils/toast/styles.module.scss
+++ b/src/utils/toast/styles.module.scss
@@ -2,6 +2,7 @@
.toast {
@include outer_shadow;
+
cursor: pointer;
font: $font_14_semibold;
user-select: none;
From e99dc7d2c901711adcd059425a53015b5d4de025 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Sun, 9 Jan 2022 20:52:17 +0700
Subject: [PATCH 02/28] added meta to comment form
---
.../comment/LocalCommentFormTextarea/index.tsx | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/components/comment/LocalCommentFormTextarea/index.tsx b/src/components/comment/LocalCommentFormTextarea/index.tsx
index 7ec9feb1..1c4d1e6f 100644
--- a/src/components/comment/LocalCommentFormTextarea/index.tsx
+++ b/src/components/comment/LocalCommentFormTextarea/index.tsx
@@ -1,4 +1,9 @@
-import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react';
+import React, {
+ forwardRef,
+ KeyboardEventHandler,
+ TextareaHTMLAttributes,
+ useCallback,
+} from 'react';
import { Textarea } from '~/components/input/Textarea';
import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
import { useRandomPhrase } from '~/constants/phrases';
@@ -11,8 +16,8 @@ const LocalCommentFormTextarea = forwardRef(({ ...r
const { values, handleChange, handleSubmit, isSubmitting } = useCommentFormContext();
const onKeyDown = useCallback>(
- ({ ctrlKey, key }) => {
- if (ctrlKey && key === 'Enter') handleSubmit(undefined);
+ ({ ctrlKey, key, metaKey }) => {
+ if ((ctrlKey || metaKey) && key === 'Enter') handleSubmit(undefined);
},
[handleSubmit]
);
From 8311d3d43d82212f75e33e1658ea136f7619cf3d Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Sun, 9 Jan 2022 21:02:30 +0700
Subject: [PATCH 03/28] fixed sticky elements
---
src/containers/node/NodeBottomBlock/index.tsx | 9 +++++----
src/containers/node/NodeBottomBlock/styles.module.scss | 1 -
src/layouts/BorisLayout/index.tsx | 6 +++---
3 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx
index 8a47fa67..592e3747 100644
--- a/src/containers/node/NodeBottomBlock/index.tsx
+++ b/src/containers/node/NodeBottomBlock/index.tsx
@@ -16,6 +16,7 @@ import { NodeComments } from '~/containers/node/NodeComments';
import { useUserContext } from '~/utils/context/UserContextProvider';
import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
import { useAuthProvider } from '~/utils/providers/AuthProvider';
+import { Sticky } from '~/components/containers/Sticky';
interface IProps {
commentsOrder: 'ASC' | 'DESC';
@@ -52,8 +53,8 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => {
-
-
+
+
@@ -64,8 +65,8 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => {
-
-
+
+
diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss
index 2352653f..16606b7f 100644
--- a/src/containers/node/NodeBottomBlock/styles.module.scss
+++ b/src/containers/node/NodeBottomBlock/styles.module.scss
@@ -34,7 +34,6 @@
@media (max-width: 1024px) {
padding-left: 0;
- padding-top: $comment_height / 2;
flex: 1 2;
}
}
diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx
index 0a085976..22301b7c 100644
--- a/src/layouts/BorisLayout/index.tsx
+++ b/src/layouts/BorisLayout/index.tsx
@@ -2,7 +2,6 @@ import React, { FC } from 'react';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
import { Container } from '~/containers/main/Container';
-import StickyBox from 'react-sticky-box';
import { BorisComments } from '~/containers/boris/BorisComments';
import { Card } from '~/components/containers/Card';
import { SidebarRouter } from '~/containers/main/SidebarRouter';
@@ -14,6 +13,7 @@ import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
import boris from '~/sprites/boris_robot.svg';
import { useAuthProvider } from '~/utils/providers/AuthProvider';
+import { Sticky } from '~/components/containers/Sticky';
type IProps = {
title: string;
@@ -56,7 +56,7 @@ const BorisLayout: FC = ({ title, setIsBetaTester, isTester, stats, isLo
-
+
= ({ title, setIsBetaTester, isTester, stats, isLo
isUser={isUser}
isLoading={isLoadingStats}
/>
-
+
From c0ece70f89a6609c96a3932bd71bc8f2881c08c3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Sun, 9 Jan 2022 21:24:20 +0700
Subject: [PATCH 04/28] fixed node related item profile popout
---
package.json | 1 +
.../comment/CommentAvatar/index.tsx | 2 +-
src/components/common/Avatar/index.tsx | 40 ++--
src/components/common/Square/index.tsx | 26 +++
.../common/Square/styles.module.scss | 10 +
src/components/containers/Sticky/index.tsx | 2 +-
src/components/lab/LabBanner/index.tsx | 2 +-
.../Square => lab/LabSquare}/index.tsx | 0
.../LabSquare}/styles.module.scss | 0
src/components/node/NodeRelatedItem/index.tsx | 15 +-
.../node/NodeBottomBlock/styles.module.scss | 1 +
src/hooks/auth/useMessageEventReactions.ts | 2 +-
yarn.lock | 191 ++++--------------
13 files changed, 106 insertions(+), 186 deletions(-)
create mode 100644 src/components/common/Square/index.tsx
create mode 100644 src/components/common/Square/styles.module.scss
rename src/components/{containers/Square => lab/LabSquare}/index.tsx (100%)
rename src/components/{containers/Square => lab/LabSquare}/styles.module.scss (100%)
diff --git a/package.json b/package.json
index 4a424f81..582a3b4c 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"react-scripts": "^5.0.0",
"react-sortable-hoc": "^2.0.0",
"react-sticky-box": "^0.9.3",
+ "react-stickynode": "^4.0.0",
"sticky-sidebar": "^3.3.1",
"swiper": "^6.8.4",
"swr": "^1.0.1",
diff --git a/src/components/comment/CommentAvatar/index.tsx b/src/components/comment/CommentAvatar/index.tsx
index 8eb0be0f..cd879d24 100644
--- a/src/components/comment/CommentAvatar/index.tsx
+++ b/src/components/comment/CommentAvatar/index.tsx
@@ -36,9 +36,9 @@ const CommentAvatar: FC = ({ user, withDetails, className }) => {
url={path(['photo', 'url'], user)}
username={user.username}
className={className}
- innerRef={ref}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
+ ref={ref}
/>
)}
diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
index e6955762..aece59dd 100644
--- a/src/components/common/Avatar/index.tsx
+++ b/src/components/common/Avatar/index.tsx
@@ -1,40 +1,34 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, forwardRef, useCallback } from 'react';
import { getURLFromString } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import styles from './styles.module.scss';
import classNames from 'classnames';
import { openUserProfile } from '~/utils/user';
import { DivProps } from '~/utils/types';
+import { Square } from '~/components/common/Square';
interface Props extends DivProps {
url?: string;
username?: string;
size?: number;
preset?: typeof PRESETS[keyof typeof PRESETS];
- innerRef?: React.Ref;
}
-const Avatar: FC = ({
- url,
- username,
- size,
- className,
- innerRef,
- preset = PRESETS.avatar,
- ...rest
-}) => {
- const backgroundImage = !!url ? `url('${getURLFromString(url, preset)}')` : undefined;
- const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+const Avatar = forwardRef(
+ ({ url, username, size, className, preset = PRESETS.avatar, ...rest }, ref) => {
+ const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
- return (
-
- );
-};
+ return (
+
+ );
+ }
+);
export { Avatar };
diff --git a/src/components/common/Square/index.tsx b/src/components/common/Square/index.tsx
new file mode 100644
index 00000000..75a7cae0
--- /dev/null
+++ b/src/components/common/Square/index.tsx
@@ -0,0 +1,26 @@
+import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react';
+import styles from './styles.module.scss';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+
+interface SquareProps extends DivProps {
+ image: string;
+ size?: number;
+}
+
+const Square = forwardRef(({ image, size, ...rest }, ref) => {
+ const backgroundImage = image ? `url('${image}')` : undefined;
+
+ return (
+
+
+
+ );
+});
+
+export { Square };
diff --git a/src/components/common/Square/styles.module.scss b/src/components/common/Square/styles.module.scss
new file mode 100644
index 00000000..103d1e5c
--- /dev/null
+++ b/src/components/common/Square/styles.module.scss
@@ -0,0 +1,10 @@
+@import "src/styles/variables";
+
+.svg {
+ width: 100%;
+}
+
+.wrapper {
+ width: 100%;
+ border-radius: $radius;
+}
diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx
index a1a44bb0..232db8ff 100644
--- a/src/components/containers/Sticky/index.tsx
+++ b/src/components/containers/Sticky/index.tsx
@@ -1,5 +1,5 @@
import React, { DetailsHTMLAttributes, FC } from 'react';
-import StickyBox from 'react-sticky-box';
+import StickyBox from 'react-stickynode';
interface IProps extends DetailsHTMLAttributes {
offsetTop?: number;
diff --git a/src/components/lab/LabBanner/index.tsx b/src/components/lab/LabBanner/index.tsx
index 14aafec8..4b7a14d7 100644
--- a/src/components/lab/LabBanner/index.tsx
+++ b/src/components/lab/LabBanner/index.tsx
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
-import { Square } from '~/components/containers/Square';
+import { Square } from '~/components/lab/LabSquare';
interface IProps {}
diff --git a/src/components/containers/Square/index.tsx b/src/components/lab/LabSquare/index.tsx
similarity index 100%
rename from src/components/containers/Square/index.tsx
rename to src/components/lab/LabSquare/index.tsx
diff --git a/src/components/containers/Square/styles.module.scss b/src/components/lab/LabSquare/styles.module.scss
similarity index 100%
rename from src/components/containers/Square/styles.module.scss
rename to src/components/lab/LabSquare/styles.module.scss
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index ddea53c3..7005d1f0 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -4,9 +4,10 @@ import classNames from 'classnames';
import { INode } from '~/types';
import { PRESETS, URLS } from '~/constants/urls';
import { RouteComponentProps, withRouter } from 'react-router';
-import { getURL } from '~/utils/dom';
+import { getURL, getURLFromString } from '~/utils/dom';
import { Avatar } from '~/components/common/Avatar';
import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
+import { Square } from '~/components/common/Square';
type IProps = RouteComponentProps & {
item: Partial;
@@ -68,11 +69,13 @@ const NodeRelatedItemUnconnected: FC = memo(({ item, history }) => {
onClick={onClick}
ref={ref}
>
-
+ {item.thumbnail && (
+
+ )}
{!item.thumbnail && size === 'small' && (
diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss
index 16606b7f..3b067e18 100644
--- a/src/containers/node/NodeBottomBlock/styles.module.scss
+++ b/src/containers/node/NodeBottomBlock/styles.module.scss
@@ -48,6 +48,7 @@
.left {
flex: 1;
min-width: 0;
+ height: 100%;
}
.left_item {
diff --git a/src/hooks/auth/useMessageEventReactions.ts b/src/hooks/auth/useMessageEventReactions.ts
index 2a981d44..2e74c3e4 100644
--- a/src/hooks/auth/useMessageEventReactions.ts
+++ b/src/hooks/auth/useMessageEventReactions.ts
@@ -20,7 +20,7 @@ export const useMessageEventReactions = () => {
return;
}
- console.log('caught event:', type);
+ console.log('caught event:', type, event.data);
switch (type) {
case EventMessageType.OAuthLogin:
diff --git a/yarn.lock b/yarn.lock
index 8c67c396..f9f85b5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1036,7 +1036,7 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
@@ -1496,50 +1496,6 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
-"@redux-saga/core@^1.1.3":
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
- integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
- dependencies:
- "@babel/runtime" "^7.6.3"
- "@redux-saga/deferred" "^1.1.2"
- "@redux-saga/delay-p" "^1.1.2"
- "@redux-saga/is" "^1.1.2"
- "@redux-saga/symbols" "^1.1.2"
- "@redux-saga/types" "^1.1.0"
- redux "^4.0.4"
- typescript-tuple "^2.2.1"
-
-"@redux-saga/deferred@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
- integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
-
-"@redux-saga/delay-p@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
- integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
- dependencies:
- "@redux-saga/symbols" "^1.1.2"
-
-"@redux-saga/is@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
- integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
- dependencies:
- "@redux-saga/symbols" "^1.1.2"
- "@redux-saga/types" "^1.1.0"
-
-"@redux-saga/symbols@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
- integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
-
-"@redux-saga/types@^1.1.0":
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
- integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
-
"@rollup/plugin-babel@^5.2.0":
version "5.3.0"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
@@ -1931,14 +1887,6 @@
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
-"@types/hoist-non-react-statics@^3.3.0":
- version "3.3.1"
- resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
- integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
- dependencies:
- "@types/react" "*"
- hoist-non-react-statics "^3.3.0"
-
"@types/html-minifier-terser@^6.0.0":
version "6.1.0"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2050,16 +1998,6 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
-"@types/react-redux@^7.1.11", "@types/react-redux@^7.1.20":
- version "7.1.21"
- resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186"
- integrity sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==
- dependencies:
- "@types/hoist-non-react-statics" "^3.3.0"
- "@types/react" "*"
- hoist-non-react-statics "^3.3.0"
- redux "^4.0.0"
-
"@types/react-router-dom@^5.1.7":
version "5.3.2"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.2.tgz#ebd8e145cf056db5c66eb1dac63c72f52e8542ee"
@@ -3449,7 +3387,7 @@ cjs-module-lexer@^1.0.0:
resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
-classnames@*, classnames@^2.2.6:
+classnames@*, classnames@^2.0.0, classnames@^2.2.6:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -3652,17 +3590,6 @@ connect-history-api-fallback@^1.6.0:
resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
-connected-react-router@^6.5.2:
- version "6.9.2"
- resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.2.tgz#f89fa87f0e977fcabf17475fb4552e170cc7e48e"
- integrity sha512-bE8kNBiZv9Mivp7pYn9JvLH5ItTjLl45kk1/Vha0rmAK9I/ETb5JPJrAm0h2KCG9qLfv7vqU3Jo4UUDo0oJnQg==
- dependencies:
- lodash.isequalwith "^4.4.0"
- prop-types "^15.7.2"
- optionalDependencies:
- immutable "^3.8.1 || ^4.0.0"
- seamless-immutable "^7.1.3"
-
console-control-strings@^1.0.0, console-control-strings@~1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@@ -3722,7 +3649,7 @@ core-js-pure@^3.19.0, core-js-pure@^3.8.1:
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.2.tgz#5d263565f0e34ceeeccdc4422fae3e84ca6b8c0f"
integrity sha512-CmWHvSKn2vNL6p6StNp1EmMIfVY/pqn3JLAjfZQ8WZGPOlGoO92EkX9/Mk81i6GxvoPXjUqEQnpM3rJ5QxxIOg==
-core-js@^3.19.2:
+core-js@^3.19.2, core-js@^3.6.5:
version "3.20.2"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581"
integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw==
@@ -4898,6 +4825,11 @@ etag@1.8.1, etag@~1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+eventemitter3@^3.0.0:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+ integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
eventemitter3@^4.0.0:
version "4.0.7"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -5614,7 +5546,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5853,11 +5785,6 @@ immer@^9.0.7:
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.7.tgz#b6156bd7db55db7abc73fd2fdadf4e579a701075"
integrity sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA==
-"immutable@^3.8.1 || ^4.0.0":
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
- integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
-
import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -7040,11 +6967,6 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-lodash.isequalwith@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
- integrity sha1-Jmcm3dUo+FTyH06pigZWBuD7xrA=
-
lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7317,18 +7239,11 @@ mobx-persist-store@^1.0.4:
resolved "https://registry.yarnpkg.com/mobx-persist-store/-/mobx-persist-store-1.0.4.tgz#233f0c03a708c0f58948c5ff223aa59610a2711a"
integrity sha512-zxYvRSGKIJG/2brJC8+u6rJOnhe6HvvIOSaPSoOKdRFw4R91EV+e8PsraiScH3STNkGQlArbjnAUpd7cga1VCA==
-mobx-react-lite@^3.2.0:
+mobx-react-lite@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.3.tgz#83d2b32ebf4383cd0dc0d397acbf53a8e9c66765"
integrity sha512-7exWp1FV0M9dP08H9PIeHlJqDw4IdkQVRMfLYaZFMmlbzSS6ZU6p/kx392KN+rVf81hH3IQYewvRGQ70oiwmbw==
-mobx-react@^7.2.1:
- version "7.2.1"
- resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.2.1.tgz#e9d4c04dc63d05e1139ce773f5fee7a5b4cb7c78"
- integrity sha512-LZS99KFLn75VWDXPdRJhILzVQ7qLcRjQbzkK+wVs0Qg4kWw5hOI2USp7tmu+9zP9KYsVBmKyx2k/8cTTBfsymw==
- dependencies:
- mobx-react-lite "^3.2.0"
-
mobx@^6.3.10:
version "6.3.12"
resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.12.tgz#2ceb4f632081a8bf8757ba7e5e01b5810800022f"
@@ -8681,7 +8596,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8767,7 +8682,7 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-raf@^3.4.1:
+raf@^3.0.0, raf@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -8906,7 +8821,7 @@ react-hot-toast@^2.1.1:
dependencies:
goober "^2.1.1"
-react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
+react-is@17.0.2, react-is@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -8934,18 +8849,6 @@ react-popper@^2.2.3:
react-fast-compare "^3.0.1"
warning "^4.0.2"
-react-redux@^7.2.2:
- version "7.2.6"
- resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
- integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==
- dependencies:
- "@babel/runtime" "^7.15.4"
- "@types/react-redux" "^7.1.20"
- hoist-non-react-statics "^3.3.2"
- loose-envify "^1.4.0"
- prop-types "^15.7.2"
- react-is "^17.0.2"
-
react-refresh@0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -9057,6 +8960,17 @@ react-sticky-box@^0.9.3:
"@babel/runtime" "^7.1.5"
resize-observer-polyfill "^1.5.1"
+react-stickynode@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.0.0.tgz#ca1deeda866aeace3d522d01eb868f286cdb49d1"
+ integrity sha512-H6Ae6l8soAc188eFAmE4CGJz3oidQa88jNO/fnJWjpFw4DwGRS6boL9gHNE4DCvbMPgek1AAP85pUPIEKUMgtw==
+ dependencies:
+ classnames "^2.0.0"
+ core-js "^3.6.5"
+ prop-types "^15.6.0"
+ shallowequal "^1.0.0"
+ subscribe-ui-event "^2.0.6"
+
react@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -9141,25 +9055,6 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"
-redux-persist@^5.10.0:
- version "5.10.0"
- resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
- integrity sha512-sSJAzNq7zka3qVHKce1hbvqf0Vf5DuTVm7dr4GtsqQVOexnrvbV47RWFiPxQ8fscnyiuWyD2O92DOxPl0tGCRg==
-
-redux-saga@^1.1.1:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
- integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
- dependencies:
- "@redux-saga/core" "^1.1.3"
-
-redux@^4.0.0, redux@^4.0.4, redux@^4.1.2:
- version "4.1.2"
- resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
- integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
- dependencies:
- "@babel/runtime" "^7.9.2"
-
regenerate-unicode-properties@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
@@ -9539,11 +9434,6 @@ scss-tokenizer@^0.2.3:
js-base64 "^2.1.8"
source-map "^0.4.2"
-seamless-immutable@^7.1.3:
- version "7.1.4"
- resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
- integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==
-
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -9672,6 +9562,11 @@ sha.js@^2.4.0, sha.js@^2.4.8:
inherits "^2.0.1"
safe-buffer "^5.0.1"
+shallowequal@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+ integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -10198,6 +10093,15 @@ stylis@3.5.4:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+subscribe-ui-event@^2.0.6:
+ version "2.0.7"
+ resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8"
+ integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ==
+ dependencies:
+ eventemitter3 "^3.0.0"
+ lodash "^4.17.15"
+ raf "^3.0.0"
+
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -10649,25 +10553,6 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"
-typescript-compare@^0.0.2:
- version "0.0.2"
- resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
- integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
- dependencies:
- typescript-logic "^0.0.0"
-
-typescript-logic@^0.0.0:
- version "0.0.0"
- resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
- integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
-
-typescript-tuple@^2.2.1:
- version "2.2.1"
- resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
- integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
- dependencies:
- typescript-compare "^0.0.2"
-
typescript@^4.0.5:
version "4.5.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
From 0a5caf6bda019644b8a6ee7e8bedbc3773e81049 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Sun, 9 Jan 2022 21:25:17 +0700
Subject: [PATCH 05/28] fixed background repeat on square
---
src/components/common/Square/styles.module.scss | 2 ++
src/components/lab/LabBanner/index.tsx | 6 +++---
src/components/lab/LabSquare/index.tsx | 4 ++--
3 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/components/common/Square/styles.module.scss b/src/components/common/Square/styles.module.scss
index 103d1e5c..880fb4a7 100644
--- a/src/components/common/Square/styles.module.scss
+++ b/src/components/common/Square/styles.module.scss
@@ -7,4 +7,6 @@
.wrapper {
width: 100%;
border-radius: $radius;
+ background-size: cover;
+ background-repeat: no-repeat;
}
diff --git a/src/components/lab/LabBanner/index.tsx b/src/components/lab/LabBanner/index.tsx
index 4b7a14d7..6d6f987c 100644
--- a/src/components/lab/LabBanner/index.tsx
+++ b/src/components/lab/LabBanner/index.tsx
@@ -1,12 +1,12 @@
import React, { FC } from 'react';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
-import { Square } from '~/components/lab/LabSquare';
+import { LabSquare } from '~/components/lab/LabSquare';
interface IProps {}
const LabBanner: FC = () => (
-
+
Лаборатория!
@@ -19,7 +19,7 @@ const LabBanner: FC = () => (
-
+
);
export { LabBanner };
diff --git a/src/components/lab/LabSquare/index.tsx b/src/components/lab/LabSquare/index.tsx
index 885aeabf..46c85db3 100644
--- a/src/components/lab/LabSquare/index.tsx
+++ b/src/components/lab/LabSquare/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
interface IProps extends DivProps {}
-const Square: FC = ({ children, ...rest }) => (
+const LabSquare: FC = ({ children, ...rest }) => (
{children}
@@ -13,4 +13,4 @@ const Square: FC = ({ children, ...rest }) => (
);
-export { Square };
+export { LabSquare };
From 03ab52f81414a71480ac168a67f7a06acb824651 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Mon, 10 Jan 2022 10:02:19 +0700
Subject: [PATCH 06/28] fixed popeper placement
---
src/components/containers/Sticky/index.tsx | 14 ++++++--------
src/components/tags/TagAutocomplete/index.tsx | 1 +
src/containers/tags/TagInput/index.tsx | 2 +-
3 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx
index 232db8ff..15de9b7e 100644
--- a/src/components/containers/Sticky/index.tsx
+++ b/src/components/containers/Sticky/index.tsx
@@ -1,16 +1,14 @@
import React, { DetailsHTMLAttributes, FC } from 'react';
-import StickyBox from 'react-stickynode';
+import StickyBox from 'react-sticky-box';
interface IProps extends DetailsHTMLAttributes {
offsetTop?: number;
}
-const Sticky: FC = ({ children, offsetTop = 65 }) => {
- return (
-
- {children}
-
- );
-};
+const Sticky: FC = ({ children, offsetTop = 65 }) => (
+
+ {children}
+
+);
export { Sticky };
diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index 3949c267..b16ac0c5 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -35,6 +35,7 @@ const TagAutocomplete: VFC = ({
const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
placement: 'bottom-end',
+ strategy: 'fixed',
modifiers: [
{
name: 'offset',
diff --git a/src/containers/tags/TagInput/index.tsx b/src/containers/tags/TagInput/index.tsx
index e8da7c0c..03dfd502 100644
--- a/src/containers/tags/TagInput/index.tsx
+++ b/src/containers/tags/TagInput/index.tsx
@@ -101,8 +101,8 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {
const onAutocompleteSelect = useCallback(
(val: string) => {
- onAppend([val]);
setInput('');
+ onAppend([val]);
},
[onAppend, setInput]
);
From c2154e930cbd2759e8112c681b5290ce5ac5fddd Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Mon, 10 Jan 2022 16:08:03 +0700
Subject: [PATCH 07/28] fixed modal close button
---
.../BetterScrollDialog/styles.module.scss | 28 +++++++++++--------
1 file changed, 17 insertions(+), 11 deletions(-)
diff --git a/src/components/dialogs/BetterScrollDialog/styles.module.scss b/src/components/dialogs/BetterScrollDialog/styles.module.scss
index 8990b842..c49ebcf4 100644
--- a/src/components/dialogs/BetterScrollDialog/styles.module.scss
+++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss
@@ -22,7 +22,6 @@
flex-direction: column;
min-width: $cell;
max-width: 400px;
- max-height: 100%;
max-height: calc(100vh - 75px);
width: 100%;
position: relative;
@@ -43,7 +42,6 @@
.footer {
@include outer_shadow();
- // padding: 10px;
background: darken($content_bg, 2%);
}
@@ -66,13 +64,15 @@
}
.close {
- background: darken($content_bg, 2%);
- width: 48px;
- height: 48px;
+ @include outer_shadow;
+
+ background: lighten($content_bg, 4%);
+ width: 36px;
+ height: 36px;
position: absolute;
- top: -58px;
- right: 50%;
- transform: translate(50%, 0);
+ top: -14px;
+ right: 4px;
+ transform: translate(50%, 0) scale(1);
display: flex;
align-items: center;
justify-content: center;
@@ -80,15 +80,21 @@
cursor: pointer;
transition: transform 0.25s, background-color 0.25s;
animation: appear 0.5s forwards;
+ z-index: 10;
+
+ @include tablet {
+ top: -16px;
+ right: 16px;
+ }
&:hover {
background-color: $red;
- transform: translate(50%, -5px);
+ transform: translate(50%, 0) scale(1.25);
}
svg {
- width: 24px;
- height: 24px;
+ width: 20px;
+ height: 20px;
}
}
From 8d1e6989c27a8539bfa8945e355766253daa9ded Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Mon, 10 Jan 2022 16:47:29 +0700
Subject: [PATCH 08/28] added experimental scroll helper
---
.../common/ScrollHelperBottom/index.tsx | 27 ++++++++++++++
.../ScrollHelperBottom/styles.module.scss | 26 ++++++++++++++
.../profile/ProfileAvatar/styles.module.scss | 2 +-
src/hooks/dom/useScrollHeight.ts | 35 +++++++++++++++++++
src/hooks/dom/useScrollToBottom.ts | 10 ++++++
src/hooks/dom/useScrollToTop.ts | 1 -
src/hooks/dom/useScrollTop.ts | 2 +-
src/layouts/NodeLayout/index.tsx | 6 +++-
8 files changed, 105 insertions(+), 4 deletions(-)
create mode 100644 src/components/common/ScrollHelperBottom/index.tsx
create mode 100644 src/components/common/ScrollHelperBottom/styles.module.scss
create mode 100644 src/hooks/dom/useScrollHeight.ts
create mode 100644 src/hooks/dom/useScrollToBottom.ts
diff --git a/src/components/common/ScrollHelperBottom/index.tsx b/src/components/common/ScrollHelperBottom/index.tsx
new file mode 100644
index 00000000..31c5ccf5
--- /dev/null
+++ b/src/components/common/ScrollHelperBottom/index.tsx
@@ -0,0 +1,27 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { useScrollTop } from '~/hooks/dom/useScrollTop';
+import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
+import classNames from 'classnames';
+import { useScrollToBottom } from '~/hooks/dom/useScrollToBottom';
+
+interface ScrollHelperBottomProps {}
+
+const ScrollHelperBottom: VFC = () => {
+ const top = useScrollTop();
+ const scrollHeight = useScrollHeight();
+ const scrollToBottom = useScrollToBottom();
+
+ const isVisible = scrollHeight > 2000 && top < scrollHeight * 0.25;
+
+ return (
+
+ Вниз
+
+ );
+};
+
+export { ScrollHelperBottom };
diff --git a/src/components/common/ScrollHelperBottom/styles.module.scss b/src/components/common/ScrollHelperBottom/styles.module.scss
new file mode 100644
index 00000000..263b9c74
--- /dev/null
+++ b/src/components/common/ScrollHelperBottom/styles.module.scss
@@ -0,0 +1,26 @@
+@import "src/styles/variables";
+
+.helper {
+ position: fixed;
+ bottom: 0;
+ background: radial-gradient($red, transparent) 50% 24px no-repeat;
+ background-size: 100% 48px;
+ display: none;
+ width: calc(100% - 20px);
+ z-index: 4;
+ text-align: center;
+ max-width: 500px;
+ height: 64px;
+ align-items: flex-end;
+ justify-content: center;
+ padding: $gap;
+ text-transform: uppercase;
+ font: $font_16_medium;
+ border-radius: $radius $radius 0 0;
+ user-select: none;
+ cursor: pointer;
+
+ &.visible {
+ display: flex;
+ }
+}
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index bb3b6741..2d829e6a 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/src/components/profile/ProfileAvatar/styles.module.scss
@@ -19,7 +19,7 @@
left: 0;
width: 100%;
height: 100%;
- opacity: 0;
+ opacity: 1;
}
&:hover {
diff --git a/src/hooks/dom/useScrollHeight.ts b/src/hooks/dom/useScrollHeight.ts
new file mode 100644
index 00000000..80596fec
--- /dev/null
+++ b/src/hooks/dom/useScrollHeight.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const getHeight = () => {
+ if (typeof document === 'undefined') {
+ return 0;
+ }
+
+ const body = document.body;
+ const html = document.documentElement;
+
+ return Math.max(
+ body.scrollHeight,
+ body.offsetHeight,
+ html.clientHeight,
+ html.scrollHeight,
+ html.offsetHeight
+ );
+};
+export const useScrollHeight = () => {
+ const [scrollHeight, setScrollHeight] = useState(getHeight());
+
+ useEffect(() => {
+ const measure = () => setScrollHeight(getHeight());
+
+ window.addEventListener('scroll', measure);
+ window.addEventListener('resize', measure);
+
+ return () => {
+ window.removeEventListener('scroll', measure);
+ window.removeEventListener('resize', measure);
+ };
+ }, []);
+
+ return scrollHeight;
+};
diff --git a/src/hooks/dom/useScrollToBottom.ts b/src/hooks/dom/useScrollToBottom.ts
new file mode 100644
index 00000000..2622e1aa
--- /dev/null
+++ b/src/hooks/dom/useScrollToBottom.ts
@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
+
+export const useScrollToBottom = () => {
+ const top = useScrollHeight();
+
+ return useCallback(() => {
+ window.scrollTo({ top });
+ }, [top]);
+};
diff --git a/src/hooks/dom/useScrollToTop.ts b/src/hooks/dom/useScrollToTop.ts
index 5adc71d0..3eeb1cd0 100644
--- a/src/hooks/dom/useScrollToTop.ts
+++ b/src/hooks/dom/useScrollToTop.ts
@@ -14,7 +14,6 @@ export const useScrollToTop = (deps?: any[]) => {
const bounds = targetElement.getBoundingClientRect();
window.scrollTo({
top: bounds.top - 100,
- behavior: 'smooth',
});
},
deps && Array.isArray(deps) ? deps : []
diff --git a/src/hooks/dom/useScrollTop.ts b/src/hooks/dom/useScrollTop.ts
index 90341f42..701d6712 100644
--- a/src/hooks/dom/useScrollTop.ts
+++ b/src/hooks/dom/useScrollTop.ts
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
export const useScrollTop = () => {
- const [top, setTop] = useState(0);
+ const [top, setTop] = useState(typeof window !== 'undefined' ? window.scrollY : 0);
useEffect(() => {
const onScroll = () => {
diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx
index df0831f4..05cd2a80 100644
--- a/src/layouts/NodeLayout/index.tsx
+++ b/src/layouts/NodeLayout/index.tsx
@@ -17,6 +17,8 @@ import { useNodeContext } from '~/utils/context/NodeContextProvider';
import { useNodePermissions } from '~/hooks/node/useNodePermissions';
import { useNodeActions } from '~/hooks/node/useNodeActions';
import { NodeTitle } from '~/components/node/NodeTitle';
+import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom';
+import { Superpower } from '~/components/boris/Superpower';
type IProps = {};
@@ -65,7 +67,9 @@ const NodeLayout: FC = () => {
-
+
+
+
);
};
From 0a9b4b6388ac9718aad44b075c6bbf4bc2095521 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 11:31:42 +0700
Subject: [PATCH 09/28] fixed getScrollHeight
---
src/hooks/dom/useScrollHeight.ts | 20 +-------------------
1 file changed, 1 insertion(+), 19 deletions(-)
diff --git a/src/hooks/dom/useScrollHeight.ts b/src/hooks/dom/useScrollHeight.ts
index 80596fec..48bf7f4d 100644
--- a/src/hooks/dom/useScrollHeight.ts
+++ b/src/hooks/dom/useScrollHeight.ts
@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
const getHeight = () => {
if (typeof document === 'undefined') {
return 0;
@@ -16,20 +14,4 @@ const getHeight = () => {
html.offsetHeight
);
};
-export const useScrollHeight = () => {
- const [scrollHeight, setScrollHeight] = useState(getHeight());
-
- useEffect(() => {
- const measure = () => setScrollHeight(getHeight());
-
- window.addEventListener('scroll', measure);
- window.addEventListener('resize', measure);
-
- return () => {
- window.removeEventListener('scroll', measure);
- window.removeEventListener('resize', measure);
- };
- }, []);
-
- return scrollHeight;
-};
+export const useScrollHeight = () => getHeight();
From d31c18b06da3c25390f1d9ffaccf9d5d5c0eee47 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 11:32:22 +0700
Subject: [PATCH 10/28] fixed profile avatar uploader input
---
src/components/profile/ProfileAvatar/styles.module.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index 2d829e6a..bb3b6741 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/src/components/profile/ProfileAvatar/styles.module.scss
@@ -19,7 +19,7 @@
left: 0;
width: 100%;
height: 100%;
- opacity: 1;
+ opacity: 0;
}
&:hover {
From a454b16fc95844f5078cb0b8c3a7d11e034e7608 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 11:37:33 +0700
Subject: [PATCH 11/28] fixed image upload button at avatar
---
.../input/Button/styles.module.scss | 7 ++---
.../profile/ProfileAvatar/index.tsx | 7 ++---
.../profile/ProfileAvatar/styles.module.scss | 29 ++-----------------
3 files changed, 6 insertions(+), 37 deletions(-)
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index ba7951f1..6cd47353 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -10,6 +10,8 @@
}
.button {
+ @include outer_shadow();
+
position: relative;
height: $input_height;
border: none;
@@ -34,12 +36,7 @@
align-items: center;
justify-content: center;
- filter: grayscale(0);
-
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
- opacity: 0.8;
-
- @include outer_shadow();
input {
position: absolute;
diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx
index e1723efe..75be4b4f 100644
--- a/src/components/profile/ProfileAvatar/index.tsx
+++ b/src/components/profile/ProfileAvatar/index.tsx
@@ -4,6 +4,7 @@ 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 {
canEdit: boolean;
@@ -33,11 +34,7 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit }
}}
>
{canEdit && }
- {canEdit && (
-
-
-
- )}
+ {canEdit && }
);
};
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index bb3b6741..b4eb4dbb 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/src/components/profile/ProfileAvatar/styles.module.scss
@@ -21,35 +21,10 @@
height: 100%;
opacity: 0;
}
-
- &:hover {
- svg {
- fill: $red;
- }
- }
}
.can_edit {
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- touch-action: none;
- // background: red;
- display: flex;
- align-items: flex-end;
- justify-content: flex-end;
- padding: $gap / 2;
- box-sizing: border-box;
- background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
- border-radius: $radius;
-
- svg {
- width: 32px;
- height: 32px;
- fill: white;
- transition: fill 0.25s;
- }
+ right: -4px;
+ bottom: -4px;
}
From d8e73196878040c17bdce1e3d5dd42b10a9afea8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 14:56:05 +0700
Subject: [PATCH 12/28] fixed swiper auto width
---
src/components/node/NodeImageSwiperBlock/styles.module.scss | 2 +-
src/components/profile/ProfileAvatar/styles.module.scss | 2 ++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index b418ccf4..01f91258 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -79,7 +79,7 @@
}
-.slide {
+.slide.slide {
text-align: center;
text-transform: uppercase;
font: $font_32_bold;
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index b4eb4dbb..8d4db746 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/src/components/profile/ProfileAvatar/styles.module.scss
@@ -27,4 +27,6 @@
position: absolute;
right: -4px;
bottom: -4px;
+ touch-action: none;
+ pointer-events: none;
}
From 7f7c12df2b41f53fba5c69098eef61d1cf86de72 Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 14:58:30 +0700
Subject: [PATCH 13/28] scaling inactive slides down
---
src/components/node/NodeImageSwiperBlock/styles.module.scss | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 01f91258..19176721 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -90,7 +90,8 @@
width: auto;
max-width: 100vw;
opacity: 1;
- transform: translate(0, 10px);
+ //transform: translate(0, 10px);
+ transform: scale(0.99);
filter: brightness(50%) saturate(0.5);
transition: opacity 0.5s, filter 0.5s, transform 0.5s;
padding-bottom: $gap * 1.5;
@@ -99,7 +100,8 @@
&:global(.swiper-slide-active) {
opacity: 1;
filter: brightness(100%);
- transform: translate(0, 0);
+ //transform: translate(0, 0);
+ transform: scale(1);
}
@include tablet {
From 0c9d5467ed9d60400b28c620ee86cbb51b384ebc Mon Sep 17 00:00:00 2001
From: Fedor Katurov
Date: Tue, 11 Jan 2022 16:34:26 +0700
Subject: [PATCH 14/28] 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 = () => {
разработке
+ Тестовые фичи
+
+
Инпуты