muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

refactored boris

Browse source
This commit is contained in:
Fedor Katurov 2021-09-20 17:49:44 +07:00
parent 35ce593ed8
commit 4c74674ac1
10 changed files with 105 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/boris/BorisContacts/index.tsx Normal file
View file

@ -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<Props> = () => (
<div className={styles.contacts}>
<div className={styles.contacts__title}>Где мы ещё:</div>
<BorisContactItem
icon="vk"
title="Суицидальные роботы"
link="https://vk.com/vault48"
subtitle="паблик вконтакте"
/>
<BorisContactItem
icon="telegram"
title="Boris[48]bot"
link="https://t.me/boris48bot"
subtitle="телеграм-бот"
/>
</div>
);
export { BorisContacts };

19
src/components/boris/BorisContacts/styles.module.scss Normal file
View file

@ -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;
}

31
src/components/boris/BorisSidebar/index.tsx Normal file
View file

@ -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<Props> = ({ user, stats, isTester, setBetaTester }) => (
<Group className={styles.stats__container}>
<div className={styles.super_powers}>
{user.is_user && <BorisSuperpowers active={isTester} onChange={setBetaTester} />}
</div>
<BorisContacts />
<div className={styles.stats__wrap}>
<BorisStats stats={stats} />
</div>
</Group>
);
export { BorisSidebar };

4
src/components/boris/BorisStats/index.tsx
View file

