Skip to content

feat(frontend): material navigation rail #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kosmoz merged 19 commits into from
Jun 18, 2026
Merged

feat(frontend): material navigation rail #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b0b100e
feat: material navigation rail
pmig Jun 11, 2026
9f831a1
Merge remote-tracking branch 'origin/main' into pmig/dev-610-datei-fr…
pmig Jun 15, 2026
1722e8f
chore: add sidbar rails
pmig Jun 16, 2026
d18f778
Merge remote-tracking branch 'origin/main' into pmig/dev-610-datei-fr…
pmig Jun 16, 2026
5b31a26
chore: refactor
pmig Jun 16, 2026
804bfa7
chore: refactor
pmig Jun 16, 2026
d6bba1a
chore: refactore to scss animations
pmig Jun 16, 2026
afce9db
refactor: move logo to top barrefactor: move logo to top bar
pmig Jun 17, 2026
5e15f82
refactor: fix not needed margin
pmig Jun 17, 2026
a35ca06
fix: re-add grow
pmig Jun 17, 2026
0cf540e
refactor: change scroll div
pmig Jun 17, 2026
cc422dc
refactor: use tailwind classes
pmig Jun 17, 2026
573b2db
refactor: fix missing overflow
pmig Jun 17, 2026
ffc1943
refactor: move css to styles.css
pmig Jun 18, 2026
aa36061
refactor: add white background for links
pmig Jun 18, 2026
1352219
chore: disable overflow
pmig Jun 18, 2026
060aba0
chore: add top right border on mobile
pmig Jun 18, 2026
561229c
Merge remote-tracking branch 'origin/main' into pmig/dev-610-datei-fr…
pmig Jun 18, 2026
0d9b053
refactor: incrase z-index prohibit some rows from drop
pmig Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file removed frontend/src/app/app.css
View file
Open in desktop
Empty file.
2 changes: 1 addition & 1 deletion frontend/src/app/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ import { RouterOutlet } from '@angular/router';
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css',
host: { class: 'block h-full' },
})
export class App {}
25 changes: 6 additions & 19 deletions frontend/src/app/dashboard/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
tr {
/*
This is required because the material table set `background: inherit`,
which overrules TailwindCSS `background-color: ...`
*/

&:hover {
background: var(--mat-sys-surface-container-low);
}

&.selection-item-selected {
background: var(--mat-sys-secondary-container);
}

&.drop-target-active {
background: var(--mat-sys-primary-container);
outline: 2px solid var(--mat-sys-primary);
outline-offset: -2px;
}
/* Rows highlighted as drop targets while dragging. The shared header/hover/
selection backgrounds live in styles.css. */
tr.drop-target-active {
background: var(--mat-sys-primary-container);
outline: 2px solid var(--mat-sys-primary);
outline-offset: -2px;
}

/* Breadcrumb buttons highlighted as drop targets while dragging */
Expand Down
169 changes: 88 additions & 81 deletions frontend/src/app/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
class="mx-5"
class="flex flex-col grow min-h-0 mx-5 mt-3"
appDragDrop
#drag="appDragDrop"
(dragStart)="onDrag($event)"
Expand Down Expand Up @@ -71,97 +71,104 @@
}
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="icon">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" class="w-20">
<app-thumbnail-icon [file]="element" />
</td>
</ng-container>
<div class="grow min-h-0 overflow-auto">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="icon">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" class="w-20">
<app-thumbnail-icon [file]="element" />
</td>
</ng-container>

<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>

<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef>Size</th>
<td mat-cell *matCellDef="let element">{{ element.size | bytes }}</td>
</ng-container>
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef>Size</th>
<td mat-cell *matCellDef="let element">{{ element.size | bytes }}</td>
</ng-container>

<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef>Created At</th>
<td mat-cell *matCellDef="let element">{{ element.createdAt | date }}</td>
</ng-container>
<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef>Created At</th>
<td mat-cell *matCellDef="let element">{{ element.createdAt | date }}</td>
</ng-container>

<ng-container matColumnDef="updatedAt">
<th mat-header-cell *matHeaderCellDef>Updated At</th>
<td mat-cell *matCellDef="let element">{{ element.updatedAt | date }}</td>
</ng-container>
<ng-container matColumnDef="updatedAt">
<th mat-header-cell *matHeaderCellDef>Updated At</th>
<td mat-cell *matCellDef="let element">{{ element.updatedAt | date }}</td>
</ng-container>

