Design fixes

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/workflowengine/src/components/Check.vue

@@ -35,7 +35,7 @@
 			class="option"
 			@input="updateCheck">
 		<Actions v-if="deleteVisible || !currentOption">
-			<ActionButton icon="icon-delete" @click="$emit('remove')" />
+			<ActionButton icon="icon-close" @click="$emit('remove')" />
 		</Actions>
 	</div>
 </template>
@@ -139,7 +139,7 @@ export default {
 		flex-wrap: wrap;
 		width: 100%;
 		padding-right: 20px;
-		& > *:not(.icon-delete) {
+		& > *:not(.close) {
 			width: 180px;
 		}
 		& > .comparator {
@@ -170,14 +170,12 @@ export default {
 	::placeholder {
 		font-size: 10px;
 	}
-	.icon-delete {
+	button.action-item.action-item--single.icon-close {
+		height: 44px;
+		width: 44px;
 		margin-top: -5px;
 		margin-bottom: -5px;
 	}
-	button.action-item.action-item--single.icon-delete {
-		height: 34px;
-		width: 34px;
-	}
 	.invalid {
 		border: 1px solid var(--color-error) !important;
 	}

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

@@ -55,7 +55,10 @@ export default {
 			type: String,
 			required: true
 		},
-		value: {},
+		value: {
+			type: [String, Array],
+			default: null
+		},
 		disabled: {
 			type: Boolean,
 			default: false

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

@@ -1,6 +1,5 @@
 <template>
 	<div class="timeslot">
-		<Multiselect v-model="newValue.timezone" :options="timezones" @input="update" />
 		<input v-model="newValue.startTime"
 			type="text"
 			class="timeslot--start"
@@ -13,6 +12,10 @@
 		<p v-if="!valid" class="invalid-hint">
 			{{ t('workflowengine', 'Please enter a valid time span') }}
 		</p>
+		<Multiselect v-show="valid"
+			v-model="newValue.timezone"
+			:options="timezones"
+			@input="update" />
 	</div>
 </template>
 
@@ -92,6 +95,10 @@ export default {
 			margin-bottom: 5px;
 		}
 
+		.multiselect::v-deep .multiselect__tags:not(:hover):not(:focus):not(:active) {
+			border: 1px solid transparent;
+		}
+
 		input[type=text] {
 			width: 50%;
 			margin: 0;

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

@@ -27,8 +27,6 @@
 			:placeholder="t('workflowengine', 'Select a user agent')"
 			label="label"
 			track-by="pattern"
-			group-values="children"
-			group-label="label"
 			:options="options"
 			:multiple="false"
 			:tagging="false"
@@ -70,15 +68,10 @@ export default {
 		return {
 			newValue: '',
 			predefinedTypes: [
-				{
-					label: t('workflowengine', 'Sync clients'),
-					children: [
-						{ pattern: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
-						{ pattern: 'ios', label: t('workflowengine', 'iOS client'), icon: 'icon-phone' },
-						{ pattern: 'desktop', label: t('workflowengine', 'Desktop client'), icon: 'icon-desktop' },
-						{ pattern: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' }
-					]
-				}
+				{ pattern: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
+				{ pattern: 'ios', label: t('workflowengine', 'iOS client'), icon: 'icon-phone' },
+				{ pattern: 'desktop', label: t('workflowengine', 'Desktop client'), icon: 'icon-desktop' },
+				{ pattern: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' }
 			]
 		}
 	},
@@ -88,8 +81,6 @@ export default {
 		},
 		matchingPredefined() {
 			return this.predefinedTypes
-				.map(groups => groups.children)
-				.flat()
 				.find((type) => this.newValue === type.pattern)
 		},
 		isPredefined() {
@@ -97,14 +88,9 @@ export default {
 		},
 		customValue() {
 			return {
-				label: t('workflowengine', 'Others'),
-				children: [
-					{
-						icon: 'icon-settings-dark',
-						label: t('workflowengine', 'Custom user agent'),
-						pattern: ''
-					}
-				]
+				icon: 'icon-settings-dark',
+				label: t('workflowengine', 'Custom user agent'),
+				pattern: ''
 			}
 		},
 		currentValue() {
@@ -120,8 +106,8 @@ export default {
 	},
 	methods: {
 		validateRegex(string) {
-			var regexRegex = /^\/(.*)\/([gui]{0,3})$/
-			var result = regexRegex.exec(string)
+			const regexRegex = /^\/(.*)\/([gui]{0,3})$/
+			const result = regexRegex.exec(string)
 			return result !== null
 		},
 		setValue(value) {
@@ -142,11 +128,28 @@ export default {
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
-	.multiselect .multiselect__content-wrapper li>span,
-	.multiselect__single {
+
+	.multiselect .multiselect__content-wrapper li>span {
+		display: flex;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.multiselect::v-deep .multiselect__single {
+		width: 100%;
 		display: flex;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
+	.option__title {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 </style>

apps/workflowengine/src/components/Operation.vue

@@ -55,6 +55,7 @@ export default {
 	.actions__item_options {
 		width: 100%;
 		margin-top: 10px;
+		padding-left: 60px;
 	}
 	h3, small {
 		padding: 6px;

apps/workflowengine/src/components/Rule.vue

@@ -237,6 +237,7 @@ export default {
 		margin: 0;
 		width: 180px;
 		border-radius: var(--border-radius);
+		color: var(--color-text-maxcontrast);
 		font-weight: normal;
 		text-align: left;
 		font-size: 1em;