diff --git a/src/components/boris/BorisContacts/index.tsx b/src/components/boris/BorisContacts/index.tsx new file mode 100644 index 00000000..71868a06 --- /dev/null +++ b/src/components/boris/BorisContacts/index.tsx @@ -0,0 +1,27 @@ +import React, { FC } from 'react'; +import { BorisContactItem } from '~/components/boris/BorisContactItem'; +import styles from './styles.module.scss'; + +interface Props {} + +const BorisContacts: FC = () => ( +
+
Где мы ещё:
+ + + + +
+); + +export { BorisContacts }; diff --git a/src/components/boris/BorisContacts/styles.module.scss b/src/components/boris/BorisContacts/styles.module.scss new file mode 100644 index 00000000..0e6bd802 --- /dev/null +++ b/src/components/boris/BorisContacts/styles.module.scss @@ -0,0 +1,19 @@ +@import "~/styles/variables"; + +.contacts { + display: grid; + grid-auto-flow: row; + grid-row-gap: $gap; + padding: 2px 2px $gap * 3 2px; + + & > *:not(:last-child) { + border-bottom: 1px solid #333333; + padding-bottom: $gap * 2; + } +} + +.contacts__title { + font: $font_12_semibold; + text-transform: uppercase; + opacity: 0.3; +} diff --git a/src/components/boris/BorisSidebar/index.tsx b/src/components/boris/BorisSidebar/index.tsx new file mode 100644 index 00000000..30124438 --- /dev/null +++ b/src/components/boris/BorisSidebar/index.tsx @@ -0,0 +1,31 @@ +import React, { FC } from 'react'; +import styles from '~/layouts/BorisLayout/styles.module.scss'; +import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers'; +import { BorisContacts } from '~/components/boris/BorisContacts'; +import { BorisStats } from '~/components/boris/BorisStats'; +import { Group } from '~/components/containers/Group'; +import { IUser } from '~/redux/auth/types'; +import { BorisUsageStats } from '~/redux/boris/reducer'; + +interface Props { + user: IUser; + isTester: boolean; + stats: BorisUsageStats; + setBetaTester: (val: boolean) => void; +} + +const BorisSidebar: FC = ({ user, stats, isTester, setBetaTester }) => ( + +
+ {user.is_user && } +
+ + + +
+ +
+ +); + +export { BorisSidebar }; diff --git a/src/components/boris/BorisStats/index.tsx b/src/components/boris/BorisStats/index.tsx index 97f2e975..e60b91d7 100644 --- a/src/components/boris/BorisStats/index.tsx +++ b/src/components/boris/BorisStats/index.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react'; -import { IBorisState } from '~/redux/boris/reducer'; +import { BorisUsageStats, IBorisState } from '~/redux/boris/reducer'; import { BorisStatsGit } from '../BorisStatsGit'; import { BorisStatsBackend } from '../BorisStatsBackend'; interface IProps { - stats: IBorisState['stats']; + stats: BorisUsageStats; } const BorisStats: FC = ({ stats }) => { diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index 059723c7..ee587833 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -33,41 +33,10 @@ const Cell: FC = ({ const [is_loaded, setIsLoaded] = useState(false); const [is_visible, setIsVisible] = useState(true); - // const checkIfVisible = useCallback(() => { - // if (!ref.current) return; - // - // const { top, height } = ref.current.getBoundingClientRect(); - // - // // const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2; - // const visibility = top + height > -600 && top < window.innerHeight + 600; - // if (visibility !== is_visible) setIsVisible(visibility); - // }, [ref, is_visible, setIsVisible]); - // - // const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 100 + 100, checkIfVisible), [ - // checkIfVisible, - // ]); - - // useEffect(() => { - // checkIfVisibleDebounced(); - // }, []); - - // useEffect(() => { - // recalc visibility of other elements - // window.dispatchEvent(new CustomEvent('scroll')); - // }, [flow]); - - // useEffect(() => { - // window.addEventListener('scroll', checkIfVisibleDebounced); - // - // return () => window.removeEventListener('scroll', checkIfVisibleDebounced); - // }, [checkIfVisibleDebounced]); - const onImageLoad = useCallback(() => { setIsLoaded(true); }, [setIsLoaded]); - // Replaced it with , maybe, you can remove it completely with NodeSelect action - // const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]); const has_description = description && description.length > 32; const text = @@ -82,12 +51,12 @@ const Cell: FC = ({ }, [id, flow, onChangeCellView]); const setViewSingle = useCallback(() => { - const show_description = (flow && !!flow.show_description) || false; + const show_description = (flow && flow.show_description) || false; onChangeCellView(id, { show_description, display: 'single' }); }, [id, flow, onChangeCellView]); const setViewHorizontal = useCallback(() => { - const show_description = (flow && !!flow.show_description) || false; + const show_description = (flow && flow.show_description) || false; onChangeCellView(id, { show_description, display: 'horizontal' }); }, [id, flow, onChangeCellView]); diff --git a/src/components/flow/Cell/styles.module.scss b/src/components/flow/Cell/styles.module.scss index ed6d791b..33d2288e 100644 --- a/src/components/flow/Cell/styles.module.scss +++ b/src/components/flow/Cell/styles.module.scss @@ -30,18 +30,13 @@ .thumbnail { transform: scale(1.1); } - - .title { - //opacity: 0; - //transform: translate(-3px, 3px); - } } @include outer_shadow(); } .text { font: $font_18_regular; - line-height: 22px; + line-height: 23px; background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg'); padding: $gap; box-sizing: border-box; diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index e5f79cfe..20395358 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/src/layouts/BorisLayout/index.tsx @@ -27,6 +27,8 @@ import { useHistory, useLocation } from 'react-router'; import { Card } from '~/components/containers/Card'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { BorisContactItem } from '~/components/boris/BorisContactItem'; +import { BorisContacts } from '~/components/boris/BorisContacts'; +import { BorisSidebar } from '~/components/boris/BorisSidebar'; type IProps = {}; @@ -37,7 +39,7 @@ const BorisLayout: FC = () => { const user = useShallowSelect(selectUser); const stats = useShallowSelect(selectBorisStats); const comments = useShallowSelect(selectNodeComments); - const is_tester = useShallowSelect(selectAuthIsTester); + const isTester = useShallowSelect(selectAuthIsTester); useEffect(() => { const last_comment = comments[0]; @@ -70,9 +72,6 @@ const BorisLayout: FC = () => { [dispatch] ); - const history = useHistory(); - const location = useLocation(); - return (
@@ -88,67 +87,22 @@ const BorisLayout: FC = () => {
- - - history.push(URLS.BORIS)} - > - Комментарии - - - history.push(`${URLS.BORIS}/ui`)} - > - UI Demo - - - - - { - - - - - - } + - -
- {user.is_user && } -
- -
-
Где мы ещё:
- - - - -
- -
- -
- +
diff --git a/src/layouts/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss index df892229..d89fd894 100644 --- a/src/layouts/BorisLayout/styles.module.scss +++ b/src/layouts/BorisLayout/styles.module.scss @@ -47,7 +47,6 @@ align-items: center; justify-content: flex-end; padding-bottom: 33.333%; - position: relative; width: 100%; img { @@ -81,7 +80,6 @@ font-size: 72px; line-height: 0.95em; flex-direction: column; - padding-bottom: $gap * 2; padding: 0 0 $gap * 2; transform: translate(-50%, 0); box-sizing: border-box; @@ -158,24 +156,6 @@ flex: 3; } -.contacts { - display: grid; - grid-auto-flow: row; - grid-row-gap: $gap; - padding: 2px 2px $gap * 3 2px; - - & > *:not(:last-child) { - border-bottom: 1px solid #333333; - padding-bottom: $gap * 2; - } -} - -.contacts__title { - font: $font_12_semibold; - text-transform: uppercase; - opacity: 0.3; -} - .super_powers { padding: $gap * 2 0; } diff --git a/src/redux/boris/reducer.ts b/src/redux/boris/reducer.ts index 5e182674..8cfebc20 100644 --- a/src/redux/boris/reducer.ts +++ b/src/redux/boris/reducer.ts @@ -29,13 +29,14 @@ export type IStatBackend = { }; }; +export interface BorisUsageStats { + git: Partial[]; + issues: IGithubIssue[]; + backend?: IStatBackend; + is_loading: boolean; +} export type IBorisState = Readonly<{ - stats: { - git: Partial[]; - issues: IGithubIssue[]; - backend?: IStatBackend; - is_loading: boolean; - }; + stats: BorisUsageStats; }>; const BORIS_INITIAL_STATE: IBorisState = { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ebb6df7f..47654fd3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -69,7 +69,7 @@ $font_10_semibold: $semibold 10px $font; $font_8_regular: $regular 8px $font; $font_8_semibold: $semibold 8px $font; -$font_cell_title: $bold 30px $font; +$font_cell_title: $font_18_semibold; $font_hero_title: $bold 40px $font; $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;