fix(files): inline action styling

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

2 files changed, 27 insertions, 10 deletions

diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 8da486392f5..ebbd91ab641 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -1,24 +1,31 @@
 <template>
 	<NcBreadcrumbs data-cy-files-content-breadcrumbs>
 		<!-- Current path sections -->
-		<NcBreadcrumb v-for="section in sections"
+		<NcBreadcrumb v-for="(section, index) in sections"
 			:key="section.dir"
-			:aria-label="t('files', `Go to the '{dir}' directory`, section)"
+			:aria-label="ariaLabel(section)"
+			:native-title="ariaLabel(section)"
 			v-bind="section"
-			@click="onClick(section.to)" />
+			@click.native="onClick(section.to)">
+			<template v-if="index === 0" #icon>
+				<Home :size="20" />
+			</template>
+		</NcBreadcrumb>
 	</NcBreadcrumbs>
 </template>
 
 <script>
-import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
-import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import { basename } from 'path'
+import Home from 'vue-material-design-icons/Home.vue'
+import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
+import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
 import Vue from 'vue'
 
 export default Vue.extend({
 	name: 'BreadCrumbs',
 
 	components: {
+		Home,
 		NcBreadcrumbs,
 		NcBreadcrumb,
 	},
@@ -52,10 +59,16 @@ export default Vue.extend({
 
 	methods: {
 		onClick(to) {
-			debugger
 			if (to?.query?.dir === this.$route.query.dir) {
-				alert('You are already here!')
+				this.$emit('reload')
+			}
+		},
+
+		ariaLabel(section) {
+			if (section?.to?.query?.dir === this.$route.query.dir) {
+				return t('files', 'Reload current directory')
 			}
+			return t('files', 'Go to the "{dir}" directory', section)
 		},
 	},
 })
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 412ac44fee2..1c96a7da3e1 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -441,16 +441,20 @@ tr {
 .files-list__row-icon-preview:not([style*='background']) {
     background: linear-gradient(110deg, var(--color-loading-dark) 0%, var(--color-loading-dark) 25%, var(--color-loading-light) 50%, var(--color-loading-dark) 75%, var(--color-loading-dark) 100%);
     background-size: 400%;
-	animation: preview-gradient-slide 1s ease infinite;
+	animation: preview-gradient-slide 1.2s ease-in-out infinite;
 }
 </style>
 
 <style>
 @keyframes preview-gradient-slide {
-    from {
+    0% {
         background-position: 100% 0%;
     }
-    to {
+    50% {
+        background-position: 0% 0%;
+    }
+	/* adds a small delay to the animation */
+    100% {
         background-position: 0% 0%;
     }
 }