fix(workflowengine): Fix multiple UI issues in workflow engine admin …

…settings

Signed-off-by: Joas Schilling <[email protected]>

apps/workflowengine/src/components/Check.vue

@@ -1,20 +1,20 @@
 <template>
 	<div v-click-outside="hideDelete" class="check" @click="showDelete">
-		<NcMultiselect ref="checkSelector"
+		<NcSelect ref="checkSelector"
 			v-model="currentOption"
 			:options="options"
 			label="name"
 			track-by="class"
-			:allow-empty="false"
+			:clearable="false"
 			:placeholder="t('workflowengine', 'Select a filter')"
 			@input="updateCheck" />
-		<NcMultiselect v-model="currentOperator"
+		<NcSelect v-model="currentOperator"
 			:disabled="!currentOption"
 			:options="operators"
 			class="comparator"
 			label="name"
 			track-by="operator"
-			:allow-empty="false"
+			:clearable="false"
 			:placeholder="t('workflowengine', 'Select a comparator')"
 			@input="updateCheck" />
 		<component :is="currentOption.component"
@@ -35,23 +35,33 @@
 			class="option"
 			@input="updateCheck">
 		<NcActions v-if="deleteVisible || !currentOption">
-			<NcActionButton icon="icon-close" @click="$emit('remove')" />
+			<NcActionButton :title="t('workflowengine', 'Remove filter')" @click="$emit('remove')">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+			</NcActionButton>
 		</NcActions>
 	</div>
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+
 import ClickOutside from 'vue-click-outside'
 
 export default {
 	name: 'Check',
 	components: {
 		NcActionButton,
 		NcActions,
-		NcMultiselect,
+		NcSelect,
+
+		// Icons
+		CloseIcon,
 	},
 	directives: {
 		ClickOutside,
@@ -151,45 +161,36 @@ export default {
 	.check {
 		display: flex;
 		flex-wrap: wrap;
+		align-items: flex-start; // to not stretch components vertically
 		width: 100%;
 		padding-right: 20px;
+
 		& > *:not(.close) {
 			width: 180px;
 		}
 		& > .comparator {
-			min-width: 130px;
-			width: 130px;
+			min-width: 200px;
+			width: 200px;
 		}
 		& > .option {
-			min-width: 230px;
-			width: 230px;
+			min-width: 260px;
+			width: 260px;
+			min-height: 48px;
+
+			& > input[type=text] {
+				min-height: 48px;
+			}
 		}
-		& > .multiselect,
+		& > .v-select,
+		& > .button-vue,
 		& > input[type=text] {
 			margin-right: 5px;
 			margin-bottom: 5px;
 		}
-
-		.multiselect::v-deep .multiselect__content-wrapper li>span,
-		.multiselect::v-deep .multiselect__single {
-			display: block;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
 	}
 	input[type=text] {
 		margin: 0;
 	}
-	::placeholder {
-		font-size: 10px;
-	}
-	button.action-item.action-item--single.icon-close {
-		height: 44px;
-		width: 44px;
-		margin-top: -5px;
-		margin-bottom: -5px;
-	}
 	.invalid {
 		border-color: var(--color-error) !important;
 	}

apps/workflowengine/src/components/Checks/FileMimeType.vue

@@ -21,48 +21,50 @@
   -->
 <template>
 	<div>
-		<NcMultiselect :value="currentValue"
+		<NcSelect :value="currentValue"
 			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
-			track-by="pattern"
 			:options="options"
-			:multiple="false"
-			:tagging="false"
+			:clearable="false"
 			@input="setValue">
-			<template slot="singleLabel" slot-scope="props">
-				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else
-					class="option__icon-img"
-					:src="props.option.iconUrl"
-					alt="">
-				<span class="option__title option__title_single">{{ props.option.label }}</span>
+			<template #option="option">
+				<span v-if="option.icon" class="option__icon" :class="option.icon" />
+				<span v-else class="option__icon-img">
+					<img :src="option.iconUrl" alt="">
+				</span>
+				<span class="option__title">
+					<NcEllipsisedOption :name="String(option.label)" />
+				</span>
 			</template>
-			<template slot="option" slot-scope="props">
-				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else
-					class="option__icon-img"
-					:src="props.option.iconUrl"
-					alt="">
-				<span class="option__title">{{ props.option.label }}</span>
+			<template #selected-option="selectedOption">
+				<span v-if="selectedOption.icon" class="option__icon" :class="selectedOption.icon" />
+				<span v-else class="option__icon-img">
+					<img :src="selectedOption.iconUrl" alt="">
+				</span>
+				<span class="option__title">
+					<NcEllipsisedOption :name="String(selectedOption.label)" />
+				</span>
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 		<input v-if="!isPredefined"
 			type="text"
-			:value="currentValue.pattern"
+			:value="currentValue.id"
 			:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
 			@input="updateCustom">
 	</div>
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import valueMixin from './../../mixins/valueMixin.js'
 import { imagePath } from '@nextcloud/router'
 
 export default {
 	name: 'FileMimeType',
 	components: {
-		NcMultiselect,
+		NcEllipsisedOption,
+		NcSelect,
 	},
 	mixins: [
 		valueMixin,
@@ -73,22 +75,22 @@ export default {
 				{
 					icon: 'icon-folder',
 					label: t('workflowengine', 'Folder'),
-					pattern: 'httpd/unix-directory',
+					id: 'httpd/unix-directory',
 				},
 				{
 					icon: 'icon-picture',
 					label: t('workflowengine', 'Images'),
-					pattern: '/image\\/.*/',
+					id: '/image\\/.*/',
 				},
 				{
 					iconUrl: imagePath('core', 'filetypes/x-office-document'),
 					label: t('workflowengine', 'Office documents'),
-					pattern: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
+					id: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
 				},
 				{
 					iconUrl: imagePath('core', 'filetypes/application-pdf'),
 					label: t('workflowengine', 'PDF documents'),
-					pattern: 'application/pdf',
+					id: 'application/pdf',
 				},
 			],
 		}
@@ -98,7 +100,7 @@ export default {
 			return [...this.predefinedTypes, this.customValue]
 		},
 		isPredefined() {
-			const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
+			const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
 			if (matchingPredefined) {
 				return true
 			}
@@ -108,18 +110,18 @@ export default {
 			return {
 				icon: 'icon-settings-dark',
 				label: t('workflowengine', 'Custom MIME type'),
-				pattern: '',
+				id: '',
 			}
 		},
 		currentValue() {
-			const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
+			const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
 			if (matchingPredefined) {
 				return matchingPredefined
 			}
 			return {
 				icon: 'icon-settings-dark',
 				label: t('workflowengine', 'Custom mimetype'),
-				pattern: this.newValue,
+				id: this.newValue,
 			}
 		},
 	},
@@ -131,7 +133,7 @@ export default {
 		},
 		setValue(value) {
 			if (value !== null) {
-				this.newValue = value.pattern
+				this.newValue = value.id
 				this.$emit('input', this.newValue)
 			}
 		},
@@ -143,24 +145,30 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.multiselect, input[type='text'] {
+.v-select,
+input[type='text'] {
 	width: 100%;
 }
-.multiselect::v-deep .multiselect__content-wrapper li > span,
-.multiselect::v-deep .multiselect__single {
-	display: flex;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+
+input[type=text] {
+	min-height: 48px;
 }
 
-.option__icon {
+.option__icon,
+.option__icon-img {
 	display: inline-block;
 	min-width: 30px;
-	background-position: left;
+	background-position: center;
+	vertical-align: middle;
 }
 
 .option__icon-img {
-	margin-right: 14px;
+	text-align: center;
+}
+
+.option__title {
+	display: inline-flex;
+	width: calc(100% - 36px);
+	vertical-align: middle;
 }
 </style>

apps/workflowengine/src/components/Checks/RequestTime.vue

@@ -12,23 +12,24 @@
 		<p v-if="!valid" class="invalid-hint">
 			{{ t('workflowengine', 'Please enter a valid time span') }}
 		</p>
-		<NcMultiselect v-show="valid"
+		<NcSelect v-show="valid"
 			v-model="newValue.timezone"
+			:clearable="false"
 			:options="timezones"
 			@input="update" />
 	</div>
 </template>
 
 <script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import moment from 'moment-timezone'
 import valueMixin from '../../mixins/valueMixin.js'
 
 const zones = moment.tz.names()
 export default {
 	name: 'RequestTime',
 	components: {
-		NcMultiselect,
+		NcSelect,
 	},
 	mixins: [
 		valueMixin,
@@ -112,6 +113,7 @@ export default {
 			width: 50%;
 			margin: 0;
 			margin-bottom: 5px;
+			min-height: 48px;
 
 			&.timeslot--start {
 				margin-right: 5px;