diff options
author | Zeger-Jan van de Weg <zegerjan@gitlab.com> | 2016-05-11 23:49:47 +0300 |
---|---|---|
committer | Zeger-Jan van de Weg <zegerjan@gitlab.com> | 2016-05-11 23:58:01 +0300 |
commit | 2bbe781d8b45fb9677f5fbe60cf86b2452ef3af4 (patch) | |
tree | f8b5d588fe4b1a41792551c34d6005cb51ae49d5 | |
parent | 4558b5b9fe9f648903ad0dc01089e6118fe0af34 (diff) |
revert front end changes
-rw-r--r-- | app/assets/javascripts/awards_handler.coffee | 312 | ||||
-rw-r--r-- | app/assets/javascripts/dispatcher.js.coffee | 2 | ||||
-rw-r--r-- | app/assets/javascripts/lib/emoji_aliases.js.coffee.erb | 9 | ||||
-rw-r--r-- | app/assets/javascripts/notes.js.coffee | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/awards.scss | 13 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 41 |
6 files changed, 147 insertions, 236 deletions
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index 043ad697dfe..bf95e06b4e5 100644 --- a/app/assets/javascripts/awards_handler.coffee +++ b/app/assets/javascripts/awards_handler.coffee @@ -1,169 +1,126 @@ class @AwardsHandler - constructor: -> - @aliases = emojiAliases() + constructor: (@getEmojisUrl, @postEmojiUrl, @noteableType, @noteableId, @unicodes) -> + $('.js-add-award').on 'click', (event) => + event.stopPropagation() + event.preventDefault() - $(document) - .off "click", ".js-add-award" - .on "click", ".js-add-award", (event) => - event.stopPropagation() - event.preventDefault() + @showEmojiMenu() - @showEmojiMenu $(event.currentTarget) + $('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() diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index e00ca2984b9..f91aa3c5ad7 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/app/assets/javascripts/dispatcher.js.coffee @@ -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() diff --git a/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb b/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb deleted file mode 100644 index e005ab3684e..00000000000 --- a/app/assets/javascripts/lib/emoji_aliases.js.coffee.erb +++ /dev/null @@ -1,9 +0,0 @@ -((w) -> - - w.gl ?= {} - w.gl.emoji ?= {} - - w.gl.emoji.emojiAliases = -> - JSON.parse('<%= Gitlab::AwardEmoji.aliases.to_json %>') - -) window
\ No newline at end of file diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee index e8a92b8012d..efb3e8e2198 100644 --- a/app/assets/javascripts/notes.js.coffee +++ b/app/assets/javascripts/notes.js.coffee @@ -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 diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss index 07d40f40556..37bf38fa65d 100644 --- a/app/assets/stylesheets/pages/awards.scss +++ b/app/assets/stylesheets/pages/awards.scss @@ -1,4 +1,6 @@ .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; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 8ad47a50541..624c8249f7e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -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; |