Refactor ServerManagerView and setup layout for PreferenceView.

app/renderer/css/preference.css

@@ -0,0 +1,49 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    cursor: default;
+}
+
+#content {
+    display: flex;
+    height: 100%;
+    font-family: sans-serif;
+    background: #fff;
+}
+
+#sidebar {
+    width: 80px;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+}
+
+#tabs-container {
+    padding: 20px 0;
+}
+
+.tab {
+    padding: 5px 0;
+    color: #999;
+    cursor: pointer;
+}
+
+.tab.active {
+    color: #464e5a;
+    cursor: default;
+}
+
+.tab.active::before {
+    color: #464e5a;
+    cursor: default;
+}
+#settings-header {
+    font-size: 24px;
+    color: #5c6166;
+}
+
+.settings-container {
+    width: 100%;
+    display: flex;
+}

app/renderer/css/servermanager.css

@@ -1,6 +1,7 @@
 html, body {
     height: 100%;
     margin: 0;
+    cursor: default;    
 }
 
 #content {
@@ -35,25 +36,24 @@ html, body {
 .action-button i {
     color: #6c8592;
     font-size: 28px;
-    cursor: default;
 }
 
 .action-button:hover i {
     color: #98a9b3;
 }
 
-#servers-container {
+#tabs-container {
     display: flex;
     align-items: center;
     flex-direction: column;
 }
 
-.server-button {
+.tab {
     position: relative;
     margin: 5px 0;
 }
 
-.server-button.active::before{
+.tab.active::before{
     content: "";
     background: #fff;
     border-radius: 0 3px 3px 0;
@@ -64,7 +64,7 @@ html, body {
     top: 5px;
 }
 
-.server-button .server-name{
+.tab .server-tab{
     background: #a4d3c4;
     background-size: 100%;
     border-radius: 4px;
@@ -74,7 +74,7 @@ html, body {
     margin: 5px 0;
     z-index: 11;
     line-height: 44px;
-    font-size: 24px;
+    font-size: 32px;
     font-family: sans-serif;
     color: #194a2b;
     text-align: center;
@@ -82,11 +82,20 @@ html, body {
     opacity: 0.6;
 }
 
-.server-button .server-name:hover{
+.tab .server-tab:hover{
     opacity: 0.8;
 }
 
-.server-button.active .server-name{
+.tab .settings-tab{
+    background: #eee;
+}
+
+.tab .settings-tab i{
+    font-size: 28px;
+    line-height: 44px;
+}
+
+.tab.active .server-tab{
     opacity: 1;
 }
 

app/renderer/js/main.js

@@ -4,7 +4,7 @@ const path = require("path");
 const DomainUtil = require(path.resolve(('app/renderer/js/utils/domain-util.js')));
 class ServerManagerView {
 	constructor() {
-		this.$serversContainer = document.getElementById('servers-container');
+		this.$tabsContainer = document.getElementById('tabs-container');
 
 		const $actionsContainer = document.getElementById('actions-container');
 		this.$addServerButton = $actionsContainer.querySelector('#add-action');
@@ -12,46 +12,38 @@ class ServerManagerView {
         this.$content = document.getElementById('content');
 
         this.isLoading = false;
+        this.settingsTabIndex = -1;
 	}
 
 	init() {
 		this.domainUtil = new DomainUtil();
-		this.initServers();
+		this.initTabs();
+        this.initActions();
 	}
 
-	initServers() {
+	initTabs() {
 		const servers = this.domainUtil.getDomains();
 		for (let server of servers) {
-			this.initServer(server);
+			this.initTab(server);
 		}
         
-        const $firstServerButton = this.$serversContainer.firstChild;
+        this.activateTab(0);
-		$firstServerButton.classList.add('active');
-        this.$activeServerButton = $firstServerButton;
-        this.initWebView($firstServerButton.getAttribute('domain'));
 	}
 
-	initServer(server) {
+	initTab(tab) {
 		const {
 			alias,
 			url
-		} = server;
+		} = tab;
-		const icon = server.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
+		const icon = tab.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
-		const serverButtonTemplate = `
+        const tabTemplate = tab.template || `
-                <div class="server-button" domain="${url}">
+                <div class="tab" domain="${url}">
-                    <div class="server-name" style="background-image: url(${icon});"></div>
+                    <div class="server-tab" style="background-image: url(${icon});"></div>
                 </div>`;
-		const $serverButton = this.__insert_node(serverButtonTemplate);
+		const $tab = this.__insert_node(tabTemplate);
-		this.$serversContainer.appendChild($serverButton);
+        const index = this.$tabsContainer.childNodes.length;
-		$serverButton.addEventListener('click', () => {
+		this.$tabsContainer.appendChild($tab);        
-            if (this.isLoading || this.$activeServerButton == $serverButton) return;
+		$tab.addEventListener('click', this.activateTab.bind(this, index));
-
-            this.$activeServerButton.classList.remove('active');
-            $serverButton.classList.add('active');
-            const url = $serverButton.getAttribute('domain');
-            this.$activeServerButton = $serverButton;
-            this.startLoading(url);
-		});
 	}
 
     initWebView(url) {
@@ -79,10 +71,11 @@ class ServerManagerView {
     endLoading() {
         this.isLoading = false;
         this.$webView.classList.remove('loading');
+        this.$webView.openDevTools();        
     }
 
 	initActions() {
-
+        this.$addServerButton.addEventListener('click', this.openSettings.bind(this));
 	}
 
 	addServer() {
@@ -90,7 +83,50 @@ class ServerManagerView {
 	}
 
     openSettings() {
+        if (this.settingsTabIndex != -1) {
+            this.activateTab(this.settingsTabIndex);
+            return;
+        }
+        const url = 'file:///' + path.resolve(('app/renderer/preference.html'));
+        console.log(url);
+        const settingsTabTemplate = `
+                <div class="tab" domain="${url}">
+                    <div class="server-tab settings-tab">
+                        <i class="material-icons md-48">settings</i>
+                    </div>
+                </div>`;
+		this.initTab({
+            alias: 'Settings',
+			url: url,
+            template: settingsTabTemplate
+        });
 
+        this.settingsTabIndex = this.$tabsContainer.childNodes.length - 1;
+        this.activateTab(this.settingsTabIndex);
+    }
+
+    activateTab(index) {
+        if (this.isLoading) return;
+        
+        const $tab = this.$tabsContainer.childNodes[index];
+
+        if (this.$activeTab) {
+            if (this.$activeTab == $tab) {
+                return;
+            } else {
+                this.$activeTab.classList.remove('active');
+            }
+        }
+
+		$tab.classList.add('active');
+        this.$activeTab = $tab;
+
+        const domain = $tab.getAttribute('domain');
+        if (this.$webView){
+            this.startLoading(domain);
+        } else {
+            this.initWebView(domain);
+        }
     }
 
     __insert_node(html) {

app/renderer/main.html

@@ -10,7 +10,7 @@
   <body>
     <div id="content">
       <div id="sidebar">
-        <div id="servers-container"></div>
+        <div id="tabs-container"></div>
         <div id="actions-container">
           <div class="action-button" id="add-action">
             <i class="material-icons md-48">add_circle</i>

app/renderer/preference.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" class="responsive desktop">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Zulip - Settings</title>
+    <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body>
+    <div id="content">
+      <div id="sidebar">
+        <div id="settings-header">Settings</div>
+        <div id="tabs-container">
+            <div class="tab" id="general-settings">General</div>
+            <div class="tab active" id="server-settings">Servers</div>
+            <div class="tab" id="about-settings">About</div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script src="js/preference.js"></script>  
+</html>