From 14bf1696315093e019c68088d1d65c54f0615808 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 20 Jan 2021 15:01:23 +0100
Subject: [PATCH] Handle small codeblocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_EventTile.scss          | 29 ++++++--------------
 src/components/views/messages/TextualBody.js | 26 +++++++++++++-----
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3acebd03e9..2d986a6fc6 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -516,41 +516,28 @@ $left-gutter: 64px;
 }
 
 // Inserted adjacent to <pre> blocks, (See TextualBody)
-.mx_EventTile_copyButton {
+.mx_EventTile_button {
     position: absolute;
     display: inline-block;
     visibility: hidden;
     cursor: pointer;
-    top: 31px;
+    top: 6px;
     right: 6px;
     width: 19px;
     height: 19px;
-    mask-image: url($copy-button-url);
     background-color: $message-action-bar-fg-color;
 }
+.mx_EventTile_buttonBottom {
+    top: 31px;
+}
+.mx_EventTile_copyButton {
+    mask-image: url($copy-button-url);
+}
 .mx_EventTile_collapseButton {
-    position: absolute;
-    display: inline-block;
-    visibility: hidden;
-    cursor: pointer;
-    top: 6px;
-    right: 6px;
-    width: 19px;
-    height: 19px;
     mask-image: url($collapse-button-url);
-    background-color: $message-action-bar-fg-color;
 }
 .mx_EventTile_expandButton {
-    position: absolute;
-    display: inline-block;
-    visibility: hidden;
-    cursor: pointer;
-    top: 6px;
-    right: 6px;
-    width: 19px;
-    height: 19px;
     mask-image: url($expand-button-url);
-    background-color: $message-action-bar-fg-color;
 }
 
 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 511ea61904..da6aaa2830 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -99,8 +99,8 @@ export default class TextualBody extends React.Component {
                      * when the <pre> overflows and is scrolled horizontally. */
                     const div = this._wrapInDiv(pres[i]);
                     this._handleCodeBlockExpansion(pres[i]);
-                    this._addCodeCopyButton(div);
                     this._addCodeExpansionButton(div, pres[i]);
+                    this._addCodeCopyButton(div);
                 }
             }
             // Highlight code
@@ -121,22 +121,28 @@ export default class TextualBody extends React.Component {
     }
 
     _addCodeExpansionButton(div, pre) {
-        // TODO: What if the block is small and the we don't need the icon?
+        /* Calculate how many percent does the pre element take up.
+         * If it's less than 30% we don't add the expansion button. */
+        const percentageOfViewport = pre.offsetHeight / window.innerHeight * 100;
+        console.log("expansionButtonExists", percentageOfViewport);
+        if (percentageOfViewport < 30) return;
 
         const button = document.createElement("span");
+        button.className = "mx_EventTile_button ";
         if (pre.className == "mx_EventTile_collapsedCodeBlock") {
-            button.className = "mx_EventTile_expandButton";
+            button.className += "mx_EventTile_expandButton";
         } else {
-            button.className = "mx_EventTile_collapseButton";
+            button.className += "mx_EventTile_collapseButton";
         }
 
         button.onclick = async () => {
+            button.className = "mx_EventTile_button ";
             if (pre.className == "mx_EventTile_collapsedCodeBlock") {
                 pre.className = "";
-                button.className = "mx_EventTile_collapseButton";
+                button.className += "mx_EventTile_collapseButton";
             } else {
                 pre.className = "mx_EventTile_collapsedCodeBlock";
-                button.className = "mx_EventTile_expandButton";
+                button.className += "mx_EventTile_expandButton";
             }
         };
 
@@ -145,7 +151,13 @@ export default class TextualBody extends React.Component {
 
     _addCodeCopyButton(div) {
         const button = document.createElement("span");
-        button.className = "mx_EventTile_copyButton";
+        button.className = "mx_EventTile_button mx_EventTile_copyButton ";
+
+        /* Check if expansion button exists. If so
+         * we put the copy button to the bottom */
+        const expansionButtonExists = div.getElementsByClassName("mx_EventTile_button");
+        if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom";
+
         button.onclick = async () => {
             const copyCode = button.parentNode.getElementsByTagName("pre")[0];
             const successful = await copyPlaintext(copyCode.textContent);