Add the ability to show badge count for each server.

zulip · Jun 12, 2017 · 9f73160 · 9f73160
1 parent b18e3ad
commit 9f73160
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
@@ -18,7 +18,7 @@ html, body {
 
 #sidebar {
     background: #222c31;
-    width: 50px;
+    width: 54px;
     padding: 40px 0 20px 0;
     justify-content: space-between;
     display: flex;
@@ -84,7 +84,7 @@ html, body {
     margin: 5px 0;
 }
 
-.tab.active::before{
+.tab.active::before {
     content: "";
     background: #fff;
     border-radius: 0 3px 3px 0;
@@ -95,7 +95,7 @@ html, body {
     top: 5px;
 }
 
-.tab .server-tab{
+.tab .server-tab {
     background: #a4d3c4;
     background-size: 100%;
     border-radius: 4px;
@@ -105,31 +105,50 @@ html, body {
     margin: 5px 0;
     z-index: 11;
     line-height: 31px;
-    font-size: 32px;
-    font-family: sans-serif;
     color: #194a2b;
     text-align: center;
     overflow: hidden;
     opacity: 0.6;
 }
 
-.tab .server-tab:hover{
+.tab .server-tab:hover {
     opacity: 0.8;
 }
 
-.tab .settings-tab{
+.tab .settings-tab {
     background: #eee;
 }
 
-.tab .settings-tab i{
+.tab .settings-tab i {
     font-size: 28px;
     line-height: 36px;
 }
 
-.tab.active .server-tab{
+.tab.active .server-tab {
     opacity: 1;
 }
 
+.tab .server-tab-badge.active {
+    border-radius: 9px;
+    width: 17px;
+    height: 17px;
+    background-color: #f44336;
+    font-size: 12px;
+    font-family: sans-serif;
+    position: absolute;
+    right: -6px;
+    z-index: 15;
+    top: -2px;
+    float: right;
+    color: #fff;
+    text-align: center;
+    line-height: 17px;
+    display: block;
+}
+
+.tab .server-tab-badge {
+    display: none;
+}
 /*******************
  *   Webview Area  *
  *******************/

diff --git a/app/renderer/js/components/tab.js b/app/renderer/js/components/tab.js
@@ -20,6 +20,7 @@ class Tab extends BaseComponent {
     template() {
         if (this.type == Tab.SERVER_TAB) {
             return `<div class="tab" domain="${this.url}">
+                        <div class="server-tab-badge"></div>
                         <div class="server-tab" style="background-image: url(${this.icon});"></div>
                     </div>`;
         } else {
@@ -33,11 +34,21 @@ class Tab extends BaseComponent {
 
     init() {
         this.$el = this.generateNodeFromTemplate(this.template());
+        this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
 		this.$root.appendChild(this.$el);
 
         this.registerListeners();
     }
 
+    updateBadge(count) {
+        if (count > 0) {
+            this.$badge.innerHTML = count;
+            this.$badge.classList.add('active');
+        } else {
+            this.$badge.classList.remove('active');
+        }
+    }
+
     registerListeners() {
 		this.$el.addEventListener('click', this.onClick);
     }

diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
@@ -120,11 +120,13 @@ class ServerManagerView {
 		this.activeTabIndex = index;
 	}
 
-	updateTitleAndBadge(title, messageCount) {
+	updateTitleAndBadge(title) {
 		let messageCountAll = 0;
-		for (const webview of this.webviews) {
-			messageCountAll += webview.badgeCount;
+		for (let i = 0; i < this.webviews.length; i++) {
+			messageCountAll += this.webviews[i].badgeCount;
+			this.tabs[i].updateBadge(this.webviews[i].badgeCount);
 		}
+
 		ipcRenderer.send('update-badge', {
 			title: title,
 			messageCount: messageCountAll