Design fixes
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
a0582efc86
commit
580c8355b2
|
@ -35,7 +35,7 @@
|
||||||
class="option"
|
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-close" @click="$emit('remove')" />
|
||||||
</Actions>
|
</Actions>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -139,7 +139,7 @@ export default {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
& > *:not(.icon-delete) {
|
& > *:not(.close) {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
}
|
}
|
||||||
& > .comparator {
|
& > .comparator {
|
||||||
|
@ -170,14 +170,12 @@ export default {
|
||||||
::placeholder {
|
::placeholder {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
.icon-delete {
|
button.action-item.action-item--single.icon-close {
|
||||||
|
height: 44px;
|
||||||
|
width: 44px;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
button.action-item.action-item--single.icon-delete {
|
|
||||||
height: 34px;
|
|
||||||
width: 34px;
|
|
||||||
}
|
|
||||||
.invalid {
|
.invalid {
|
||||||
border: 1px solid var(--color-error) !important;
|
border: 1px solid var(--color-error) !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,7 +55,10 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
value: {},
|
value: {
|
||||||
|
type: [String, Array],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeslot">
|
<div class="timeslot">
|
||||||
<Multiselect v-model="newValue.timezone" :options="timezones" @input="update" />
|
|
||||||
<input v-model="newValue.startTime"
|
<input v-model="newValue.startTime"
|
||||||
type="text"
|
type="text"
|
||||||
class="timeslot--start"
|
class="timeslot--start"
|
||||||
|
@ -13,6 +12,10 @@
|
||||||
<p v-if="!valid" class="invalid-hint">
|
<p v-if="!valid" class="invalid-hint">
|
||||||
{{ t('workflowengine', 'Please enter a valid time span') }}
|
{{ t('workflowengine', 'Please enter a valid time span') }}
|
||||||
</p>
|
</p>
|
||||||
|
<Multiselect v-show="valid"
|
||||||
|
v-model="newValue.timezone"
|
||||||
|
:options="timezones"
|
||||||
|
@input="update" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -92,6 +95,10 @@ export default {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.multiselect::v-deep .multiselect__tags:not(:hover):not(:focus):not(:active) {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type=text] {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -27,8 +27,6 @@
|
||||||
:placeholder="t('workflowengine', 'Select a user agent')"
|
:placeholder="t('workflowengine', 'Select a user agent')"
|
||||||
label="label"
|
label="label"
|
||||||
track-by="pattern"
|
track-by="pattern"
|
||||||
group-values="children"
|
|
||||||
group-label="label"
|
|
||||||
:options="options"
|
:options="options"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
:tagging="false"
|
:tagging="false"
|
||||||
|
@ -70,17 +68,12 @@ export default {
|
||||||
return {
|
return {
|
||||||
newValue: '',
|
newValue: '',
|
||||||
predefinedTypes: [
|
predefinedTypes: [
|
||||||
{
|
|
||||||
label: t('workflowengine', 'Sync clients'),
|
|
||||||
children: [
|
|
||||||
{ pattern: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
|
{ pattern: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
|
||||||
{ pattern: 'ios', label: t('workflowengine', 'iOS 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: 'desktop', label: t('workflowengine', 'Desktop client'), icon: 'icon-desktop' },
|
||||||
{ pattern: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' }
|
{ pattern: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
options() {
|
options() {
|
||||||
|
@ -88,8 +81,6 @@ export default {
|
||||||
},
|
},
|
||||||
matchingPredefined() {
|
matchingPredefined() {
|
||||||
return this.predefinedTypes
|
return this.predefinedTypes
|
||||||
.map(groups => groups.children)
|
|
||||||
.flat()
|
|
||||||
.find((type) => this.newValue === type.pattern)
|
.find((type) => this.newValue === type.pattern)
|
||||||
},
|
},
|
||||||
isPredefined() {
|
isPredefined() {
|
||||||
|
@ -97,15 +88,10 @@ export default {
|
||||||
},
|
},
|
||||||
customValue() {
|
customValue() {
|
||||||
return {
|
return {
|
||||||
label: t('workflowengine', 'Others'),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
icon: 'icon-settings-dark',
|
icon: 'icon-settings-dark',
|
||||||
label: t('workflowengine', 'Custom user agent'),
|
label: t('workflowengine', 'Custom user agent'),
|
||||||
pattern: ''
|
pattern: ''
|
||||||
}
|
}
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
currentValue() {
|
currentValue() {
|
||||||
if (this.matchingPredefined) {
|
if (this.matchingPredefined) {
|
||||||
|
@ -120,8 +106,8 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
validateRegex(string) {
|
validateRegex(string) {
|
||||||
var regexRegex = /^\/(.*)\/([gui]{0,3})$/
|
const regexRegex = /^\/(.*)\/([gui]{0,3})$/
|
||||||
var result = regexRegex.exec(string)
|
const result = regexRegex.exec(string)
|
||||||
return result !== null
|
return result !== null
|
||||||
},
|
},
|
||||||
setValue(value) {
|
setValue(value) {
|
||||||
|
@ -142,11 +128,28 @@ export default {
|
||||||
.multiselect, input[type='text'] {
|
.multiselect, input[type='text'] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.multiselect .multiselect__content-wrapper li>span,
|
|
||||||
.multiselect__single {
|
.multiselect .multiselect__content-wrapper li>span {
|
||||||
display: flex;
|
display: flex;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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>
|
</style>
|
||||||
|
|
|
@ -55,6 +55,7 @@ export default {
|
||||||
.actions__item_options {
|
.actions__item_options {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
h3, small {
|
h3, small {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
|
|
@ -237,6 +237,7 @@ export default {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--color-text-maxcontrast);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
Loading…
Reference in New Issue