Add mute button shortcut option

Author: muan

chrome/src/options/index.html

@@ -10,7 +10,7 @@
 
   <div class="wrapper">
     <div id="options"></div>
-    <div class="notice">Make sure you refresh both the extensions page (chrome://extensions/) and the gmail tab after updating the settings.</div>
+    <div class="notice">Make sure to refresh both the extensions page (chrome://extensions/) and the gmail tab after updating the settings.</div>
     <button id="save">Save</button>
   </div>
 

chrome/src/options/options.css

@@ -11,9 +11,8 @@ body, * {
 }
 
 .wrapper {
-  width: 500px;
+  width: 540px;
   margin: auto;
-  padding: 0 20px;
 }
 
 .notice {
@@ -22,12 +21,13 @@ body, * {
   border-left: 2px solid #c1c5cd;
   border-radius: 0 5px 5px 0;
   padding: 12px;
-  margin: 30px 0;
+  margin: 20px 15px 30px;
   font-weight: bold;
 }
 
 .option {
-  margin: 30px 0 0;
+  margin: 10px 0 0;
+  padding: 15px;
   transition: all 0.6s;
 }
 
@@ -41,6 +41,11 @@ body, * {
   color: #666;
 }
 
+.help {
+  color: #c58989;
+  font-size: 12px;
+}
+
 input[type]:focus {
   background-color: #fff;
   border: 1px solid #49d;
@@ -56,7 +61,7 @@ input[type] {
   font-family: menlo, monospace;
 }
 
-input[type], button {
+input[type] {
   display: block;
   line-height: 1;
   width: 100%;
@@ -69,7 +74,7 @@ label {
 button {
   background: #4a6;
   border: 0;
-  padding: 15px 10px;
+  padding: 10px 20px;
   color: #fff;
   font-weight: bold;
   cursor: pointer;
@@ -78,7 +83,8 @@ button {
   text-transform: uppercase;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
   transition: all .6s;
-  margin: 20px 0;
+  margin: 20px 15px;
+  display: block;
   font-size: 12px;
 }
 

chrome/src/options/options.js

@@ -13,15 +13,15 @@ function initOptions (defaultOptions) {
   optionsWrapper = document.getElementById('options')
 
   for (var key in options) {
-    html  = '<div class=\'option\'><label>' + key + ' ' + options[key].hint + '</label>'
-    html += '<p class=\'description\'>' + options[key].description + '</p>'
+    html  = '<div class=\'option\'><label>' + key + '</label>'
+    html += '<p class=\'description\'>' + options[key].description + '<br><span class=\'help\'>*' + options[key].hint + '</span></p>'
     html += '<input name=\'' + key + '\' value=\'' + options[key].val +'\' type=\'text\' /></div>'
     $(optionsWrapper).append(html)
   }
 
 }
 
-$(document).on('keypress', '[name=Shortcut], [name=BackgroundShortcut]', function(e) {
+$(document).on('keypress', '[name=Shortcut], [name=BackgroundShortcut], [name=MuteShortcut]', function(e) {
   if (e.keyCode == 13 && !e.shiftKey && !e.metaKey && !e.altKey && !e.ctrlKey ) return false
   code = ''
   keys = ['shift', 'alt', 'meta', 'ctrl']

chrome/src/options/options.json

@@ -2,16 +2,21 @@
   "Domains" : {
     "description": "Specify GitHub enterprise domain, or other domains you'd like to grab links for. There's no need to add github.com, protocol is also not required unless you'd like to be explicit.",
     "val": "",
-    "hint": "(comma separated if multiple)"
+    "hint": "Comma separated if multiple."
   },
   "Shortcut" : {
-    "description": "The shortcut that triggers button clicking on the mail view.",
+    "description": "Triggers view button on the mail view.",
     "val": "shift + 71",
-    "hint": " (press shortcut in the input field)"
+    "hint": "Press shortcut in the input field."
   },
   "BackgroundShortcut" : {
-    "description": "The shortcut that triggers button clicking on the mail view, opens the link in the background.",
+    "description": "Triggers iew button on the mail view, opens the link in the background.",
     "val": "shift + 66",
-    "hint": " (press shortcut in the input field)"
+    "hint": "Press shortcut in the input field."
+  },
+  "MuteShortcut" : {
+    "description": "Triggers mute button on the mail view.",
+    "val": "shift + 72",
+    "hint": "Press shortcut in the input field."
   }
 }