Set up layout for PreferenceView.

app/renderer/css/preference.css

@@ -2,18 +2,20 @@ html, body {
     height: 100%;
     margin: 0;
     cursor: default;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
 }
 
 #content {
     display: flex;
     height: 100%;
     font-family: sans-serif;
-    background: #fff;
 }
 
 #sidebar {
     width: 80px;
-    padding: 40px;
+    padding: 30px;
     display: flex;
     flex-direction: column;
     font-size: 16px;
@@ -32,18 +34,122 @@ html, body {
 .tab.active {
     color: #464e5a;
     cursor: default;
+    position: relative;
 }
 
 .tab.active::before {
-    color: #464e5a;
+    background: #464e5a;
-    cursor: default;
+    width: 3px;
+    height: 16px;
+    position: absolute;
+    left: -8px;
+    content: '';
 }
+
 #settings-header {
-    font-size: 24px;
+    font-size: 22px;
     color: #5c6166;
 }
 
-.settings-container {
+#settings-container {
     width: 100%;
     display: flex;
+    padding: 30px;
+}
+
+.server-info-container {
+    margin: 20px 0;
+}
+
+.title {
+    padding: 4px 0 6px 0;
+    font-size: 18px;
+    color: #000;
+}
+
+img.server-info-icon {
+    background: #a4d3c4;
+    background-size: 100%;
+    border-radius: 4px;
+    width: 44px;
+    height: 44px;
+}
+
+.server-info-left {
+    margin-right: 20px;
+}
+
+.server-info-right {
+    flex-grow: 1;
+}
+
+.server-info-row {
+    display: flex;
+    line-height: 26px;
+    height: 40px;
+}
+
+.server-info-key {
+    width: 40px;
+    margin-right: 20px;
+    text-align: right;
+}
+
+.server-info-value {
+    flex-grow: 1;
+    font-size: 14px;
+    height: 24px;
+    border: none;
+    border-bottom: #ddd 1px solid;
+    outline-width: 0;
+    background: transparent;
+}
+
+.server-info-value:focus {
+    border-bottom: #b0d8ce 2px solid;
+}
+
+.actions-container {
+    display: flex;
+    font-size: 14px;
+    color: #235d3a;
+    vertical-align: middle;
+    margin: 10px 0;
+}
+
+.action {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+}
+
+.action i {
+    margin-right: 5px;
+    font-size: 18px;
+}
+
+.settings-pane {
+    flex-grow: 1;
+}
+
+.action:hover {
+    cursor: pointer;
+}
+
+.action.disabled:hover {
+    cursor: default;
+}
+
+.action.disabled {
+    color: #999;
+}
+
+.server-info.active {
+    background: #ecf4ef;
+    padding: 20px;
+}
+
+.server-info {
+    display: flex;
+    margin: 20px 0;
 }

app/renderer/js/preference.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const path = require("path");
+const DomainUtil = require(path.resolve(('app/renderer/js/utils/domain-util.js')));
+class PreferenceView {
+    constructor() {
+        this.$newServerButton = document.getElementById('new-server-action');
+        this.$saveServerButton = document.getElementById('save-server-action');
+        this.$serverInfoContainer = document.querySelector('.server-info-container');        
+    }
+
+    init() {
+       this.domainUtil = new DomainUtil();
+       this.initServers();
+    }
+
+    initServers() {
+        const servers = this.domainUtil.getDomains();
+		for (let server of servers) {
+			this.initServer(server);
+		}
+    }
+
+    initServer(server) {
+        const {
+			alias,
+			url,
+            icon
+		} = server;
+        const serverInfoTemplate = `
+                <div class="server-info">
+                    <div class="server-info-left">
+                        <img class="server-info-icon" src="${icon}"/>
+                    </div>
+                    <div class="server-info-right">
+                        <div class="server-info-row">
+                            <span class="server-info-key">Name</span>
+                            <input class="server-info-value" value="${alias}"/>
+                        </div>
+                        <div class="server-info-row">
+                            <span class="server-info-key">Url</span>
+                            <input class="server-info-value" value="${url}"/>
+                        </div>
+                        <div class="server-info-row">
+                            <span class="server-info-key">Icon</span>
+                            <input class="server-info-value" value="${icon}"/>
+                        </div>
+                    </div>
+                </div>`;
+        this.$serverInfoContainer.appendChild(this.__insert_node(serverInfoTemplate));
+    }
+
+    __insert_node(html) {
+        let wrapper= document.createElement('div');
+        wrapper.innerHTML= html;
+        return wrapper.firstElementChild;
+    }
+}
+
+window.onload = () => {
+	const preferenceView = new PreferenceView();
+	preferenceView.init();
+}

app/renderer/preference.html

@@ -17,6 +17,24 @@
             <div class="tab" id="about-settings">About</div>
         </div>
       </div>
+      <div id="settings-container">
+        <div class="settings-pane" id="server-settings-pane">
+            <div class="title">Manage Servers</div>
+            <div class="actions-container">
+                <div class="action" id="new-server-action">
+                    <i class="material-icons">add_box</i>
+                    <span>New Server</span>
+                </div>
+                <div class="action" id="save-server-action">
+                    <i class="material-icons">check_box</i>
+                    <span>Verify & Save</span>
+                </div>
+            </div>
+            <div class="server-info-container">
+                
+            </div>
+        </div>
+      </div>
     </div>
   </body>
   <script src="js/preference.js"></script>