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

fixed cell appearance

Browse source
This commit is contained in:
Fedor Katurov 2019-11-15 15:23:11 +07:00
parent 52865a302f
commit 51fcaa3ae0
3 changed files with 131 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,20 @@
import React, { FC, useState, useCallback, useEffect, useRef } from 'react'; import React, { FC, useState, useCallback, useEffect, useRef } from "react";
import { INode } from '~/redux/types'; import { INode } from "~/redux/types";
import { getURL, formatCellText } from '~/utils/dom'; import { getURL, formatCellText } from "~/utils/dom";
import classNames from 'classnames'; import classNames from "classnames";
import * as styles from './styles.scss'; import * as styles from "./styles.scss";
import { Icon } from '~/components/input/Icon'; import { Icon } from "~/components/input/Icon";
import { flowSetCellView } from '~/redux/flow/actions'; import { flowSetCellView } from "~/redux/flow/actions";
import { PRESETS } from '~/constants/urls'; import { PRESETS } from "~/constants/urls";
import { debounce } from 'throttle-debounce'; import { debounce } from "throttle-debounce";
interface IProps { interface IProps {
node: INode; node: INode;
is_text?: boolean; is_text?: boolean;
can_edit?: boolean; can_edit?: boolean;
onSelect: (id: INode['id'], type: INode['type']) => void; onSelect: (id: INode["id"], type: INode["type"]) => void;
onChangeCellView: typeof flowSetCellView; onChangeCellView: typeof flowSetCellView;
} }
@ -22,7 +22,7 @@ const Cell: FC<IProps> = ({
node: { id, title, thumbnail, type, flow, description }, node: { id, title, thumbnail, type, flow, description },
can_edit, can_edit,
onSelect, onSelect,
onChangeCellView, onChangeCellView
}) => { }) => {
const ref = useRef(null); const ref = useRef(null);
const [is_loaded, setIsLoaded] = useState(false); const [is_loaded, setIsLoaded] = useState(false);
@ -33,14 +33,16 @@ const Cell: FC<IProps> = ({
const { top, height } = ref.current.getBoundingClientRect(); const { top, height } = ref.current.getBoundingClientRect();
const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2; const visibility =
top + height > -window.innerHeight && top < window.innerHeight * 2;
if (visibility !== is_visible) setIsVisible(visibility); if (visibility !== is_visible) setIsVisible(visibility);
}, [ref, is_visible, setIsVisible]); }, [ref, is_visible, setIsVisible]);
const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 200, checkIfVisible), [ const checkIfVisibleDebounced = useCallback(
checkIfVisible, debounce(Math.random() * 200, checkIfVisible),
]); [checkIfVisible]
);
useEffect(() => { useEffect(() => {
checkIfVisible(); checkIfVisible();
@ -48,13 +50,13 @@ const Cell: FC<IProps> = ({
useEffect(() => { useEffect(() => {
// recalc visibility of other elements // recalc visibility of other elements
window.dispatchEvent(new CustomEvent('scroll')); window.dispatchEvent(new CustomEvent("scroll"));
}, [flow]); }, [flow]);
useEffect(() => { useEffect(() => {
window.addEventListener('scroll', checkIfVisibleDebounced); window.addEventListener("scroll", checkIfVisibleDebounced);
return () => window.removeEventListener('scroll', checkIfVisibleDebounced); return () => window.removeEventListener("scroll", checkIfVisibleDebounced);
}, [checkIfVisibleDebounced]); }, [checkIfVisibleDebounced]);
const onImageLoad = useCallback(() => { const onImageLoad = useCallback(() => {
@ -65,49 +67,51 @@ const Cell: FC<IProps> = ({
const has_description = description && description.length > 160; const has_description = description && description.length > 160;
const text = const text =
(((flow && !!flow.show_description) || type === 'text') && has_description && description) || (((flow && !!flow.show_description) || type === "text") &&
has_description &&
description) ||
null; null;
const toggleViewDescription = useCallback(() => { const toggleViewDescription = useCallback(() => {
const show_description = !(flow && flow.show_description); const show_description = !(flow && flow.show_description);
const display = (flow && flow.display) || 'single'; const display = (flow && flow.display) || "single";
onChangeCellView(id, { show_description, display }); onChangeCellView(id, { show_description, display });
}, [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]);
const setViewVertical = useCallback(() => { const setViewVertical = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: 'vertical' }); onChangeCellView(id, { show_description, display: "vertical" });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewQuadro = useCallback(() => { const setViewQuadro = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: 'quadro' }); onChangeCellView(id, { show_description, display: "quadro" });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
return ( return (
<div <div
className={classNames(styles.cell, styles[(flow && flow.display) || 'single'], { className={classNames(
[styles.is_text]: false, styles.cell,
})} styles[(flow && flow.display) || "single"]
)}
onClick={onClick}
ref={ref} ref={ref}
> >
{is_visible && ( {is_visible && (
<> <>
{can_edit && ( {can_edit && (
<div className={styles.menu}> <div className={styles.menu}>
<div className={styles.menu_button}> <div className={styles.menu_button} />
<Icon icon="dots-vertical" />
</div>
<div className={styles.menu_content}> <div className={styles.menu_content}>
{has_description && ( {has_description && (
@ -124,14 +128,28 @@ const Cell: FC<IProps> = ({
</div> </div>
)} )}
<div className={classNames(styles.face, { [styles.has_text]: text })}> <div className={classNames(styles.face)}>
<div className={styles.face_content}> <div className={styles.face_content}>
{title && <div className={styles.title}>{title}</div>} {title && !text && <div className={styles.title}>{title}</div>}
{text && (
{!!text && !!thumbnail && (
<div className={styles.text}>
{title && <div className={styles.text_title}>{title}</div>}
<div <div
className={styles.text}
dangerouslySetInnerHTML={{ __html: formatCellText(text) }} dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
/> />
</div>
)}
{!!text && !thumbnail && (
<div className={styles.text_only}>
{title && <div className={styles.text_title}>{title}</div>}
<div
dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
/>
</div>
)} )}
</div> </div>
</div> </div>
@ -140,12 +158,18 @@ const Cell: FC<IProps> = ({
<div <div
className={styles.thumbnail} className={styles.thumbnail}
style={{ style={{
backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`, backgroundImage: `url("${getURL(
opacity: is_loaded ? 1 : 0, { url: thumbnail },
PRESETS.cover
)}")`,
opacity: is_loaded ? 1 : 0
}} }}
onClick={onClick}
> >
<img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" /> <img
src={getURL({ url: thumbnail })}
onLoad={onImageLoad}
alt=""
/>
</div> </div>
)} )}
</> </>

79
src/components/flow/Cell/styles.scss
View file

@ -28,15 +28,22 @@
.text { .text {
font: $font_18_regular; font: $font_18_regular;
line-height: 22px; line-height: 22px;
margin-top: $gap; // margin-top: $gap;
// letter-spacing: 0.5px; // letter-spacing: 0.5px;
background: transparentize($color: $content_bg, $amount: 0.3)
url("~/sprites/stripes.svg");
padding: $gap;
box-sizing: border-box;
border-radius: $radius;
overflow: hidden;
position: relative;
p { p {
margin-bottom: $gap; margin-bottom: $gap;
} }
&::after { &::after {
content: ' '; content: " ";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -44,7 +51,10 @@
height: 160px; height: 160px;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
background: linear-gradient(transparentize($content_bg, 1), $content_bg 95%); background: linear-gradient(
transparentize($content_bg, 1),
$content_bg 95%
);
z-index: 1; z-index: 1;
border-radius: 0 0 $radius $radius; border-radius: 0 0 $radius $radius;
} }
@ -71,6 +81,7 @@
} }
.title { .title {
padding: $gap / 2;
// max-height: 3.3em; // max-height: 3.3em;
} }
@ -81,11 +92,25 @@
.horizontal, .horizontal,
.quadro { .quadro {
grid-column-end: span 2; grid-column-end: span 2;
.text {
width: 50%;
height: 100%;
}
} }
.vertical, .vertical,
.quadro { .quadro {
grid-row-end: span 2; grid-row-end: span 2;
.text {
width: 100%;
height: 50%;
}
.face_content {
align-items: flex-end;
}
} }
@media (max-width: $cell * 2) { @media (max-width: $cell * 2) {
@ -145,10 +170,14 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient($content_bg, transparentize($content_bg, 1)); background: linear-gradient(
5deg,
transparentize($content_bg, 0),
transparentize($content_bg, 1)
);
z-index: 2; z-index: 2;
border-radius: $cell_radius; border-radius: $cell_radius;
padding: $gap; padding: $gap / 2;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
animation: appear 1s forwards; animation: appear 1s forwards;
@ -174,8 +203,11 @@
position: relative; position: relative;
&:after { &:after {
content: ''; content: "";
background: linear-gradient(transparentize($content_bg, 1), $content_bg); background: linear-gradient(
transparentize($content_bg, 1),
$content_bg
);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -261,17 +293,30 @@
touch-action: auto; touch-action: auto;
position: absolute; position: absolute;
z-index: 4; z-index: 4;
width: 32px + $gap * 2; width: 32px;
height: 32px + $gap * 2; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.2; opacity: 0.9;
right: $gap;
svg { &::after {
fill: white; @include inner_shadow();
width: 30px;
height: 30px; content: " ";
width: 20px;
height: 20px;
background: $content_bg;
border-radius: 100%;
transform: scale(0.5);
transition: transform 0.25s;
}
&:hover {
&::after {
transform: scale(1);
}
} }
} }
@ -314,3 +359,9 @@
opacity: 0.2; opacity: 0.2;
border-radius: 2px; border-radius: 2px;
} }
.face_content {
display: flex;
align-items: flex-end;
justify-content: flex-start;
}

2
src/redux/auth/sagas.ts
View file

@ -117,7 +117,7 @@ function* refreshUser() {
function* checkUserSaga({ key }: RehydrateAction) { function* checkUserSaga({ key }: RehydrateAction) {
if (key !== "auth") return; if (key !== "auth") return;
yield call(refreshUser); yield call(refreshUser);
yield put(authOpenProfile("gvorcek", "settings")); // yield put(authOpenProfile("gvorcek", "settings"));
} }
function* gotPostMessageSaga({ token }: ReturnType<typeof gotAuthPostMessage>) { function* gotPostMessageSaga({ token }: ReturnType<typeof gotAuthPostMessage>) {