Add scrollable folderbar to mediafile
- Cleansup the horrizontal scroller code - make the folder bar scrollable - Cleanup the way folder permissions are shown
This commit is contained in:
Sean Engelhardt
parent
a9720b2211
commit
3af30bf7a1
@ -2,12 +2,16 @@
|
||||
*ngIf="!swap && showIcon"
|
||||
[matTooltip]="iconTooltip"
|
||||
[class]="iconAction ? 'pointer' : ''"
|
||||
(click)="iconClick()">{{ icon }}</mat-icon>
|
||||
<span class="content-node">
|
||||
(click)="iconClick()"
|
||||
>{{ icon }}</mat-icon
|
||||
>
|
||||
<span class="content-node" [ngClass]="noWrap ? 'single-line' : 'break-lines'">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
<mat-icon
|
||||
*ngIf="swap && showIcon"
|
||||
[matTooltip]="iconTooltip"
|
||||
[class]="iconAction ? 'pointer' : ''"
|
||||
(click)="iconClick()">{{ icon }}</mat-icon>
|
||||
(click)="iconClick()"
|
||||
>{{ icon }}</mat-icon
|
||||
>
|
||||
|
||||
@ -37,6 +37,13 @@ os-icon-container {
|
||||
margin: auto 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.break-lines {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.single-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,6 +50,12 @@ export class IconContainerComponent {
|
||||
@Input()
|
||||
public iconTooltip: string;
|
||||
|
||||
/**
|
||||
* Uses a css class for nowrap
|
||||
*/
|
||||
@Input()
|
||||
public noWrap = false;
|
||||
|
||||
/**
|
||||
* Optional action for clicking on the icon.
|
||||
*/
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Current filters -->
|
||||
<div class="current-filters" *ngIf="filterService">
|
||||
<div class="current-filters h-scroller" *ngIf="filterService">
|
||||
<div *ngFor="let filter of filterService.filterStack">
|
||||
<button mat-stroked-button (click)="removeFilterFromStack(filter)">
|
||||
<os-icon-container icon="close" class="active-filter">
|
||||
|
||||
@ -52,28 +52,4 @@ span.right-with-margin {
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
// firefox scrollbar
|
||||
scrollbar-width: 5px;
|
||||
scrollbar-color: #666666;
|
||||
}
|
||||
|
||||
// custom scrollbar. If required on more components, move to style.scss
|
||||
.current-filters::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.current-filters::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.current-filters::-webkit-scrollbar-corner {
|
||||
display: none;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
@ -23,62 +23,59 @@
|
||||
|
||||
<!-- Folder navigation bar -->
|
||||
<div>
|
||||
<div class="custom-table-header folder-nav-bar">
|
||||
<button class="folder" mat-button (click)="changeDirectory(null)" [disabled]="isMultiSelect">
|
||||
<mat-icon class="file-icon">home</mat-icon>
|
||||
</button>
|
||||
<span *ngFor="let directory of directoryChain; let last = last">
|
||||
<div class="arrow">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</div>
|
||||
<button
|
||||
class="folder"
|
||||
mat-button
|
||||
(click)="changeDirectory(directory.id)"
|
||||
[disabled]="isMultiSelect"
|
||||
*ngIf="!last"
|
||||
>
|
||||
<span class="folder-text">
|
||||
<div class="custom-table-header">
|
||||
<!-- Scrollable folder bar -->
|
||||
<span class="folder-nav-bar h-scroller">
|
||||
<button class="folder" mat-button (click)="changeDirectory(null)" [disabled]="isMultiSelect">
|
||||
<mat-icon class="file-icon">home</mat-icon>
|
||||
</button>
|
||||
<span class="folder-section" *ngFor="let directory of directoryChain; let last = last">
|
||||
<span class="arrow">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</span>
|
||||
<button
|
||||
class="folder"
|
||||
mat-button
|
||||
(click)="changeDirectory(directory.id)"
|
||||
[disabled]="isMultiSelect"
|
||||
*ngIf="!last"
|
||||
>
|
||||
<span class="folder-text">
|
||||
{{ directory.filename }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="folder"
|
||||
mat-button
|
||||
[matMenuTriggerFor]="singleMediafileMenu"
|
||||
[matMenuTriggerData]="{ mediafile: directory }"
|
||||
[disabled]="isMultiSelect"
|
||||
*ngIf="last && showFileMenu(directory)"
|
||||
>
|
||||
<os-icon-container icon="arrow_drop_down" swap="true" size="large" [noWrap]="true">
|
||||
{{ directory.filename }}
|
||||
</os-icon-container>
|
||||
</button>
|
||||
<span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
|
||||
{{ directory.filename }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="folder"
|
||||
mat-button
|
||||
[matMenuTriggerFor]="singleMediafileMenu"
|
||||
[matMenuTriggerData]="{ mediafile: directory }"
|
||||
[disabled]="isMultiSelect"
|
||||
*ngIf="last && showFileMenu(directory)"
|
||||
>
|
||||
<os-icon-container icon="arrow_drop_down" swap="true" size="large">
|
||||
{{ directory.filename }}
|
||||
</os-icon-container>
|
||||
</button>
|
||||
<span class="folder fake-folder folder-text" *ngIf="last && !showFileMenu(directory)">
|
||||
{{ directory.filename }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- Visibility as button -->
|
||||
<span class="visibility" *ngIf="canEdit && directory && directory.has_inherited_access_groups">
|
||||
<span class="visible-for" translate>
|
||||
<button class="visible-for" mat-button (click)="onEditFile(directory)">
|
||||
<os-icon-container
|
||||
icon="visibility"
|
||||
icon="group"
|
||||
matTooltip="{{ 'Allowed access groups for this directory' | translate }}"
|
||||
>
|
||||
<span *ngFor="let group of directory.inherited_access_groups; let last = last">
|
||||
{{ translateSync(group.getTitle()) }}<span *ngIf="!last">,</span>
|
||||
<span *ngFor="let group of directory.inherited_access_groups | slice: 0:3; let last = last">
|
||||
<span>{{ group.getTitle() | translate }}</span>
|
||||
<span *ngIf="!last">, </span>
|
||||
<span *ngIf="last && directory.inherited_access_groups.length > 3">...</span>
|
||||
</span>
|
||||
</os-icon-container>
|
||||
</span>
|
||||
</span>
|
||||
<span class="visibility" *ngIf="canEdit && directory && directory.inherited_access_groups_id === false">
|
||||
<span class="visible-for">
|
||||
<os-icon-container
|
||||
icon="visibility"
|
||||
matTooltip="{{ 'Allowed access groups for this directory' | translate }}"
|
||||
>
|
||||
<span translate>No one</span>
|
||||
</os-icon-container>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -122,8 +119,10 @@
|
||||
<!-- Info column -->
|
||||
<div *pblNgridCellDef="'info'; row as mediafile" class="fill clickable" (click)="onEditFile(mediafile)">
|
||||
<os-icon-container *ngIf="mediafile.access_groups.length" icon="group">
|
||||
<span *ngFor="let group of mediafile.access_groups; let last = last">
|
||||
{{ translateSync(group.getTitle()) }}<span *ngIf="!last">,</span>
|
||||
<span *ngFor="let group of mediafile.access_groups | slice: 0:3; let last = last">
|
||||
<span>{{ group.getTitle() | translate }}</span>
|
||||
<span *ngIf="!last">, </span>
|
||||
<span *ngIf="last && mediafile.access_groups.length > 3">...</span>
|
||||
</span>
|
||||
</os-icon-container>
|
||||
</div>
|
||||
|
||||
@ -1,52 +1,57 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
$navbar-size: 64px;
|
||||
|
||||
// multi line tooltip
|
||||
::ng-deep .mat-tooltip {
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.folder-nav-bar {
|
||||
$size: 64px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.folder-section {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
|
||||
.arrow {
|
||||
height: $size;
|
||||
float: left;
|
||||
.mat-icon {
|
||||
line-height: $size;
|
||||
height: $size;
|
||||
}
|
||||
.mat-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.folder {
|
||||
height: $size;
|
||||
.arrow {
|
||||
height: $navbar-size;
|
||||
.mat-icon {
|
||||
line-height: $navbar-size;
|
||||
height: $navbar-size;
|
||||
}
|
||||
}
|
||||
|
||||
.fake-folder {
|
||||
padding: 0 16px;
|
||||
.folder {
|
||||
// float: left;
|
||||
height: $navbar-size;
|
||||
> .content-node {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: auto 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fake-folder {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.visibility {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
.visible-for {
|
||||
margin-left: 10px;
|
||||
display: inherit;
|
||||
}
|
||||
mat-icon {
|
||||
cursor: auto;
|
||||
}
|
||||
.folder-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: auto 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.visibility {
|
||||
display: flex;
|
||||
.visible-for {
|
||||
width: min-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -846,3 +846,28 @@ button.mat-menu-item.selected {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// custom horrizontal scroll-bar
|
||||
|
||||
.h-scroller {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: 5px;
|
||||
scrollbar-color: #666666;
|
||||
}
|
||||
.h-scroller::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.h-scroller::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.h-scroller::-webkit-scrollbar-corner {
|
||||
display: none;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user