design: Add back button in left-sidebar.

Fixes: #208.
zulip · Feb 14, 2018 · 6d213c8 · 6d213c8
1 parent 0c1cd96
commit 6d213c8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/app/main/menu.js b/app/main/menu.js
@@ -368,7 +368,7 @@ class AppMenu {
 
 	static sendAction(action, ...params) {
 		const win = BrowserWindow.getAllWindows()[0];
-
+	
 		if (process.platform === 'darwin') {
 			win.restore();
 		}

diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
@@ -246,6 +246,7 @@ webview:focus {
 
 /* Tooltip styling */
 
+#back-tooltip,
 #reload-tooltip,
 #setting-tooltip {
     font-family: sans-serif;
@@ -262,6 +263,7 @@ webview:focus {
     font-size: 14px;
 }
 
+#back-tooltip:after,
 #reload-tooltip:after,
 #setting-tooltip:after {
     content: " ";

diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
@@ -21,11 +21,13 @@ class ServerManagerView {
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$webviewsContainer = document.getElementById('webviews-container');
+		this.$backButton = $actionsContainer.querySelector('#back-action');
 
 		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
 		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
+		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
 
 		this.$sidebar = document.getElementById('sidebar');
 
@@ -159,6 +161,9 @@ class ServerManagerView {
 		this.$settingsButton.addEventListener('click', () => {
 			this.openSettings('General');
 		});
+		this.$backButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.back();
+		});
 
 		const $serverImgs = document.querySelectorAll('.server-icons');
 		$serverImgs.forEach($serverImg => {
@@ -170,6 +175,7 @@ class ServerManagerView {
 		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
+		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
 	}
 
 	getTabIndex() {

diff --git a/app/renderer/main.html b/app/renderer/main.html
@@ -28,6 +28,10 @@
         <i class="material-icons md-48">refresh</i>
         <span id="reload-tooltip" style="display:none">Reload</span>
       </div>
+      <div class="action-button" id="back-action">
+        <i class="material-icons md-48">arrow_back</i>
+        <span id="back-tooltip" style="display:none">Go Back</span>
+      </div>
       <div class="action-button" id="settings-action">
         <i class="material-icons md-48">settings</i>
         <span id="setting-tooltip" style="display:none">Settings</span>