From fb75ad27893d0658b9866a3386970cc5be83588e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Wed, 4 Aug 2021 16:12:58 +0200
Subject: [PATCH] Show add content button on hover or focus of content block
 (#876)

* Show add content button on hover or focus of content block

* Updating UI to make the overlay textarea to be consitent

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
---
 .../src/components/cardDetail/cardDetail.scss   | 17 +++++++++++------
 webapp/src/components/cardDetail/cardDetail.tsx |  9 ++++-----
 .../cardDetail/cardDetailContents.tsx           |  2 +-
 .../cardDetail/cardDetailContentsMenu.tsx       |  2 +-
 webapp/src/components/contentBlock.scss         |  3 ++-
 webapp/src/components/markdownEditor.scss       |  8 ++++++++
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
index 8faa6cf78..4f1a1d93c 100644
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@@ -55,14 +55,19 @@
         }
     }
 
-    &.add-content {
-        .Button {
-            opacity: 0;
-            color: rgba(var(--body-color), 0.6);
+    &.content-blocks {
+        &:hover, &:focus-within {
+            .CardDetailContentsMenu {
+                .Button {
+                    opacity: 1;
+                }
+            }
         }
-        &:hover {
+        .CardDetailContentsMenu {
+            margin-left: 48px;
             .Button {
-                opacity: 1;
+                opacity: 0;
+                color: rgba(var(--body-color), 0.6);
             }
         }
     }
diff --git a/webapp/src/components/cardDetail/cardDetail.tsx b/webapp/src/components/cardDetail/cardDetail.tsx
index f11490a02..bd4729246 100644
--- a/webapp/src/components/cardDetail/cardDetail.tsx
+++ b/webapp/src/components/cardDetail/cardDetail.tsx
@@ -139,17 +139,16 @@ const CardDetail = (props: Props): JSX.Element|null => {
 
             {/* Content blocks */}
 
-            <div className='CardDetail content fullwidth'>
+            <div className='CardDetail content fullwidth content-blocks'>
                 <CardDetailContents
                     card={props.card}
                     contents={props.contents}
                     readonly={props.readonly}
                 />
+                {!props.readonly &&
+                    <CardDetailContentsMenu card={props.card}/>
+                }
             </div>
-
-            {!props.readonly &&
-                <CardDetailContentsMenu card={props.card}/>
-            }
         </>
     )
 }
diff --git a/webapp/src/components/cardDetail/cardDetailContents.tsx b/webapp/src/components/cardDetail/cardDetailContents.tsx
index 168cbc8fa..8e9593c9e 100644
--- a/webapp/src/components/cardDetail/cardDetailContents.tsx
+++ b/webapp/src/components/cardDetail/cardDetailContents.tsx
@@ -209,7 +209,7 @@ const CardDetailContents = React.memo((props: Props) => {
         )
     }
     return (
-        <div className='octo-content'>
+        <div className='octo-content CardDetailContents'>
             <div className='octo-block'>
                 <div className='octo-block-margin'/>
                 {!props.readonly &&
diff --git a/webapp/src/components/cardDetail/cardDetailContentsMenu.tsx b/webapp/src/components/cardDetail/cardDetailContentsMenu.tsx
index 4ef708433..9f7a75f09 100644
--- a/webapp/src/components/cardDetail/cardDetailContentsMenu.tsx
+++ b/webapp/src/components/cardDetail/cardDetailContentsMenu.tsx
@@ -55,7 +55,7 @@ type Props = {
 const CardDetailContentsMenu = React.memo((props: Props) => {
     const intl = useIntl()
     return (
-        <div className='CardDetail content add-content'>
+        <div className='CardDetailContentsMenu content add-content'>
             <MenuWrapper>
                 <Button>
                     <FormattedMessage
diff --git a/webapp/src/components/contentBlock.scss b/webapp/src/components/contentBlock.scss
index 5a7ec583e..7be5f7dc4 100644
--- a/webapp/src/components/contentBlock.scss
+++ b/webapp/src/components/contentBlock.scss
@@ -16,6 +16,7 @@
     > * {
         flex: 1 1 auto;
         max-width: 100%;
+        min-height: 32px;
     }
     > .octo-block-margin {
         flex: 0 0 auto;
@@ -32,4 +33,4 @@
 
 .addToRow {
     width: 10px;
-}
\ No newline at end of file
+}
diff --git a/webapp/src/components/markdownEditor.scss b/webapp/src/components/markdownEditor.scss
index 5acc556e6..d1ea61cc8 100644
--- a/webapp/src/components/markdownEditor.scss
+++ b/webapp/src/components/markdownEditor.scss
@@ -16,6 +16,14 @@
         word-break: break-word;
     }
 
+    .CodeMirror-code {
+        line-height: 24px;
+    }
+
+    .CodeMirror-lines {
+        padding: 0;
+    }
+
     .CodeMirror,
     .CodeMirror-scroll {
         flex: 1;