From 0df90c1a2a2fd445ddc24e64b026eca37ef3fc17 Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Thu, 25 Jun 2020 22:29:09 +0200
Subject: [PATCH] Added click-to-load text for pdf embeddings and general
 option for texts on the embedding preview (#277)

* Added possibility to add a text below the icon on the preview

* Changes naming of i18nKey argument

* Rebase fixes

* Show preview image only if defined
---
 public/locales/en.json                        |  3 +++
 .../one-click-frame/one-click-embedding.scss  |  2 +-
 .../one-click-frame/one-click-embedding.tsx   | 22 ++++++++++++++-----
 .../replace-components/pdf/pdf-frame.tsx      |  6 +++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index 061340d9f..57996884b 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -254,6 +254,9 @@
                 "question": "Do you really want to delete this note?",
                 "warning": "All users will lose their connection."
             }
+        },
+        "embeddings": {
+          "clickToLoad": "Click to load"
         }
     },
     "common":  {
diff --git a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.scss b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.scss
index ea76c281c..9535fc030 100644
--- a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.scss
+++ b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.scss
@@ -17,7 +17,7 @@
     text-shadow: #000000 0 0 5px;
   }
 
-  &:hover > i {
+  &:hover > .one-click-embedding-icon {
     opacity: 0.8;
     text-shadow: #000000 0 0 10px;
   }
diff --git a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
index a8b012a69..a65d58cef 100644
--- a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from 'react'
+import { Trans } from 'react-i18next'
 import { IconName } from '../../../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../../../common/show-if/show-if'
 import './one-click-embedding.scss'
 
 interface OneClickFrameProps {
   onImageFetch?: () => Promise<string>
-  loadingImageUrl: string
+  loadingImageUrl?: string
   hoverIcon?: IconName
+  hoverTextI18nKey?: string
   tooltip?: string
   containerClassName?: string
   previewContainerClassName?: string
   onActivate?: () => void
 }
 
-export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, onActivate }) => {
+export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, hoverTextI18nKey, onActivate }) => {
   const [showFrame, setShowFrame] = useState(false)
-  const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl)
+  const [previewImageUrl, setPreviewImageUrl] = useState(loadingImageUrl)
 
   const showChildren = () => {
     setShowFrame(true)
@@ -29,7 +31,7 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
       return
     }
     onImageFetch().then((imageLink) => {
-      setPreviewImageLink(imageLink)
+      setPreviewImageUrl(imageLink)
     }).catch((message) => {
       console.error(message)
     })
@@ -42,9 +44,17 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
       </ShowIf>
       <ShowIf condition={!showFrame}>
         <span className={`one-click-embedding ${previewContainerClassName || ''}`} onClick={showChildren}>
-          <img className={'one-click-embedding-preview'} src={previewImageLink} alt={tooltip || ''} title={tooltip || ''}/>
+          <ShowIf condition={!!previewImageUrl}>
+            <img className={'one-click-embedding-preview'} src={previewImageUrl} alt={tooltip || ''} title={tooltip || ''}/>
+          </ShowIf>
           <ShowIf condition={!!hoverIcon}>
-            <i className={`one-click-embedding-icon fa fa-${hoverIcon as string} fa-5x`}/>
+            <span className='one-click-embedding-icon text-center'>
+              <i className={`fa fa-${hoverIcon as string} fa-5x mb-2`} />
+              <ShowIf condition={!!hoverTextI18nKey}>
+                <br />
+                <Trans i18nKey={hoverTextI18nKey} />
+              </ShowIf>
+            </span>
           </ShowIf>
         </span>
       </ShowIf>
diff --git a/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx b/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
index f5ddb80c4..82a3960c0 100644
--- a/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
@@ -12,8 +12,10 @@ export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
 
   return (
     <OneClickEmbedding containerClassName={`embed-responsive embed-responsive-${activated ? '4by3' : '16by9'}`}
-      previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
-      loadingImageUrl={''} onActivate={() => setActivated(true)}>
+      previewContainerClassName={'embed-responsive-item bg-danger'}
+      hoverIcon={'file-pdf-o'}
+      hoverTextI18nKey={'editor.embeddings.clickToLoad'}
+      onActivate={() => setActivated(true)}>
       <object type={'application/pdf'} data={url} className={'pdf-frame'}>
         <ExternalLink text={url} href={url}/>
       </object>