diff options
| -rw-r--r-- | app/assets/javascripts/awards_handler.coffee | 52 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/awards.scss | 9 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 8 | ||||
| -rw-r--r-- | app/views/projects/notes/_note.html.haml | 2 | ||||
| -rw-r--r-- | spec/features/issues/award_spec.rb | 13 | ||||
| -rw-r--r-- | spec/features/merge_requests/award_spec.rb | 13 |
6 files changed, 59 insertions, 38 deletions
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index 96f271be4db..ff12cce4859 100644 --- a/app/assets/javascripts/awards_handler.coffee +++ b/app/assets/javascripts/awards_handler.coffee @@ -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 - $holder = $addBtn.closest('.js-award-holder') + $menu = $('.emoji-menu') - if $holder.find('.emoji-menu').length is 0 - $(".emoji-menu").detach().appendTo $holder + if $menu.length + $holder = $addBtn.closest('.js-award-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, => diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss index ef73e2f0a53..07d40f40556 100644 --- a/app/assets/stylesheets/pages/awards.scss +++ b/app/assets/stylesheets/pages/awards.scss @@ -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; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 025897ca1ff..feb42c36d31 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -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; diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml index bd478e315d1..0b4a084b9ae 100644 --- a/app/views/projects/notes/_note.html.haml +++ b/app/views/projects/notes/_note.html.haml @@ -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) diff --git a/spec/features/issues/award_spec.rb b/spec/features/issues/award_spec.rb index 46e1ed5d8cd..209d1cca176 100644 --- a/spec/features/issues/award_spec.rb +++ b/spec/features/issues/award_spec.rb @@ -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 diff --git a/spec/features/merge_requests/award_spec.rb b/spec/features/merge_requests/award_spec.rb index 91e76e83c6f..0f268bab5da 100644 --- a/spec/features/merge_requests/award_spec.rb +++ b/spec/features/merge_requests/award_spec.rb @@ -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 |