Move to radio bubbles for fonts, add icon files

sfchronicle · Jun 14, 2016 · 9cf591c · 9cf591c
1 parent 7c16b8c
commit 9cf591c
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 15 deletions.
diff --git a/app.js b/app.js
@@ -27,17 +27,22 @@ var sizes = {
 
 var getSettings = function() {
   var settings = {};
-  var inputs = document.querySelectorAll("input, select");
+  var inputs = document.querySelectorAll("input[type=text], input[type=number], select");
   for (var i = 0; i < inputs.length; i++) {
     var input = inputs[i];
     settings[input.id] = input.value;
   }
+  var checkboxes = document.querySelectorAll("input:checked");
+  for (var i = 0; i < checkboxes.length; i++) {
+    var box = checkboxes[i];
+    settings[box.name] = box.value;
+  }
+  settings.size *= 1;
   return settings;
 }
 
 var render = function() {
   var settings = getSettings();
-  console.log(settings);
   document.querySelector(".preview-aspect").setAttribute("aspect-ratio", settings.aspect);
   var size = sizes[settings.aspect];
   canvas.width = size[0];

diff --git a/ic_format_align_center_black_18px.svg b/ic_format_align_center_black_18px.svg
diff --git a/ic_format_align_left_black_18px.svg b/ic_format_align_left_black_18px.svg
diff --git a/ic_format_align_right_black_18px.svg b/ic_format_align_right_black_18px.svg
diff --git a/ic_vertical_align_bottom_black_18px.svg b/ic_vertical_align_bottom_black_18px.svg
diff --git a/ic_vertical_align_center_black_18px.svg b/ic_vertical_align_center_black_18px.svg
diff --git a/ic_vertical_align_top_black_18px.svg b/ic_vertical_align_top_black_18px.svg
diff --git a/index.html b/index.html
@@ -40,22 +40,17 @@
             <option value="blue">Blue</option>
           </select>
         </div>
-        <div class="setting">
-          <label for="font">Font</label>
-          <select id="font">
-            <option value="ff-meta-serif-web-pro">Meta Serif</option>
-            <option value="ff-dagny-web-pro">Dagny</option>
-            <option value="Calibri">Calibri</option>
-            <option value="Georgia">Georgia</option>
-            <option value="Helvetica">Helvetica</option>
-            <option value="sans-serif">Sans serif</option>
-            <option value="serif">Serif</option>
-            <option value="monospace">Monospaced</option>
-          </select>
+        <div class="setting toggle-button">
+          <input type="radio" name="font" value="ff-meta-serif-web-pro" id="meta-serif" checked="checked">
+          <label for="meta-serif">Meta Serif</label>
+          <input type="radio" name="font" value="ff-dagny-web-pro" id="dagny">
+          <label for="dagny">Dagny</label>
+          <input type="radio" name="font" value="monospace" id="mono">
+          <label for="mono">Monospaced</label>
         </div>
         <div class="setting">
           <label for="size">Font size</label>
-          <input id="size" value="72">
+          <input type="number" id="size" value="72">
         </div>
         <a class="download" download="image.png">Download</a>
       </div>

diff --git a/style.css b/style.css
@@ -58,6 +58,36 @@ textarea {
   text-align: center;
 }
 
+.toggle-button {
+  display: flex;
+  border-bottom: none;
+}
+
+.toggle-button input {
+  display: none;
+}
+
+.toggle-button label[for] {
+  border: 1px solid #bbb;
+  border-right: none;
+  padding: 8px;
+}
+
+.toggle-button input:first-child + label[for] {
+  border-radius: 4px 0 0 4px;
+}
+
+.toggle-button label[for]:last-child {
+  border-right: 1px solid #bbb;
+  border-radius: 0 4px 4px 0;
+}
+
+.toggle-button input:checked + label {
+  font-weight: bold;
+  background: #333;
+  color: #eee;
+}
+
 .preview-container {
   flex: 1 1 50%;
   display: flex;