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"
|
||||
: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;
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue