diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 83aa3ec294..d80d6703a7 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -521,16 +521,60 @@ $left-gutter: 64px; display: inline-block; visibility: hidden; cursor: pointer; - top: 6px; + top: 31px; right: 6px; width: 19px; height: 19px; mask-image: url($copy-button-url); background-color: $message-action-bar-fg-color; } +.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, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { + visibility: visible; +} + +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton { + visibility: visible; +} + +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton { + visibility: visible; +}*/ + .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton, -.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton, +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_collapseButton, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_collapseButton, +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_expandButton, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_expandButton { visibility: visible; } diff --git a/res/img/feather-customised/maximize.svg b/res/img/feather-customised/maximize.svg new file mode 100644 index 0000000000..ad74c8b1eb --- /dev/null +++ b/res/img/feather-customised/maximize.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/res/img/feather-customised/minimize.svg b/res/img/feather-customised/minimize.svg new file mode 100644 index 0000000000..102af6df95 --- /dev/null +++ b/res/img/feather-customised/minimize.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 085d6d7f10..6219d5a5bf 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -237,7 +237,8 @@ $event-redacted-border-color: #cccccc; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; - +$collapse-button-url: "$(res)/img/feather-customised/minimize.svg"; +$expand-button-url: "$(res)/img/feather-customised/maximize.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 4cfeeae05e..77c0e72726 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -237,6 +237,8 @@ $event-redacted-border-color: #cccccc; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; +$collapse-button-url: "$(res)/img/feather-customised/minimize.svg"; +$expand-button-url: "$(res)/img/feather-customised/maximize.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index a6b32baea2..f7d66c3308 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -97,8 +97,9 @@ export default class TextualBody extends React.Component { // Wrap a div around 
 so that the copy button can be correctly positioned
                     // when the 
 overflows and is scrolled horizontally.
                     const div = this._wrapInDiv(blocks[i]);
-                    this._handleCodeBlockExpansion(div);
+                    this._handleCodeBlockExpansion(div.firstChild);
                     this._addCodeCopyButton(div);
+                    this._addCodeExpansionButton(div);
                 }
                 // Do this asynchronously: parsing code takes time and we don't
                 // need to block the DOM update on it.
@@ -112,6 +113,30 @@ export default class TextualBody extends React.Component {
         }
     }
 
+    _addCodeExpansionButton(codeBlock) {
+        // TODO: What if the block is small and the we don't need the icon?
+
+        const pre = codeBlock.getElementsByTagName("pre")[0];
+        const button = document.createElement("span");
+        if (pre.className == "mx_EventTile_collapsedCodeBlock") {
+            button.className = "mx_EventTile_expandButton";
+        } else {
+            button.className = "mx_EventTile_collapseButton";
+        }
+
+        button.onclick = async () => {
+            if (pre.className == "mx_EventTile_collapsedCodeBlock") {
+                pre.className = "";
+                button.className = "mx_EventTile_expandButton";
+            } else {
+                pre.className = "mx_EventTile_collapsedCodeBlock";
+                button.className = "mx_EventTile_collapseButton";
+            }
+        };
+
+        codeBlock.appendChild(button);
+    }
+
     _addCodeCopyButton(codeBlock) {
         const button = document.createElement("span");
         button.className = "mx_EventTile_copyButton";