From 580c8355b284bb068a32f44535707ede3fdfd688 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 23 Oct 2019 18:41:56 +0200 Subject: [PATCH] Design fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/workflowengine/src/components/Check.vue | 12 ++--- .../Checks/MultiselectTag/MultiselectTag.vue | 5 +- .../src/components/Checks/RequestTime.vue | 9 +++- .../components/Checks/RequestUserAgent.vue | 53 ++++++++++--------- .../src/components/Operation.vue | 1 + apps/workflowengine/src/components/Rule.vue | 1 + 6 files changed, 47 insertions(+), 34 deletions(-) diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue index fe099b8076..10828c1dd8 100644 --- a/apps/workflowengine/src/components/Check.vue +++ b/apps/workflowengine/src/components/Check.vue @@ -35,7 +35,7 @@ class="option" @input="updateCheck"> - + @@ -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; } diff --git a/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue b/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue index ad0e6b2180..804025dc0e 100644 --- a/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue +++ b/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue @@ -55,7 +55,10 @@ export default { type: String, required: true }, - value: {}, + value: { + type: [String, Array], + default: null + }, disabled: { type: Boolean, default: false diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue index 196f3e2afa..26a4907fd1 100644 --- a/apps/workflowengine/src/components/Checks/RequestTime.vue +++ b/apps/workflowengine/src/components/Checks/RequestTime.vue @@ -1,6 +1,5 @@ @@ -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; diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue index 873e985832..4e0edb6bf4 100644 --- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue +++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue @@ -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; + } diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue index e78366d4cc..ae0a67ae53 100644 --- a/apps/workflowengine/src/components/Operation.vue +++ b/apps/workflowengine/src/components/Operation.vue @@ -55,6 +55,7 @@ export default { .actions__item_options { width: 100%; margin-top: 10px; + padding-left: 60px; } h3, small { padding: 6px; diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index a598e3dcfe..703b7832af 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/apps/workflowengine/src/components/Rule.vue @@ -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;