Merge pull request #53968 from nextcloud/feat/files-row-height

feat(files): reduce row height

apps/files/src/components/DragAndDropNotice.vue

@@ -235,7 +235,7 @@ export default defineComponent({
 	justify-content: center;
 	width: 100%;
 	// Breadcrumbs height + row thead height
-	min-height: calc(58px + 55px);
+	min-height: calc(58px + 44px);
 	margin: 0;
 	user-select: none;
 	color: var(--color-text-maxcontrast);

apps/files/src/components/DragAndDropPreview.vue

@@ -92,7 +92,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss">
-$size: 32px;
+$size: 28px;
 $stack-shift: 6px;
 
 .files-list-drag-image {
@@ -102,24 +102,24 @@ $stack-shift: 6px;
 	display: flex;
 	overflow: hidden;
 	align-items: center;
-	height: 44px;
-	padding: 6px 12px;
+	height: $size + $stack-shift;
+	padding: $stack-shift $stack-shift * 2;
 	background: var(--color-main-background);
 
 	&__icon,
-	.files-list__row-icon {
+	.files-list__row-icon-preview-container {
 		display: flex;
 		overflow: hidden;
 		align-items: center;
 		justify-content: center;
-		width: 32px;
-		height: 32px;
+		width: $size - $stack-shift;
+		height: $size - $stack-shift;;
 		border-radius: var(--border-radius);
 	}
 
 	&__icon {
 		overflow: visible;
-		margin-inline-end: 12px;
+		margin-inline-end: $stack-shift * 2;
 
 		img {
 			max-width: 100%;
@@ -138,13 +138,15 @@ $stack-shift: 6px;
 			display: flex;
 
 			// Stack effect if more than one element
-			.files-list__row-icon + .files-list__row-icon {
+			// Max 3 elements
+			> .files-list__row-icon-preview-container + .files-list__row-icon-preview-container {
 				margin-top: $stack-shift;
-				margin-inline-start: $stack-shift - $size;
-				& + .files-list__row-icon {
+				margin-inline-start: $stack-shift * 2 - $size;
+				& + .files-list__row-icon-preview-container {
 					margin-top: $stack-shift * 2;
 				}
 			}
+
 			// If we have manually clone the preview,
 			// let's hide any fallback icons
 			&:not(:empty) + * {

apps/files/src/components/FileEntry/FavoriteIcon.vue

@@ -56,8 +56,8 @@ export default defineComponent({
 	:deep() {
 		svg {
 			// We added a stroke for a11y so we must increase the size to include the stroke
-			width: 26px !important;
-			height: 26px !important;
+			width: 20px !important;
+			height: 20px !important;
 
 			// Override NcIconSvgWrapper defaults of 20px
 			max-width: unset !important;

apps/files/src/components/FilesListVirtual.vue

@@ -481,13 +481,13 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .files-list {
-	--row-height: 55px;
+	--row-height: 44px;
 	--cell-margin: 14px;
 
 	--checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2);
 	--checkbox-size: 24px;
 	--clickable-area: var(--default-clickable-area);
-	--icon-preview-size: 32px;
+	--icon-preview-size: 24px;
 
 	--fixed-block-start-position: var(--default-clickable-area);
 	display: flex;
@@ -775,8 +775,8 @@ export default defineComponent({
 			// File and folder overlay
 			&-overlay {
 				position: absolute;
-				max-height: calc(var(--icon-preview-size) * 0.5);
-				max-width: calc(var(--icon-preview-size) * 0.5);
+				max-height: calc(var(--icon-preview-size) * 0.6);
+				max-width: calc(var(--icon-preview-size) * 0.6);
 				color: var(--color-primary-element-text);
 				// better alignment with the folder icon
 				margin-block-start: 2px;

apps/files/src/components/VirtualList.vue

@@ -157,7 +157,7 @@ export default defineComponent({
 		itemHeight() {
 			// Align with css in FilesListVirtual
 			// 166px + 32px (name) + 16px (mtime) + 16px (padding top and bottom)
-			return this.gridMode ? (166 + 32 + 16 + 16 + 16) : 55
+			return this.gridMode ? (166 + 32 + 16 + 16 + 16) : 44
 		},
 
 		// Grid mode only