From ae27717b612648d6fa7e4adee65663432a0e17d8 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 15 Apr 2021 08:52:04 +0200
Subject: [PATCH] UX: moves from summary/details to a button to expand github
 body (#12698)

---
 Gemfile.lock                                  |  2 +-
 .../app/initializers/onebox-decorators.js     | 57 +++++++++++++++++++
 .../stylesheets/common/base/onebox.scss       | 40 ++++++-------
 3 files changed, 78 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/initializers/onebox-decorators.js

diff --git a/Gemfile.lock b/Gemfile.lock
index 6a25eb1eaf1..878868d52d1 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -268,7 +268,7 @@ GEM
     omniauth-twitter (1.4.0)
       omniauth-oauth (~> 1.1)
       rack
-    onebox (2.2.12)
+    onebox (2.2.13)
       addressable (~> 2.7.0)
       htmlentities (~> 4.3)
       multi_json (~> 1.11)
diff --git a/app/assets/javascripts/discourse/app/initializers/onebox-decorators.js b/app/assets/javascripts/discourse/app/initializers/onebox-decorators.js
new file mode 100644
index 00000000000..f80fc6c6d6a
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/initializers/onebox-decorators.js
@@ -0,0 +1,57 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+
+let _showMoreClickPostsElements = [];
+
+function decorateGithubOneboxBody(element) {
+  const containers = element.querySelectorAll(
+    ".onebox.githubpullrequest .show-more-container, .onebox.githubissue .show-more-container"
+  );
+
+  if (containers.length) {
+    _showMoreClickPostsElements.push(element);
+    element.addEventListener("click", _handleClick, false);
+  }
+}
+
+function _handleClick(event) {
+  if (!event.target.classList.contains("show-more")) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const showMoreContainer = event.target.parentNode;
+  const bodyContainer = showMoreContainer.parentNode;
+
+  showMoreContainer.classList.add("hidden");
+  bodyContainer.querySelector(".excerpt.hidden").classList.remove("hidden");
+
+  return false;
+}
+
+function _cleanUp() {
+  (_showMoreClickPostsElements || []).forEach((element) => {
+    element.removeEventListener("click", _handleClick);
+  });
+
+  _showMoreClickPostsElements = [];
+}
+
+export default {
+  name: "onebox-decorators",
+
+  initialize() {
+    withPluginApi("0.8.42", (api) => {
+      api.decorateCookedElement(
+        (element) => {
+          decorateGithubOneboxBody(element);
+        },
+        {
+          id: "onebox-github-body",
+        }
+      );
+
+      api.cleanupStream(_cleanUp);
+    });
+  },
+};
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 62eff6335ca..e88206f062e 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -161,17 +161,26 @@ aside.onebox {
       }
     }
 
-    details.onebox-details {
-      summary.onebox-details-summary {
-        display: flex;
-        h4 {
-          display: inline-block;
-        }
-      }
-      p.onebox-details-body {
-        margin: 0 0 0.5em 0;
-        padding: 0.5em;
-        background-color: var(--blend-primary-secondary-5);
+    .github-info + .github-body-container {
+      margin-top: 1em;
+    }
+
+    .github-body-container {
+      margin: 0 0 0.5em 0;
+      padding: 0.5em;
+      color: var(--primary-very-high);
+      background: var(--hljs-bg);
+      max-height: 400px;
+      white-space: pre-wrap;
+      overflow-y: auto;
+      word-break: break-word;
+      font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono",
+        "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+      font-size: $font-down-1;
+
+      .show-more {
+        // padding on right for larger hitzone
+        padding: 0.5em 1.5em 0.5em 0.25em;
       }
     }
 
@@ -495,11 +504,6 @@ pre.onebox code {
     max-width: none;
   }
 
-  .github-content {
-    margin: 5px 0 0 0;
-    word-break: break-word;
-  }
-
   .labels span {
     // !important required to override inline style attribute
     background-color: var(--primary-medium) !important;
@@ -541,10 +545,6 @@ pre.onebox code {
   background-color: #bd2c00;
 }
 
-.onebox-body .github-content-right {
-  margin-left: 100px;
-}
-
 //Onebox - Twitter - Status
 aside.onebox.twitterstatus .onebox-body {
   h4 {