Improved colors for tags

This commit is contained in:
Alexander Meindl 2019-03-25 09:01:54 +01:00
parent 7afd4e6e37
commit 1824de6a3b
2 changed files with 28 additions and 13 deletions

View File

@ -1,3 +1,5 @@
require 'digest/md5'
module AdditionalsTagHelper
# deprecated: this will removed after a while
def render_additionals_tags_list(tags, options = {})
@ -59,20 +61,26 @@ module AdditionalsTagHelper
def additionals_tag_link(tag, options = {})
tag_name = []
tag_name << tag.name
if options[:show_count]
tag_name << ' '
tag_name << content_tag('span', "(#{tag.count})", class: 'tag-count')
unless options[:tags_without_color]
tag_bg_color = additionals_tag_color(tag.name)
tag_fg_color = additionals_tag_fg_color(tag_bg_color)
tag_style = "background-color: #{tag_bg_color}; color: #{tag_fg_color}"
end
tag_name << content_tag('span', "(#{tag.count})", class: 'tag-count') if options[:show_count]
if options[:tags_without_color]
content_tag('span',
link_to(safe_join(tag_name), additionals_tag_url(tag.name)),
class: 'tag-label')
else
content_tag('span',
link_to(safe_join(tag_name), additionals_tag_url(tag.name)),
link_to(safe_join(tag_name),
additionals_tag_url(tag.name),
style: tag_style),
class: 'additionals-tag-label-color',
style: "background-color: #{additionals_tag_color(tag.name)}")
style: tag_style)
end
end
@ -100,6 +108,16 @@ module AdditionalsTagHelper
end
def additionals_tag_color(tag_name)
"##{format('%06x', tag_name.unpack('H*').first.hex % 0xffffff)}"
"##{Digest::MD5.hexdigest(tag_name)[0..5]}"
end
def additionals_tag_fg_color(bg_color)
# calculate contrast text color according to YIQ method
# https://24ways.org/2010/calculating-color-contrast/
# https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
r = bg_color[1..2].hex
g = bg_color[3..4].hex
b = bg_color[5..6].hex
(r * 299 + g * 587 + b * 114) >= 128_000 ? 'black' : 'white'
end
end

View File

@ -177,8 +177,6 @@ td.tags span.additionals-tag-label-color {
.additionals-tag-label-color {
padding: 2px 4px;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
font-size: 10px !important;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 2px;
@ -190,15 +188,14 @@ td.tags span.additionals-tag-label-color {
font-weight: 900;
content: "\f02b"; /* fas fa-tag */
padding-right: 3px;
color: #fff;
}
ul.tags li { margin: 0.25em 0; }
.tag-count { font-size: 0.75em; }
.additionals-tag-label-color a {
color: white;
.additionals-tag-label-color .tag-count,
.tag-label .tag-count {
font-size: 0.75em;
margin-left: 0.5em;
}
span.additionals-tag-label-color:hover a {