Skip to content

Commit 5ea5e7b

Browse files
nickvergessennickvergessen
authored
Merge pull request #38189 from nextcloud/backport/38170/stable26
[stable26] fix(workflowengine): Fix multiple UI issues in workflow engine admin settings
2 parents 554d0b1 + bac0941 commit 5ea5e7b

11 files changed

Lines changed: 188 additions & 176 deletions

‎apps/workflowengine/src/components/Check.vue‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<template>
22
<div v-click-outside="hideDelete" class="check" @click="showDelete">
3-
<NcMultiselect ref="checkSelector"
3+
<NcSelect ref="checkSelector"
44
v-model="currentOption"
55
:options="options"
66
label="name"
77
track-by="class"
8-
:allow-empty="false"
8+
:clearable="false"
99
:placeholder="t('workflowengine', 'Select a filter')"
1010
@input="updateCheck" />
11-
<NcMultiselect v-model="currentOperator"
11+
<NcSelect v-model="currentOperator"
1212
:disabled="!currentOption"
1313
:options="operators"
1414
class="comparator"
1515
label="name"
1616
track-by="operator"
17-
:allow-empty="false"
17+
:clearable="false"
1818
:placeholder="t('workflowengine', 'Select a comparator')"
1919
@input="updateCheck" />
2020
<component :is="currentOption.component"
@@ -35,23 +35,33 @@
3535
class="option"
3636
@input="updateCheck">
3737
<NcActions v-if="deleteVisible || !currentOption">
38-
<NcActionButton icon="icon-close" @click="$emit('remove')" />
38+
<NcActionButton :title="t('workflowengine', 'Remove filter')" @click="$emit('remove')">
39+
<template #icon>
40+
<CloseIcon :size="20" />
41+
</template>
42+
</NcActionButton>
3943
</NcActions>
4044
</div>
4145
</template>
4246

