Skip to content

G
gitlab-ce
Commit 2bbe781d authored by Zeger-Jan van de Weg's avatar Zeger-Jan van de Weg
Browse files
Options

revert front end changes

parent 4558b5b9
Show whitespace changes
Inline Side-by-side
Showing with 147 additions and 236 deletions
app/assets/javascripts/awards_handler.coffee
View file @ 2bbe781d
class @AwardsHandler
constructor: ->
@aliases = emojiAliases()
$(document)
.off "click", ".js-add-award"
.on "click", ".js-add-award", (event) =>
constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) ->
$('.js-add-award').on 'click', (event) =>
event.stopPropagation()
event.preventDefault()
@showEmojiMenu $(event.currentTarget)
@showEmojiMenu()
$('html').on 'click', (event) ->
if !$(event.target).closest('.emoji-menu').length
if $('.emoji-menu').is(':visible')
$('.emoji-menu').removeClass 'is-visible'
$("html").on 'click', (event) ->
if !$(event.target).closest(".emoji-menu").length
if $(".emoji-menu").is(":visible")
$('.js-add-award.is-active').removeClass 'is-active'
$(".emoji-menu").removeClass "is-visible"
$('.awards')
.off 'click'
.on 'click', '.js-emoji-btn', @handleClick
$(document)
.off "click", ".js-emoji-btn"
.on "click", ".js-emoji-btn", @handleClick
@renderFrequentlyUsedBlock()
handleClick: (e) =>
handleClick: (e) ->
e.preventDefault()
$emojiBtn = $(e.currentTarget)
$addAwardBtn = $('.js-add-award.is-active')
$votesBlock = $($addAwardBtn.closest('.js-award-holder').data('target'))
if $addAwardBtn.length is 0
$votesBlock = $emojiBtn.closest('.js-awards-block')
else if $votesBlock.length is 0
$votesBlock = $addAwardBtn.closest('.js-awards-block')
$votesBlock.addClass 'js-awards-block-current'
awardUrl = $votesBlock.data 'award-url'
emoji = $emojiBtn
.find(".icon")
.data "emoji"
@addAward awardUrl, emoji
showEmojiMenu: ($addBtn) ->
$menu = $('.emoji-menu')
if $menu.length
$holder = $addBtn.closest('.js-award-holder')
if $menu.is ".is-visible"
$addBtn.removeClass "is-active"
$menu.removeClass "is-visible"
$("#emoji_search").blur()
else
$addBtn.addClass "is-active"
@positionMenu($menu, $addBtn)
emoji = $(this)
.find('.icon')
.data 'emoji'
$menu.addClass "is-visible"
$("#emoji_search").focus()
else
$addBtn.addClass "is-loading is-active"
$.get $addBtn.data('award-menu-url'), (response) =>
$addBtn.removeClass "is-loading"
$('body').append response
if emoji is 'thumbsup' and awardsHandler.didUserClickEmoji $(this), 'thumbsdown'
awardsHandler.addAward 'thumbsdown'
$menu = $(".emoji-menu")
else if emoji is 'thumbsdown' and awardsHandler.didUserClickEmoji $(this), 'thumbsup'
awardsHandler.addAward 'thumbsup'
@positionMenu($menu, $addBtn)
awardsHandler.addAward emoji
@renderFrequentlyUsedBlock()
$(this).trigger 'blur'
didUserClickEmoji: (that, emoji) ->
if $(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title')
$(that).siblings("button:has([data-emoji=#{emoji}])").attr('data-original-title').indexOf('me') > -1
showEmojiMenu: ->
if $('.emoji-menu').length
if $('.emoji-menu').is '.is-visible'
$('.emoji-menu').removeClass 'is-visible'
$('#emoji_search').blur()
else
$('.emoji-menu').addClass 'is-visible'
$('#emoji_search').focus()
else
$('.js-add-award').addClass 'is-loading'
$.get @getEmojisUrl, (response) =>
$('.js-add-award').removeClass 'is-loading'
$('.js-award-holder').append response
setTimeout =>
$menu.addClass "is-visible"
$("#emoji_search").focus()
$('.emoji-menu').addClass 'is-visible'
$('#emoji_search').focus()
@setupSearch()
, 200
positionMenu: ($menu, $addBtn) ->
position = $addBtn.data('position')
# The menu could potentially be off-screen or in a hidden overflow element
# So we position the element absolute in the body
css =
top: "#{$addBtn.offset().top + $addBtn.outerHeight()}px"
if position? and position is 'right'
css.left = "#{($addBtn.offset().left - $menu.outerWidth()) + 20}px"
$menu.addClass "is-aligned-right"
else
css.left = "#{$addBtn.offset().left}px"
$menu.removeClass "is-aligned-right"
$menu.css(css)
addAward: (awardUrl, emoji) ->
emoji = @normalizeEmojiName(emoji)
@postEmoji awardUrl, emoji, =>
addAward: (emoji) ->
@postEmoji emoji, =>
@addAwardToEmojiBar(emoji)
$('.js-awards-block-current').removeClass 'js-awards-block-current'
$(".emoji-menu").removeClass "is-visible"
$('.emoji-menu').removeClass 'is-visible'
addAwardToEmojiBar: (emoji) ->
@addEmojiToFrequentlyUsedList(emoji)
emoji = @normalizeEmojiName(emoji)
$emojiBtn = @findEmojiIcon(emoji).parent()
if $emojiBtn.length > 0
if @isActive($emojiBtn)
@decrementCounter($emojiBtn, emoji)
if @exist(emoji)
if @isActive(emoji)
@decrementCounter(emoji)
else
$counter = $emojiBtn.find('.js-counter')
$counter.text(parseInt($counter.text()) + 1)
$emojiBtn.addClass("active")
@addMeToUserList(emoji)
counter = @findEmojiIcon(emoji).siblings('.js-counter')
counter.text(parseInt(counter.text()) + 1)
counter.parent().addClass('active')
@addMeToAuthorList(emoji)
else
@createEmoji(emoji)
isActive: ($emojiBtn) ->
$emojiBtn.hasClass("active")
decrementCounter: ($emojiBtn, emoji) ->
$awardsBlock = $emojiBtn.closest('.js-awards-block')
isntNoteBody = $emojiBtn.closest('.note-body').length is 0
counter = $('.js-counter', $emojiBtn)
counterNumber = parseInt(counter.text())
if counterNumber > 1
counter.text(counterNumber - 1)
@removeMeFromUserList($emojiBtn, emoji)
else if (emoji == "thumbsup" || emoji == "thumbsdown") && isntNoteBody
$emojiBtn.tooltip("destroy")
counter.text('0')
@removeMeFromUserList($emojiBtn, emoji)
exist: (emoji) ->
@findEmojiIcon(emoji).length > 0
isActive: (emoji) ->
@findEmojiIcon(emoji).parent().hasClass('active')
decrementCounter: (emoji) ->
counter = @findEmojiIcon(emoji).siblings('.js-counter')
emojiIcon = counter.parent()
if parseInt(counter.text()) > 1
counter.text(parseInt(counter.text()) - 1)
emojiIcon.removeClass('active')
@removeMeFromAuthorList(emoji)
else if emoji == 'thumbsup' || emoji == 'thumbsdown'
emojiIcon.tooltip('destroy')
counter.text(0)
emojiIcon.removeClass('active')
@removeMeFromAuthorList(emoji)
else
$emojiBtn.tooltip("destroy")
$emojiBtn.remove()
$emojiBtn.removeClass("active")
if !isntNoteBody and $awardsBlock.children('.js-emoji-btn').length is 0
# If this is a note body, we just hide the award emoji row like the initial state
$awardsBlock.addClass 'hidden'
removeMeFromUserList: ($emojiBtn, emoji) ->
award_block = $emojiBtn
authors = award_block
.attr("data-original-title")
.split(", ")
authors.splice(authors.indexOf("me"),1)
award_block
.closest(".js-emoji-btn")
.attr("data-original-title", authors.join(", "))
@resetTooltip(award_block)
addMeToUserList: (emoji) ->
award_block = @findEmojiIcon(emoji).parent()
origTitle = award_block.attr("data-original-title").trim()
users = []
emojiIcon.tooltip('destroy')
emojiIcon.remove()
removeMeFromAuthorList: (emoji) ->
awardBlock = @findEmojiIcon(emoji).parent()
authors = awardBlock
.attr('data-original-title')
.split(', ')
authors.splice(authors.indexOf('me'),1)
awardBlock
.closest('.js-emoji-btn')
.attr('data-original-title', authors.join(', '))
@resetTooltip(awardBlock)
addMeToAuthorList: (emoji) ->
awardBlock = @findEmojiIcon(emoji).parent()
origTitle = awardBlock.attr('data-original-title').trim()
authors = []
if origTitle
users = origTitle.split(', ')
users.push("me")
award_block.attr("title", users.join(", "))
@resetTooltip(award_block)
authors = origTitle.split(', ')
authors.push('me')
awardBlock.attr('data-original-title', authors.join(', '))
@resetTooltip(awardBlock)
resetTooltip: (award) ->
award.tooltip("destroy")
award.tooltip('destroy')
# "destroy" call is asynchronous and there is no appropriate callback on it, this is why we need to set timeout.
setTimeout (->
......@@ -174,84 +131,85 @@ class @AwardsHandler
createEmoji: (emoji) ->
emojiCssClass = @resolveNameToCssClass(emoji)
buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
<span class='award-control-text js-counter'>1</span>
</button>"
emoji_node = $(buttonHtml)
.insertBefore(".js-awards-block-current .js-award-holder:not(.js-award-action-btn)")
.find(".emoji-icon")
.data("emoji", emoji)
nodes = []
nodes.push(
"<button class='btn award-control js-emoji-btn has-tooltip active' data-original-title='me'>",
"<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
"<span class='award-control-text js-counter'>1</span>",
"</button>"
)
$(nodes.join("\n"))
.insertBefore('.js-award-holder')
.find('.emoji-icon')
.data('emoji', emoji)
$('.award-control').tooltip()
$currentBlock = $('.js-awards-block-current')
if $currentBlock.is('.hidden')
$currentBlock.removeClass 'hidden'
resolveNameToCssClass: (emoji) ->
emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
emojiIcon = $(".emoji-menu-content [data-emoji='#{emoji}']")
if emoji_icon.length > 0
unicodeName = emoji_icon.data("unicode-name")
if emojiIcon.length > 0
unicodeName = emojiIcon.data('unicode-name')
else
# Find by alias
unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")
unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data('unicode-name')
"emoji-#{unicodeName}"
postEmoji: (awardUrl, emoji, callback) ->
$.post awardUrl, { name: emoji }, (data) ->
postEmoji: (emoji, callback) ->
$.post @postEmojiUrl, { note: {
note: ":#{emoji}:"
noteable_type: @noteableType
noteable_id: @noteableId
}},(data) ->
if data.ok
callback.call()
findEmojiIcon: (emoji) ->
$(".js-awards-block-current.awards > .js-emoji-btn [data-emoji='#{emoji}']")
$(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
scrollToAwards: ->
$('body, html').animate({
scrollTop: $('.awards').offset().top - 80
}, 200)
normalizeEmojiName: (emoji) ->
@aliases[emoji] || emoji
addEmojiToFrequentlyUsedList: (emoji) ->
frequently_used_emojis = @getFrequentlyUsedEmojis()
frequently_used_emojis.push(emoji)
$.cookie('frequently_used_emojis', frequently_used_emojis.join(","), { expires: 365 })
frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
frequentlyUsedEmojis.push(emoji)
$.cookie('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 })
getFrequentlyUsedEmojis: ->
frequently_used_emojis = ($.cookie('frequently_used_emojis') || "").split(",")
_.compact(_.uniq(frequently_used_emojis))
frequentlyUsedEmojis = ($.cookie('frequently_used_emojis') || '').split(',')
_.compact(_.uniq(frequentlyUsedEmojis))
renderFrequentlyUsedBlock: ->
if $.cookie('frequently_used_emojis')
frequently_used_emojis = @getFrequentlyUsedEmojis()
frequentlyUsedEmojis = @getFrequentlyUsedEmojis()
ul = $("<ul class='clearfix emoji-menu-list'>")
ul = $('<ul>')
for emoji in frequently_used_emojis
$(".emoji-menu-content [data-emoji='#{emoji}']").closest("li").clone().appendTo(ul)
for emoji in frequentlyUsedEmojis
do (emoji) ->
$(".emoji-menu-content [data-emoji='#{emoji}']").closest('li').clone().appendTo(ul)
$("input.emoji-search").after(ul).after($("<h5>").text("Frequently used"))
$('input.emoji-search').after(ul).after($('<h5>').text('Frequently used'))
setupSearch: ->
$("input.emoji-search").on 'keyup', (ev) =>
$('input.emoji-search').keyup (ev) =>
term = $(ev.target).val()
# Clean previous search results
$("ul.emoji-menu-search, h5.emoji-search").remove()
$('ul.emoji-menu-search, h5.emoji-search').remove()
if term
# Generate a search result block
h5 = $("<h5>").text("Search results").addClass("emoji-search")
found_emojis = @searchEmojis(term).show()
ul = $("<ul>").addClass("emoji-menu-list emoji-menu-search").append(found_emojis)
$(".emoji-menu-content ul, .emoji-menu-content h5").hide()
$(".emoji-menu-content").append(h5).append(ul)
h5 = $('<h5>').text('Search results').addClass('emoji-search')
foundEmojis = @searchEmojis(term).show()
ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis)
$('.emoji-menu-content ul, .emoji-menu-content h5').hide()
$('.emoji-menu-content').append(h5).append(ul)
else
$(".emoji-menu-content").children().show()
$('.emoji-menu-content').children().show()
searchEmojis: (term)->
$(".emoji-menu-content [data-emoji*='#{term}']").closest("li").clone()
app/assets/javascripts/dispatcher.js.coffee
View file @ 2bbe781d
......@@ -23,7 +23,6 @@ class Dispatcher
new Issue()
shortcut_handler = new ShortcutsIssuable()
new ZenMode()
awards_handler = new AwardsHandler()
when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
new Milestone()
when 'dashboard:todos:index'
......@@ -54,7 +53,6 @@ class Dispatcher
new Diff()
shortcut_handler = new ShortcutsIssuable(true)
new ZenMode()
awards_handler = new AwardsHandler()
when "projects:merge_requests:diffs"
new Diff()
new ZenMode()
......
app/assets/javascripts/lib/emoji_aliases.js.coffee.erb deleted 100644 → 0
View file @ 4558b5b9
((w) ->
w.gl ?= {}
w.gl.emoji ?= {}
w.gl.emoji.emojiAliases = ->
JSON.parse('<%= Gitlab::AwardEmoji.aliases.to_json %>')
) window
\ No newline at end of file
app/assets/javascripts/notes.js.coffee
View file @ 2bbe781d
......@@ -162,13 +162,13 @@ class @Notes
renderNote: (note) ->
unless note.valid
if note.award
flash = new Flash('You have already awarded this emoji, it has been removed', 'alert')
flash = new Flash('You have already used this award emoji!', 'alert')
flash.pinTo('.header-content')
return
if note.award
awards_handler.addAwardToEmojiBar(note.name)
awards_handler.scrollToAwards()
awardsHandler.addAwardToEmojiBar(note.note)
awardsHandler.scrollToAwards()
# render note if it not present in loaded list
# or skip if rendered
......
app/assets/stylesheets/pages/awards.scss
View file @ 2bbe781d
.awards {
line-height: 34px;
.emoji-icon {
width: 20px;
height: 20px;
......@@ -7,6 +9,8 @@
.emoji-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 3px;
z-index: 1000;
min-width: 160px;
......@@ -19,12 +23,7 @@
opacity: 0;
transform: scale(.2);
transform-origin: 0 -45px;
transition: .3s cubic-bezier(.87,-.41,.19,1.44);
transition-property: transform, opacity;
&.is-aligned-right {
transform-origin: 100% -45px;
}
transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
&.is-visible {
pointer-events: all;
......@@ -108,7 +107,7 @@
}
&.is-loading {
.award-control-icon-normal {
.award-control-icon {
display: none;
}
......
app/assets/stylesheets/pages/notes.scss
View file @ 2bbe781d
......@@ -63,8 +63,7 @@ ul.notes {
&.is-editting {
.note-header,
.note-text,
.edited-text,
.note-awards {
.edited-text {
display: none;
}
......@@ -74,6 +73,8 @@ ul.notes {
}
.note-body {
overflow: auto;
.note-text {
overflow: auto;
word-wrap: break-word;
......@@ -323,42 +324,6 @@ ul.notes {
}
}
.note-award-control {
display: block;
&:hover,
&:focus {
text-decoration: none;
}
.award-control-icon-loading {
display: none;
}
&.is-loading {
.award-control-icon-normal {
display: none;
}
.award-control-icon-loading {
display: block;
}
}
}
.note-awards {
.awards {
padding-top: 10px;
}
.award-control {
padding-top: 2px;
padding-bottom: 2px;
color: #8f8f8f;
font-size: 13px;
}
}
.disabled-comment {
margin-left: -$gl-padding-top;
margin-right: -$gl-padding-top;
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7