opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-24 02:04:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add colorFg function

Browse Source
This commit is contained in:
Helena Rasche
2018-12-04 18:56:45 +01:00
parent e6c4292fd5
commit 5865fe3513
3 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/mvc/history/history-item-li.js
+1 -1
View File
@@ -1,7 +1,7 @@
import Utils from "utils/utils";
function _templateNametag(tag) {
return `<span style="background-color: ${Utils.generateTagColor(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(tag.slice(5))}</span>`;
return `<span style="background-color: ${Utils.generateTagColor(tag.slice(5))}; color: ${Utils.generateTagColorFg(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(tag.slice(5))}</span>`;
}
function nametagTemplate(historyItem) {
client/galaxy/scripts/mvc/ui/ui-select-default.js
+1 -1
View File
@@ -208,7 +208,7 @@ var View = Backbone.View.extend({
${_.reduce(
filteredTags.slice(0, 5),
(memo, tag) => {
return `${memo}&nbsp;<div style="background-color: ${Utils.generateTagColor(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(
return `${memo}&nbsp;<div style="background-color: ${Utils.generateTagColor(tag.slice(5))}; color: ${Utils.generateTagColorFg(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(
tag
)}</div>`;
},
client/galaxy/scripts/utils/utils.js
+40 -9
View File
@@ -369,17 +369,47 @@ function hashFnv32a(str) {
return hval >>> 0;
}
export function generateTagColor(tagValue) {
//var r = (15 - ((hash & 0xf) % 6)).toString(16),
//g = (15 - (((hash & 0xf0) >> 4) % 6)).toString(16),
//b = (15 - (((hash & 0xf00) >> 8) % 6)).toString(16);
function contrastingColor(r, g, b) {
// Expects r, g, b as floats on range [0, 1]
// http://www.w3.org/TR/AERT#color-contrast
var o = ((r * 255 * 299) +
(g * 255 * 587) +
(b * 255 * 114)) / 1000;
return (o > 125) ? 'black' : 'white';
}
export function hashToTagColor(tagValue) {
var hash = hashFnv32a(tagValue);
var r = (((hash & 0x00f) >> 0) % 10),
g = (((hash & 0x0f0) >> 4) % 10),
b = (((hash & 0xf00) >> 8) % 10);
var r = ((hash & 0x00f) >> 0),
g = ((hash & 0x0f0) >> 4),
b = ((hash & 0xf00) >> 8);
return `#${r}${g}${b}`;
// Pastels
var r2 = 15 - (r % 6),
g2 = 15 - (g % 6),
b2 = 15 - (b % 6);
// All colours
//var r2 = r % 0xf,
//g2 = g % 0xf,
//b2 = b % 0xf;
// Not horribly dark
//var r2 = r % 0xa,
//g2 = g % 0xa,
//b2 = b % 0xa;
return [r2, g2, b2];
}
export function generateTagColor(tag) {
var [r, g, b] = hashToTagColor(tag)
return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
export function generateTagColorFg(tag) {
var [r, g, b] = hashToTagColor(tag)
return contrastingColor(r / 0xf, g / 0xf, b / 0xf)
}
@@ -403,5 +433,6 @@ export default {
appendScriptStyle: appendScriptStyle,
getQueryString: getQueryString,
setWindowTitle: setWindowTitle,
generateTagColor: generateTagColor
generateTagColor: generateTagColor,
generateTagColorFg: generateTagColorFg
};