<ng-container matColumnDef="mimeType">
<th mat-header-cell *matHeaderCellDef>Content Type</th>
<td mat-cell *matCellDef="let element">{{ element.mimeType }}</td>
</ng-container>
<ng-container matColumnDef="mimeType">
<th mat-header-cell *matHeaderCellDef>Content Type</th>
<td mat-cell *matCellDef="let element">{{ element.mimeType }}</td>
</ng-container>

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" class="w-12 text-right">
<button
matIconButton
[matMenuTriggerFor]="rowMenu"
(click)="$event.stopPropagation()"
aria-label="More actions"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #rowMenu="matMenu">
<button mat-menu-item (click)="openRenameDialog(element)">
<mat-icon>edit</mat-icon>
Rename
</button>
<button mat-menu-item [matMenuTriggerFor]="rowSharingMenu">
<mat-icon>person_add</mat-icon>
Share
</button>
<button mat-menu-item (click)="trashFile(element, $event)">
<mat-icon>delete</mat-icon>
Move to trash
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element" class="w-12 text-right">
<button
matIconButton
[matMenuTriggerFor]="rowMenu"
(click)="$event.stopPropagation()"
aria-label="More actions"
>
<mat-icon>more_vert</mat-icon>
</button>
</mat-menu>
<mat-menu #rowSharingMenu="matMenu">
<button mat-menu-item (click)="createLinkForRow(element)">
<mat-icon>link</mat-icon>
Create public link
</button>
<button mat-menu-item (click)="addToLinkForRow(element)">
<mat-icon>add_link</mat-icon>
Add to public link
</button>
</mat-menu>
</td>
</ng-container>
<mat-menu #rowMenu="matMenu">
<button mat-menu-item (click)="openRenameDialog(element)">
<mat-icon>edit</mat-icon>
Rename
</button>
<button mat-menu-item [matMenuTriggerFor]="rowSharingMenu">
<mat-icon>person_add</mat-icon>
Share
</button>
<button mat-menu-item (click)="trashFile(element, $event)">
<mat-icon>delete</mat-icon>
Move to trash
</button>
</mat-menu>
<mat-menu #rowSharingMenu="matMenu">
<button mat-menu-item (click)="createLinkForRow(element)">
<mat-icon>link</mat-icon>
Create public link
</button>
<button mat-menu-item (click)="addToLinkForRow(element)">
<mat-icon>add_link</mat-icon>
Add to public link
</button>
</mat-menu>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
[appDragItem]="row"
[appDropTarget]="row"
[dropTargetEnabled]="row.isDirectory"
[appSelectionItem]="row"
(dblclick)="onRowDblClick(row)"
class="select-none transition-colors"
[class.opacity-50]="drag.isDragging() && selection.selectedIds().has(row.id)"
[class.cursor-pointer]="!drag.isDragging()"
></tr>
</table>
<tr
mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
[class.pointer-events-none]="drag.isDragging()"
></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
[appDragItem]="row"
[appDropTarget]="row"
[dropTargetEnabled]="row.isDirectory"
[appSelectionItem]="row"
(dblclick)="onRowDblClick(row)"
class="select-none transition-colors"
[class.opacity-50]="drag.isDragging() && selection.selectedIds().has(row.id)"
[class.pointer-events-none]="drag.isDragging() && selection.selectedIds().has(row.id)"
[class.cursor-pointer]="!drag.isDragging()"
></tr>
Comment thread
cursor[bot] marked this conversation as resolved.
</table>
</div>

<div
appDragPreview
class="mat-bg-primary-container mat-text-on-primary-container mat-corner-full mat-shadow-3 fixed pointer-events-none flex items-center z-10 gap-2 px-4 py-2"
class="mat-bg-primary-container mat-text-on-primary-container mat-corner-full mat-shadow-3 fixed pointer-events-none flex items-center z-101 gap-2 px-4 py-2"
aria-hidden="true"
>
<mat-icon aria-hidden="true">drive_file_move</mat-icon>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/dashboard/dashboard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { snackErrorDuration, snackSuccessDuration } from '~/frontend/constants';
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
host: { class: 'flex flex-col grow min-h-0' },
imports: [
MatMenuModule,
MatIconModule,
Expand Down
7 changes: 0 additions & 7 deletions frontend/src/app/links/links-list/links-list.component.css
View file
Open in desktop

This file was deleted.

Loading
Loading