From ceaf13dee2fbae479b51f528359f6d58bc39ba1c Mon Sep 17 00:00:00 2001
From: Abhigyan Khaund <mail@abhigyan.xyz>
Date: Fri, 30 Mar 2018 00:11:39 +0530
Subject: [PATCH] shortcuts-menu: Add a tip-section to link to webapp's
 built-in hotkeys.

Fixes: #459
---
 app/renderer/css/preference.css                 | 17 +++++++++++++++++
 .../js/pages/preference/shortcuts-section.js    | 11 +++++++++++
 2 files changed, 28 insertions(+)

diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css
index e676b058..08e8aac8 100644
--- a/app/renderer/css/preference.css
+++ b/app/renderer/css/preference.css
@@ -557,6 +557,23 @@ input.toggle-round:checked+label:after {
     background: #329588;
 }
 
+.tip {
+    width: 70%;
+    background-color: hsl(46,63%,95%);
+    border: 1px solid hsl(46,63%,84%);
+    border-radius: 4px;
+    padding: 12px 30px;
+    margin: 10px 0 20px 0;
+}
+
+.md-14 {
+    font-size: 14px;
+}
+
+#open-hotkeys-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
 
 /* responsive grid */
 
diff --git a/app/renderer/js/pages/preference/shortcuts-section.js b/app/renderer/js/pages/preference/shortcuts-section.js
index 4f119d21..540f667e 100644
--- a/app/renderer/js/pages/preference/shortcuts-section.js
+++ b/app/renderer/js/pages/preference/shortcuts-section.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const BaseSection = require(__dirname + '/base-section.js');
+const shell = require('electron').shell;
 
 class ShortcutsSection extends BaseSection {
 	constructor(props) {
@@ -159,6 +160,7 @@ class ShortcutsSection extends BaseSection {
                 </table>
                 <div class="setting-control"></div>
               </div>
+              <div class="tip"><b><i class="material-icons md-14">settings</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
             </div>
 		`;
 	}
@@ -298,13 +300,22 @@ class ShortcutsSection extends BaseSection {
                 </table>
                 <div class="setting-control"></div>
               </div>
+              <div class="tip"><b><i class="material-icons md-14">lightbulb_outline</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
             </div>
 		`;
 	}
 
+	openHotkeysExternalLink() {
+		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
+		const externalCreateNewOrgEl = document.getElementById('open-hotkeys-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
 	init() {
 		this.props.$root.innerHTML = (process.platform === 'darwin') ?
 			this.templateMac() : this.templateWinLin();
+		this.openHotkeysExternalLink();
 	}
 }