Split Tab into ServerTab and FuntionalTab.

app/main/menu.js

@@ -9,8 +9,6 @@ const BrowserWindow = electron.BrowserWindow;
 const shell = electron.shell;
 const appName = app.getName();
 
-// const {about} = require('./windowmanager');
-
 function sendAction(action) {
 	const win = BrowserWindow.getAllWindows()[0];
 

app/renderer/css/main.css

@@ -116,11 +116,11 @@ html, body {
     opacity: 0.8;
 }
 
-.tab .settings-tab {
+.tab .functional-tab {
     background: #eee;
 }
 
-.tab .settings-tab i {
+.tab .functional-tab i {
     font-size: 28px;
     line-height: 36px;
 }

app/renderer/js/components/functional-tab.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const Tab = require(__dirname + '/../components/tab.js');
+
+class FunctionalTab extends Tab {
+	constructor(props) {
+		super(props);
+	}
+
+	template() {
+		return `<div class="tab">
+					<div class="server-tab-badge"></div>
+					<div class="server-tab functional-tab">
+						<i class="material-icons md-48">${this.props.materialIcon}</i>
+					</div>
+				</div>`;
+	}
+}
+
+module.exports = FunctionalTab;

app/renderer/js/components/server-tab.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const Tab = require(__dirname + '/../components/tab.js');
+
+class ServerTab extends Tab {
+	constructor(props) {
+		super(props);
+	}
+
+	template() {
+		return `<div class="tab">
+					<div class="server-tab-badge"></div>
+					<div class="server-tab" style="background-image: url(${this.props.icon});"></div>
+				</div>`;
+	}
+}
+
+module.exports = ServerTab;

app/renderer/js/components/tab.js

@@ -11,22 +11,6 @@ class Tab extends BaseComponent {
 		this.init();
 	}
 
-	template() {
-		if (this.props.type === Tab.SERVER_TAB) {
-			return `<div class="tab" domain="${this.props.url}">
-						<div class="server-tab-badge"></div>
-						<div class="server-tab" style="background-image: url(${this.props.icon});"></div>
-					</div>`;
-		} else {
-			return `<div class="tab" domain="${this.props.url}">
-						<div class="server-tab-badge"></div>
-						<div class="server-tab settings-tab">
-							<i class="material-icons md-48">settings</i>
-						</div>
-					</div>`;
-		}
-	}
-
 	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];

app/renderer/js/main.js

@@ -5,7 +5,8 @@ const {ipcRenderer} = require('electron');
 
 const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
 const WebView = require(__dirname + '/js/components/webview.js');
-const Tab = require(__dirname + '/js/components/tab.js');
+const ServerTab = require(__dirname + '/js/components/server-tab.js');
+const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
 
 class ServerManagerView {
 	constructor() {
@@ -17,11 +18,10 @@ class ServerManagerView {
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$content = document.getElementById('content');
 
-		this.settingsTabIndex = -1;
-		this.aboutTabIndex = -1;
 		this.activeTabIndex = -1;
 		this.webviews = [];
 		this.tabs = [];
+		this.functionalTabs = {};
 	}
 
 	init() {
@@ -43,11 +43,8 @@ class ServerManagerView {
 	}
 
 	initServer(server, index) {
-		this.tabs.push(new Tab({
+		this.tabs.push(new ServerTab({
-			url: server.url,
-			name: server.alias,
 			icon: server.icon,
-			type: Tab.SERVER_TAB,
 			$root: this.$tabsContainer,
 			onClick: this.activateTab.bind(this, index)
 		}));
@@ -71,69 +68,51 @@ class ServerManagerView {
 		this.$addServerButton.addEventListener('click', this.openSettings.bind(this));
 		this.$settingsButton.addEventListener('click', this.openSettings.bind(this));
 	}
-
+	
-	openSettings() {
+	openFunctionalTab(tabProps) {
-		if (this.settingsTabIndex !== -1) {
+		const {name, materialIcon, url} = tabProps;
-			this.activateTab(this.settingsTabIndex);
+		if (this.functionalTabs.hasOwnProperty(name)) {
+			this.activateTab(this.functionalTabs[name]);
 			return;
 		}
-		const url = 'file://' + __dirname + '/preference.html';
 
-		this.settingsTabIndex = this.webviews.length;
+		this.functionalTabs[name] = this.webviews.length;
 
-		this.tabs.push(new Tab({
+		this.tabs.push(new FunctionalTab({
-			url,
+			materialIcon: tabProps.materialIcon,
-			name: 'Settings',
-			type: Tab.SETTINGS_TAB,
 			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, this.settingsTabIndex)
+			onClick: this.activateTab.bind(this, this.functionalTabs[name])
 		}));
 
 		this.webviews.push(new WebView({
 			$root: this.$content,
-			index: this.settingsTabIndex,
+			index: this.functionalTabs[name],
-			url,
+			url: tabProps.url,
-			name: 'Settings',
+			name: tabProps.name,
 			isActive: () => {
-				return this.settingsTabIndex === this.activeTabIndex;
+				return this.functionalTabs[name] === this.activeTabIndex;
 			},
 			onTitleChange: this.updateBadge.bind(this),
 			nodeIntegration: true
 		}));
 
-		this.activateTab(this.settingsTabIndex);
+		this.activateTab(this.functionalTabs[name]);
+	}
+
+	openSettings() {
+		this.openFunctionalTab({
+				name: 'Settings',
+				materialIcon: 'settings',
+				url: `file://${__dirname}/preference.html`
+		});
 	}
 
 	openAbout() {
-		if (this.aboutTabIndex !== -1) {
+		this.openFunctionalTab({
-			this.activateTab(this.aboutTabIndex);
+				name: 'About',
-			return;
+				materialIcon: 'sentiment_very_satisfied',
-		}
+				url: `file://${__dirname}/about.html`
-		const url = 'file://' + __dirname + '/about.html';
+			});
-
-		this.aboutTabIndex = this.webviews.length;
-
-		this.tabs.push(new Tab({
-			url,
-			name: 'About',
-			type: Tab.SETTINGS_TAB,
-			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, this.aboutTabIndex)
-		}));
-
-		this.webviews.push(new WebView({
-			$root: this.$content,
-			index: this.aboutTabIndex,
-			url,
-			name: 'About',
-			isActive: () => {
-				return this.activeTabIndex === this.aboutTabIndex;
-			},
-			onTitleChange: this.updateBadge.bind(this),
-			nodeIntegration: true
-		}));
-
-		this.activateTab(this.aboutTabIndex);
 	}
 
 	activateTab(index) {

app/renderer/preference.html

@@ -41,5 +41,5 @@
       </div>
     </div>
   </body>
-  <script src="js/preference.js"></script>  
+  <script src="js/pages/preference.js"></script>  
 </html>