made better flow cells

.env.development

@@ -1,3 +1,3 @@
 #REACT_APP_API_HOST=http://localhost:3334/
-REACT_APP_API_HOST=https://pig.staging.vault48.org/
-REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+REACT_APP_API_HOST=https://pig.vault48.org/
+REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/

package.json

@@ -27,6 +27,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.4.2",
+    "react-lazyload": "^3.2.0",
     "react-masonry-css": "^1.0.16",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.2",

src/components/flow/CellShade/index.tsx

@@ -1,21 +1,26 @@
 import React, { FC, useMemo } from 'react';
 import styles from './styles.module.scss';
 import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
-import { convertHexToRGBA } from '~/utils/color';
 import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
+import { transparentize } from 'color2k';
+import { normalizeBrightColor } from '~/utils/color';
 
 interface Props extends DivProps {
   color?: string;
+  size?: number;
 }
 
-const CellShade: FC<Props> = ({ color, ...rest }) => {
+const CellShade: FC<Props> = ({ color, size = 50, ...rest }) => {
   const background = useMemo(() => {
-    if (!color || color === DEFAULT_DOMINANT_COLOR) {
+    const normalized = normalizeBrightColor(color);
+
+    if (!color || color === DEFAULT_DOMINANT_COLOR || !normalized) {
       return undefined;
     }
 
-    return `linear-gradient(7deg, ${color} 50px, ${convertHexToRGBA(color, 0.3)} 250px)`;
+    return `linear-gradient(7deg, ${normalized} ${size}px, ${transparentize(normalized, 1)} ${size *
+      5}px)`;
   }, [color]);
 
   return (

src/components/flow/CellShade/styles.module.scss

@@ -1,15 +1,20 @@
 @import "~/styles/variables";
 
 .shade {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
   background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
   pointer-events: none;
   touch-action: none;
 
+  &.black::after {
+    content: ' ';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 10px;
+    height: 10px;
+    background-color: blue;
+  }
+
   @include tablet {
     opacity: 0.7;
   }

src/components/flow/FlowCell/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { NavLink } from 'react-router-dom';
+import { CellShade } from '~/components/flow/CellShade';
+import { FlowCellImage } from '~/components/flow/FlowCellImage';
+import { FlowDisplayVariant } from '~/redux/types';
+import { FlowCellText } from '~/components/flow/FlowCellText';
+import classNames from 'classnames';
+
+interface Props {
+  to: string;
+  title: string;
+  image?: string;
+  color?: string;
+  text?: string;
+  display?: FlowDisplayVariant;
+}
+
+const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title }) => {
+  const withText = ((!!display && display !== 'single') || !image) && !!text;
+
+  return (
+    <NavLink className={classNames(styles.cell, styles[display || 'single'])} to={to}>
+      {withText && (
+        <FlowCellText className={styles.text} title={title}>
+          {text!}
+        </FlowCellText>
+      )}
+
+      {image && (
+        <FlowCellImage
+          src={image}
+          height={400}
+          className={styles.thumb}
+          style={{ backgroundColor: color }}
+        />
+      )}
+
+      <CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
+      {!withText && <h4 className={styles.title}>{title}</h4>}
+    </NavLink>
+  );
+};
+
+export { FlowCell };

src/components/flow/FlowCell/styles.module.scss

@@ -0,0 +1,77 @@
+@import "~/styles/variables";
+
+.cell {
+  @include inner_shadow;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: $radius;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: $content_bg;
+  flex-direction: row;
+  color: inherit;
+  text-decoration: inherit;
+  font: inherit;
+  line-height: inherit;
+
+  &.vertical {
+    flex-direction: column-reverse;
+  }
+}
+
+.thumb {
+  @include outer_shadow;
+
+  border-radius: $radius;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+.shade {
+  @include outer_shadow;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.text {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: $radius;
+  max-height: calc(100% - 20px);
+  max-width: calc(100% - 20px);
+  box-sizing: border-box;
+
+
+  .quadro &,
+  .horizontal & {
+    max-width: calc(50% - 15px);
+    @include blur(transparentize($content_bg, 0), 10px, 0.5)
+  }
+
+  .quadro &,
+  .vertical & {
+    max-height: calc(50% - 15px);
+    @include blur(transparentize($content_bg, 0), 10px, 0.5)
+  }
+}
+
+.title {
+  font: $font_cell_title;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  padding: $gap;
+  text-transform: uppercase;
+}

src/components/flow/FlowCellImage/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import LazyLoad from 'react-lazyload';
+import { IMGProps } from '~/utils/types';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface Props extends IMGProps {
+  height?: number;
+}
+
+const FlowCellImage: FC<Props> = ({ className, children, ...rest }) => (
+  <LazyLoad once className={classNames(styles.wrapper, className)}>
+    <img {...rest} src={rest.src} alt="" />
+    {children}
+  </LazyLoad>
+);
+
+export { FlowCellImage };

src/components/flow/FlowCellImage/styles.module.scss

@@ -0,0 +1,15 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+  }
+}

src/components/flow/FlowCellText/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { Markdown } from '~/components/containers/Markdown';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import { formatText } from '~/utils/dom';
+
+interface Props extends DivProps {
+  children: string;
+  title: string;
+}
+
+const FlowCellText: FC<Props> = ({ children, title, ...rest }) => (
+  <div {...rest} className={classNames(styles.text, rest.className)}>
+    {title && <h4 className={styles.title}>{title}</h4>}
+    <Markdown
+      className={styles.description}
+      dangerouslySetInnerHTML={{ __html: formatText(children) }}
+    />
+  </div>
+);
+
+export { FlowCellText };

src/components/flow/FlowCellText/styles.module.scss

@@ -0,0 +1,12 @@
+@import "~/styles/variables";
+
+.text {
+  padding: $gap;
+  line-height: 1.3em;
+}
+
+.title {
+  font: $font_cell_title;
+  margin-bottom: $gap;
+  text-transform: uppercase;
+}

src/components/flow/FlowGrid/index.tsx

@@ -1,12 +1,13 @@
-import React, { FC, Fragment, useCallback } from 'react';
-import { Cell } from '~/components/flow/Cell';
+import React, { FC, Fragment } from 'react';
 
 import { IFlowState } from '~/redux/flow/reducer';
 import { INode } from '~/redux/types';
-import { canEditNode } from '~/utils/node';
 import { IUser } from '~/redux/auth/types';
-import { useHistory } from 'react-router';
-import { URLS } from '~/constants/urls';
+import { PRESETS, URLS } from '~/constants/urls';
+import { FlowCell } from '~/components/flow/FlowCell';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+import { getURLFromString } from '~/utils/dom';
 
 type IProps = Partial<IFlowState> & {
   user: Partial<IUser>;
@@ -14,9 +15,6 @@ type IProps = Partial<IFlowState> & {
 };
 
 export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
-  const history = useHistory();
-  const onSelect = useCallback((id: INode['id']) => history.push(URLS.NODE_URL(id)), [history]);
-
   if (!nodes) {
     return null;
   }
@@ -24,13 +22,16 @@ export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
   return (
     <Fragment>
       {nodes.map(node => (
-        <Cell
-          key={node.id}
-          node={node}
-          onSelect={onSelect}
-          can_edit={canEditNode(node, user)}
-          onChangeCellView={onChangeCellView}
+        <div className={classNames(styles.cell, styles[node.flow.display])} key={node.id}>
+          <FlowCell
+            color={node.flow.dominant_color}
+            to={URLS.NODE_URL(node.id)}
+            image={getURLFromString(node.thumbnail, PRESETS.cover)}
+            display={node.flow.display}
+            text={node.flow.show_description ? node.description : ''}
+            title={node.title}
           />
+        </div>
       ))}
     </Fragment>
   );

src/components/flow/FlowGrid/styles.module.scss

@@ -0,0 +1,19 @@
+@import "~/styles/variables";
+
+@mixin mobile {
+  @media (max-width: $cell * 2) {
+    @content;
+  }
+}
+
+.cell {
+  &.horizontal,
+  &.quadro {
+    grid-column-end: span 2;
+  }
+
+  &.vertical,
+  &.quadro {
+    grid-row-end: span 2;
+  }
+}

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -15,6 +15,7 @@ import SwiperClass from 'swiper/types/swiper-class';
 import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
 import { ImagePreloader } from '~/components/media/ImagePreloader';
+import { normalizeBrightColor } from '~/utils/color';
 
 SwiperCore.use([Navigation, Pagination, Keyboard]);
 
@@ -97,7 +98,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
               className={styles.image}
-              color={file?.metadata?.dominant_color}
+              color={normalizeBrightColor(file?.metadata?.dominant_color)}
             />
           </SwiperSlide>
         ))}

src/redux/types.ts

@@ -111,6 +111,7 @@ export interface IBlockEmbed {
 }
 
 export type IBlock = IBlockText | IBlockEmbed;
+export type FlowDisplayVariant = 'single' | 'vertical' | 'horizontal' | 'quadro';
 
 export interface INode {
   id?: number;
@@ -132,7 +133,7 @@ export interface INode {
   like_count?: number;
 
   flow: {
-    display: 'single' | 'vertical' | 'horizontal' | 'quadro';
+    display: FlowDisplayVariant;
     show_description: boolean;
     dominant_color?: string;
   };

src/styles/_global.scss

@@ -27,6 +27,10 @@ body {
     background-size: 600px 600px;
     pointer-events: none;
   }
+
+  * {
+    box-sizing: border-box;
+  }
 }
 
 #app {

src/styles/common/markdown.module.scss

@@ -112,7 +112,7 @@ $margin: 1em;
   }
 
   :global(.grey) {
-    color: #555555;
+    color: #666666;
     white-space: pre-line;
   }
 }

