Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

86 lines
3.9 KiB

<sqx-title message="i18n:assets.listPageTitle"></sqx-title>
<sqx-panel desiredWidth="*" minWidth="50rem" showSidebar="true" grid="true">
<ng-container title>
{{ 'common.assets' | sqxTranslate }}
</ng-container>
<ng-container menu>
<div class="row no-gutters pl-1">
<div class="col-auto offset-xl-2">
<sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
<button type="button" class="btn btn-text-secondary" (click)="reload()" title="i18n:assets.refreshTooltip">
<i class="icon-reset"></i> {{ 'common.refresh' | sqxTranslate }}
</button>
</div>
<div class="col pl-1" style="width: 300px">
<div class="row no-gutters search">
<div class="col-6">
<sqx-tag-editor class="tags" singleLine="true" placeholder="{{ 'assets.searchByTags' | sqxTranslate }}"
[suggestions]="assetsState.tagsNames | async"
[ngModel]="assetsState.selectedTagNames | async"
(ngModelChange)="selectTags($event)"
[undefinedWhenEmpty]="false">
</sqx-tag-editor>
</div>
<div class="col-6">
<sqx-search-form formClass="form" placeholder="{{ 'assets.searchByName' | sqxTranslate }}" fieldExample="fileSize"
[query]="assetsState.assetsQuery | async"
[queries]="queries"
(queryChange)="search($event)"
enableShortcut="true">
</sqx-search-form>
</div>
</div>
</div>
<div class="col-auto pl-1">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isListView" [disabled]="isListView" (click)="changeView(true)">
<i class="icon-list"></i>
</button>
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="!isListView" [disabled]="!isListView" (click)="changeView(false)">
<i class="icon-grid"></i>
</button>
</div>
</div>
<div class="col-auto pl-1">
<sqx-shortcut keys="ctrl+shift+g" (trigger)="reload()"></sqx-shortcut>
<button type="button" class="btn btn-success" (click)="addAssetFolderDialog.show()" title="i18n:assets.createFolderTooltip">
<i class="icon-create_new_folder"></i>
</button>
</div>
</div>
</ng-container>
<ng-container content>
<sqx-list-view [isLoading]="assetsState.isLoading | async">
<ng-container header>
<sqx-asset-path [path]="assetsState.path | async" (navigate)="assetsState.navigate($event)"></sqx-asset-path>
</ng-container>
<div content>
<sqx-assets-list [state]="assetsState" [showPager]="false" [isListView]="isListView"></sqx-assets-list>
</div>
<ng-container footer>
<sqx-pager [pager]="assetsState.assetsPager | async" (pagerChange)="assetsState.setPager($event)"></sqx-pager>
</ng-container>
</sqx-list-view>
</ng-container>
<ng-container sidebar>
<div class="panel-nav">
<a class="panel-link" routerLink="filters" routerLinkActive="active" title="i18n:common.filters" titlePosition="left">
<i class="icon-filter"></i>
</a>
</div>
</ng-container>
</sqx-panel>
<ng-container *sqxModal="addAssetFolderDialog">
<sqx-asset-folder-dialog (complete)="addAssetFolderDialog.hide()"></sqx-asset-folder-dialog>
</ng-container>
<router-outlet></router-outlet>