v/mailhops-plugin
1
0
Fork 0
mirror of https://github.com/MailHops/mailhops-plugin.git synced 2025-05-17 23:00:10 -07:00
Code Issues Releases Wiki Activity

Added color options for MailHops bar

Browse Source
This commit is contained in:
Andrew Van Tassel 2017-01-08 11:08:41 -07:00
parent 859febe07f
commit f7a0ec9d1a
3 changed files with 78 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
chrome/content/preferences.js
View File

@ -99,6 +99,10 @@ var mailHopPreferences = {
document.getElementById("mailhop.font_size").addEventListener("input", function () { document.getElementById("mailhop.font_size").addEventListener("input", function () {
self.previewBar.style.fontSize = this.value; self.previewBar.style.fontSize = this.value;
}); });
document.getElementById("randomColorHue").addEventListener("change", function () {
self.RandomColor(this.value);
});
}, },
savePreferences: function() { savePreferences: function() {
pref.setCharPref("mail.mailHops.lang", document.getElementById("mailhop.lang").selectedItem.value); pref.setCharPref("mail.mailHops.lang", document.getElementById("mailhop.lang").selectedItem.value);
@ -234,12 +238,31 @@ var mailHopPreferences = {
this.api_host.value='api.mailhops.com'; this.api_host.value='api.mailhops.com';
}, },
ResetDisplay: function(){ ResetDisplay: function(bar,font,size){
document.getElementById("mailhop.bar_color").value = '#5E7A9B'; if(bar){
document.getElementById("mailhop.font_color").value = '#FFF'; if(bar.indexOf('rgb(')===0)
document.getElementById("mailhop.font_size").value = '14px'; document.getElementById("mailhop.bar_color").value = this.rgb2hex(bar);
else
document.getElementById("mailhop.bar_color").value = bar;
}
if(font) {
if(font.indexOf('rgb(')===0)
document.getElementById("mailhop.font_color").value = this.rgb2hex(font);
else
document.getElementById("mailhop.font_color").value = font;
}
if(size) document.getElementById("mailhop.font_size").value = size;
this.previewBar.style.background = document.getElementById("mailhop.bar_color").value; this.previewBar.style.background = document.getElementById("mailhop.bar_color").value;
this.previewBar.style.color = document.getElementById("mailhop.font_color").value; this.previewBar.style.color = document.getElementById("mailhop.font_color").value;
this.previewBar.style.fontSize = document.getElementById("mailhop.font_size").value; this.previewBar.style.fontSize = document.getElementById("mailhop.font_size").value;
},
rgb2hex: function(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
} }
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}; };

52
chrome/content/preferences.xul
View File

@ -13,8 +13,6 @@
<script type="application/x-javascript" src="chrome://mailhops/content/utils.js"/> <script type="application/x-javascript" src="chrome://mailhops/content/utils.js"/>
<script type="application/x-javascript" src="chrome://mailhops/content/preferences.js"/> <script type="application/x-javascript" src="chrome://mailhops/content/preferences.js"/>
<!-- <image src="chrome://mailhops/content/images/mailhops-logo.png" width="200"/> -->
<vbox width="400px"> <vbox width="400px">
<tabbox id="mhTabs" selectedIndex="0"> <tabbox id="mhTabs" selectedIndex="0">
@ -490,7 +488,9 @@
<image src="chrome://mailhops/content/images/mailhops32.png" width="32" height="32"/> <image src="chrome://mailhops/content/images/mailhops32.png" width="32" height="32"/>
MailHops Bar MailHops Bar
</description> </description>
<div height="20"></div> <div height="20"></div>
<grid> <grid>
<columns> <columns>
<column/> <column/>
@ -499,10 +499,55 @@
<row> <row>
<label value="Bar Color"></label> <label value="Bar Color"></label>
<textbox id="mailhop.bar_color" value="#5E7A9B" placeholder="Enter a hex color code"/> <textbox id="mailhop.bar_color" value="#5E7A9B" placeholder="Enter a hex color code"/>
<grid>
<columns>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
</columns>
<rows>
<row>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e8e8e8"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #c9c9c9"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #afafaf"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #a9e0f2"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #5cade0"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #84e8af"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #569603"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #f7e7bb"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #f2a232"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #fff1cc"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e8f28c"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #d1994b"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #754947"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e7c0f9"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #53067c"></div>
</row>
</rows>
</grid>
</row> </row>
<row> <row>
<label value="Font Color"></label> <label value="Font Color"></label>
<textbox id="mailhop.font_color" value="#FFF" placeholder="Enter a hex color code"/> <textbox id="mailhop.font_color" value="#FFF" placeholder="Enter a hex color code"/>
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(null,this.style.backgroundColor);" style="cursor: pointer; background-color: #ffffff"></div>
<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(null,this.style.backgroundColor);" style="cursor: pointer; background-color: #000000"></div>
</row>
</rows>
</grid>
</row> </row>
<row> <row>
<label value="Font Size"></label> <label value="Font Size"></label>
@ -510,10 +555,11 @@
</row> </row>
<row> <row>
<span></span> <span></span>
<button onclick="mailHopPreferences.ResetDisplay();" style="text-align:center;">Reset Display</button> <button onclick="mailHopPreferences.ResetDisplay('#5E7A9B','#FFF','14px');" style="text-align:center;">Reset Display</button>
</row> </row>
</rows> </rows>
</grid> </grid>
</groupbox> </groupbox>
</tabpanel> </tabpanel>