diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2018-07-31 11:21:53 +0300 |
---|---|---|
committer | Winnie Hellmann <winnie@gitlab.com> | 2018-08-07 22:31:43 +0300 |
commit | 1c10e0147f51198c090af135c2a96f6f6077cebe (patch) | |
tree | 7395df7100a222353525e0ff3a4991881de791ae /app | |
parent | 313b79d87bd65864307e6864080e12bdbab7c4ab (diff) |
Restyle status message input on profile settings
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/awards_handler.js | 55 | ||||
-rw-r--r-- | app/assets/javascripts/pages/profiles/show/emoji_menu.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/pages/profiles/show/index.js | 49 | ||||
-rw-r--r-- | app/assets/stylesheets/bootstrap_migration.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/profile.scss | 20 | ||||
-rw-r--r-- | app/helpers/profiles_helper.rb | 4 | ||||
-rw-r--r-- | app/views/profiles/show.html.haml | 42 |
8 files changed, 162 insertions, 37 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 70f20c5c7cf..e34db893989 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -33,19 +33,24 @@ const categoryLabelMap = { const IS_VISIBLE = 'is-visible'; const IS_RENDERED = 'is-rendered'; -class AwardsHandler { +export class AwardsHandler { constructor(emoji) { this.emoji = emoji; this.eventListeners = []; + this.toggleButtonSelector = '.js-add-award'; + this.menuClass = 'js-award-emoji-menu'; + } + + bindEvents() { // If the user shows intent let's pre-build the menu this.registerEventListener( 'one', $(document), 'mouseenter focus', - '.js-add-award', + this.toggleButtonSelector, 'mouseenter focus', () => { - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); if ($menu.length === 0) { requestAnimationFrame(() => { this.createEmojiMenu(); @@ -53,7 +58,7 @@ class AwardsHandler { } }, ); - this.registerEventListener('on', $(document), 'click', '.js-add-award', e => { + this.registerEventListener('on', $(document), 'click', this.toggleButtonSelector, e => { e.stopPropagation(); e.preventDefault(); this.showEmojiMenu($(e.currentTarget)); @@ -61,15 +66,17 @@ class AwardsHandler { this.registerEventListener('on', $('html'), 'click', e => { const $target = $(e.target); - if (!$target.closest('.emoji-menu').length) { + if (!$target.closest(`.${this.menuClass}`).length) { $('.js-awards-block.current').removeClass('current'); - if ($('.emoji-menu').is(':visible')) { - $('.js-add-award.is-active').removeClass('is-active'); - this.hideMenuElement($('.emoji-menu')); + if ($(`.${this.menuClass}`).is(':visible')) { + $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); + this.hideMenuElement($(`.${this.menuClass}`)); } } }); - this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', e => { + + const emojiButtonSelector = `.js-awards-block .js-emoji-btn, .${this.menuClass} .js-emoji-btn`; + this.registerEventListener('on', $(document), 'click', emojiButtonSelector, e => { e.preventDefault(); const $target = $(e.currentTarget); const $glEmojiElement = $target.find('gl-emoji'); @@ -101,7 +108,7 @@ class AwardsHandler { $addBtn.closest('.js-awards-block').addClass('current'); } - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent(); const $userAuthored = this.isUserAuthored($addBtn); if ($menu.length) { @@ -118,7 +125,7 @@ class AwardsHandler { } else { $addBtn.addClass('is-loading is-active'); this.createEmojiMenu(() => { - const $createdMenu = $('.emoji-menu'); + const $createdMenu = $(`.${this.menuClass}`); $addBtn.removeClass('is-loading'); this.positionMenu($createdMenu, $addBtn); return setTimeout(() => { @@ -156,7 +163,7 @@ class AwardsHandler { } const emojiMenuMarkup = ` - <div class="emoji-menu"> + <div class="emoji-menu ${this.menuClass}"> <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" /> <div class="emoji-menu-content"> @@ -185,7 +192,7 @@ class AwardsHandler { // Avoid the jank and render the remaining categories separately // This will take more time, but makes UI more responsive - const menu = document.querySelector('.emoji-menu'); + const menu = document.querySelector(`.${this.menuClass}`); const emojiContentElement = menu.querySelector('.emoji-menu-content'); const remainingCategories = Object.keys(categoryMap).slice(1); const allCategoriesAddedPromise = remainingCategories.reduce( @@ -270,9 +277,9 @@ class AwardsHandler { if (isInVueNoteablePage() && !isMainAwardsBlock) { const id = votesBlock.attr('id').replace('note_', ''); - this.hideMenuElement($('.emoji-menu')); + this.hideMenuElement($(`.${this.menuClass}`)); - $('.js-add-award.is-active').removeClass('is-active'); + $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); const toggleAwardEvent = new CustomEvent('toggleAward', { detail: { awardName: emoji, @@ -291,9 +298,9 @@ class AwardsHandler { return typeof callback === 'function' ? callback() : undefined; }); - this.hideMenuElement($('.emoji-menu')); + this.hideMenuElement($(`.${this.menuClass}`)); - return $('.js-add-award.is-active').removeClass('is-active'); + return $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active'); } addAwardToEmojiBar(votesBlock, emoji, checkForMutuality) { @@ -321,7 +328,7 @@ class AwardsHandler { getVotesBlock() { if (isInVueNoteablePage()) { - const $el = $('.js-add-award.is-active').closest('.note.timeline-entry'); + const $el = $(`${this.toggleButtonSelector}.is-active`).closest('.note.timeline-entry'); if ($el.length) { return $el; @@ -458,7 +465,7 @@ class AwardsHandler { } createEmoji(votesBlock, emoji) { - if ($('.emoji-menu').length) { + if ($(`.${this.menuClass}`).length) { this.createAwardButtonForVotesBlock(votesBlock, emoji); } this.createEmojiMenu(() => { @@ -538,7 +545,7 @@ class AwardsHandler { this.searchEmojis(term); }); - const $menu = $('.emoji-menu'); + const $menu = $(`.${this.menuClass}`); this.registerEventListener('on', $menu, transitionEndEventString, e => { if (e.target === e.currentTarget) { // Clear the search @@ -608,7 +615,7 @@ class AwardsHandler { this.eventListeners.forEach(entry => { entry.element.off.call(entry.element, ...entry.args); }); - $('.emoji-menu').remove(); + $(`.${this.menuClass}`).remove(); } } @@ -616,7 +623,11 @@ let awardsHandlerPromise = null; export default function loadAwardsHandler(reload = false) { if (!awardsHandlerPromise || reload) { awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then( - Emoji => new AwardsHandler(Emoji), + Emoji => { + const awardsHandler = new AwardsHandler(Emoji); + awardsHandler.bindEvents(); + return awardsHandler; + }, ); } return awardsHandlerPromise; diff --git a/app/assets/javascripts/pages/profiles/show/emoji_menu.js b/app/assets/javascripts/pages/profiles/show/emoji_menu.js new file mode 100644 index 00000000000..094837b40e0 --- /dev/null +++ b/app/assets/javascripts/pages/profiles/show/emoji_menu.js @@ -0,0 +1,18 @@ +import { AwardsHandler } from '~/awards_handler'; + +class EmojiMenu extends AwardsHandler { + constructor(emoji, toggleButtonSelector, menuClass, selectEmojiCallback) { + super(emoji); + + this.selectEmojiCallback = selectEmojiCallback; + this.toggleButtonSelector = toggleButtonSelector; + this.menuClass = menuClass; + } + + postEmoji($emojiButton, awardUrl, selectedEmoji, callback) { + this.selectEmojiCallback(selectedEmoji, this.emoji.glEmojiTag(selectedEmoji)); + callback(); + } +} + +export default EmojiMenu; diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js new file mode 100644 index 00000000000..949219a0837 --- /dev/null +++ b/app/assets/javascripts/pages/profiles/show/index.js @@ -0,0 +1,49 @@ +import $ from 'jquery'; +import createFlash from '~/flash'; +import GfmAutoComplete from '~/gfm_auto_complete'; +import EmojiMenu from './emoji_menu'; + +document.addEventListener('DOMContentLoaded', () => { + const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu'; + const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector); + const statusEmojiField = document.getElementById('js-status-emoji-field'); + const statusMessageField = document.getElementById('js-status-message-field'); + const findNoEmojiPlaceholder = () => document.getElementById('js-no-emoji-placeholder'); + + const removeStatusEmoji = () => { + const statusEmoji = toggleEmojiMenuButton.querySelector('gl-emoji'); + if (statusEmoji) { + statusEmoji.remove(); + } + }; + + const selectEmojiCallback = (emoji, emojiTag) => { + statusEmojiField.value = emoji; + findNoEmojiPlaceholder().classList.add('hidden'); + removeStatusEmoji(); + toggleEmojiMenuButton.innerHTML += emojiTag; + }; + + const clearEmojiButton = document.getElementById('js-clear-user-status-button'); + clearEmojiButton.addEventListener('click', () => { + statusEmojiField.value = ''; + statusMessageField.value = ''; + removeStatusEmoji(); + findNoEmojiPlaceholder().classList.remove('hidden'); + }); + + const emojiAutocomplete = new GfmAutoComplete(); + emojiAutocomplete.setup($(statusMessageField), { emojis: true }); + + import(/* webpackChunkName: 'emoji' */ '~/emoji') + .then(Emoji => { + const emojiMenu = new EmojiMenu( + Emoji, + toggleEmojiMenuButtonSelector, + 'js-status-emoji-menu', + selectEmojiCallback, + ); + emojiMenu.bindEvents(); + }) + .catch(() => createFlash('Failed to load emoji list!')); +}); diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index d28ad407734..c20738a20c3 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -339,3 +339,13 @@ input[type=color].form-control { vertical-align: unset; } } + +// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet +.input-group-btn:first-child { + @extend .input-group-prepend; +} + +// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet +.input-group-btn:last-child { + @extend .input-group-append; +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 7fc2936c5e6..c369d89d63c 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -546,6 +546,7 @@ ul.notes { svg { @include btn-svg; + margin: 0; } .award-control-icon-positive, diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 5d0d59e12f2..b45e305897c 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -418,3 +418,23 @@ table.u2f-registrations { } } } + +.edit-user { + .clear-user-status { + svg { + fill: $gl-text-color-secondary; + } + } + + .emoji-menu-toggle-button { + @extend .note-action-button; + + .no-emoji-placeholder { + position: relative; + + svg { + fill: $gl-text-color-secondary; + } + } + } +} diff --git a/app/helpers/profiles_helper.rb b/app/helpers/profiles_helper.rb index a6a57db3002..e7aa92e6e5c 100644 --- a/app/helpers/profiles_helper.rb +++ b/app/helpers/profiles_helper.rb @@ -9,8 +9,4 @@ module ProfilesHelper end end end - - def show_user_status_field? - Feature.enabled?(:user_status_form) || cookies[:feature_user_status_form] == 'true' - end end diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml index e7044f722c5..6f08a294c5d 100644 --- a/app/views/profiles/show.html.haml +++ b/app/views/profiles/show.html.haml @@ -31,17 +31,37 @@ %hr = link_to _('Remove avatar'), profile_avatar_path, data: { confirm: _('Avatar will be removed. Are you sure?') }, method: :delete, class: 'btn btn-danger btn-inverted' - - if show_user_status_field? - %hr - .row - .col-lg-4.profile-settings-sidebar - %h4.prepend-top-0= s_("User|Current Status") - %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface. The message can contain emoji codes, too.") - .col-lg-8 - .row - = f.fields_for :status, @user.status do |status_form| - = status_form.text_field :emoji - = status_form.text_field :message, maxlength: 100 + %hr + .row + .col-lg-4.profile-settings-sidebar + %h4.prepend-top-0= s_("User|Current status") + %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.") + .col-lg-8 + = f.fields_for :status, @user.status do |status_form| + - emoji_button = button_tag type: :button, + class: 'js-toggle-emoji-menu emoji-menu-toggle-button btn has-tooltip', + title: s_("Profiles|Add status emoji") do + - if @user.status + = emoji_icon @user.status.emoji + %span#js-no-emoji-placeholder.no-emoji-placeholder{ class: ('hidden' if @user.status) } + = sprite_icon('emoji_slightly_smiling_face', css_class: 'award-control-icon-neutral') + = sprite_icon('emoji_smiley', css_class: 'award-control-icon-positive') + = sprite_icon('emoji_smile', css_class: 'award-control-icon-super-positive') + - reset_message_button = button_tag type: :button, + id: 'js-clear-user-status-button', + class: 'clear-user-status btn has-tooltip', + title: s_("Profiles|Clear status") do + = sprite_icon("close") + + = status_form.hidden_field :emoji, id: 'js-status-emoji-field' + = status_form.text_field :message, + id: 'js-status-message-field', + class: 'form-control input-lg', + label: s_("Profiles|Your status"), + prepend: emoji_button, + append: reset_message_button, + placeholder: s_("Profiles|What's your status?") + %hr .row .col-lg-4.profile-settings-sidebar |