src/styles/variables.scss

@@ -194,13 +194,13 @@ $sidebar_border: transparentize(white, 0.95);
   }
 }
 
-@mixin blur($color: $content_bg, $radius: 15px) {
-  background: transparentize($color, 0.1);
+@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
+  background: transparentize($color, $opacity / 2);
 
   @include can_backdrop {
     backdrop-filter: blur($radius);
     -webkit-backdrop-filter: blur($radius);
-    background: transparentize($color, 0.5);
+    background: transparentize($color, $opacity);
   }
 }
 

src/utils/color.ts

@@ -1,13 +1,15 @@
-export const convertHexToRGBA = (hexCode, opacity) => {
-  let hex = hexCode.replace('#', '');
+import { darken, desaturate, parseToHsla } from 'color2k';
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
-  if (hex.length === 3) {
-    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+export const normalizeBrightColor = (color?: string) => {
+  if (!color) {
+    return undefined;
   }
 
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
+  const hsla = parseToHsla(color || DEFAULT_DOMINANT_COLOR);
+  const saturation = hsla[1];
+  const lightness = hsla[2];
 
-  return `rgba(${r},${g},${b},${opacity})`;
+  const desaturated = saturation > 0.3 ? desaturate(color, Math.min(saturation, 0.4)) : color;
+  return lightness > 0.3 ? darken(desaturated, Math.min(lightness, 0.2)) : desaturated;
 };

src/utils/dom.ts

@@ -76,17 +76,17 @@ export const describeArc = (
 };
 
 export const getURLFromString = (
-  url: string,
+  url?: string,
   size?: typeof PRESETS[keyof typeof PRESETS]
 ): string => {
   if (size) {
-    return url.replace(
+    return (url || '').replace(
       'REMOTE_CURRENT://',
       `${process.env.REACT_APP_REMOTE_CURRENT}cache/${size}/`
     );
   }
 
-  return url.replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
+  return (url || '').replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
 };
 
 export const getURL = (

src/utils/types.ts

@@ -6,3 +6,8 @@ export type DivProps = React.DetailedHTMLProps<
 >;
 
 export type SVGProps = React.SVGProps<SVGSVGElement>;
+
+export type IMGProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>;

yarn.lock

@@ -9417,6 +9417,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-lazyload@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-3.2.0.tgz#497bd06a6dbd7015e3376e1137a67dc47d2dd021"
+  integrity sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==
+
 react-masonry-css@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"