Skip to content

Commit

Permalink
fix(workflowengine): Fix multiple UI issues in workflow engine admin …
Browse files Browse the repository at this point in the history 
…settings

Signed-off-by: Joas Schilling <coding@schilljs.com>
  • Loading branch information
@nickvergessen
nickvergessen committed May 10, 2023
1 parent 14cb58c commit c20fd9f
Show file tree
Hide file tree
Showing 7 changed files with 174 additions and 162 deletions.
59 changes: 30 additions & 29 deletions apps/workflowengine/src/components/Check.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<template>
<div v-click-outside="hideDelete" class="check" @click="showDelete">
<NcMultiselect ref="checkSelector"
<NcSelect ref="checkSelector"
v-model="currentOption"
:options="options"
label="name"
track-by="class"
:allow-empty="false"
:clearable="false"
:placeholder="t('workflowengine', 'Select a filter')"
@input="updateCheck" />
<NcMultiselect v-model="currentOperator"
<NcSelect v-model="currentOperator"
:disabled="!currentOption"
:options="operators"
class="comparator"
label="name"
track-by="operator"
:allow-empty="false"
:clearable="false"
:placeholder="t('workflowengine', 'Select a comparator')"
@input="updateCheck" />
<component :is="currentOption.component"
Expand All @@ -35,23 +35,33 @@
class="option"
@input="updateCheck">
<NcActions v-if="deleteVisible || !currentOption">
<NcActionButton icon="icon-close" @click="$emit('remove')" />
<NcActionButton :title="t('workflowengine', 'Remove filter')" @click="$emit('remove')">
<template #icon>
<CloseIcon :size="20" />
</template>
</NcActionButton>
</NcActions>
</div>
</template>