4347
<script>
44-
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
4548
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
4649
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
50+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect'
51+
52+
import CloseIcon from 'vue-material-design-icons/Close.vue'
53+
4754
import ClickOutside from 'vue-click-outside'
4855
4956
export default {
5057
name: 'Check',
5158
components: {
5259
NcActionButton,
5360
NcActions,
54-
NcMultiselect,
61+
NcSelect,
62+
63+
// Icons
64+
CloseIcon,
5565
},
5666
directives: {
5767
ClickOutside,
@@ -151,45 +161,36 @@ export default {
151161
.check {
152162
display: flex;
153163
flex-wrap: wrap;
164+
align-items: flex-start; // to not stretch components vertically
154165
width: 100%;
155166
padding-right: 20px;
167+
156168
& > *:not(.close) {
157169
width: 180px;
158170
}
159171
& > .comparator {
160-
min-width: 130px;
161-
width: 130px;
172+
min-width: 200px;
173+
width: 200px;
162174
}
163175
& > .option {
164-
min-width: 230px;
165-
width: 230px;
176+
min-width: 260px;
177+
width: 260px;
178+
min-height: 48px;
179+
180+
& > input[type=text] {
181+
min-height: 48px;
182+
}
166183
}
167-
& > .multiselect,
184+
& > .v-select,
185+
& > .button-vue,
168186
& > input[type=text] {
169187
margin-right: 5px;
170188
margin-bottom: 5px;
171189
}
172-
173-
.multiselect::v-deep .multiselect__content-wrapper li>span,
174-
.multiselect::v-deep .multiselect__single {
175-
display: block;
176-
white-space: nowrap;
177-
overflow: hidden;
178-
text-overflow: ellipsis;
179-
}
180190
}
181191
input[type=text] {
182192
margin: 0;
183193
}
184-
::placeholder {
185-
font-size: 10px;
186-
}
187-
button.action-item.action-item--single.icon-close {
188-
height: 44px;
189-
width: 44px;
190-
margin-top: -5px;
191-
margin-bottom: -5px;
192-
}
193194
.invalid {
194195
border-color: var(--color-error) !important;
195196
}

‎apps/workflowengine/src/components/Checks/FileMimeType.vue‎

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,48 +22,50 @@
2222

2323
<template>
2424
<div>
25-
<NcMultiselect :value="currentValue"
25+
<NcSelect :value="currentValue"
2626
:placeholder="t('workflowengine', 'Select a file type')"
2727
label="label"
28-
track-by="pattern"
2928
:options="options"
30-
:multiple="false"
31-
:tagging="false"
29+
:clearable="false"
3230
@input="setValue">
33-
<template slot="singleLabel" slot-scope="props">
34-
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
35-
<img v-else
36-
class="option__icon-img"
37-
:src="props.option.iconUrl"
38-
alt="">
39-
<span class="option__title option__title_single">{{ props.option.label }}</span>
31+
<template #option="option">
32+
<span v-if="option.icon" class="option__icon" :class="option.icon" />
33+
<span v-else class="option__icon-img">
34+
<img :src="option.iconUrl" alt="">
35+
</span>
36+
<span class="option__title">
37+
<NcEllipsisedOption :name="String(option.label)" />
38+
</span>
4039
</template>
41-
<template slot="option" slot-scope="props">
42-
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
43-
<img v-else
44-
class="option__icon-img"
45-
:src="props.option.iconUrl"
46-
alt="">
47-
<span class="option__title">{{ props.option.label }}</span>
40+
<template #selected-option="selectedOption">
41+
<span v-if="selectedOption.icon" class="option__icon" :class="selectedOption.icon" />
42+
<span v-else class="option__icon-img">
43+
<img :src="selectedOption.iconUrl" alt="">
44+
</span>
45+
<span class="option__title">
46+
<NcEllipsisedOption :name="String(selectedOption.label)" />
47+
</span>
4848
</template>
49-
</NcMultiselect>
49+
</NcSelect>
5050
<input v-if="!isPredefined"
5151
type="text"
52-
:value="currentValue.pattern"
52+
:value="currentValue.id"
5353
:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
5454
@input="updateCustom">
5555
</div>
5656
</template>
5757

5858
<script>
59-
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
59+
import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
60+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
6061
import valueMixin from './../../mixins/valueMixin'
6162
import { imagePath } from '@nextcloud/router'
6263
6364
export default {
6465
name: 'FileMimeType',
6566
components: {
66-
NcMultiselect,
67+
NcEllipsisedOption,
68+
NcSelect,
6769
},
6870
mixins: [
6971
valueMixin,
@@ -74,22 +76,22 @@ export default {
7476
{
7577
icon: 'icon-folder',
7678
label: t('workflowengine', 'Folder'),
77-
pattern: 'httpd/unix-directory',
79+
id: 'httpd/unix-directory',
7880
},
7981
{
8082
icon: 'icon-picture',
8183
label: t('workflowengine', 'Images'),
82-
pattern: '/image\\/.*/',
84+
id: '/image\\/.*/',
8385
},
8486
{
8587
iconUrl: imagePath('core', 'filetypes/x-office-document'),
8688
label: t('workflowengine', 'Office documents'),
87-
pattern: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
89+
id: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
8890
},
8991
{
9092
iconUrl: imagePath('core', 'filetypes/application-pdf'),
9193
label: t('workflowengine', 'PDF documents'),
92-
pattern: 'application/pdf',
94+
id: 'application/pdf',
9395
},
9496
],
9597
}
@@ -99,7 +101,7 @@ export default {
99101
return [...this.predefinedTypes, this.customValue]
100102
},
101103
isPredefined() {
102-
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
104+
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
103105
if (matchingPredefined) {
104106
return true
105107
}
@@ -109,18 +111,18 @@ export default {
109111
return {
110112
icon: 'icon-settings-dark',
111113
label: t('workflowengine', 'Custom MIME type'),
112-
pattern: '',
114+
id: '',
113115
}
114116
},
115117
currentValue() {
116-
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
118+
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
117119
if (matchingPredefined) {
118120
return matchingPredefined
119121
}
120122
return {
121123
icon: 'icon-settings-dark',
122124
label: t('workflowengine', 'Custom mimetype'),
123-
pattern: this.newValue,
125+
id: this.newValue,
124126
}
125127
},
126128
},
@@ -132,7 +134,7 @@ export default {
132134
},
133135
setValue(value) {
134136
if (value !== null) {
135-
this.newValue = value.pattern
137+
this.newValue = value.id
136138
this.$emit('input', this.newValue)
137139
}
138140
},
@@ -144,24 +146,30 @@ export default {
144146
}
145147
</script>
146148
<style scoped lang="scss">
147-
.multiselect, input[type='text'] {
148-
width: 100%;
149-
}
150-
.multiselect >>> .multiselect__content-wrapper li>span,
151-
.multiselect >>> .multiselect__single {
152-
display: flex;
153-
white-space: nowrap;
154-
overflow: hidden;
155-
text-overflow: ellipsis;
156-
}
149+
.v-select,
150+
input[type='text'] {
151+
width: 100%;
152+
}
153+
154+
input[type=text] {
155+
min-height: 48px;
156+
}
157157
158-
.option__icon {
159-
display: inline-block;
160-
min-width: 30px;
161-
background-position: left;
162-
}
158+
.option__icon,
159+
.option__icon-img {
160+
display: inline-block;
161+
min-width: 30px;
162+
background-position: center;
163+
vertical-align: middle;
164+
}
163165
164-
.option__icon-img {
165-
margin-right: 14px;
166-
}
166+
.option__icon-img {
167+
text-align: center;
168+
}
169+
170+
.option__title {
171+
display: inline-flex;
172+
width: calc(100% - 36px);
173+
vertical-align: middle;
174+
}
167175
</style>

‎apps/workflowengine/src/components/Checks/RequestTime.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,24 @@
1212
<p v-if="!valid" class="invalid-hint">
1313
{{ t('workflowengine', 'Please enter a valid time span') }}
1414
</p>
15-
<NcMultiselect v-show="valid"
15+
<NcSelect v-show="valid"
1616
v-model="newValue.timezone"
17+
:clearable="false"
1718
:options="timezones"
1819
@input="update" />
1920
</div>
2021
</template>
2122

2223
<script>
23-
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
24+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect'
2425
import moment from 'moment-timezone'
2526
import valueMixin from '../../mixins/valueMixin'
2627
2728
const zones = moment.tz.names()
2829
export default {
2930
name: 'RequestTime',
3031
components: {
31-
NcMultiselect,
32+
NcSelect,
3233
},
3334
mixins: [
3435
valueMixin,
@@ -112,6 +113,7 @@ export default {
112113
width: 50%;
113114
margin: 0;
114115
margin-bottom: 5px;
116+
min-height: 48px;
115117
116118
&.timeslot--start {
117119
margin-right: 5px;

0 commit comments

Comments
 (0)