WIP Styling

jupyterlab · Mar 2, 2021 · 221b716 · 221b716
1 parent 5e41037
commit 221b716
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 101 deletions.
diff --git a/TODO b/TODO
@@ -9,7 +9,7 @@
   - [x] Support added and removed notebooks (currently JSON error as content on one side is "")
 - [x] Use codemirror as new comment editor
 - [ ] Take advantage of builtin feature of MainAreaWidget (spinner)
-- [ ] Simplify number of div to include add button on notebook (and to fix hiding it when unchanged cells are collapsed)
+- [x] Simplify number of div to include add button on notebook (and to fix hiding it when unchanged cells are collapsed)
 - [ ] Take into account review from Nick
 - [ ] Use model to support diff view - this will allow refresh
 - [ ] Switch to virtual tree

diff --git a/src/components/diff/CommentThread.ts b/src/components/diff/CommentThread.ts
@@ -31,7 +31,7 @@ export interface ICommentThreadProps {
 export class CommentThread extends Panel {
   constructor(props: ICommentThreadProps) {
     super();
-    this.addClass('jp-PullRequestCommentItem');
+    this.addClass('jp-PullRequestThread');
     this._handleRemove = props.handleRemove;
     this._inputShown = props.thread.comments.length === 0;
     this._thread = props.thread;
@@ -59,9 +59,22 @@ export class CommentThread extends Panel {
         this.addThreadView();
       } else {
         const msg = this._thread.comments[0]
-          ? `${this._thread.comments[0].userName} ${this._thread.comments[0].text}`
+          ? `<strong>${this._thread.comments[0].userName}</strong> ${this._thread.comments[0].text}`
           : 'Leave a comment';
-        const node = generateNode('p', null, msg);
+
+        const node = generateNode('div', {
+          class: 'jp-PullRequestCommentItem'
+        });
+        const p = node
+          .appendChild(
+            generateNode('div', { class: 'jp-PullRequestCommentItemContent' })
+          )
+          .appendChild(
+            generateNode('p', {
+              class: 'jp-PullRequestCommentItemContentTitle'
+            })
+          );
+        p.innerHTML = msg;
         this.addWidget(new Widget({ node }));
       }
     }
@@ -91,8 +104,12 @@ export class CommentThread extends Panel {
    * Initialize the widget node
    */
   protected initNode(): void {
-    const expandButton = generateNode('button') as HTMLButtonElement;
-    expandButton.appendChild(caretUpIcon.element({ tag: 'span' }));
+    const expandButton = generateNode('button', {
+      class: 'jp-PullRequestExpandButton'
+    }) as HTMLButtonElement;
+    expandButton.appendChild(
+      caretUpIcon.element({ tag: 'span', title: 'Collapse Discussion' })
+    );
     this.addWidget(new Widget({ node: expandButton }));
 
     this.addThreadView();
@@ -105,6 +122,9 @@ export class CommentThread extends Panel {
           : caretUpIcon.element({ tag: 'span' }),
         expandButton.firstChild
       );
+      expandButton.title = this.isExpanded
+        ? 'Expand Discussion'
+        : 'Collapse Discussion';
       this.isExpanded = !this.isExpanded;
     });
   }
@@ -189,18 +209,32 @@ export class CommentThread extends Panel {
   }
 
   private createCommentInput(): InputComment {
-    return new InputComment({
+    const widget = new InputComment({
       handleSubmit: this.handleAddComment.bind(this),
       handleCancel: this.handleCancelComment.bind(this)
     });
+    widget.addClass('jp-PullRequestCommentItem');
+    return widget;
   }
 
   private createReplyButton(): Widget {
-    const node = generateNode('button', { class: '' }, 'Reply...', {
-      click: () => {
-        this.inputShown = true;
-      }
-    });
+    const node = generateNode('div', { class: 'jp-PullRequestCommentItem' });
+    node
+      .appendChild(
+        generateNode('div', { class: 'jp-PullRequestCommentItemContent' })
+      )
+      .appendChild(
+        generateNode(
+          'button',
+          { class: 'jp-PullRequestReplyButton jp-PullRequestGrayedText' },
+          'Reply...',
+          {
+            click: () => {
+              this.inputShown = true;
+            }
+          }
+        )
+      );
     return new Widget({
       node
     });

diff --git a/src/components/diff/CommentWidget.ts b/src/components/diff/CommentWidget.ts
@@ -37,13 +37,16 @@ export class CommentWidget extends Widget {
       generateNode('div', { class: 'jp-PullRequestCommentItemContent' })
     );
     const div = content.appendChild(
-      generateNode('div', { class: 'jp-PullRequestCommentItemContentTitle' })
+      generateNode('p', { class: 'jp-PullRequestCommentItemContentTitle' })
     );
-    div.appendChild(generateNode('h2', null, comment.userName));
+    div.appendChild(generateNode('strong', null, comment.userName));
     div.appendChild(
       generateNode(
-        'p',
-        { title: new Date(comment.updatedAt).toString() },
+        'span',
+        {
+          class: 'jp-PullRequestGrayedText',
+          title: new Date(comment.updatedAt).toString()
+        },
         moment(comment.updatedAt).fromNow()
       )
     );

diff --git a/src/components/diff/InputComment.ts b/src/components/diff/InputComment.ts
@@ -113,7 +113,9 @@ export class InputComment extends Widget {
       )
     );
 
-    const head = this.node.appendChild(generateNode('div'));
+    const head = this.node.appendChild(
+      generateNode('div', { class: 'jp-PullRequestCommentItemContent' })
+    );
     const editor = head.appendChild(
       generateNode('textarea', {
         class: 'jp-PullRequestInputForm jp-PullRequestInputFormTextArea',

diff --git a/src/components/tab/PullRequestDescriptionTab.tsx b/src/components/tab/PullRequestDescriptionTab.tsx
@@ -95,37 +95,50 @@ export class PullRequestDescriptionTab extends Panel {
   }
 
   private addNewThreadButton(): void {
-    const button = generateNode('button', {}, 'Start a new discussion', {
-      click: () => {
-        // Append an empty thread to start a new discussion
-        const hasNewThread =
-          this.threads[this.threads.length - 1]?.comments.length === 0;
-        if (!hasNewThread) {
-          const thread: IThread = {
-            comments: new Array<IComment>(),
-            pullRequestId: this.pullRequestId
-          };
+    const node = generateNode('div', { class: 'jp-PullRequestThread' });
+    node
+      .appendChild(generateNode('div', { class: 'jp-PullRequestCommentItem' }))
+      .appendChild(
+        generateNode('div', { class: 'jp-PullRequestCommentItemContent' })
+      )
+      .appendChild(
+        generateNode(
+          'button',
+          { class: 'jp-PullRequestReplyButton jp-PullRequestGrayedText' },
+          'Start a new discussion',
+          {
+            click: () => {
+              // Append an empty thread to start a new discussion
+              const hasNewThread =
+                this.threads[this.threads.length - 1]?.comments.length === 0;
+              if (!hasNewThread) {
+                const thread: IThread = {
+                  comments: new Array<IComment>(),
+                  pullRequestId: this.pullRequestId
+                };
 
-          this.threads.push(thread);
+                this.threads.push(thread);
 
-          const widget = new CommentThread({
-            thread,
-            renderMime: this.renderMime,
-            handleRemove: (): void => {
-              const threadIndex = this.threads.findIndex(
-                thread_ => thread.id === thread_.id
-              );
-              this.threads.splice(threadIndex, 1);
-              widget.parent = null;
-              widget.dispose();
-            }
-          });
+                const widget = new CommentThread({
+                  thread,
+                  renderMime: this.renderMime,
+                  handleRemove: (): void => {
+                    const threadIndex = this.threads.findIndex(
+                      thread_ => thread.id === thread_.id
+                    );
+                    this.threads.splice(threadIndex, 1);
+                    widget.parent = null;
+                    widget.dispose();
+                  }
+                });
 
-          this.insertWidget(this.widgets.length - 1, widget);
-        }
-      }
-    });
-    this.addWidget(new Widget({ node: button }));
+                this.insertWidget(this.widgets.length - 1, widget);
+              }
+            }
+          }
+        )
+      );
+    this.addWidget(new Widget({ node }));
   }
 
   protected pullRequestId: string;