<script>
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import CloseIcon from 'vue-material-design-icons/Close.vue'
import ClickOutside from 'vue-click-outside'
export default {
name: 'Check',
components: {
NcActionButton,
NcActions,
NcMultiselect,
NcSelect,
// Icons
CloseIcon,
},
directives: {
ClickOutside,
Expand Down Expand Up @@ -151,45 +161,36 @@ export default {
.check {
display: flex;
flex-wrap: wrap;
align-items: flex-start; // to not stretch components vertically
width: 100%;
padding-right: 20px;
& > *:not(.close) {
width: 180px;
}
& > .comparator {
min-width: 130px;
width: 130px;
min-width: 200px;
width: 200px;
}
& > .option {
min-width: 230px;
width: 230px;
min-width: 260px;
width: 260px;
min-height: 48px;
& > input[type=text] {
min-height: 48px;
}
}
& > .multiselect,
& > .v-select,
& > .button-vue,
& > input[type=text] {
margin-right: 5px;
margin-bottom: 5px;
}
.multiselect::v-deep .multiselect__content-wrapper li>span,
.multiselect::v-deep .multiselect__single {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
input[type=text] {
margin: 0;
}
::placeholder {
font-size: 10px;
}
button.action-item.action-item--single.icon-close {
height: 44px;
width: 44px;
margin-top: -5px;
margin-bottom: -5px;
}
.invalid {
border-color: var(--color-error) !important;
}
Expand Down
90 changes: 49 additions & 41 deletions apps/workflowengine/src/components/Checks/FileMimeType.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,50 @@
-->
<template>
<div>
<NcMultiselect :value="currentValue"
<NcSelect :value="currentValue"
:placeholder="t('workflowengine', 'Select a file type')"
label="label"
track-by="pattern"
:options="options"
:multiple="false"
:tagging="false"
:clearable="false"
@input="setValue">
<template slot="singleLabel" slot-scope="props">
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
<img v-else
class="option__icon-img"
:src="props.option.iconUrl"
alt="">
<span class="option__title option__title_single">{{ props.option.label }}</span>
<template #option="option">
<span v-if="option.icon" class="option__icon" :class="option.icon" />
<span v-else class="option__icon-img">
<img :src="option.iconUrl" alt="">
</span>
<span class="option__title">
<NcEllipsisedOption :name="String(option.label)" />
</span>
</template>
<template slot="option" slot-scope="props">
<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
<img v-else
class="option__icon-img"
:src="props.option.iconUrl"
alt="">
<span class="option__title">{{ props.option.label }}</span>
<template #selected-option="selectedOption">
<span v-if="selectedOption.icon" class="option__icon" :class="selectedOption.icon" />
<span v-else class="option__icon-img">
<img :src="selectedOption.iconUrl" alt="">
</span>
<span class="option__title">
<NcEllipsisedOption :name="String(selectedOption.label)" />
</span>
</template>
</NcMultiselect>
</NcSelect>
<input v-if="!isPredefined"
type="text"
:value="currentValue.pattern"
:value="currentValue.id"
:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
@input="updateCustom">
</div>
</template>

<script>
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import valueMixin from './../../mixins/valueMixin.js'
import { imagePath } from '@nextcloud/router'

export default {
name: 'FileMimeType',
components: {
NcMultiselect,
NcEllipsisedOption,
NcSelect,
},
mixins: [
valueMixin,
Expand All @@ -73,22 +75,22 @@ export default {
{
icon: 'icon-folder',
label: t('workflowengine', 'Folder'),
pattern: 'httpd/unix-directory',
id: 'httpd/unix-directory',
},
{
icon: 'icon-picture',
label: t('workflowengine', 'Images'),
pattern: '/image\\/.*/',
id: '/image\\/.*/',
},
{
iconUrl: imagePath('core', 'filetypes/x-office-document'),
label: t('workflowengine', 'Office documents'),
pattern: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
id: '/(vnd\\.(ms-|openxmlformats-|oasis\\.opendocument).*)$/',
},
{
iconUrl: imagePath('core', 'filetypes/application-pdf'),
label: t('workflowengine', 'PDF documents'),
pattern: 'application/pdf',
id: 'application/pdf',
},
],
}
Expand All @@ -98,7 +100,7 @@ export default {
return [...this.predefinedTypes, this.customValue]
},
isPredefined() {
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
if (matchingPredefined) {
return true
}
Expand All @@ -108,18 +110,18 @@ export default {
return {
icon: 'icon-settings-dark',
label: t('workflowengine', 'Custom MIME type'),
pattern: '',
id: '',
}
},
currentValue() {
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.pattern)
const matchingPredefined = this.predefinedTypes.find((type) => this.newValue === type.id)
if (matchingPredefined) {
return matchingPredefined
}
return {
icon: 'icon-settings-dark',
label: t('workflowengine', 'Custom mimetype'),
pattern: this.newValue,
id: this.newValue,
}
},
},
Expand All @@ -131,7 +133,7 @@ export default {
},
setValue(value) {
if (value !== null) {
this.newValue = value.pattern
this.newValue = value.id
this.$emit('input', this.newValue)
}
},
Expand All @@ -143,24 +145,30 @@ export default {
}
</script>
<style scoped lang="scss">
.multiselect, input[type='text'] {
.v-select,
input[type='text'] {
width: 100%;
}
.multiselect::v-deep .multiselect__content-wrapper li > span,
.multiselect::v-deep .multiselect__single {
display: flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

input[type=text] {
min-height: 48px;
}

.option__icon {
.option__icon,
.option__icon-img {
display: inline-block;
min-width: 30px;
background-position: left;
background-position: center;
vertical-align: middle;
}

.option__icon-img {
margin-right: 14px;
text-align: center;
}

.option__title {
display: inline-flex;
width: calc(100% - 36px);
vertical-align: middle;
}
</style>
8 changes: 5 additions & 3 deletions apps/workflowengine/src/components/Checks/RequestTime.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,24 @@
<p v-if="!valid" class="invalid-hint">
{{ t('workflowengine', 'Please enter a valid time span') }}
</p>
<NcMultiselect v-show="valid"
<NcSelect v-show="valid"
v-model="newValue.timezone"
:clearable="false"
:options="timezones"
@input="update" />
</div>
</template>

<script>
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import moment from 'moment-timezone'
import valueMixin from '../../mixins/valueMixin.js'
const zones = moment.tz.names()
export default {
name: 'RequestTime',
components: {
NcMultiselect,
NcSelect,
},
mixins: [
valueMixin,
Expand Down Expand Up @@ -112,6 +113,7 @@ export default {
width: 50%;
margin: 0;
margin-bottom: 5px;
min-height: 48px;
&.timeslot--start {
margin-right: 5px;
Expand Down
Loading

0 comments on commit c20fd9f

Please sign in to comment.