Merge branch 'master' into display-name-cache-public

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

5 files changed, 54 insertions, 21 deletions

diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index 56a7c1d0ec4..7c4ea4d145e 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -32,12 +32,18 @@
 			@input="setValue">
 			<template slot="singleLabel" slot-scope="props">
 				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else :src="props.option.iconUrl">
+				<img v-else
+					class="option__icon-img"
+					:src="props.option.iconUrl"
+					alt="">
 				<span class="option__title option__title_single">{{ props.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 :src="props.option.iconUrl">
+				<img v-else
+					class="option__icon-img"
+					:src="props.option.iconUrl"
+					alt="">
 				<span class="option__title">{{ props.option.label }}</span>
 			</template>
 		</Multiselect>
@@ -102,7 +108,7 @@ export default {
 		customValue() {
 			return {
 				icon: 'icon-settings-dark',
-				label: t('workflowengine', 'Custom mimetype'),
+				label: t('workflowengine', 'Custom MIME type'),
 				pattern: '',
 			}
 		},
@@ -137,7 +143,7 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
@@ -148,4 +154,14 @@ export default {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
+
+	.option__icon-img {
+		margin-right: 14px;
+	}
 </style>
diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue
index c9b241eddfa..85283a2a14f 100644
--- a/apps/workflowengine/src/components/Checks/RequestURL.vue
+++ b/apps/workflowengine/src/components/Checks/RequestURL.vue
@@ -136,8 +136,14 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
 </style>
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index 5f4b8dd87b0..6eb3872e8f8 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="event">
 		<div v-if="operation.isComplex && operation.fixedEntity !== ''" class="isComplex">
-			<img class="option__icon" :src="entity.icon">
+			<img class="option__icon" :src="entity.icon" alt="">
 			<span class="option__title option__title_single">{{ operation.triggerHint }}</span>
 		</div>
 		<Multiselect v-else
@@ -14,12 +14,12 @@
 			@input="updateEvent">
 			<template slot="selection" slot-scope="{ values, isOpen }">
 				<div v-if="values.length && !isOpen" class="eventlist">
-					<img class="option__icon" :src="values[0].entity.icon">
+					<img class="option__icon" :src="values[0].entity.icon" alt="">
 					<span v-for="(value, index) in values" :key="value.id" class="text option__title option__title_single">{{ value.displayName }} <span v-if="index+1 < values.length">, </span></span>
 				</div>
 			</template>
 			<template slot="option" slot-scope="props">
-				<img class="option__icon" :src="props.option.entity.icon">
+				<img class="option__icon" :src="props.option.entity.icon" alt="">
 				<span class="option__title">{{ props.option.displayName }}</span>
 			</template>
 		</Multiselect>
@@ -131,6 +131,7 @@ export default {
 	.option__icon {
 		width: 16px;
 		height: 16px;
+		filter: var(--background-invert-if-dark);
 	}
 
 	.eventlist img,
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 9cdbf34018d..f81a53563b5 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="workflowengine">
-		<div class="section">
-			<h2>{{ t('workflowengine', 'Available flows') }}</h2>
+		<SettingsSection :title="t('workflowengine', 'Available flows')"
+			:doc-url="workflowDocUrl">
 
 			<p v-if="scope === 0" class="settings-hint">
 				<a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a>
@@ -26,11 +26,13 @@
 			</transition-group>
 
 			<div v-if="hasMoreOperations" class="actions__more">
-				<button class="icon"
-					:class="showMoreOperations ? 'icon-triangle-n' : 'icon-triangle-s'"
-					@click="showMoreOperations=!showMoreOperations">
+				<Button @click="showMoreOperations = !showMoreOperations">
+					<template #icon>
+						<MenuUp v-if="showMoreOperations" :size="20" />
+						<MenuDown v-else :size="20" />
+					</template>
 					{{ showMoreOperations ? t('workflowengine', 'Show less') : t('workflowengine', 'Show more') }}
-				</button>
+				</Button>
 			</div>
 
 			<h2 v-if="scope === 0" class="configured-flows">
@@ -39,7 +41,7 @@
 			<h2 v-else class="configured-flows">
 				{{ t('workflowengine', 'Your flows') }}
 			</h2>
-		</div>
+		</SettingsSection>
 
 		<transition-group v-if="rules.length > 0" name="slide">
 			<Rule v-for="rule in rules" :key="rule.id" :rule="rule" />
@@ -50,21 +52,31 @@
 <script>
 import Rule from './Rule'
 import Operation from './Operation'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import Button from '@nextcloud/vue/dist/Components/Button'
 import { mapGetters, mapState } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+import MenuUp from 'vue-material-design-icons/MenuUp'
+import MenuDown from 'vue-material-design-icons/MenuDown'
 
 const ACTION_LIMIT = 3
 
 export default {
 	name: 'Workflow',
 	components: {
+		Button,
+		MenuDown,
+		MenuUp,
 		Operation,
 		Rule,
+		SettingsSection,
 	},
 	data() {
 		return {
 			showMoreOperations: false,
 			appstoreUrl: generateUrl('settings/apps/workflow'),
+			workflowDocUrl: loadState('workflowengine', 'doc-url'),
 		}
 	},
 	computed: {
@@ -121,10 +133,8 @@ export default {
 			flex-basis: 250px;
 		}
 	}
-
-	button.icon {
-		padding-left: 32px;
-		background-position: 10px center;
+	.actions__more {
+		margin-bottom: 10px;
 	}
 
 	.slide-enter-active {
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index d936c64e2de..860258f2851 100644
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -68,11 +68,11 @@ small {
 		margin: 0;
 		margin-right: 10px;
 		&:not(.icon-invert) {
-			filter: invert(1);
+			filter: var(--background-invert-if-bright);
 		}
 	}
 }
 
 .colored .icon-invert {
-	filter: invert(1);
+	filter: var(--background-invert-if-bright);
 }