[NEW] Sidebar redesign

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) {

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');
+ }
+ });
+}

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();
  }
 

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%);

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;
 }