Improved colors for tags
This commit is contained in:
parent
7afd4e6e37
commit
1824de6a3b
@ -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
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user