Feature #29824 » 0001-Generates-a-color-from-the-user-s-ID-without-using-C.patch
| app/assets/stylesheets/application.css | ||
|---|---|---|
| 2241 | 2241 |
user-select: none; |
| 2242 | 2242 |
font-weight: 700; |
| 2243 | 2243 |
} |
| 2244 |
.avatar.s13 {
|
|
| 2245 |
block-size: 13px; |
|
| 2246 |
inline-size: 13px; |
|
| 2247 |
} |
|
| 2248 |
span[role="img"].avatar.s13 {
|
|
| 2249 |
font-size: calc(16px * .3); |
|
| 2250 |
} |
|
| 2251 |
.avatar.s16 {
|
|
| 2252 |
block-size: 16px; |
|
| 2253 |
inline-size: 16px; |
|
| 2254 |
} |
|
| 2255 |
span[role="img"].avatar.s16 {
|
|
| 2256 |
font-size: calc(16px * .4); |
|
| 2257 |
} |
|
| 2258 |
.avatar.s22 {
|
|
| 2259 |
block-size: 22px; |
|
| 2260 |
inline-size: 22px; |
|
| 2261 |
} |
|
| 2262 |
span[role="img"].avatar.s22 {
|
|
| 2263 |
font-size: calc(22px * .4); |
|
| 2264 |
} |
|
| 2265 |
.avatar.s24 {
|
|
| 2266 |
block-size: 24px; |
|
| 2267 |
inline-size: 24px; |
|
| 2268 |
} |
|
| 2269 |
span[role="img"].avatar.s24 {
|
|
| 2270 |
font-size: calc(24px * .4); |
|
| 2271 |
} |
|
| 2272 |
.avatar.s40 {
|
|
| 2273 |
block-size: 40px; |
|
| 2274 |
inline-size: 40px; |
|
| 2275 |
} |
|
| 2276 |
span[role="img"].avatar.s40 {
|
|
| 2277 |
font-size: calc(40px * .4); |
|
| 2278 |
} |
|
| 2279 |
.avatar.s50 {
|
|
| 2280 |
block-size: 50px; |
|
| 2281 |
inline-size: 50px; |
|
| 2282 |
} |
|
| 2283 |
span[role="img"].avatar.s50 {
|
|
| 2284 |
font-size: calc(50px * .4); |
|
| 2285 |
} |
|
| 2286 | ||
| 2287 |
.avatar-color-0 {
|
|
| 2288 |
background-color: #880000; |
|
| 2289 |
color: #FFFFFF; |
|
| 2290 |
} |
|
| 2291 |
.avatar-color-1 {
|
|
| 2292 |
background-color: #ff0000; |
|
| 2293 |
color: #000000; |
|
| 2294 |
} |
|
| 2295 |
.avatar-color-2 {
|
|
| 2296 |
background-color: #00ff00; |
|
| 2297 |
color: #000000; |
|
| 2298 |
} |
|
| 2299 |
.avatar-color-3 {
|
|
| 2300 |
background-color: #008800; |
|
| 2301 |
color: #FFFFFF; |
|
| 2302 |
} |
|
| 2303 |
.avatar-color-4 {
|
|
| 2304 |
background-color: #0000ff; |
|
| 2305 |
color: #FFFFFF; |
|
| 2306 |
} |
|
| 2307 |
.avatar-color-5 {
|
|
| 2308 |
background-color: #000088; |
|
| 2309 |
color: #FFFFFF; |
|
| 2310 |
} |
|
| 2311 |
.avatar-color-6 {
|
|
| 2312 |
background-color: #ff8800; |
|
| 2313 |
color: #000000; |
|
| 2314 |
} |
|
| 2315 |
.avatar-color-7 {
|
|
| 2316 |
background-color: #ff0088; |
|
| 2317 |
color: #000000; |
|
| 2318 |
} |
|
| 2319 | 2244 | |
| 2320 | 2245 |
/* Reaction styles */ |
| 2321 | 2246 |
.reaction-button:hover, .reaction-button:active {
|
| app/helpers/avatars_helper.rb | ||
|---|---|---|
| 58 | 58 |
nil |
| 59 | 59 |
end |
| 60 | 60 |
elsif user.respond_to?(:initials) |
| 61 |
size = options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size] |
|
| 62 |
css_class = "avatar-color-#{user.id % 8} avatar s#{size}"
|
|
| 61 |
size = (options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size]).to_i |
|
| 62 | ||
| 63 |
# Generate a color from the user's ID |
|
| 64 |
hue = (user.id * 137.508).modulo(360) # Using the golden angle for a good color distribution |
|
| 65 |
background_color = "hsl(#{hue}, 50%, 45%)"
|
|
| 66 |
text_color = "#FFFFFF" |
|
| 67 | ||
| 68 |
style = "width: #{size}px; height: #{size}px; font-size: #{size * 0.45}px; background-color: #{background_color}; color: #{text_color};"
|
|
| 69 | ||
| 70 |
css_class = "avatar" |
|
| 63 | 71 |
css_class += " #{options[:class]}" if options[:class]
|
| 64 |
content_tag('span', user.initials, role: 'img', class: css_class)
|
|
| 72 | ||
| 73 |
content_tag('span', user.initials, role: 'img', class: css_class, style: style)
|
|
| 65 | 74 |
else |
| 66 | 75 |
'' |
| 67 | 76 |
end |
