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

fixed cell shade for tablets

Browse source
This commit is contained in:
Fedor Katurov 2022-01-25 17:11:59 +07:00
parent fdd404cd4d
commit 21b3bc3d77
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/flow/FlowCell/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, useMemo } from 'react';
import classNames from 'classnames';
@ -9,6 +9,7 @@ import { FlowCellImage } from '~/components/flow/FlowCellImage';
import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
import { FlowCellText } from '~/components/flow/FlowCellText';
import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
import { useWindowSize } from '~/hooks/dom/useWindowSize';
import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
import { FlowDisplay, INode } from '~/types';
@ -38,6 +39,8 @@ const FlowCell: FC<Props> = ({
canEdit = false,
onChangeCellView,
}) => {
const { innerWidth } = useWindowSize();
const withText =
((!!flow.display && flow.display !== 'single') || !image) && flow.show_description && !!text;
const {
@ -50,6 +53,13 @@ const FlowCell: FC<Props> = ({
} = useFlowCellControls(id, text, flow, onChangeCellView);
const { isActive: isMenuActive, activate, ref, deactivate } = useClickOutsideFocus();
const shadeSize = useMemo(() => {
const min = innerWidth < 768 ? 10 : 15;
const max = innerWidth < 768 ? 20 : 50;
return withText ? min : max;
}, [withText, innerWidth]);
return (
<div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>
{canEdit && !isMenuActive && (
@ -90,7 +100,7 @@ const FlowCell: FC<Props> = ({
/>
)}
<CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
<CellShade color={color} className={styles.shade} size={shadeSize} />
{!withText && (
<div className={styles.title_wrapper}>