Fixes #701 - Unify and fix code blocks and add copy button

---------

Co-authored-by: Dusan Vuckovic <[email protected]>

Author: ralf401

_static/theme/theme_overrides.css

@@ -30,13 +30,15 @@
     }
 }
 
-.collapsing-code-block__toggle {
+.collapsing-code-toggle {
     position: absolute;
     top: .25rem;
     right: .25rem;
     display: block;
     padding: .25rem .5rem;
-    padding: 6px 12px 8px;
+    padding: 4px 12px 7px;
+    color: #57606a;
+    background-color: #f6f8fa;
     border: 1px solid rgba(0,0,0,.1);
     box-shadow: inset 0 1px 2px -1px hsla(0,0%,100%,.5), inset 0 -2px 0 0 rgba(0,0,0,.1);
     -webkit-user-drag: none;
@@ -46,12 +48,26 @@
     user-select: none;
 }
 
-.collapsing-code-block > .collapsing-code-block__toggle::after {
+.collapsing-code-toggle:hover {
+    background-color: rgb(235, 235, 235);
+}
+
+.copybtn + .collapsing-code-toggle {
+    right: 2.3rem;
+}
+
+.collapsing-code-block ~ .collapsing-code-toggle::after {
     content: "More";
+    display: block;
+    font-size: 12px;
+    line-height: normal;
 }
 
-.collapsing-code-block--open > .collapsing-code-block__toggle::after {
+.collapsing-code-block--open ~ .collapsing-code-toggle::after {
     content: "Less";
+    display: block;
+    font-size: 12px;
+    line-height: normal;
 }
 
 .highlight span.err {
@@ -97,3 +113,10 @@ article ul li ul {
     width: 70px;
     height: 61px;
 }
+
+button.copybtn {
+    opacity: 1;
+    border-radius: 0;
+    border: 1px solid rgba(0,0,0,.1);
+    box-shadow: inset 0 1px 2px -1px hsla(0,0%,100%,.5), inset 0 -2px 0 0 rgba(0,0,0,.1);
+}

_static/theme/zammad_overrides.js

@@ -1,29 +1,30 @@
-/* Custom overrides */
-// No oversized <pre>, please - Thanks to @TJemxx
-function collapseLongCodeBlocks() {
-  const maxHeight = 250;
-
-  document.querySelectorAll('pre').forEach((el, i) => {
-    if (el.clientHeight <= maxHeight) return;
-
-    el.classList.add('collapsing-code-block');
-    if (el.querySelector(`.collapsing-code-block__toggle`)) return;
-
-    const button = document.createElement('button');
-    button.classList.add('collapsing-code-block__toggle');
-    button.onclick = (event) => {
-      event.target.parentElement.classList.toggle('collapsing-code-block--open')
-    };
-    el.appendChild(button);
-  });
-}
-
-window.addEventListener('load', () => {
-  collapseLongCodeBlocks();
-
-  // click any <a data-tab="..."></a> link
-  // to manually re-compute if any code blocks need to be collapsed
-  document.querySelectorAll('a').forEach((el) => {
-    if ('tab' in el.dataset) el.onclick = collapseLongCodeBlocks;
-  });
-}, false);
+/* Custom overrides */
+// No oversized <pre>, please - Thanks to @TJemxx
+function collapseLongCodeBlocks() {
+  const maxHeight = 250;
+
+  document.querySelectorAll('pre').forEach((el, i) => {
+    if (el.clientHeight <= maxHeight) return;
+
+    el.classList.add('collapsing-code-block');
+    if (el.querySelector(`.collapsing-code-toggle`)) return;
+
+    const button = document.createElement('button');
+    button.classList.add('collapsing-code-toggle');
+    button.onclick = (event) => {
+      console.debug('onclick', event.target)
+      event.target.parentElement.querySelector('.collapsing-code-block').classList.toggle('collapsing-code-block--open')
+    };
+    el.parentElement.appendChild(button);
+  });
+}
+
+window.addEventListener('load', () => {
+  collapseLongCodeBlocks();
+
+  // click any <a data-tab="..."></a> link
+  // to manually re-compute if any code blocks need to be collapsed
+  document.querySelectorAll('a').forEach((el) => {
+    if ('tab' in el.dataset) el.onclick = collapseLongCodeBlocks;
+  });
+}, false);

admin/console-rails-shell.include.rst

@@ -1,7 +1,11 @@
-.. code-block:: sh
+Package installation:
+
+.. code-block:: console
 
-   # package installation
    $ zammad run rails c
 
-   # source installation
+Source installation:
+
+.. code-block:: console
+
    $ rails c

admin/console.rst

@@ -35,19 +35,19 @@ a shell (e.g. for automation).
 
    .. tab:: Docker Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
          $ docker compose run --rm zammad-railsserver bundle exec rails r '{COMMAND}'
 
    .. tab:: Package Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
          $ zammad run rails r '{COMMAND}'
 
    .. tab:: Source/Development Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
          $ rails r '{COMMAND}'
 
@@ -63,7 +63,7 @@ It allows you to run several commands inside it.
 
    .. tab:: Docker Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
          $ docker compose run --rm zammad-railsserver bundle exec rails c
 
@@ -73,13 +73,13 @@ It allows you to run several commands inside it.
 
    .. tab:: Package Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
-         $ $ zammad run rails c
+         $ zammad run rails c
 
    .. tab:: Source/Development Installation
 
-      .. code-block:: sh
+      .. code-block:: console
 
          $ rails c
 
@@ -94,29 +94,35 @@ It allows you to run several commands inside it.
    the environment variable ``ZAMMAD_SAFE_MODE=1``. With this setting enabled,
    the availability of these services will be ignored.
 
+   **Set variable and run rails console:**
+
    .. tabs::
 
-      .. code-tab:: console Package Installation
+      .. tab:: Package Installation
+
+
+         .. code-block:: console
+
+            $ ZAMMAD_SAFE_MODE=1 zammad run rails c
+
+      .. tab:: Source Installation
+
+         .. code-block:: console
 
-         $ ZAMMAD_SAFE_MODE=1 zammad run rails c
-         Zammad is running in safe mode. Any third-party services like Redis are ignored.
+            $ ZAMMAD_SAFE_MODE=1 rails c
 
-         There was an error trying to connect to Redis via redis://localhost:6379.
-         Please provide a Redis instance at localhost:6379 or set REDIS_URL to point to a different location.
-         ＃<Redis::CannotConnectError: Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED)>
-         Loading production environment (Rails 6.1.7.3)
-         3.1.3 :001 >
+   **This gives you a response like this:**
 
-      .. code-tab:: console Source Installation
+   .. code-block:: text
+      :class: no-copybutton
 
-         $ ZAMMAD_SAFE_MODE=1 rails c
-         Zammad is running in safe mode. Any third-party services like Redis are ignored.
+      Zammad is running in safe mode. Any third-party services like Redis are ignored.
 
-         There was an error trying to connect to Redis via redis://localhost:6379.
-         Please provide a Redis instance at localhost:6379 or set REDIS_URL to point to a different location.
-         ＃<Redis::CannotConnectError: Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED)>
-         Loading production environment (Rails 6.1.7.3)
-         3.1.3 :001 >
+      There was an error trying to connect to Redis via redis://localhost:6379.
+      Please provide a Redis instance at localhost:6379 or set REDIS_URL to point to a different location.
+      ＃<Redis::CannotConnectError: Error connecting to Redis on localhost:6379 (Errno::ECONNREFUSED)>
+      Loading production environment (Rails 6.1.7.3)
+      3.1.3 :001 >
 
 Working on the console
 ----------------------