Various fixes relating to color customization

allenjhyang · Jan 23, 2015 · a0fd0f5 · a0fd0f5
1 parent b301177
commit a0fd0f5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/prioritab-bundle/prioritab.css b/prioritab-bundle/prioritab.css
@@ -217,7 +217,6 @@ input[type="text"]:focus {
 
 .edit-message {
     font-size: 0.8em;
-    color: white;
     margin-top: 10px;
 }
 
@@ -252,7 +251,7 @@ input[type="text"]:focus {
 }
 
 #color-selectors {
-    font-size: 0.75em;
+    font-size: 0.6em;
     display: none;
 }
 

diff --git a/prioritab-bundle/prioritab.html b/prioritab-bundle/prioritab.html
@@ -11,7 +11,6 @@
     <script src="lib/jquery.inlineedit.js"></script>
     <script src="lib/pubsub.js"></script>
     <script src="sortaeditalist.js"></script>
-    <script src="lib/spectrum.js"></script>
 
     <script src="lib/colpick.js"></script>
     <link rel='stylesheet' href='lib/colpick.css' />
@@ -72,9 +71,9 @@
                             <input class="todo" type="text" data-list="left" />
                             <input id="submit" type="submit" class="add-item-button" value="Add" data-list="left">
                         </form>
-                        <a href="#" id="clear-all-left" class="clear-all-link" data-list="left">Clear All</a>
+                        <a href="#" id="clear-all-left" class="clear-all-link shadow-color" data-list="left">Clear All</a>
                         |
-                        <a href="#" class="hide-edit">Hide</a>
+                        <a href="#" class="hide-edit shadow-color">Hide</a>
                         <div class="edit-message">(You can drag + drop listed priorities)</div>
                     </div>
                 </div>
@@ -96,9 +95,9 @@
                             <input class="todo" type="text" data-list="mid" />
                             <input id="submit" type="submit" class="add-item-button" value="Add" data-list="mid">
                         </form>
-                        <a href="#" id="clear-all-mid" class="clear-all-link" data-list="mid">Clear All</a>
+                        <a href="#" id="clear-all-mid" class="clear-all-link shadow-color" data-list="mid">Clear All</a>
                         |
-                        <a href="#" class="hide-edit">Hide</a>
+                        <a href="#" class="hide-edit shadow-color">Hide</a>
                         <div class="edit-message">(You can drag + drop listed priorities)</div>
                     </div>
                 </div>
@@ -120,9 +119,9 @@
                             <input class="todo" type="text" data-list="right" />
                             <input id="submit" type="submit" class="add-item-button" value="Add" data-list="right">
                         </form>
-                        <a href="#" id="clear-all-right" class="clear-all-link" data-list="right">Clear All</a>
+                        <a href="#" id="clear-all-right" class="clear-all-link shadow-color" data-list="right">Clear All</a>
                         |
-                        <a href="#" class="hide-edit">Hide</a>
+                        <a href="#" class="hide-edit shadow-color">Hide</a>
                         <div class="edit-message">(You can drag + drop listed priorities)</div>
                     </div>
                 </div>
@@ -135,7 +134,7 @@
     <div id="color-corner">
         <img id="color-button" src="gear_icon.png" />
         <div id="color-selectors">
-            <p id="color-corner-title"><em>Customize colors</em></p>
+            <p id="color-corner-title">Customize colors</p>
             <span id="background-color-selector" class="color-selector-label">Background ></span><span id="background-colpick"></span>
             <br />
             <span id="font-color-selector" class="color-selector-label">Font ></span>

diff --git a/prioritab-bundle/prioritab.js b/prioritab-bundle/prioritab.js
@@ -43,7 +43,7 @@ function CountdownMonthYear() {
 
 function ScrollMessage() {
     $('.shown-items').each(function(index) {
-        if ($(this).height() > 1 && $(this).height() > ($(this).parent().height() - 40)) {
+        if ($(this).height() > 1 && $(this).height() > ($(this).parent().height() - 50)) {
             $(this).parent().parent().siblings('.scroll-message').show();
         } else {
             $(this).parent().parent().siblings('.scroll-message').fadeOut();
@@ -69,7 +69,7 @@ window.onload = function() {
 
     chrome.storage.sync.get('user-shadow-color', function(result) {
         $('.shadow-color').css('color', (result['user-shadow-color']) ? result['user-shadow-color'] : 'grey');
-    });
+    }); // This code also occurs in sortaeditalist.js, when initializing the to-dos and when adding new to-dos
 
     $('.edit-priorities-link').click(function(e) {
         $('.edit-priorities').each(function(index) {
@@ -109,6 +109,7 @@ window.onload = function() {
         layout: 'full',
         submit: false,
         colorScheme: 'dark',
+        color: '#333333',
         onChange: function(hsb,hex,rgb,el,bySetColor) {
             $('body').css('background-color', '#' + hex);
             chrome.storage.sync.set({'user-background-color': '#' + hex});
@@ -123,6 +124,7 @@ window.onload = function() {
         layout: 'full',
         submit: false,
         colorScheme: 'dark',
+        color: '#FFFFFF',
         onChange: function(hsb,hex,rgb,el,bySetColor) {
             $('body').css('color', '#' + hex);
             chrome.storage.sync.set({'user-font-color': '#' + hex});
@@ -137,6 +139,7 @@ window.onload = function() {
         layout: 'full',
         submit: false,
         colorScheme: 'dark',
+        color: '#808080',
         onChange: function(hsb,hex,rgb,el,bySetColor) {
             $('.shadow-color').css('color', '#' + hex);
             chrome.storage.sync.set({'user-shadow-color': '#' + hex});

diff --git a/prioritab-bundle/sortaeditalist.js b/prioritab-bundle/sortaeditalist.js
@@ -72,6 +72,10 @@ $(function() {
             ScrollMessage();
         });
 
+        chrome.storage.sync.get('user-shadow-color', function(result) {
+            $('.shadow-color').css('color', (result['user-shadow-color']) ? result['user-shadow-color'] : 'grey');
+        });
+
     });
 
     // Add todo
@@ -229,6 +233,9 @@ $(function() {
             // Append a new list item with the value of the new todo list
             chrome.storage.sync.get(newTodoID, function(result) {
                 listToImpact.append("<li id='" + newTodoID + "'>" + result[newTodoID] + "&nbsp;&nbsp;&nbsp;<a href='#' class='shadow-color'>X</a></li>");
+                chrome.storage.sync.get('user-shadow-color', function(result) {
+                    $('.shadow-color').css('color', (result['user-shadow-color']) ? result['user-shadow-color'] : 'grey');
+                });
                 $('li a:visible').fadeOut();
 
                 $.publish('/regenerate-list/', []);