kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Adds the emoji menu to the body and then re-positions it depending on which button clicked

Browse source 
This spots bugs where the menu could be in a div that has overflow hidden on ie. diff comments
This commit is contained in:
Phil Hughes 2016-04-01 18:18:45 +01:00 committed by Fatih Acet
parent bf96c30510
commit 783a5ae98c
6 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/assets/javascripts/awards_handler.coffee
View file

@ -13,6 +13,7 @@ class @AwardsHandler
$("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"
$(document)
@ -22,10 +23,13 @@ class @AwardsHandler
handleClick: (e) =>
e.preventDefault()
$emojiBtn = $(e.currentTarget)
$votesBlock = $($emojiBtn.closest('.js-award-holder').data('target'))
$addAwardBtn = $('.js-add-award.is-active')
$votesBlock = $($addAwardBtn.closest('.js-award-holder').data('target'))
if $votesBlock.length is 0
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'
@ -35,32 +39,56 @@ class @AwardsHandler
@addAward awardUrl, emoji
showEmojiMenu: ($addBtn) ->
if $(".emoji-menu").length
$menu = $('.emoji-menu')
if $menu.length
$holder = $addBtn.closest('.js-award-holder')
if $holder.find('.emoji-menu').length is 0
$(".emoji-menu").detach().appendTo $holder
if $(".emoji-menu").is ".is-visible"
$(".emoji-menu").removeClass "is-visible"
if $menu.is ".is-visible"
$addBtn.removeClass "is-active"
$menu.removeClass "is-visible"
$("#emoji_search").blur()
else
$(".emoji-menu").addClass "is-visible"
$addBtn.addClass "is-active"
@positionMenu($menu, $addBtn)
$menu.addClass "is-visible"
$("#emoji_search").focus()
else
$addBtn.addClass "is-loading"
$addBtn.addClass "is-loading is-active"
$.get $addBtn.data('award-menu-url'), (response) =>
$addBtn.removeClass "is-loading"
$addBtn.closest('.js-award-holder').append response
$('body').append response
$menu = $(".emoji-menu")
@positionMenu($menu, $addBtn)
@renderFrequentlyUsedBlock()
setTimeout =>
$(".emoji-menu").addClass "is-visible"
$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 = @normilizeEmojiName(emoji)
@postEmoji awardUrl, emoji, =>

9
app/assets/stylesheets/pages/awards.scss
View file

@ -7,8 +7,6 @@
.emoji-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 3px;
z-index: 1000;
min-width: 160px;
@ -21,7 +19,12 @@
opacity: 0;
transform: scale(.2);
transform-origin: 0 -45px;
transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
transition: .3s cubic-bezier(.87,-.41,.19,1.44);
transition-property: transform, opacity;
&.is-aligned-right {
transform-origin: 100% -45px;
}
&.is-visible {
pointer-events: all;

8
app/assets/stylesheets/pages/notes.scss
View file

@ -280,14 +280,6 @@ ul.notes {
}
}
.note-action-award-holder {
.emoji-menu {
left: auto;
right: -15px;
transform-origin: 100% -45px;
}
}
.note-award-control {
display: block;

2
app/views/projects/notes/_note.html.haml
View file

@ -12,7 +12,7 @@
.note-actions
- if current_user
.award-menu-holder.note-action-award-holder.js-award-holder.js-award-action-btn{ data: { target: "##{dom_id(note)} .js-awards-block" } }
= link_to '#', title: 'Award emoji', class: 'note-award-control js-add-award', data: { award_menu_url: emojis_path } do
= link_to '#', title: 'Award emoji', class: 'note-award-control js-add-award', data: { award_menu_url: emojis_path, position: "right" } do
= icon('smile-o', {class: "award-control-icon award-control-icon-normal"})
= icon('spinner spin', {class: "award-control-icon award-control-icon-loading"})
- if note_editable?(note)

13
spec/features/issues/award_spec.rb
View file

@ -46,8 +46,9 @@ feature 'Issue awards', js: true, feature: true do
page.within('.note') do
find('.js-add-award').click
expect(page).to have_selector('.emoji-menu', count: 1)
end
expect(page).to have_selector('.emoji-menu', count: 1)
end
it 'should add award to note' do
@ -117,16 +118,14 @@ feature 'Issue awards', js: true, feature: true do
def show_note_award_menu
page.within('.note') do
find('.js-add-award').click
expect(page).to have_selector('.emoji-menu')
end
expect(page).to have_selector('.emoji-menu')
end
def award_on_note(index = 1)
page.within('.note') do
page.within('.emoji-menu') do
buttons = all('.js-emoji-btn')
buttons[index].click
end
page.within('.emoji-menu') do
buttons = all('.js-emoji-btn')
buttons[index].click
end
end

13
spec/features/merge_requests/award_spec.rb
View file

@ -46,8 +46,9 @@ feature 'Merge request awards', js: true, feature: true do
page.within('.note') do
find('.js-add-award').click
expect(page).to have_selector('.emoji-menu', count: 1)
end
expect(page).to have_selector('.emoji-menu', count: 1)
end
it 'should add award to note' do
@ -117,16 +118,14 @@ feature 'Merge request awards', js: true, feature: true do
def show_note_award_menu
page.within('.note') do
find('.js-add-award').click
expect(page).to have_selector('.emoji-menu')
end
expect(page).to have_selector('.emoji-menu')
end
def award_on_note(index = 1)
page.within('.note') do
page.within('.emoji-menu') do
buttons = all('.js-emoji-btn')
buttons[index].click
end
page.within('.emoji-menu') do
buttons = all('.js-emoji-btn')
buttons[index].click
end
end