Revise code as per FE and UX discussions

5 files changed, 26 insertions, 36 deletions

diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
index 418c3a39241..48e5ede80f2 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
@@ -23,13 +23,11 @@ export default {
 </script>
 
 <template>
-  <li>
-    <button
-      type="button"
-      class="btn menu-item"
-      @click="openModal"
-    >
-      {{ buttonText }}
-    </button>
-  </li>
+  <button
+    type="button"
+    class="btn menu-item"
+    @click="openModal"
+  >
+    {{ buttonText }}
+  </button>
 </template>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 9d2a0769add..1ba21bdae83 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -44,16 +44,15 @@ export default {
   },
   methods: {
     openModal() {
-      const emojiAutocomplete = new GfmAutoComplete();
-      emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
-
       this.$root.$emit('bv::show::modal', this.modalId);
     },
     closeModal() {
       this.$root.$emit('bv::hide::modal', this.modalId);
     },
-    loadEmojiList() {
+    setupEmojiListAndAutocomplete() {
       const toggleEmojiMenuButtonSelector = '#set-user-status-modal .js-toggle-emoji-menu';
+      const emojiAutocomplete = new GfmAutoComplete();
+      emojiAutocomplete.setup($(this.$refs.statusMessageField), { emojis: true });
 
       import(/* webpackChunkName: 'emoji' */ '~/emoji')
         .then(Emoji => {
@@ -151,9 +150,14 @@ export default {
   <gl-ui-modal
     :title="s__('SetStatusModal|Set a status')"
     :modal-id="modalId"
+    :ok-title="s__('SetStatusModal|Set status')"
+    :cancel-title="s__('SetStatusModal|Clear status')"
+    ok-variant="success"
     class="set-user-status-modal"
-    @shown="loadEmojiList"
+    @shown="setupEmojiListAndAutocomplete"
     @hide="hideEmojiMenu"
+    @ok="setStatus"
+    @cancel="clearStatus"
   >
     <div>
       <input
@@ -206,7 +210,7 @@ export default {
             class="form-control form-control input-lg js-status-message-field"
             name="user[status][message]"
             @keyup="setDefaultEmoji"
-            @keyup.enter="setStatus()"
+            @keyup.enter.prevent
             @click="hideEmojiMenu"
           />
           <span class="input-group-btn">
@@ -225,23 +229,5 @@ export default {
         </div>
       </div>
     </div>
-    <template slot="modal-footer">
-      <button
-        type="button"
-        class="btn js-modal-cancel-action"
-        data-dismiss="modal"
-        @click="clearStatus()"
-      >
-        {{ s__('SetStatusModal|Clear status') }}
-      </button>
-      <button
-        type="button"
-        class="btn btn-success js-modal-primary-action"
-        data-dismiss="modal"
-        @click="setStatus()"
-      >
-        {{ s__('SetStatusModal|Set status') }}
-      </button>
-    </template>
   </gl-ui-modal>
 </template>
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index db78af18631..9daf3928a35 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -545,8 +545,10 @@
       }
 
       .user-status-emoji {
+        margin-right: 0;
         display: block;
-        max-width: 140px;
+        vertical-align: text-top;
+        max-width: 148px;
         font-size: 12px;
       }
     }
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
index e046690b5e2..261d758622b 100644
--- a/app/views/layouts/header/_current_user_dropdown.html.haml
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -8,10 +8,11 @@
     - if current_user.status
       .user-status-emoji.str-truncated.has-tooltip{ title: current_user.status.message_html, data: { html: 'true', placement: 'bottom' } }
         = emoji_icon current_user.status.emoji
-        = current_user.status.message
+        = current_user.status.message_html.html_safe
   %li.divider
   - if can?(current_user, :update_user_status, current_user)
-    .js-set-status-modal-trigger{ data: { has_status: current_user.status.present? ? 'true' : 'false' } }
+    %li
+      .js-set-status-modal-trigger{ data: { has_status: current_user.status.present? ? 'true' : 'false' } }
   - if current_user_menu?(:profile)
     %li
       = link_to s_("CurrentUser|Profile"), current_user, class: 'profile-link', data: { user: current_user.username }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ad3ed85e9a0..fac87592f5f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2700,6 +2700,9 @@ msgstr ""
 msgid "Failed to check related branches."
 msgstr ""
 
+msgid "Failed to load emoji list!"
+msgstr ""
+
 msgid "Failed to remove issue from board, please try again."
 msgstr ""