@ -1,10 +1,10 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { IBorisState } from '~/redux/boris/reducer'; import { BorisUsageStats, IBorisState } from '~/redux/boris/reducer';
import { BorisStatsGit } from '../BorisStatsGit'; import { BorisStatsGit } from '../BorisStatsGit';
import { BorisStatsBackend } from '../BorisStatsBackend'; import { BorisStatsBackend } from '../BorisStatsBackend';
interface IProps { interface IProps {
stats: IBorisState['stats']; stats: BorisUsageStats;
} }
const BorisStats: FC<IProps> = ({ stats }) => { const BorisStats: FC<IProps> = ({ stats }) => {

35
src/components/flow/Cell/index.tsx
View file

@ -33,41 +33,10 @@ const Cell: FC<IProps> = ({
const [is_loaded, setIsLoaded] = useState(false); const [is_loaded, setIsLoaded] = useState(false);
const [is_visible, setIsVisible] = useState(true); 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(() => { const onImageLoad = useCallback(() => {
setIsLoaded(true); setIsLoaded(true);
}, [setIsLoaded]); }, [setIsLoaded]);
// Replaced it with <Link>, 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 has_description = description && description.length > 32;
const text = const text =
@ -82,12 +51,12 @@ const Cell: FC<IProps> = ({
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewSingle = useCallback(() => { 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' }); onChangeCellView(id, { show_description, display: 'single' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewHorizontal = useCallback(() => { 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' }); onChangeCellView(id, { show_description, display: 'horizontal' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);

7
src/components/flow/Cell/styles.module.scss
View file

@ -30,18 +30,13 @@
.thumbnail { .thumbnail {
transform: scale(1.1); transform: scale(1.1);
} }
.title {
//opacity: 0;
//transform: translate(-3px, 3px);
}
} }
@include outer_shadow(); @include outer_shadow();
} }
.text { .text {
font: $font_18_regular; font: $font_18_regular;
line-height: 22px; line-height: 23px;
background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg'); background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg');
padding: $gap; padding: $gap;
box-sizing: border-box; box-sizing: border-box;

76
src/layouts/BorisLayout/index.tsx
View file

@ -27,6 +27,8 @@ import { useHistory, useLocation } from 'react-router';
import { Card } from '~/components/containers/Card'; import { Card } from '~/components/containers/Card';
import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { SidebarRouter } from '~/containers/main/SidebarRouter';
import { BorisContactItem } from '~/components/boris/BorisContactItem'; import { BorisContactItem } from '~/components/boris/BorisContactItem';
import { BorisContacts } from '~/components/boris/BorisContacts';
import { BorisSidebar } from '~/components/boris/BorisSidebar';
type IProps = {}; type IProps = {};
@ -37,7 +39,7 @@ const BorisLayout: FC<IProps> = () => {
const user = useShallowSelect(selectUser); const user = useShallowSelect(selectUser);
const stats = useShallowSelect(selectBorisStats); const stats = useShallowSelect(selectBorisStats);
const comments = useShallowSelect(selectNodeComments); const comments = useShallowSelect(selectNodeComments);
const is_tester = useShallowSelect(selectAuthIsTester); const isTester = useShallowSelect(selectAuthIsTester);
useEffect(() => { useEffect(() => {
const last_comment = comments[0]; const last_comment = comments[0];
@ -70,9 +72,6 @@ const BorisLayout: FC<IProps> = () => {
[dispatch] [dispatch]
); );
const history = useHistory();
const location = useLocation();
return ( return (
<Container> <Container>
<div className={styles.wrap}> <div className={styles.wrap}>
@ -88,67 +87,22 @@ const BorisLayout: FC<IProps> = () => {
<div className={styles.container}> <div className={styles.container}>
<Card className={styles.content}> <Card className={styles.content}>
<Superpower> <BorisComments
<Tabs> isLoadingComments={node.is_loading_comments}
<Tab commentCount={node.comment_count}
active={location.pathname === URLS.BORIS} node={node.current}
onClick={() => history.push(URLS.BORIS)} comments={node.comments}
> />
Комментарии
</Tab>
<Tab
active={location.pathname === `${URLS.BORIS}/ui`}
onClick={() => history.push(`${URLS.BORIS}/ui`)}
>
UI Demo
</Tab>
</Tabs>
</Superpower>
{
<Switch>
<Route path={`${URLS.BORIS}/ui`} component={BorisUIDemo} />
<BorisComments
isLoadingComments={node.is_loading_comments}
commentCount={node.comment_count}
node={node.current}
comments={node.comments}
/>
</Switch>
}
</Card> </Card>
<Group className={styles.stats}> <Group className={styles.stats}>
<StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}> <StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}>
<Group className={styles.stats__container}> <BorisSidebar
<div className={styles.super_powers}> isTester={isTester}
{user.is_user && <BorisSuperpowers active={is_tester} onChange={setBetaTester} />} stats={stats}
</div> setBetaTester={setBetaTester}
user={user}
<div className={styles.contacts}> />
<div className={styles.contacts__title}>Где мы ещё:</div>
<BorisContactItem
icon="vk"
title="Суицидальные роботы"
link="https://vk.com/vault48"
subtitle="паблик вконтакте"
/>
<BorisContactItem
icon="telegram"
title="Boris[48]bot"
link="https://t.me/boris48bot"
subtitle="телеграм-бот"
/>
</div>
<div className={styles.stats__wrap}>
<BorisStats stats={stats} />
</div>
</Group>
</StickyBox> </StickyBox>
</Group> </Group>
</div> </div>

20
src/layouts/BorisLayout/styles.module.scss
View file

@ -47,7 +47,6 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 33.333%; padding-bottom: 33.333%;
position: relative;
width: 100%; width: 100%;
img { img {
@ -81,7 +80,6 @@
font-size: 72px; font-size: 72px;
line-height: 0.95em; line-height: 0.95em;
flex-direction: column; flex-direction: column;
padding-bottom: $gap * 2;
padding: 0 0 $gap * 2; padding: 0 0 $gap * 2;
transform: translate(-50%, 0); transform: translate(-50%, 0);
box-sizing: border-box; box-sizing: border-box;
@ -158,24 +156,6 @@
flex: 3; 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 { .super_powers {
padding: $gap * 2 0; padding: $gap * 2 0;
} }

13
src/redux/boris/reducer.ts
View file

@ -29,13 +29,14 @@ export type IStatBackend = {
}; };
}; };
export interface BorisUsageStats {
git: Partial<IStatGitRow>[];
issues: IGithubIssue[];
backend?: IStatBackend;
is_loading: boolean;
}
export type IBorisState = Readonly<{ export type IBorisState = Readonly<{
stats: { stats: BorisUsageStats;
git: Partial<IStatGitRow>[];
issues: IGithubIssue[];
backend?: IStatBackend;
is_loading: boolean;
};
}>; }>;
const BORIS_INITIAL_STATE: IBorisState = { const BORIS_INITIAL_STATE: IBorisState = {

2
src/styles/variables.scss
View file

@ -69,7 +69,7 @@ $font_10_semibold: $semibold 10px $font;
$font_8_regular: $regular 8px $font; $font_8_regular: $regular 8px $font;
$font_8_semibold: $semibold 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; $font_hero_title: $bold 40px $font;
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px; $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;