Add all icons

ajsalminen · Dec 5, 2014 · 5bc91d5 · 5bc91d5
1 parent e1a2ad3
commit 5bc91d5
Show file tree

Hide file tree

Showing 25 changed files with 109 additions and 25 deletions.
diff --git a/assets/icons/evening.svg b/assets/icons/evening.svg
diff --git a/assets/icons/grey/in-a-month.png b/assets/icons/grey/in-a-month.png
diff --git a/assets/icons/grey/later-today.png b/assets/icons/grey/later-today.png
diff --git a/assets/icons/grey/next-week.png b/assets/icons/grey/next-week.png
diff --git a/assets/icons/grey/pick-date.png b/assets/icons/grey/pick-date.png
diff --git a/assets/icons/grey/someday.png b/assets/icons/grey/someday.png
diff --git a/assets/icons/grey/ten-seconds.png b/assets/icons/grey/ten-seconds.png
diff --git a/assets/icons/grey/this-evening.png b/assets/icons/grey/this-evening.png
diff --git a/assets/icons/grey/this-weekend.png b/assets/icons/grey/this-weekend.png
diff --git a/assets/icons/grey/tomorrow.png b/assets/icons/grey/tomorrow.png
diff --git a/assets/icons/white/in-a-month.png b/assets/icons/white/in-a-month.png
diff --git a/assets/icons/white/later-today.png b/assets/icons/white/later-today.png
diff --git a/assets/icons/white/next-week.png b/assets/icons/white/next-week.png
diff --git a/assets/icons/white/pick-date.png b/assets/icons/white/pick-date.png
diff --git a/assets/icons/white/someday.png b/assets/icons/white/someday.png
diff --git a/assets/icons/white/ten-seconds.png b/assets/icons/white/ten-seconds.png
diff --git a/assets/icons/white/this-evening.png b/assets/icons/white/this-evening.png
diff --git a/assets/icons/white/this-weekend.png b/assets/icons/white/this-weekend.png
diff --git a/assets/icons/white/tomorrow.png b/assets/icons/white/tomorrow.png
diff --git a/assets/psd/Button Icons.psd b/assets/psd/Button Icons.psd
diff --git a/assets/slides/Cover.pdf b/assets/slides/Cover.pdf
diff --git a/assets/slides/Cover.psd b/assets/slides/Cover.psd
diff --git a/options/options.js b/options/options.js
@@ -160,6 +160,8 @@ function clearAll() {
                 $(this).remove();
             });
         });
+
+        $("#clear-all").prop('disabled', true);
     }
 }
 
@@ -175,4 +177,8 @@ function clearEntry(tab, entry) {
             $(this).remove();
         });
     });
+
+    if(snoozedTabs["tabCount"] == 0) {
+        $("#clear-all").prop('disabled', true);
+    }
 }
diff --git a/popup/popup.css b/popup/popup.css
@@ -11,6 +11,10 @@ button:focus {
     outline: none;
 }
 
+/**
+ * Snooze Buttons Layout
+ */
+
 #snooze-buttons {
     width: 16.5em;
     height: 16.5em;
@@ -60,14 +64,100 @@ button:focus {
     color: white;
 }
 
-#snooze-buttons button img {
-    height: 40%;
-    width: 40%;
+#snooze-buttons button .button-image {
+    height: 40px;
+    width: 40px;
 
     display: block;
-    margin: 12% auto;
+    margin: 6px auto;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100%;
+}
+
+/**
+ * Snooze Buttons Custom
+ */
+
+#ten-seconds .button-image {
+    background-image: url("/assets/icons/grey/ten-seconds.png");
+}
+
+#ten-seconds:active .button-image {
+    background-image: url("/assets/icons/white/ten-seconds.png");
+}
+
+#later-today .button-image {
+    background-image: url("/assets/icons/grey/later-today.png");
+    background-size: 75% !important;
+}
+
+#later-today:active .button-image {
+    background-image: url("/assets/icons/white/later-today.png");
+}
+
+#this-evening .button-image {
+    background-image: url("/assets/icons/grey/this-evening.png");
+}
+
+#this-evening:active .button-image {
+    background-image: url("/assets/icons/white/this-evening.png");
+}
+
+#tomorrow .button-image {
+    background-image: url("/assets/icons/grey/tomorrow.png");
+}
+
+#tomorrow:active .button-image {
+    background-image: url("/assets/icons/white/tomorrow.png");
+}
+
+#this-weekend .button-image {
+    background-image: url("/assets/icons/grey/this-weekend.png");
+}
+
+#this-weekend:active .button-image {
+    background-image: url("/assets/icons/white/this-weekend.png");
+}
+
+#next-week .button-image {
+    background-image: url("/assets/icons/grey/next-week.png");
+}
+
+#next-week:active .button-image {
+    background-image: url("/assets/icons/white/next-week.png");
+}
+
+#in-a-month .button-image {
+    background-image: url("/assets/icons/grey/in-a-month.png");
+    background-size: 80% !important;
+}
+
+#in-a-month:active .button-image {
+    background-image: url("/assets/icons/white/in-a-month.png");
+}
+
+#someday .button-image {
+    background-image: url("/assets/icons/grey/someday.png");
+}
+
+#someday:active .button-image {
+    background-image: url("/assets/icons/white/someday.png");
 }
 
+#pick-date .button-image {
+    background-image: url("/assets/icons/grey/pick-date.png");
+}
+
+#pick-date:active .button-image {
+    background-image: url("/assets/icons/white/pick-date.png");
+}
+
+/**
+ * Status Bar
+ */
+
 #status-bar {
     overflow: auto;
     padding: 0.8em 0.6em;

diff --git a/popup/popup.html b/popup/popup.html
@@ -8,21 +8,21 @@
 <body>
     <table id="snooze-buttons">
         <tr>
-            <td><button type="button" id="ten-seconds">10 Seconds</button></td>
-            <td><button type="button" id="later-today">Later Today</button></td>
-            <td><button type="button" id="this-evening"><img src="/assets/icons/evening.svg">This Evening</button></td>
+            <td><button type="button" id="ten-seconds"><div class="button-image"></div>10 Seconds</button></td>
+            <td><button type="button" id="later-today"><div class="button-image"></div>Later Today</button></td>
+            <td><button type="button" id="this-evening"><div class="button-image"></div>This Evening</button></td>
         </tr>
 
         <tr>
-            <td><button type="button" id="tomorrow">Tomorrow</button></td>
-            <td><button type="button" id="this-weekend">This Weekend</button></td>
-            <td><button type="button" id="next-week">Next Week</button></td>
+            <td><button type="button" id="tomorrow"><div class="button-image"></div>Tomorrow</button></td>
+            <td><button type="button" id="this-weekend"><div class="button-image"></div>This Weekend</button></td>
+            <td><button type="button" id="next-week"><div class="button-image"></div>Next Week</button></td>
         </tr>
 
         <tr>
-            <td><button type="button" id="in-a-month">In a Month</button></td>
-            <td><button type="button" id="someday">Someday</button></td>
-            <td><button type="button" id="pick-date">Pick Date</button></td>
+            <td><button type="button" id="in-a-month"><div class="button-image"></div>In a Month</button></td>
+            <td><button type="button" id="someday"><div class="button-image"></div>Someday</button></td>
+            <td><button type="button" id="pick-date"><div class="button-image"></div>Pick Date</button></td>
         </tr>
     </table>