Merge pull request #2487 from cameronoelsen/master

Refine style of collaboration chat box

packages/chatbox/src/entry.ts

@@ -28,6 +28,16 @@ const CHAT_ENTRY_CLASS = 'jp-ChatEntry';
  */
 const CHAT_BADGE_CLASS = 'jp-ChatEntry-badge';
 
+/**
+ * The class name added to other user's chatbox entries
+ */
+const CHAT_ENTRY_RECEIVED_CLASS = 'jp-ChatEntry-receieved';
+
+/**
+ * The class name added to other user's chatbox badges
+ */
+const CHAT_BADGE_RECEIVED_CLASS = 'jp-ChatEntry-received-badge';
+
 
 /**
  * A chat entry widget, which hosts a user badge and a markdown cell.
@@ -58,14 +68,21 @@ class ChatEntry extends Widget {
 
     this.cell = options.cell;
 
+    this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
+
     if (!options.isMe) {
-      this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
-      this.cell.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
+      this._badge.addClass(CHAT_BADGE_RECEIVED_CLASS);
+      this.cell.addClass(CHAT_ENTRY_RECEIVED_CLASS);
     }
 
     let layout = this.layout as PanelLayout;
-    layout.addWidget(this._badge);
-    layout.addWidget(this.cell);
+    if (options.isMe) {
+      layout.addWidget(this.cell);
+      layout.addWidget(this._badge);
+    } else {
+      layout.addWidget(this._badge);
+      layout.addWidget(this.cell);
+    }
   }
 
   /**

packages/chatbox/style/index.css

@@ -19,7 +19,9 @@
 
 .jp-ChatboxPanel .jp-ChatboxDocumentInfo {
   display: flex;
-  padding: 5px;
+  padding: 8px;
+  background: var(--md-grey-100);
+  border-bottom: 1px solid VAR(--jp-border-color1);
 }
 
 .jp-ChatboxPanel .jp-ChatboxDocumentInfo-name {
@@ -35,7 +37,7 @@
 }
 
 .jp-Chatbox-content {
-  background-color: var(--jp-layout-color2);
+  background-color: var(--jp-layout-color0);
   flex: 1 1 auto;
   overflow: auto;
 }
@@ -45,6 +47,7 @@
   flex: 0 0 auto;
   overflow: auto;
   border-top: var(--jp-border-width) solid var(--jp-border-color1);
+  background-color: var(--md-grey-100);
 }
 
 /**
@@ -57,6 +60,7 @@
 .jp-Chatbox-content .jp-Cell {
   margin: 5px;
   background-color: var(--jp-layout-color1);
+  border: 1px solid var(--md-grey-400);
   border-radius: 10px;
   flex-grow: 1;
 }
@@ -68,15 +72,42 @@
 .jp-Chatbox .jp-ChatEntry {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: 2px;
+  align-items: baseline;
+  padding: 4px 8px;
 }
 
 .jp-Chatbox .jp-ChatEntry-badge {
+  color: var(--jp-layout-color1);
   background-color: var(--jp-layout-color1);
-  border-radius: 10px;
-  padding: 2px;
-  min-width: 22px;
+  border-radius: 16px;
+  height: 28px;
+  width: 28px;
+  text-align: center;
+  line-height: 1.8;
+  margin-left: 4px;
+}
+
+.p-Widget.jp-Cell.jp-MarkdownCell.jp-ChatEntry-receieved {
+  background-color: var(--md-grey-100);
+  overflow: visible;
+}
+
+.p-Widget.jp-Cell.jp-MarkdownCell.jp-ChatEntry-receieved {
+  background-color: var(--md-grey-100);
+  overflow: visible;
+}
+
+.p-Widget.jp-Cell.jp-MarkdownCell.jp-ChatEntry-receieved::before {
+  content: url(../../theming/style/icons/jupyter/receive-chat-tail.png);
+  position: absolute;
+  transform: scale(.04);
+  left: -203px;
+  bottom: -146px;
+}
+
+.p-Widget.jp-ChatEntry-badge.jp-ChatEntry-received-badge {
+  margin-right: 12px;
+  margin-left: 0px;
 }
 
 .jp-Chatbox-content .jp-InputArea {
@@ -95,3 +126,7 @@
   height: 100%;
   min-height: 100%;
 }
+
+.jp-Chatbox-input .jp-Cell-inputArea .jp-InputArea-editor {
+  border: 1px solid #9E9E9E;
+}

packages/theming/style/icons/jupyter/receive-chat-tail.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 94 73" style="enable-background:new 0 0 94 73;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F5F5F5;stroke:#BDBDBD;stroke-width:4.4;}
+</style>
+<title>Path</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1">
+	<path id="Path" class="st0" d="M85.8,0.2c0,0-4,49.3-85.2,70.1c69,4,93.5,0,93.5,0"/>
+</g>
+</svg>