Fix minor styling issues with the user agent picker

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2019-10-10 11:02:23 +02:00 committed by Arthur Schiwon
parent b15c4a3a2e
commit 7b82a09a3b
No known key found for this signature in database
GPG Key ID: 7424F1874854DF23
3 changed files with 32 additions and 4 deletions

View File

@ -11,6 +11,7 @@
<Multiselect v-model="currentOperator"
:disabled="!currentOption"
:options="operators"
class="comparator"
label="name"
track-by="operator"
:allow-empty="false"
@ -21,6 +22,7 @@
v-model="check.value"
:disabled="!currentOption"
:check="check"
class="option"
@input="updateCheck"
@valid="(valid=true) && validate()"
@invalid="(valid=false) && validate()" />
@ -30,6 +32,7 @@
:class="{ invalid: !valid }"
:disabled="!currentOption"
:placeholder="valuePlaceholder"
class="option"
@input="updateCheck">
<Actions v-if="deleteVisible || !currentOption">
<ActionButton icon="icon-delete" @click="$emit('remove')" />
@ -110,7 +113,7 @@ export default {
},
validate() {
if (this.currentOption && this.currentOption.validate) {
this.valid = !!this.currentOption.validate(this.check);
this.valid = !!this.currentOption.validate(this.check)
}
return this.valid
},
@ -139,6 +142,14 @@ export default {
& > *:not(.icon-delete) {
width: 180px;
}
& > .comparator {
min-width: 130px;
width: 130px;
}
& > .option {
min-width: 230px;
width: 230px;
}
& > .multiselect,
& > input[type=text] {
margin-right: 5px;

View File

@ -23,7 +23,7 @@
<template>
<MultiselectTag v-model="newValue"
:multiple="false"
label="{{ t('workflowengine', 'Select a tag') }}"
:label="t('workflowengine', 'Select a tag')"
@input="update" />
</template>

View File

@ -35,11 +35,16 @@
@input="setValue">
<template slot="singleLabel" slot-scope="props">
<span class="option__icon" :class="props.option.icon" />
<span class="option__title option__title_single">{{ props.option.label }}</span>
<!-- v-html can be used here as t() always passes our translated strings though DOMPurify.sanitize -->
<!-- eslint-disable-next-line vue/no-v-html -->
<span class="option__title option__title_single" v-html="props.option.label" />
</template>
<template slot="option" slot-scope="props">
<span class="option__icon" :class="props.option.icon" />
<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-if="props.option.$groupLabel" class="option__title" v-html="props.option.$groupLabel" />
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-else class="option__title" v-html="props.option.label" />
</template>
</Multiselect>
<input v-if="!isPredefined"
@ -133,3 +138,15 @@ export default {
}
}
</script>
<style scoped>
.multiselect, input[type='text'] {
width: 100%;
}
.multiselect .multiselect__content-wrapper li>span,
.multiselect__single {
display: flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>