zooming from popup works

TC2830 · Dec 7, 2013 · d89e4d5 · d89e4d5
1 parent e9bdbc6
commit d89e4d5
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 49 deletions.
diff --git a/Rakefile b/Rakefile
@@ -6,7 +6,7 @@ end
 
 task :build do
   compile_coffee('zoom')
-  %w(background util options).each { |f| compile_coffee f }
+  %w(background util options popup).each { |f| compile_coffee f }
   puts 'compile done'
 end
 

diff --git a/lib/popup.css b/lib/popup.css
@@ -1,9 +1,9 @@
 .verticalSpacer15 {
-	padding-top: 15px;
+  padding-top: 15px;
 }
 
-.horizontalSpacer10 {
-	padding-right: 10px;
+.verticalSpacer25 {
+  padding-top: 25px;
 }
 
 .marginBottom0 {
@@ -20,13 +20,18 @@
 	margin-right: 20px;
 }
 
-.notice {
-	padding: 10px;
-	margin-top: 10px;
-	background-color: #A9F5BC;
-	border-radius: 5px;
+.currentZoom {
+  font-size: 24px;
+  margin-left: 5px;
+  margin-right: 5px;
+  vertical-align: middle;
 }
 
-.notice .glyphicon {
-  margin-right: 5px;
+.currentZoomBox {
+  height: 34px;
+  line-height: 34px;
+}
+
+.currentZoomBox .btn {
+  margin-top: -2px;
 }
diff --git a/lib/popup.html b/lib/popup.html
@@ -9,48 +9,18 @@
       <h2 class='tac'>Zoom Text Only</h2>
       <div class='verticalSpacer15'></div>
 
-      <div class="form-group">
-        <label for="zoomInKeyInput">
-          <button id="zoomInButton" class="btn btn-primary">
-            Zoom in
-          </button>
-        </label>
-
-        <input type="text" class="form-control" id="zoomInKeyInput" placeholder="Example: alt+shift+x">
-      </div>
-
-      <div class="form-group">
-        <label for="zoomOutKeyInput">
-          <button id="zoomOutButton" class="btn btn-primary">
-            Zoom out
-          </button>
-        </label>
-
-        <input type="text" class="form-control" id="zoomOutKeyInput" placeholder="Example: alt+shift+x">
-      </div>
-
-      <div class="form-group">
-        <label for="zoomResetKeyInput">
-          <button id="zoomResetButton" class="btn btn-primary">
-            Reset zoom
-          </button>
-        </label>
-        <input type="text" class="form-control" id="zoomResetKeyInput" placeholder="Example: alt+shift+x">
+      <div class='currentZoomBox tac'>
+        <a class='btn btn-default zoomInButton'>+</a>
+        <span class='currentZoom'>100</span>
+        <a class='btn btn-default zoomOutButton'>-</a>
       </div>
+      <div class='verticalSpacer15'></div>
 
-      <div>
-        <small>
-          Special key names: shift, ctrl, alt, option, meta (windows key), command, backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, and del.
-        </small>
+      <div class='tac'>
+        <a class='btn btn-default zoomResetButton'>Reset</a>
       </div>
 
-      <div id='noticeBox'></div>
-      <div class='verticalSpacer15'></div>
-      <p class='tac'>
-        <button class='btn btn-primary' id='saveButton'>Save</button>
-        <span class='horizontalSpacer10'></span>
-        <button class='btn btn-primary' id='resetButton'>Reset Defaults</button>
-      </p>
+      <div class='verticalSpacer25'></div>
     </div>
 
     <script src="../bower_components/jquery/jquery.js"></script>

diff --git a/lib/popup.js b/lib/popup.js
diff --git a/src/js/popup.coffee b/src/js/popup.coffee
@@ -0,0 +1,10 @@
+dom =
+  zoomInButton: $('.zoomInButton')
+  zoomOutButton: $('.zoomOutButton')
+  zoomResetButton: $('.zoomResetButton')
+
+['in', 'out', 'reset'].forEach (type) ->
+  dom["zoom#{Util.capitalize(type)}Button"].click ->
+    chrome.extension.sendMessage key: Util.KEYS["ZOOM_#{type.toUpperCase()}_KEY"], (res) ->
+      chrome.tabs.executeScript
+        code: "Mousetrap.trigger('#{res.key}');"