Commit 3a196317 authored by connorshea's avatar connorshea

Add "sprite" parameter to emoji_icon helper

The emoji_icon helper used to display the award emoji in Issue and
Merge Request views. By default the spritesheet is used, but passing
`sprite: false` to the `emoji_icon` helper makes the emoji render as
separate images.

For award emoji displayed by default (e.g. thumbs-up, thumbs-down, and
any that have been awarded to the issue/MR) the independent images are
used. Only when the full emoji menu is opened does the full spritesheet
load.

On a normal issue this change decreases the page load by 670KB or 250KB
depending on pixel density.

Resolves #14334.
parent 8419f355
Please view this file on the master branch, on stable branches it's out of date. Please view this file on the master branch, on stable branches it's out of date.
v 8.7.0 (unreleased) v 8.7.0 (unreleased)
- Load award emoji images separately unless opening the full picker. Saves several hundred KBs of data for most pages. (Connor Shea)
- All images in discussions and wikis now link to their source files !3464 (Connor Shea). - All images in discussions and wikis now link to their source files !3464 (Connor Shea).
- Return status code 303 after a branch DELETE operation to avoid project deletion (Stan Hu) - Return status code 303 after a branch DELETE operation to avoid project deletion (Stan Hu)
- Improved Markdown rendering performance !3389 (Yorick Peterse) - Improved Markdown rendering performance !3389 (Yorick Peterse)
......
...@@ -115,17 +115,32 @@ module IssuesHelper ...@@ -115,17 +115,32 @@ module IssuesHelper
icon('eye-slash') if issue.confidential? icon('eye-slash') if issue.confidential?
end end
def emoji_icon(name, unicode = nil, aliases = []) def emoji_icon(name, unicode = nil, aliases = [], sprite: true)
unicode ||= Emoji.emoji_filename(name) rescue "" unicode ||= Emoji.emoji_filename(name) rescue ""
content_tag :div, "", data = {
class: "icon emoji-icon emoji-#{unicode}", aliases: aliases.join(" "),
title: name,
data: {
aliases: aliases.join(' '),
emoji: name, emoji: name,
unicode_name: unicode unicode_name: unicode
} }
if sprite
# Emoji icons for the emoji menu, these use a spritesheet.
content_tag :div, "",
class: "icon emoji-icon emoji-#{unicode}",
title: name,
data: data
else
# Emoji icons displayed separately, used for the awards already given
# to an issue or merge request.
content_tag :img, "",
class: "icon emoji",
title: name,
height: "20px",
width: "20px",
src: url_to_image("#{unicode}.png"),
data: data
end
end end
def emoji_author_list(notes, current_user) def emoji_author_list(notes, current_user)
......
.awards.votes-block .awards.votes-block
- awards_sort(votable.notes.awards.grouped_awards).each do |emoji, notes| - awards_sort(votable.notes.awards.grouped_awards).each do |emoji, notes|
%button.btn.award-control.js-emoji-btn.has-tooltip{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user), data: {placement: "top"}} %button.btn.award-control.js-emoji-btn.has-tooltip{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user), data: {placement: "top"}}
= emoji_icon(emoji) = emoji_icon(emoji, sprite: false)
%span.award-control-text.js-counter %span.award-control-text.js-counter
= notes.count = notes.count
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment