enh: UI update of collapse description (#343)

- put description in a visible container - no need to show button if no description found ![hg](https://user-images.githubusercontent.com/23088305/79348366-ebbe4980-7f02-11ea-8e97-0e5101a3aff4.gif)
refined-bitbucket · Apr 25, 2020 · 46f697a · 46f697a
1 parent 456730e
commit 46f697a
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 52 deletions.
diff --git a/src/collapse-pull-request-description/collapse-pull-request-description.css b/src/collapse-pull-request-description/collapse-pull-request-description.css
@@ -1,20 +1,44 @@
 .__rbb-collapse-bar {
     width: 100%;
-    margin-bottom: 10px;
-    background-color: #f4f5f7;
-    border-radius: 6px;
-    border: 0;
+    background-color: transparent;
+    border: none;
     display: flex;
     justify-content: center;
     cursor: pointer;
+    position: relative;
 }
 
 .__rbb-collapse-bar:hover {
-    background-color: #ebecf0;
+    background-color: transparent;
 }
-
-.__rbb-collapse-bar__collapsed {
-    border: 1px solid #dfe1e6;
+.__rbb-collapse-bar::before {
+    content: '';
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    border-radius: 0.5rem;
+    background-image: linear-gradient(rgb(200, 200, 200), transparent);
+}
+.__rbb-collapse-bar:hover::before {
+    opacity: 0.2;
+}
+.description {
+    position: relative;
+}
+.description::before {
+    content: '';
+    left: -0.25rem;
+    margin-left: 110px;
+    right: -0.25rem;
+    border-radius: 0.5rem;
+    height: 100%;
+    position: absolute;
+    border-bottom: none;
+    border: 1px solid rgb(21, 21, 22);
+    background-color: rgb(206, 212, 223);
+    border-radius: 0.5rem;
+    opacity: 0.1;
 }
 
 .__refined_bitbucket_hide {

diff --git a/src/collapse-pull-request-description/collapse-pull-request-description.js b/src/collapse-pull-request-description/collapse-pull-request-description.js
@@ -9,6 +9,7 @@ export default function collapsePullRequestDescription() {
     const description: ?HTMLDivElement = (document.querySelector(
         '.description'
     ): any)
+
     // eslint-disable-next-line no-eq-null, eqeqeq
     if (description == null) {
         console.warn(
@@ -17,61 +18,68 @@ export default function collapsePullRequestDescription() {
         return
     }
 
+    if (description.getElementsByClassName('wiki-content').length === 0) return
+
     const descriptionContent: HTMLElement = (description.querySelector(
         'dd.wiki-content'
     ): any)
 
     const onClick = () => {
         // $FlowIgnore
-        description
+        descriptionContent
             .querySelector('.__rbb-collapse-bar')
             .classList.toggle('__rbb-collapse-bar__collapsed')
-        description
+        descriptionContent
             .querySelectorAll('svg')
             .forEach(svg => svg.classList.toggle('__refined_bitbucket_hide'))
 
-        descriptionContent.classList.toggle('__refined_bitbucket_hide')
+        descriptionContent
+            .querySelector('.__rbb-collapse-content')
+            .classList.toggle('__refined_bitbucket_hide')
     }
 
     const collapseBar = (
-        <dd>
-            <button
-                type="button"
-                aria-label="Toggle description text"
-                title="Toggle description text"
-                class="__rbb-collapse-bar"
-                onClick={onClick}
+        <button
+            type="button"
+            aria-label="Toggle description text"
+            title="Toggle description text"
+            class="__rbb-collapse-bar"
+            onClick={onClick}
+        >
+            <svg
+                aria-hidden="true"
+                height="16"
+                version="1.1"
+                viewBox="0 0 10 16"
+                width="10"
+                data-arrow-direction="up"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5z"
+                />
+            </svg>
+            <svg
+                aria-hidden="true"
+                height="16"
+                version="1.1"
+                viewBox="0 0 10 16"
+                width="10"
+                class="__refined_bitbucket_hide"
+                data-arrow-direction="down"
             >
-                <svg
-                    aria-hidden="true"
-                    height="16"
-                    version="1.1"
-                    viewBox="0 0 10 16"
-                    width="10"
-                    data-arrow-direction="up"
-                >
-                    <path
-                        fill-rule="evenodd"
-                        d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5z"
-                    />
-                </svg>
-                <svg
-                    aria-hidden="true"
-                    height="16"
-                    version="1.1"
-                    viewBox="0 0 10 16"
-                    width="10"
-                    class="__refined_bitbucket_hide"
-                    data-arrow-direction="down"
-                >
-                    <path
-                        fill-rule="evenodd"
-                        d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z"
-                    />
-                </svg>
-            </button>
-        </dd>
+                <path
+                    fill-rule="evenodd"
+                    d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z"
+                />
+            </svg>
+        </button>
     )
 
-    description.insertBefore(collapseBar, descriptionContent)
+    const content = document.createElement('div')
+    content.classList.add('__rbb-collapse-content')
+    content.innerHTML = descriptionContent.innerHTML
+    descriptionContent.innerHTML = ''
+    descriptionContent.appendChild(content)
+    descriptionContent.insertBefore(collapseBar, content)
 }
diff --git a/src/collapse-pull-request-description/collapse-pull-request-description.spec.js b/src/collapse-pull-request-description/collapse-pull-request-description.spec.js
@@ -3,8 +3,31 @@ import { h } from 'dom-chef'
 
 import '../../test/setup-jsdom'
 import collapsePullRequestDescription from '.'
+import { cleanDocumentBody } from '../../test/test-utils'
+import delay from 'yoctodelay'
 
-test('should toggle pull request description properly', t => {
+test('should not disaply description container if empty', async t => {
+    // Arrange
+    const actual = (
+        <div class="clearfix description">
+            <dt>Description</dt>
+            <dd class="empty">No description</dd>
+        </div>
+    )
+
+    document.body.appendChild(actual)
+
+    // Act
+    collapsePullRequestDescription()
+
+    // Assert
+    t.is(actual.outerHTML, actual.outerHTML)
+
+    cleanDocumentBody()
+    await delay(10)
+})
+
+test('should toggle pull request description properly', async t => {
     // Arrange
     const actual = (
         <div class="clearfix description">
@@ -16,7 +39,7 @@ test('should toggle pull request description properly', t => {
     const expected = (
         <div class="clearfix description">
             <dt>Description</dt>
-            <dd>
+            <dd class="wiki-content">
                 <button
                     type="button"
                     aria-label="Toggle description text"
@@ -51,8 +74,8 @@ test('should toggle pull request description properly', t => {
                         />
                     </svg>
                 </button>
+                <div class="__rbb-collapse-content">Description content</div>
             </dd>
-            <dd class="wiki-content">Description content</dd>
         </div>
     )
 
@@ -67,7 +90,9 @@ test('should toggle pull request description properly', t => {
     const button = actual.querySelector('button')
     const upArrow = actual.querySelector('svg[data-arrow-direction="up"]')
     const downArrow = actual.querySelector('svg[data-arrow-direction="down"]')
-    const descriptionContent = actual.querySelector('.wiki-content')
+    const descriptionContent = actual.querySelector(
+        '.wiki-content .__rbb-collapse-content'
+    )
     const isHidden = el =>
         [...el.classList].includes('__refined_bitbucket_hide')
 
@@ -90,4 +115,7 @@ test('should toggle pull request description properly', t => {
     t.false(isHidden(upArrow))
     t.true(isHidden(downArrow))
     t.false(isHidden(descriptionContent))
+
+    cleanDocumentBody()
+    await delay(10)
 })