From b578e889cb8520736be10265de4483a65ba60e3e Mon Sep 17 00:00:00 2001
From: Michael Chen <miketychen@gmail.com>
Date: Thu, 21 Jan 2016 11:09:40 -0600
Subject: [PATCH 1/2] map alt or opt based on device

---
 .../paragraph/paragraph.controller.js         |  2 ++
 .../modal-shortcut/modal-shortcut.html        | 22 +++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 30c7ea44015..7753f3be5fb 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -574,9 +574,11 @@ angular.module('zeppelinWebApp')
 
       if (navigator.appVersion.indexOf('Mac') !== -1 ) {
         $scope.editor.setKeyboardHandler('ace/keyboard/emacs');
+        $rootScope.isMac = true;
       } else if (navigator.appVersion.indexOf('Win') !== -1 ||
                  navigator.appVersion.indexOf('X11') !== -1 ||
                  navigator.appVersion.indexOf('Linux') !== -1) {
+        $rootScope.isMac = false;
         // not applying emacs key binding while the binding override Ctrl-v. default behavior of paste text on windows.
       }
 
diff --git a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
index 1191ec51f93..4a7315159ae 100644
--- a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
+++ b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
@@ -37,7 +37,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">c</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">c</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -70,7 +70,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">d</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">d</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -81,7 +81,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">a</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">a</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -92,7 +92,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">b</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">b</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -103,7 +103,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">k</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">k</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -114,7 +114,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">j</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">j</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -125,7 +125,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">o</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">o</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -136,7 +136,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">e</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">e</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -147,7 +147,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">m</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">m</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -158,7 +158,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">t</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">t</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -169,7 +169,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">1</kbd>~<kbd class="kbd-dark">0</kbd>,<kbd class="kbd-dark">-</kbd>,<kbd class="kbd-dark">+</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">1</kbd>~<kbd class="kbd-dark">0</kbd>,<kbd class="kbd-dark">-</kbd>,<kbd class="kbd-dark">+</kbd>
             </div>
           </div>
           <div class="col-md-8">

From 86153b1656bb5c3d11e231a10745f97e5ef62fef Mon Sep 17 00:00:00 2001
From: Michael Chen <miketychen@gmail.com>
Date: Fri, 22 Jan 2016 09:30:03 -0600
Subject: [PATCH 2/2] change wording opt to option and titles"

---
 .../modal-shortcut/modal-shortcut.html        | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
index 676aac763ed..863d7dd6a96 100644
--- a/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
+++ b/zeppelin-web/src/components/modal-shortcut/modal-shortcut.html
@@ -21,7 +21,7 @@ <h4 class="modal-title" id="myModalLabel">Keyboard shortcuts</h4>
       </div>
       <div class="modal-body">
 
-        <h4>Control in Note</h4>
+        <h4>Note Shortcuts</h4>
 
         <div class="row">
           <div class="col-md-4">
@@ -37,7 +37,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">c</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">c</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -70,7 +70,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">d</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">d</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -81,7 +81,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">a</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">a</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -92,7 +92,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">b</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">b</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -103,7 +103,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">k</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">k</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -114,7 +114,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">j</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">j</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -125,7 +125,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">o</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">o</kbd>
               <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">r</kbd>
             </div>
           </div>
@@ -137,7 +137,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">Alt</kbd> + <kbd class="kbd-dark">o</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">o</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -148,7 +148,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">e</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">e</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -159,7 +159,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">m</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">m</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -170,7 +170,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">t</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">t</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -181,7 +181,7 @@ <h4>Control in Note</h4>
         <div class="row">
           <div class="col-md-4">
             <div class="keys">
-              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Opt' : 'Alt'}}</kbd> + <kbd class="kbd-dark">1</kbd>~<kbd class="kbd-dark">0</kbd>,<kbd class="kbd-dark">-</kbd>,<kbd class="kbd-dark">+</kbd>
+              <kbd class="kbd-dark">Ctrl</kbd> + <kbd class="kbd-dark">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-dark">1</kbd>~<kbd class="kbd-dark">0</kbd>,<kbd class="kbd-dark">-</kbd>,<kbd class="kbd-dark">+</kbd>
             </div>
           </div>
           <div class="col-md-8">
@@ -189,7 +189,7 @@ <h4>Control in Note</h4>
           </div>
         </div>
 
-        <h4>Control in Note Editor</h4>
+        <h4>Editor Shortcuts</h4>
 
       <div class="row">
           <div class="col-md-4">