[NEW] Sidebar redesign (#556)

* New sidebar style and hiding quick access * Adds changeable sidebar color * Get window background style for dynamic sidebar * Resizing icons * Uses sidebar-item color * Update start-page.less
RocketChat · Oct 27, 2017 · a6bc3bb · a6bc3bb
1 parent 5494c0d
commit a6bc3bb
Show file tree

Hide file tree

Showing 6 changed files with 426 additions and 281 deletions.
diff --git a/src/public/preload.js b/src/public/preload.js
@@ -31,6 +31,30 @@ const userPresenceControl = () => {
     }, INTERVAL);
 };
 
+const changeSidebarColor = () => {
+    const sidebar = document.querySelector('.sidebar');
+    const fullpage = document.querySelector('.full-page');
+    if (sidebar) {
+        const sidebarItem = sidebar.querySelector('.sidebar-item');
+        let itemColor;
+        if (sidebarItem) {
+            itemColor = window.getComputedStyle(sidebarItem);
+        }
+        const { color, background } = window.getComputedStyle(sidebar);
+        ipcRenderer.sendToHost('sidebar-background', {color: itemColor || color, background: background});
+    } else if (fullpage) {
+        const { color, background } = window.getComputedStyle(fullpage);
+        ipcRenderer.sendToHost('sidebar-background', {color: color, background: background});
+    } else {
+        window.requestAnimationFrame(changeSidebarColor);
+
+    }
+};
+
+ipcRenderer.on('request-sidebar-color', () => {
+    changeSidebarColor();
+});
+
 window.addEventListener('load', function () {
     Meteor.startup(function () {
         Tracker.autorun(function () {
@@ -42,6 +66,7 @@ window.addEventListener('load', function () {
     });
     userPresenceControl();
 });
+
 window.onload = function () {
     const $ = require('./vendor/jquery-3.1.1');
     function checkExternalUrl (e) {

diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
@@ -41,6 +41,8 @@ class SideBar extends EventEmitter {
         });
 
         webview.on('dom-ready', (hostUrl) => {
+            this.setActive(localStorage.getItem(servers.activeKey));
+            webview.getActive().send('request-sidebar-color');
             this.setImage(hostUrl);
             if (this.isHidden()) {
                 this.hide();
@@ -190,6 +192,14 @@ class SideBar extends EventEmitter {
         return !!this.listElement.querySelector(`.instance.active[server="${hostUrl}"]`);
     }
 
+    changeSidebarColor ({color, background}) {
+        const sidebar = document.querySelector('.server-list');
+        if (sidebar) {
+            sidebar.style.background = background;
+            sidebar.style.color = color;
+        }
+    }
+
     setActive (hostUrl) {
         if (this.isActive(hostUrl)) {
             return;
@@ -200,6 +210,7 @@ class SideBar extends EventEmitter {
         if (item) {
             item.classList.add('active');
         }
+        webview.getActive().send && webview.getActive().send('request-sidebar-color');
     }
 
     deactiveAll () {
@@ -332,3 +343,29 @@ window.addEventListener('contextmenu', function (e) {
         instanceMenu.popup(remote.getCurrentWindow());
     }
 }, false);
+
+if (process.platform === 'darwin') {
+    window.addEventListener('keydown', function (e) {
+        if (e.key === 'Meta') {
+            document.getElementsByClassName('server-list')[0].classList.add('command-pressed');
+        }
+    });
+
+    window.addEventListener('keyup', function (e) {
+        if (e.key === 'Meta') {
+            document.getElementsByClassName('server-list')[0].classList.remove('command-pressed');
+        }
+    });
+} else {
+    window.addEventListener('keydown', function (e) {
+        if (e.key === 'ctrlKey') {
+            document.getElementsByClassName('server-list')[0].classList.add('command-pressed');
+        }
+    });
+
+    window.addEventListener('keyup', function (e) {
+        if (e.key === 'ctrlKey') {
+            document.getElementsByClassName('server-list')[0].classList.remove('command-pressed');
+        }
+    });
+}
diff --git a/src/scripts/webview.js b/src/scripts/webview.js
@@ -109,6 +109,9 @@ class WebView extends EventEmitter {
                     this.loading();
                     active.loadURL(server);
                     break;
+                case 'sidebar-background':
+                    sidebar.changeSidebarColor(event.args[0]);
+                    break;
             }
         });
 
@@ -181,7 +184,6 @@ class WebView extends EventEmitter {
         if (item) {
             item.classList.add('active');
         }
-
         this.focusActive();
     }
 

diff --git a/src/stylesheets/main.less b/src/stylesheets/main.less
@@ -278,7 +278,7 @@ input[type='password'] {
 	top: 0;
 	right: 0;
 	bottom: 0;
-	left: 80px;
+	left: 68px;
 	overflow-y: auto;
 	text-align: center;
 	background-color: darken(@primary-background-color, 10%);

diff --git a/src/stylesheets/start-page.less b/src/stylesheets/start-page.less
@@ -29,25 +29,28 @@ div.server-list {
 	top: 0;
 	bottom: 0;
 	height: 100%;
-	width: 80px;
-	padding-top: 22px;
-	background-color: #0F354C;
+	width: 68px;
+	padding-top: 27px;
+	background-color: #2F343D;
+	color: #FFF;
 	z-index: 100000;
+	filter: brightness(90%);
 	-webkit-app-region: drag;
 }
 
 div.server-list ul {
 	padding: 0px;
 	margin: 0px;
+	-webkit-app-region: no-drag;
 }
 
 div.server-list li {
-	color: #FFF;
+	color: inherit;
 	cursor: pointer;
 	font-size: 17pt;
-
 	-webkit-user-select: none;
 	user-select: none;
+	filter: brightness(110%);
 }
 
 div.server-list li.active img {
@@ -74,9 +77,10 @@ div.server-list li {
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-	height: 60px;
+	height: 55px;
 	position: relative;
-	margin-bottom: 20px;
+	margin-bottom: 17px;
+	-webkit-app-region: no-drag;
 }
 
 div.server-list li:before {
@@ -90,9 +94,8 @@ div.server-list li:before {
 }
 
 .server-list img {
-	width: 50px;
-	height: 50px;
-	top: 5px;
+	width: 42px;
+	height: 42px;
 	left: 15px;
 	position: absolute;
 	display: none;
@@ -101,18 +104,17 @@ div.server-list li:before {
 }
 
 .server-list span {
-	width: 70px;
+	width: 100%;
 	text-align: center;
 	line-height: 60px;
-	left: 5px;
 	position: absolute;
 	opacity: 0.6;
 	transition: opacity .2s;
 }
 
 .server-list li .tooltip {
 	line-height: 30px;
-	left: 72px;
+	left: 70px;
 	position: absolute;
 	background-color: #000;
 	color: #fff;
@@ -126,13 +128,13 @@ div.server-list li:before {
 
 .server-list li .badge {
 	position: absolute;
-	right: 10px;
-	top: 5px;
+	right: 8px;
+	top: 2px;
 	background-color: #e43325;
 	border-radius: 20px;
-	min-width: 18px;
-	line-height: 18px;
-	font-size: 12px;
+	min-width: 15px;
+	line-height: 15px;
+	font-size: 11px;
 	text-align: center;
 	z-index: 1;
 	font-family: Helvetica;
@@ -143,14 +145,18 @@ div.server-list li:before {
 
 .server-list li .name {
 	text-align: center;
-	width: 70px;
-	bottom: -10px;
+	width: 100%;
+	bottom: -12px;
 	position: absolute;
 	font-size: 12px;
 	line-height: 11px;
-	right: 5px;
 	font-weight: 600;
 	opacity: 0.6;
+	display: none;
+}
+
+.command-pressed li .name {
+	display: initial;
 }
 
 .server-list li:hover span {
@@ -165,9 +171,12 @@ div.server-list li:before {
 	display: block;
 }
 
-.add-server span {
+.server-list li.add-server {
+	height: 30px;
+}
+
+.server-list li.add-server span {
 	font-size: 40px;
-	opacity: 0.3;
 }
 
 .hide-server-list div.server-list {
@@ -176,7 +185,6 @@ div.server-list li:before {
 
 .hide-server-list webview {
 	left: 0;
-	transition: left 0.5s ease-in-out;
 }
 
 @-webkit-keyframes wrong {
@@ -229,7 +237,7 @@ webview {
 	z-index: 0;
 	position: fixed;
 	top: 0;
-	left: 80px;
+	left: 68px;
 	right: 0;
 	bottom: 0;
 }