refactored flow cells, added colors for lab (#78)

* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow

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,16 +1,17 @@
 @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;
 
-  @include tablet {
-    opacity: 0.7;
+  &.black::after {
+    content: ' ';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 10px;
+    height: 10px;
+    background-color: blue;
   }
 }

src/components/flow/FlowCell/index.tsx

@@ -0,0 +1,50 @@
+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} heading={<h4 className={styles.title}>{title}</h4>}>
+          {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 && (
+        <div className={styles.title_wrapper}>
+          <h4 className={styles.title}>{title}</h4>
+        </div>
+      )}
+    </NavLink>
+  );
+};
+
+export { FlowCell };

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

@@ -0,0 +1,97 @@
+@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: 5px;
+  left: 5px;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: $radius;
+  max-height: calc(100% - 10px);
+  max-width: calc(100% - 10px);
+  box-sizing: border-box;
+  font: $font_16_regular;
+
+  @include tablet {
+    font: $font_14_regular;
+    left: 5px;
+    bottom: 5px;
+  }
+
+  & :global(.grey) {
+    color: inherit;
+    opacity: 0.5;
+  }
+
+  .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_wrapper {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  padding: $gap;
+  position: absolute;
+}
+
+.title {
+  font: $font_cell_title;
+  text-transform: uppercase;
+  word-break: break-word;
+
+  @include tablet {
+    font: $font_18_semibold;
+  }
+}

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, ReactElement } 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;
+  heading: string | ReactElement;
+}
+
+const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
+  <div {...rest} className={classNames(styles.text, rest.className)}>
+    {heading && <div className={styles.heading}>{heading}</div>}
+    <Markdown
+      className={styles.description}
+      dangerouslySetInnerHTML={{ __html: formatText(children) }}
+    />
+  </div>
+);
+
+export { FlowCellText };

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

@@ -0,0 +1,11 @@
+@import "~/styles/variables";
+
+.text {
+  padding: $gap;
+  line-height: 1.3em;
+}
+
+.heading {
+  margin-bottom: 0.4em;
+}
+

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/flow/FlowSwiperHero/index.tsx

@@ -100,7 +100,8 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
         speed={3000}
         className={styles.swiper}
         lazy={{
-          loadPrevNextAmount: 3,
+          loadPrevNextAmount: 5,
+          checkInView: false,
         }}
         loop
         slidesPerView={1}
@@ -122,7 +123,7 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
           .map(node => (
             <SwiperSlide key={node.id}>
               <img
-                data-src={getURLFromString(node.thumbnail!, preset)}
+                src={getURLFromString(node.thumbnail!, preset)}
                 alt=""
                 className={classNames(styles.preview, 'swiper-lazy')}
               />

src/components/lab/LabImage/index.tsx

@@ -23,7 +23,6 @@ interface IProps extends INodeComponentProps {}
 
 const breakpoints: SwiperOptions['breakpoints'] = {
   599: {
-    spaceBetween: 20,
     navigation: true,
   },
 };
@@ -64,7 +63,6 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
           initialSlide={0}
           slidesPerView={images.length > 1 ? 1.1 : 1}
           onSwiper={setControlledSwiper}
-          spaceBetween={10}
           grabCursor
           autoHeight
           breakpoints={breakpoints}

src/components/lab/LabImage/styles.module.scss

@@ -28,7 +28,6 @@
   text-transform: uppercase;
   font: $font_32_bold;
   display: flex;
-  border-radius: $radius;
   align-items: center;
   justify-content: center;
   width: auto;
@@ -51,7 +50,6 @@
 .image {
   max-height: calc(100vh - 70px - 70px);
   max-width: 100%;
-  border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
 

src/components/lab/LabNode/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.scss';
 import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { isAfter, parseISO } from 'date-fns';
 import classNames from 'classnames';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 interface IProps {
   node: INode;
@@ -22,8 +23,10 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
     [node.commented_at, lastSeen]
   );
 
+  const background = useColorGradientFromString(node.title, 3, 2);
+
   return (
-    <div className={classNames(styles.wrap, { [styles.heroic]: node.is_heroic })}>
+    <div className={classNames(styles.wrap)} style={{ background }}>
       {lab}
       <LabBottomPanel
         node={node}

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/components/node/NodeRelatedItem/index.tsx

@@ -6,6 +6,9 @@ import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL, stringToColour } from '~/utils/dom';
 import { Avatar } from '~/components/common/Avatar';
+import { normalizeBrightColor } from '~/utils/color';
+import { adjustHue } from 'color2k';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
@@ -37,10 +40,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
     () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''),
     [item]
   );
-  const backgroundColor = useMemo(
-    () => (!thumb && item.title && stringToColour(item.title)) || '',
-    []
-  );
+
+  const background = useColorGradientFromString(!thumb ? item.title : '');
 
   useEffect(() => {
     if (!ref.current) return;
@@ -76,13 +77,13 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
       />
 
       {!item.thumbnail && size === 'small' && (
-        <div className={styles.letters} style={{ backgroundColor }}>
+        <div className={styles.letters} style={{ background }}>
           {getTitleLetters(item.title)}
         </div>
       )}
 
       {!item.thumbnail && size !== 'small' && (
-        <div className={styles.title} style={{ backgroundColor }}>
+        <div className={styles.title} style={{ background }}>
           {item.title}
         </div>
       )}

src/components/node/NodeRelatedItem/styles.module.scss

@@ -43,11 +43,6 @@ div.thumb {
   font: $font_24_semibold;
   color: transparentize(white, 0.5);
   border-radius: $cell_radius;
-  background-image: linear-gradient(
-    180deg,
-    transparentize($content_bg, 0.4),
-    transparentize($content_bg, 0.4)
-  );
 }
 
 .title {