From 2f30d3227f8af0a0c79b139f1cfbd334ca94e0d3 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Fri, 12 Aug 2022 11:42:51 +0200
Subject: Various fixes

- Fix user status dialog
  - Add label where missing
  - Move emoji picker inside input field (similar to talk)
  - Fix selecting an emoji
- Fix multiselect
- Fix button with confirmation action
- Fix some other unrelated dark theme issues
- Fix select2 focus
- Run npm lint:fix

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 apps/user_status/src/components/ClearAtSelect.vue  |  7 ++--
 .../src/components/CustomMessageInput.vue          | 43 ++++++++++++++++++++--
 apps/user_status/src/components/SetStatusModal.vue | 34 +++++++++--------
 3 files changed, 62 insertions(+), 22 deletions(-)

(limited to 'apps/user_status/src')

diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue
index a2779389691..620b72a3a41 100644
--- a/apps/user_status/src/components/ClearAtSelect.vue
+++ b/apps/user_status/src/components/ClearAtSelect.vue
@@ -21,10 +21,11 @@
 
 <template>
 	<div class="clear-at-select">
-		<span class="clear-at-select__label">
+		<label class="clear-at-select__label" for="clearStatus">
 			{{ $t('user_status', 'Clear status after') }}
-		</span>
-		<NcMultiselect label="label"
+		</label>
+		<NcMultiselect id="clearStatus"
+			label="label"
 			:value="option"
 			:options="options"
 			open-direction="top"
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue
index 88956e6871b..f9cf34b917a 100644
--- a/apps/user_status/src/components/CustomMessageInput.vue
+++ b/apps/user_status/src/components/CustomMessageInput.vue
@@ -19,8 +19,12 @@
   -
   -->
 <template>
-	<form class="custom-input__form"
-		@submit.prevent>
+	<div class="custom-input__form">
+		<NcEmojiPicker container=".custom-input__form" @select="setIcon">
+			<NcButton class="custom-input__emoji-button" type="tertiary-no-background">
+				{{ visibleIcon }}
+			</NcButton>
+		</NcEmojiPicker>
 		<input ref="input"
 			maxlength="80"
 			:disabled="disabled"
@@ -31,12 +35,19 @@
 			@keyup="change"
 			@paste="change"
 			@keyup.enter="submit">
-	</form>
+	</div>
 </template>
 
 <script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.vue'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.vue'
+
 export default {
 	name: 'CustomMessageInput',
+	components: {
+		NcButton,
+		NcEmojiPicker,
+	},
 	props: {
 		message: {
 			type: String,
@@ -48,6 +59,21 @@ export default {
 			default: false,
 		},
 	},
+	emits: [
+		'change',
+		'submit',
+		'icon-selected',
+	],
+	computed: {
+		/**
+		 * Returns the user-set icon or a smiley in case no icon is set
+		 *
+		 * @return {string}
+		 */
+		visibleIcon() {
+			return this.icon || '😀'
+		},
+	},
 	methods: {
 		focus() {
 			this.$refs.input.focus()
@@ -65,6 +91,10 @@ export default {
 		submit(event) {
 			this.$emit('submit', event.target.value)
 		},
+
+		setIcon(event) {
+			this.$emit('icon-selected', event)
+		},
 	},
 }
 </script>
@@ -72,10 +102,17 @@ export default {
 <style lang="scss" scoped>
 .custom-input__form {
 	flex-grow: 1;
+	position: relative;
+
+	.v-popover {
+		position: absolute;
+		top: 4px;
+	}
 
 	input {
 		width: 100%;
 		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+		padding-left: 44px !important;
 	}
 }
 </style>
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index 4584bd3c849..ed6854b2bb1 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -41,15 +41,11 @@
 				<h3>{{ $t('user_status', 'Status message') }}</h3>
 			</div>
 			<div class="set-status-modal__custom-input">
-				<NcEmojiPicker @select="setIcon">
-					<button class="custom-input__emoji-button">
-						{{ visibleIcon }}
-					</button>
-				</NcEmojiPicker>
 				<CustomMessageInput ref="customMessageInput"
 					:message="message"
 					@change="setMessage"
-					@submit="saveStatus" />
+					@submit="saveStatus"
+					@iconSelected="setIcon" />
 			</div>
 			<PredefinedStatusesList @select-status="selectPredefinedMessage" />
 			<ClearAtSelect :clear-at="clearAt"
@@ -76,9 +72,18 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+<<<<<<< HEAD
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+||||||| parent of f456d3bb0f (Various fixes)
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
+=======
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
+>>>>>>> f456d3bb0f (Various fixes)
 import { getAllStatusOptions } from '../services/statusOptionsService'
 import OnlineStatusMixin from '../mixins/OnlineStatusMixin'
 import PredefinedStatusesList from './PredefinedStatusesList'
@@ -92,8 +97,15 @@ export default {
 	components: {
 		ClearAtSelect,
 		CustomMessageInput,
+<<<<<<< HEAD
 		NcEmojiPicker,
 		NcModal,
+||||||| parent of f456d3bb0f (Various fixes)
+		EmojiPicker,
+		Modal,
+=======
+		Modal,
+>>>>>>> f456d3bb0f (Various fixes)
 		OnlineStatusSelect,
 		PredefinedStatusesList,
 		NcButton,
@@ -110,16 +122,6 @@ export default {
 			statuses: getAllStatusOptions(),
 		}
 	},
-	computed: {
-		/**
-		 * Returns the user-set icon or a smiley in case no icon is set
-		 *
-		 * @return {string}
-		 */
-		visibleIcon() {
-			return this.icon || '😀'
-		},
-	},
 
 	/**
 	 * Loads the current status when a user opens dialog
-- 
cgit v1.2.3