From 88f50e33488f9db4f676201baab9a2019ec30813 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Nov 2019 12:13:05 +0700
Subject: [PATCH] added imagecache

---
 src/components/flow/Cell/index.tsx         |  3 ++-
 src/components/flow/FlowHero/index.tsx     |  4 +---
 src/components/flow/FlowHero/styles.scss   |  3 +++
 src/components/main/UserButton/styles.scss |  5 ++++-
 src/constants/urls.ts                      | 11 +++++++++++
 src/utils/dom.ts                           |  9 ++++++++-
 6 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index 4d6e69bd..c0ae09b6 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { flowSetCellView } from '~/redux/flow/actions';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   node: INode;
@@ -104,7 +105,7 @@ const Cell: FC<IProps> = ({
         <div
           className={styles.thumbnail}
           style={{
-            backgroundImage: `url("${getURL({ url: thumbnail })}")`,
+            backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
             opacity: is_loaded ? 1 : 0,
           }}
           onClick={onClick}
diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index b9350b55..07b3cae9 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -84,9 +84,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
       {loaded && loaded.length > 0 && (
         <div className={styles.info}>
-          <div className={styles.title_wrap}>
-            <div className={styles.title}>{title}</div>
-          </div>
+          <div className={styles.title_wrap}>{title}</div>
 
           <div className={styles.buttons}>
             <div className={styles.button} onClick={onPrevious}>
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index dd479e08..738caa58 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -102,6 +102,9 @@
   display: flex;
   margin-right: $gap;
   overflow: hidden;
+  font: $font_hero_title;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
 }
 
 .title {
diff --git a/src/components/main/UserButton/styles.scss b/src/components/main/UserButton/styles.scss
index 895685f9..030f0cc0 100644
--- a/src/components/main/UserButton/styles.scss
+++ b/src/components/main/UserButton/styles.scss
@@ -18,11 +18,14 @@
   z-index: 1;
   background: $content_bg;
   min-width: 100%;
+  box-sizing: border-box;
 
   & > div {
     padding: $gap $gap * 2;
     cursor: pointer;
     opacity: 0.5;
+    box-sizing: border-box;
+    transition: opacity 0.25s;
   }
 
   &:hover > div {
@@ -41,7 +44,7 @@
   white-space: nowrap;
   box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px;
   background: transparentize($content_bg, 0.1);
-  padding: 0 0 0 $gap;
+  padding: 0;
 }
 
 .user_avatar {
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 73f4c091..2b335f66 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -9,3 +9,14 @@ export const URLS = {
   },
   NODE_URL: (id: number | string) => `/post${id}`,
 };
+
+export const PRESETS = {
+  '1400': '1400',
+  '900': '900',
+  '600': '600',
+  '300': '300',
+  '100': '100',
+  placeholder: 'placeholder',
+  cover: 'cover',
+  hero: 'hero',
+};
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 65e9e0de..af3af5f2 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -2,6 +2,7 @@ import { IFile } from '~/redux/types';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import { ru } from 'date-fns/locale';
 import Axios from 'axios';
+import { PRESETS } from '~/constants/urls';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
@@ -57,9 +58,15 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURL = (file: Partial<IFile>) => {
+export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
   if (!file || !file.url) return null;
 
+  if (size) {
+    return file.url
+      .replace('REMOTE_CURRENT://', `${process.env.REMOTE_CURRENT}/cache/${size}/`)
+      .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
+  }
+
   return file.url
     .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT)
     .replace('REMOTE_OLD://', process.env.REMOTE_OLD);