Design fixes
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
Arthur Schiwon
parent
a0582efc86
commit
580c8355b2
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,10 @@ export default {
|
|||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {},
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export default {
|
|||
.actions__item_options {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
h3, small {
|
||||
padding: 6px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue