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>

7 files changed, 69 insertions, 30 deletions

diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index c77bdd4292a..fccabf4532b 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -78,9 +78,9 @@
 					{{ t('files_sharing', 'Allow resharing') }}
 				</NcActionCheckbox>
 
-				<NcActionCheckbox ref="canDownload"
+				<NcActionCheckbox v-if="isSetDownloadButtonVisible"
+					ref="canDownload"
 					:checked.sync="canDownload"
-					v-if="isSetDownloadButtonVisible"
 					:disabled="saving || !canSetDownload">
 					{{ allowDownloadText }}
 				</NcActionCheckbox>
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 613e286255e..5a706b153b9 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -39,8 +39,8 @@
 		{{ t('settings', 'For security reasons this password will only be shown once.') }}
 		<div class="app-password-row">
 			<label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label>
-			<input :value="loginName"
-				id="app-username"
+			<input id="app-username"
+				:value="loginName"
 				type="text"
 				class="monospaced"
 				readonly="readonly"
@@ -48,8 +48,8 @@
 		</div>
 		<div class="app-password-row">
 			<label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label>
-			<input ref="appPassword"
-				id="app-password"
+			<input id="app-password"
+				ref="appPassword"
 				:value="appPassword"
 				type="text"
 				class="monospaced"
diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js
index ce15fa4e87b..792b9123129 100644
--- a/apps/settings/src/store/users.js
+++ b/apps/settings/src/store/users.js
@@ -392,7 +392,7 @@ const actions = {
 	/**
 	 * Rename group
 	 *
-	 * @param {Object} context store context
+	 * @param {object} context store context
 	 * @param {string} groupid Group id
 	 * @param {string} displayName Group display name
 	 * @return {Promise}
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
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index ef911554a18..bc33d03014d 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -2,7 +2,6 @@
 	<div id="workflowengine">
 		<NcSettingsSection :title="t('workflowengine', 'Available flows')"
 			:doc-url="workflowDocUrl">
-
 			<p v-if="scope === 0" class="settings-hint">
 				<a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a>
 			</p>