frontend/src/app/components/nodes/file-box/file-box.component.html

<div class="file-box-wrapper" *ngIf="!notAvailableOffline">
    <ion-toolbar>
        <div style="display: flex; flex-direction: row">
            <button
                style="padding: 0 15px;" *ngIf="history.length > 0"
                (click)="navigateUp()"
            ><i class="fa fa-arrow-up"></i></button>
            <button
                *ngFor="let rec of history"
                (click)="navigateBack(rec)"
            >{{ rec.name }}&nbsp;&nbsp;/</button>
            <ion-input
                [readonly]="readonly"
                [(ngModel)]="fileBoxName"
                (change)="onRecordNameChange($event)"
                style="flex: 1; font-size: 15pt;"
            ></ion-input>
        </div>
        <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
            <ion-button (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
            <ion-button (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>

            <input type="file" name="fileInput" #fileInput multiple style="display: none;" (change)="onUploadFilesChange($event)">
        </ion-buttons>
    </ion-toolbar>
    <div class="content-wrapper" (contextmenu)="onSurfaceContextMenu($event)">
        <div *ngIf="!items || !items.length" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div>
        <div *ngIf="items && items.length" class="folders">
            <ng-container *ngFor="let item of items">
                <div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                    <div class="icon" style="color: #ecd3a9"><i class="fa fa-folder"></i></div>
                    <div class="title">{{ item.title }}</div>
                </div>
            </ng-container>
        </div>
        <div *ngIf="items && items.length" class="files">
            <ng-container *ngFor="let item of items">
                <div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                    <div class="icon"><i [ngClass]="categoryIcons[item.category]" [ngStyle]="{ color: categoryColors[item.category] }"></i></div>
                    <div class="title">{{ item.title }}</div>
                </div>
            </ng-container>
        </div>
    </div>
</div>
<div class="file-box-wrapper not-available" *ngIf="notAvailableOffline">
    Sorry, this file box is not available offline yet.
</div>