Adding configurable font options.

cezarsa · Feb 8, 2010 · f2f0d5c · f2f0d5c
1 parent 0347f11
commit f2f0d5c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 4 deletions.
diff --git a/background.html b/background.html
@@ -78,7 +78,9 @@
     favorites_tweets_color: 'rgba(0, 0, 0, 0)',
 
     notification_fade_timeout: 6000,
-    theme: 'css/chromified.css,css/chromified-theme/jquery-ui-1.7.2.custom.css'
+    theme: 'css/chromified.css,css/chromified-theme/jquery-ui-1.7.2.custom.css',
+    font_family: 'Helvetica, Arial, sans-serif',
+    font_size: '1.0em'
   },
   cachedOptions: null,
   save: function(optionsMap) {

diff --git a/css/chromified-theme/jquery-ui-1.7.2.custom.css b/css/chromified-theme/jquery-ui-1.7.2.custom.css
@@ -48,7 +48,7 @@
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Segoe UI, Lucida Sans Unicode, Lucida Sans, Helvetica, Arial, sans-serif; font-size: 1.0em; }
+.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.0em; }
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
 .ui-widget-content { border: 1px solid #dddddd; background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; }
 .ui-widget-header { border: 1px solid #aed0ea; background: #deedf7 url(images/ui-bg_highlight-soft_100_deedf7_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; margin-bottom: 3px;}

diff --git a/css/darkness-theme/jquery-ui-1.7.2.custom.css b/css/darkness-theme/jquery-ui-1.7.2.custom.css
@@ -48,7 +48,7 @@
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Segoe UI, Lucida Sans Unicode, Lucida Sans, Helvetica, Arial, sans-serif; font-size: 1em; }
+.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1em; }
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Segoe UI, Arial, sans-serif; font-size: 1em; }
 .ui-widget-content { border: 1px solid #666666; background: #000000 url(images/ui-bg_inset-soft_25_000000_1x100.png) 50% bottom repeat-x; color: #ffffff; }
 .ui-widget-content a { color: #ffffff; }

diff --git a/css/whisper-theme/jquery-ui-1.7.2.custom.css b/css/whisper-theme/jquery-ui-1.7.2.custom.css
@@ -48,7 +48,7 @@
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Lucida Sans Unicode, Lucida Sans, Helvetica, Arial, sans-serif; font-size: 1.0em; }
+.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.0em; }
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
 .ui-widget-content { border: 1px solid #8e846b; background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x; color: #000000; }
 .ui-widget-header { border: 1px solid #827635; background: #f2ed97 url(images/ui-bg_gloss-wave_45_f2ed97_500x100.png) 50% 50% repeat-x; color: #000000; font-weight: bold; margin-bottom: 3px;}

diff --git a/options.html b/options.html
@@ -338,12 +338,23 @@ <h1>Chromed Bird Options</h1>
       <option value="top">Top</option>
       <option value="bottom">Bottom</option>
     </select><br>
+
     <label for="theme">UI Theme:</label>
     <select name="theme">
       <option value="css/chromified.css,css/chromified-theme/jquery-ui-1.7.2.custom.css">Chromified</option>
       <option value="css/whisper.css,css/whisper-theme/jquery-ui-1.7.2.custom.css">Whispers</option>
       <option value="css/darkness-theme/jquery-ui-1.7.2.custom.css,css/darkness.css">Darkness</option>
     </select><br>
+    <label for="font_size">Font Size:</label>
+    <select name="font_size">
+      <option value="0.8em">Small</option>
+      <option value="1.0em">Normal</option>
+      <option value="1.2em">Large</option>
+      <option value="1.4em">Extra Large</option>
+    </select><br>
+    <label for="font_family">Font Family:</label>
+    <input type="text" style="width: 20em"; name="font_family" validator="required"><br>
+
     <label for="hover_timeout">Hover to read time (ms):</label>
     <input type="text" name="hover_timeout" validator="required,number,positive"><br>
     <label for="show_expanded_urls">Expand shortened URLs:</label>

diff --git a/popup.html b/popup.html
@@ -117,6 +117,19 @@
     $(theme.split(",")).each(function(i, p) {
       $("<link rel='stylesheet' type='text/css' class='theme' href='" + p + "'>").appendTo(document.head);
     });
+    var baseRules = document.styleSheets[0].cssRules;
+    if(baseRules && baseRules.length) {
+      var fontFamily = OptionsBackend.get('font_family');
+      var fontSize = OptionsBackend.get('font_size');
+      for(var i = 0, len = baseRules.length; i < len; ++i) {
+        var rule = baseRules[i];
+        if(rule.selectorText == ".tweet") {
+          rule.style.fontFamily = fontFamily;
+          rule.style.fontSize = fontSize;
+          break;
+        }
+      }
+    }
   }
 }