Fix minor styling issues with the user agent picker
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
b15c4a3a2e
commit
7b82a09a3b
|
@ -11,6 +11,7 @@
|
||||||
<Multiselect v-model="currentOperator"
|
<Multiselect v-model="currentOperator"
|
||||||
:disabled="!currentOption"
|
:disabled="!currentOption"
|
||||||
:options="operators"
|
:options="operators"
|
||||||
|
class="comparator"
|
||||||
label="name"
|
label="name"
|
||||||
track-by="operator"
|
track-by="operator"
|
||||||
:allow-empty="false"
|
:allow-empty="false"
|
||||||
|
@ -21,6 +22,7 @@
|
||||||
v-model="check.value"
|
v-model="check.value"
|
||||||
:disabled="!currentOption"
|
:disabled="!currentOption"
|
||||||
:check="check"
|
:check="check"
|
||||||
|
class="option"
|
||||||
@input="updateCheck"
|
@input="updateCheck"
|
||||||
@valid="(valid=true) && validate()"
|
@valid="(valid=true) && validate()"
|
||||||
@invalid="(valid=false) && validate()" />
|
@invalid="(valid=false) && validate()" />
|
||||||
|
@ -30,6 +32,7 @@
|
||||||
:class="{ invalid: !valid }"
|
:class="{ invalid: !valid }"
|
||||||
:disabled="!currentOption"
|
:disabled="!currentOption"
|
||||||
:placeholder="valuePlaceholder"
|
:placeholder="valuePlaceholder"
|
||||||
|
class="option"
|
||||||
@input="updateCheck">
|
@input="updateCheck">
|
||||||
<Actions v-if="deleteVisible || !currentOption">
|
<Actions v-if="deleteVisible || !currentOption">
|
||||||
<ActionButton icon="icon-delete" @click="$emit('remove')" />
|
<ActionButton icon="icon-delete" @click="$emit('remove')" />
|
||||||
|
@ -110,7 +113,7 @@ export default {
|
||||||
},
|
},
|
||||||
validate() {
|
validate() {
|
||||||
if (this.currentOption && this.currentOption.validate) {
|
if (this.currentOption && this.currentOption.validate) {
|
||||||
this.valid = !!this.currentOption.validate(this.check);
|
this.valid = !!this.currentOption.validate(this.check)
|
||||||
}
|
}
|
||||||
return this.valid
|
return this.valid
|
||||||
},
|
},
|
||||||
|
@ -139,6 +142,14 @@ export default {
|
||||||
& > *:not(.icon-delete) {
|
& > *:not(.icon-delete) {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
}
|
}
|
||||||
|
& > .comparator {
|
||||||
|
min-width: 130px;
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
& > .option {
|
||||||
|
min-width: 230px;
|
||||||
|
width: 230px;
|
||||||
|
}
|
||||||
& > .multiselect,
|
& > .multiselect,
|
||||||
& > input[type=text] {
|
& > input[type=text] {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<template>
|
<template>
|
||||||
<MultiselectTag v-model="newValue"
|
<MultiselectTag v-model="newValue"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
label="{{ t('workflowengine', 'Select a tag') }}"
|
:label="t('workflowengine', 'Select a tag')"
|
||||||
@input="update" />
|
@input="update" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -35,11 +35,16 @@
|
||||||
@input="setValue">
|
@input="setValue">
|
||||||
<template slot="singleLabel" slot-scope="props">
|
<template slot="singleLabel" slot-scope="props">
|
||||||
<span class="option__icon" :class="props.option.icon" />
|
<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>
|
||||||
<template slot="option" slot-scope="props">
|
<template slot="option" slot-scope="props">
|
||||||
<span class="option__icon" :class="props.option.icon" />
|
<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>
|
</template>
|
||||||
</Multiselect>
|
</Multiselect>
|
||||||
<input v-if="!isPredefined"
|
<input v-if="!isPredefined"
|
||||||
|
@ -133,3 +138,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
Loading…
Reference in New Issue