Merge pull request #7326 from nextcloud/bugfix/7319/only-render-emoji-picker-on-hover

Only render emoji picker on hover

2 files changed, 30 insertions, 2 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index d9ec96590..eb5e1203d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -839,6 +839,23 @@ describe('Message.vue', () => {
 			expect(reactionButtons.wrappers[1].text()).toBe('👍  7')
 		})
 
+		test('no emoji picker is mounted when the bottom bar is not shown', () => {
+			store = new Store(testStoreConfig)
+
+			const wrapper = shallowMount(Message, {
+				localVue,
+				store,
+				propsData: messageProps,
+				stubs: {
+					EmojiPicker,
+				},
+			})
+
+			const emojiPicker = wrapper.findComponent(EmojiPicker)
+
+			expect(emojiPicker.vm).toBeUndefined()
+		})
+
 		test('dispatches store action upon picking an emoji from the emojipicker', () => {
 			const addReactionToMessageAction = jest.fn()
 			const userHasReactedGetter = jest.fn().mockReturnValue(() => false)
@@ -856,10 +873,17 @@ describe('Message.vue', () => {
 			const wrapper = shallowMount(Message, {
 				localVue,
 				store,
-				propsData: messageProps,
+				propsData: messagePropsWithReactions,
 				stubs: {
 					EmojiPicker,
 				},
+				mixins: [{
+					computed: {
+						showMessageButtonsBar: () => {
+							return true
+						},
+					},
+				}],
 			})
 
 			const emojiPicker = wrapper.findComponent(EmojiPicker)
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 9b101c175..6c1f37c3e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -136,7 +136,7 @@ the main body of the message as well as a quote.
 				</Popover>
 
 				<!-- More reactions picker -->
-				<EmojiPicker v-if="canReact"
+				<EmojiPicker v-if="canReact && showMessageButtonsBar"
 					:per-line="5"
 					:container="`#message_${id}`"
 					@select="handleReactionClick">
@@ -144,6 +144,10 @@ the main body of the message as well as a quote.
 						<EmoticonOutline :size="15" />
 					</button>
 				</EmojiPicker>
+				<button v-else-if="canReact"
+					class="reaction-button">
+					<EmoticonOutline :size="15" />
+				</button>
 			</div>
 		</div>