refactor(resourceList): move grid/list view into a resourceList component, purpose normalize on all sections views

This commit is contained in:
Edouard Vanbelle
2026-05-26 19:51:40 +02:00
parent c65f2b5385
commit 1cd934d594
9 changed files with 646 additions and 107 deletions
+3 -25
View File
@@ -31,39 +31,17 @@
text-shadow: 0 0 5px var(--color-warning-shadow);
}
/* Styles for the favorites view items */
/* Item modifier rules (.file-item.favorite-item) → resourceList.css */
.favorite-item {
position: relative;
}
/* Adjustments for grid view */
.file-item.favorite-item {
border-left: 3px solid var(--color-warning-border);
[dir="rtl"] & {
border-right: 3px solid var(--color-warning-border);
border-left: unset;
}
}
/* Adjustments for list view */
/* Adjustments for list view header (page-level, not item-level) */
.list-header.favorites-header {
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}
.file-item.favorite-item {
position: relative;
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}
.file-item.favorite-item .favorite-indicator {
position: relative;
top: 0;
right: 0;
width: 30px;
height: 30px;
}
/* Styles for the favorites-specific empty state */
.favorites-empty-state {
display: flex;
+3 -25
View File
@@ -20,39 +20,17 @@
}
}
/* Styles for the recent view items */
/* Item modifier rules (.file-item.recent-item) → resourceList.css */
.recent-item {
position: relative;
}
/* Adjustments for grid view */
.files-grid-view .file-item.recent-item {
border-left: 3px solid var(--color-recent-border);
[dir="rtl"] & {
border-right: 3px solid var(--color-recent-border);
border-left: unset;
}
}
/* Adjustments for list view */
/* Adjustments for list view header (page-level, not item-level) */
.list-header.recent-header {
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}
.file-item.recent-item {
position: relative;
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
}
.file-item.recent-item .recent-indicator {
position: relative;
top: 0;
right: 0;
width: 30px;
height: 30px;
}
/* Styles for the recent-specific empty state */
.recents-empty-state {
display: flex;
+1 -3
View File
@@ -43,9 +43,7 @@
color: var(--color-trash-delete);
}
.file-item.trash-item > .path-cell {
display: none;
}
/* .file-item.trash-item > .path-cell → resourceList.css */
.actions-cell {
display: flex;