Skip to content

Commit 1085598

Browse files
nickvergessennickvergessen
authored
Merge pull request #38170 from nextcloud/bugfix/38165/workflow-engine-ui
fix(workflowengine): Fix multiple UI issues in workflow engine admin settings
2 parents 4822f10 + 0983572 commit 1085598

11 files changed

Lines changed: 180 additions & 168 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.js'
4548
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
4649
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
50+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
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: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,48 +21,50 @@
2121
-->
2222
<template>
2323
<div>
24-
<NcMultiselect :value="currentValue"
24+
<NcSelect :value="currentValue"
2525
:placeholder="t('workflowengine', 'Select a file type')"
2626
label="label"
27-
track-by="pattern"
2827
:options="options"
29-
:multiple="false"
30-
:tagging="false"
28+
:clearable="false"
3129
@input="setValue">
32-
<template slot="singleLabel" slot-scope="props">
33-
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
34-
<img v-else
35-
class="option__icon-img"
36-
:src="props.option.iconUrl"
37-
alt="">
38-
<span class="option__title option__title_single">{{ props.option.label }}</span>
30+
<template #option="option">
31+
<span v-if="option.icon" class="option__icon" :class="option.icon" />
32+
<span v-else class="option__icon-img">
33+
<img :src="option.iconUrl" alt="">
34+
</span>
35+
<span class="option__title">
36+
<NcEllipsisedOption :name="String(option.label)" />
37+
</span>
3938
</template>
40-
<template slot="option" slot-scope="props">
41-
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
42-
<img v-else
43-
class="option__icon-img"
44-
:src="props.option.iconUrl"
45-
alt="">
46-
<span class="option__title">{{ props.option.label }}</span>
39+
<template #selected-option="selectedOption">
40+
<span v-if="selectedOption.icon" class="option__icon" :class="selectedOption.icon" />
41+
<span v-else class="option__icon-img">
42+
<img :src="selectedOption.iconUrl" alt="">
43+
</span>
44+
<span class="option__title">
45+
<NcEllipsisedOption :name="String(selectedOption.label)" />
46+
</span>
4747
</template>
48-
</NcMultiselect>
48+
</NcSelect>
4949
<input v-if="!isPredefined"
5050
type="text"
51-
:value="currentValue.pattern"
51+
:value="currentValue.id"
5252
:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
5353
@input="updateCustom">
5454
</div>
5555
</template>
5656

5757
<script>
58-
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
58+
import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
59+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
5960
import valueMixin from './../../mixins/valueMixin.js'
6061
import { imagePath } from '@nextcloud/router'
6162
6263
export default {
6364
name: 'FileMimeType',
6465
components: {
65-
NcMultiselect,
66+
NcEllipsisedOption,
67+
NcSelect,
6668
},
6769
mixins: [
6870
valueMixin,
@@ -73,22 +75,22 @@ export default {
7375
{
7476
icon: 'icon-folder',
7577
label: t('workflowengine', 'Folder'),
76-
pattern: 'httpd/unix-directory',
78+
id: 'httpd/unix-directory',
7779
},
7880
{
7981
icon: 'icon-picture',
8082
label: t('workflowengine', 'Images'),
81-
pattern: '/image\\/.*/',
83+
id: '/image\\/.*/',
8284
},
8385
{
8486
iconUrl: imagePath('core', 'filetypes/x-office-document'),
8587
label: t('workflowengine', 'Office documents'),
86-
pattern: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
88+
id: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
8789
},
8890
{
8991
iconUrl: imagePath('core', 'filetypes/application-pdf'),
9092
label: t('workflowengine', 'PDF documents'),
91-
pattern: 'application/pdf',
93+
id: 'application/pdf',
9294
},
9395
],
9496
}
@@ -98,7 +100,7 @@ export default {
98100
return [...this.predefinedTypes, this.customValue]
99101
},
100102
isPredefined() {
101-
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
103+
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
102104
if (matchingPredefined) {
103105
return true
104106
}
@@ -108,18 +110,18 @@ export default {
108110
return {
109111
icon: 'icon-settings-dark',
110112
label: t('workflowengine', 'Custom MIME type'),
111-
pattern: '',
113+
id: '',
112114
}
113115
},
114116
currentValue() {
115-
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
117+
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
116118
if (matchingPredefined) {
117119
return matchingPredefined
118120
}
119121
return {
120122
icon: 'icon-settings-dark',
121123
label: t('workflowengine', 'Custom mimetype'),
122-
pattern: this.newValue,
124+
id: this.newValue,
123125
}
124126
},
125127
},
@@ -131,7 +133,7 @@ export default {
131133
},
132134
setValue(value) {
133135
if (value !== null) {
134-
this.newValue = value.pattern
136+
this.newValue = value.id
135137
this.$emit('input', this.newValue)
136138
}
137139
},
@@ -143,24 +145,30 @@ export default {
143145
}
144146
</script>
145147
<style scoped lang="scss">
146-
.multiselect, input[type='text'] {
148+
.v-select,
149+
input[type='text'] {
147150
width: 100%;
148151
}
149-
.multiselect::v-deep .multiselect__content-wrapper li > span,
150-
.multiselect::v-deep .multiselect__single {
151-
display: flex;
152-
white-space: nowrap;
153-
overflow: hidden;
154-
text-overflow: ellipsis;
152+
153+
input[type=text] {
154+
min-height: 48px;
155155
}
156156
157-
.option__icon {
157+
.option__icon,
158+
.option__icon-img {
158159
display: inline-block;
159160
min-width: 30px;
160-
background-position: left;
161+
background-position: center;
162+
vertical-align: middle;
161163
}
162164
163165
.option__icon-img {
164-
margin-right: 14px;
166+
text-align: center;
167+
}
168+
169+
.option__title {
170+
display: inline-flex;
171+
width: calc(100% - 36px);
172+
vertical-align: middle;
165173
}
166174
</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.js'
24+
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
2425
import moment from 'moment-timezone'
2526
import valueMixin from '../../mixins/valueMixin.js'
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)