fix(files): inline action styling

Signed-off-by: John Molakvoæ <[email protected]>

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)
 		},
 	},
 })

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%;
     }
 }

apps/files/src/mixins/fileslist-row.scss

@@ -118,11 +118,22 @@ td, th {
 .files-list__row-actions {
 	width: auto;
 
+	// Add margin to all cells after the actions
 	& ~ td,
 	& ~ th {
-		// Add margin to all cells after the actions
 		margin: 0 var(--cell-margin);
 	}
+
+	&::v-deep > button {
+		.button-vue__text {
+			// Remove bold from default button styling
+			font-weight: normal;
+		}
+		&:not(:hover, :focus, :active) .button-vue__wrapper {
+			// Also apply color-text-maxcontrast to non-active button
+			color: var(--color-text-maxcontrast);
+		}
+	}
 }
 
 .files-list__row-size {

apps/files/src/views/FilesList.vue

@@ -25,7 +25,7 @@
 		data-cy-files-content>
 		<div class="files-list__header">
 			<!-- Current folder breadcrumbs -->
-			<BreadCrumbs :path="dir" />
+			<BreadCrumbs :path="dir" @reload="fetchContent" />
 
 			<!-- Secondary loading indicator -->
 			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />