mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
improved page layout (#761)
* app-layout component * layout theme reorg * merge app-layout styles * rework page layouting
This commit is contained in:
committed by
Cilibiu Bogdan
parent
f975650850
commit
8ada58f3a5
@@ -24,7 +24,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
import { LayoutComponent } from './components/layout/layout.component';
|
import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
|
||||||
import { FilesComponent } from './components/files/files.component';
|
import { FilesComponent } from './components/files/files.component';
|
||||||
import { LibrariesComponent } from './components/libraries/libraries.component';
|
import { LibrariesComponent } from './components/libraries/libraries.component';
|
||||||
import { GenericErrorComponent } from './components/common/generic-error/generic-error.component';
|
import { GenericErrorComponent } from './components/common/generic-error/generic-error.component';
|
||||||
@@ -52,7 +52,7 @@ export const APP_ROUTES: Routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: LayoutComponent,
|
component: AppLayoutComponent,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
|
@@ -1,6 +1,7 @@
|
|||||||
<div class="inner-layout inner-layout--scroll">
|
<app-page-layout>
|
||||||
<div class="inner-layout__content">
|
|
||||||
<div class="inner-layout__panel content--scroll">
|
<app-page-layout-content [scrollable]="true">
|
||||||
|
<div class="main-content">
|
||||||
<article class="padding">
|
<article class="padding">
|
||||||
<header class="header padding-left">Alfresco Content Application</header>
|
<header class="header padding-left">Alfresco Content Application</header>
|
||||||
<p class="padding-left"> version: {{ releaseVersion }} </p>
|
<p class="padding-left"> version: {{ releaseVersion }} </p>
|
||||||
@@ -32,5 +33,6 @@
|
|||||||
<adf-datatable [data]="data"></adf-datatable>
|
<adf-datatable [data]="data"></adf-datatable>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</app-page-layout-content>
|
||||||
</div>
|
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -28,6 +28,7 @@ import { Routes, RouterModule } from '@angular/router';
|
|||||||
import { AboutComponent } from './about.component';
|
import { AboutComponent } from './about.component';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { CoreModule } from '@alfresco/adf-core';
|
import { CoreModule } from '@alfresco/adf-core';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@@ -40,7 +41,12 @@ const routes: Routes = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)],
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
CoreModule.forChild(),
|
||||||
|
RouterModule.forChild(routes),
|
||||||
|
AppLayoutModule
|
||||||
|
],
|
||||||
declarations: [AboutComponent]
|
declarations: [AboutComponent]
|
||||||
})
|
})
|
||||||
export class AboutModule {}
|
export class AboutModule {}
|
||||||
|
@@ -1,80 +1,83 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<app-page-layout-header>
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
|
||||||
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<adf-toolbar class="inline">
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
</ng-container>
|
|
||||||
</adf-toolbar>
|
|
||||||
</div>
|
|
||||||
<div class="inner-layout__content">
|
|
||||||
<div class="inner-layout__panel">
|
|
||||||
<adf-document-list #documentList
|
|
||||||
acaDocumentList
|
|
||||||
acaContextActions
|
|
||||||
[display]="documentDisplayMode$ | async"
|
|
||||||
currentFolderId="-favorites-"
|
|
||||||
selectionMode="multiple"
|
|
||||||
[navigate]="false"
|
|
||||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
|
||||||
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
|
||||||
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
|
||||||
|
|
||||||
<empty-folder-content>
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
<ng-template>
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
<adf-empty-content
|
</ng-container>
|
||||||
icon="star_rate"
|
</adf-toolbar>
|
||||||
[title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'"
|
</app-page-layout-header>
|
||||||
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
|
|
||||||
</adf-empty-content>
|
<app-page-layout-content>
|
||||||
|
<div class="main-content">
|
||||||
|
<adf-document-list #documentList
|
||||||
|
acaDocumentList
|
||||||
|
acaContextActions
|
||||||
|
[display]="documentDisplayMode$ | async"
|
||||||
|
currentFolderId="-favorites-"
|
||||||
|
selectionMode="multiple"
|
||||||
|
[navigate]="false"
|
||||||
|
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||||
|
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
||||||
|
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
||||||
|
|
||||||
|
<empty-folder-content>
|
||||||
|
<ng-template>
|
||||||
|
<adf-empty-content
|
||||||
|
icon="star_rate"
|
||||||
|
[title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'"
|
||||||
|
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
|
||||||
|
</adf-empty-content>
|
||||||
|
</ng-template>
|
||||||
|
</empty-folder-content>
|
||||||
|
|
||||||
|
<data-columns>
|
||||||
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</empty-folder-content>
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<data-columns>
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
</ng-container>
|
||||||
<data-column
|
</data-columns>
|
||||||
[key]="column.key"
|
</adf-document-list>
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
<ng-template let-context>
|
|
||||||
<app-dynamic-column
|
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
<data-column
|
</adf-pagination>
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
</data-columns>
|
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
|
||||||
</adf-pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
|
||||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||||
|
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||||
|
</div>
|
||||||
|
</app-page-layout-content>
|
||||||
|
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module';
|
|||||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||||
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
||||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@@ -56,7 +57,8 @@ const routes: Routes = [
|
|||||||
AppCommonModule,
|
AppCommonModule,
|
||||||
AppToolbarModule,
|
AppToolbarModule,
|
||||||
ContextMenuModule,
|
ContextMenuModule,
|
||||||
AppInfoDrawerModule
|
AppInfoDrawerModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
declarations: [FavoritesComponent],
|
declarations: [FavoritesComponent],
|
||||||
exports: [FavoritesComponent]
|
exports: [FavoritesComponent]
|
||||||
|
@@ -1,84 +1,86 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout [hasError]="!isValidPath">
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb
|
|
||||||
[root]="title"
|
|
||||||
[folderNode]="node"
|
|
||||||
(navigate)="onBreadcrumbNavigate($event)">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<app-page-layout-header>
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<adf-breadcrumb
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
[root]="title"
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
[folderNode]="node"
|
||||||
</ng-container>
|
(navigate)="onBreadcrumbNavigate($event)">
|
||||||
</adf-toolbar>
|
</adf-breadcrumb>
|
||||||
|
|
||||||
|
<adf-toolbar class="inline">
|
||||||
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
|
</ng-container>
|
||||||
|
</adf-toolbar>
|
||||||
|
</app-page-layout-header>
|
||||||
|
|
||||||
|
<app-page-layout-error>
|
||||||
|
<aca-generic-error></aca-generic-error>
|
||||||
|
</app-page-layout-error>
|
||||||
|
|
||||||
|
<app-page-layout-content>
|
||||||
|
<div class="main-content">
|
||||||
|
<adf-upload-drag-area
|
||||||
|
[parentId]="node?.id"
|
||||||
|
[disabled]="!canUpload">
|
||||||
|
|
||||||
|
<adf-document-list #documentList
|
||||||
|
acaDocumentList
|
||||||
|
acaContextActions
|
||||||
|
[display]="documentDisplayMode$ | async"
|
||||||
|
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||||
|
selectionMode="multiple"
|
||||||
|
[currentFolderId]="node?.id"
|
||||||
|
[allowDropFiles]="true"
|
||||||
|
[navigate]="false"
|
||||||
|
[imageResolver]="imageResolver"
|
||||||
|
(node-dblclick)="navigateTo($event.detail?.node)"
|
||||||
|
(name-click)="navigateTo($event.detail?.node)">
|
||||||
|
|
||||||
|
<data-columns>
|
||||||
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
|
</ng-template>
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
</data-columns>
|
||||||
|
</adf-document-list>
|
||||||
|
|
||||||
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
|
</adf-pagination>
|
||||||
|
</adf-upload-drag-area>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||||
<aca-generic-error></aca-generic-error>
|
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||||
</div>
|
</div>
|
||||||
|
</app-page-layout-content>
|
||||||
|
|
||||||
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
</app-page-layout>
|
||||||
<div class="inner-layout__panel">
|
|
||||||
<adf-upload-drag-area
|
|
||||||
[parentId]="node?.id"
|
|
||||||
[disabled]="!canUpload">
|
|
||||||
|
|
||||||
<adf-document-list #documentList
|
|
||||||
acaDocumentList
|
|
||||||
acaContextActions
|
|
||||||
[display]="documentDisplayMode$ | async"
|
|
||||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
|
||||||
selectionMode="multiple"
|
|
||||||
[currentFolderId]="node?.id"
|
|
||||||
[allowDropFiles]="true"
|
|
||||||
[navigate]="false"
|
|
||||||
[imageResolver]="imageResolver"
|
|
||||||
(node-dblclick)="navigateTo($event.detail?.node)"
|
|
||||||
(name-click)="navigateTo($event.detail?.node)">
|
|
||||||
|
|
||||||
<data-columns>
|
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
|
||||||
<data-column
|
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
<ng-template let-context>
|
|
||||||
<app-dynamic-column
|
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
|
||||||
<data-column
|
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
</data-columns>
|
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
|
||||||
</adf-pagination>
|
|
||||||
</adf-upload-drag-area>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
|
||||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
@@ -0,0 +1,38 @@
|
|||||||
|
<adf-upload-drag-area
|
||||||
|
[parentId]="currentFolderId"
|
||||||
|
[disabled]="!canUpload">
|
||||||
|
|
||||||
|
<adf-sidenav-layout
|
||||||
|
#layout
|
||||||
|
[sidenavMin]="70"
|
||||||
|
[sidenavMax]="320"
|
||||||
|
[stepOver]="600"
|
||||||
|
[hideSidenav]="hideSidenav"
|
||||||
|
[expandedSidenav]="expandedSidenav"
|
||||||
|
(expanded)="onExpanded($event)">
|
||||||
|
|
||||||
|
<adf-sidenav-layout-header>
|
||||||
|
<ng-template>
|
||||||
|
<app-header
|
||||||
|
*ngIf="!hideSidenav"
|
||||||
|
(toggleClicked)="layout.toggleMenu($event)">
|
||||||
|
</app-header>
|
||||||
|
</ng-template>
|
||||||
|
</adf-sidenav-layout-header>
|
||||||
|
|
||||||
|
<adf-sidenav-layout-navigation>
|
||||||
|
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||||
|
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
|
||||||
|
</ng-template>
|
||||||
|
</adf-sidenav-layout-navigation>
|
||||||
|
|
||||||
|
<adf-sidenav-layout-content>
|
||||||
|
<ng-template>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</ng-template>
|
||||||
|
</adf-sidenav-layout-content>
|
||||||
|
|
||||||
|
</adf-sidenav-layout>
|
||||||
|
|
||||||
|
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
|
||||||
|
</adf-upload-drag-area>
|
@@ -26,23 +26,23 @@
|
|||||||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||||
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
|
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
|
||||||
import { LayoutComponent } from './layout.component';
|
import { AppLayoutComponent } from './app-layout.component';
|
||||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
import { AppTestingModule } from '../../../testing/app-testing.module';
|
||||||
|
|
||||||
describe('LayoutComponent', () => {
|
describe('AppLayoutComponent', () => {
|
||||||
let fixture: ComponentFixture<LayoutComponent>;
|
let fixture: ComponentFixture<AppLayoutComponent>;
|
||||||
let component: LayoutComponent;
|
let component: AppLayoutComponent;
|
||||||
let appConfig: AppConfigService;
|
let appConfig: AppConfigService;
|
||||||
let userPreference: UserPreferencesService;
|
let userPreference: UserPreferencesService;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
TestBed.configureTestingModule({
|
TestBed.configureTestingModule({
|
||||||
imports: [AppTestingModule],
|
imports: [AppTestingModule],
|
||||||
declarations: [LayoutComponent],
|
declarations: [AppLayoutComponent],
|
||||||
schemas: [NO_ERRORS_SCHEMA]
|
schemas: [NO_ERRORS_SCHEMA]
|
||||||
});
|
});
|
||||||
|
|
||||||
fixture = TestBed.createComponent(LayoutComponent);
|
fixture = TestBed.createComponent(AppLayoutComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
appConfig = TestBed.get(AppConfigService);
|
appConfig = TestBed.get(AppConfigService);
|
||||||
userPreference = TestBed.get(UserPreferencesService);
|
userPreference = TestBed.get(UserPreferencesService);
|
@@ -39,19 +39,18 @@ import { NavigationEnd, Router } from '@angular/router';
|
|||||||
import { Store } from '@ngrx/store';
|
import { Store } from '@ngrx/store';
|
||||||
import { Subject, Observable } from 'rxjs';
|
import { Subject, Observable } from 'rxjs';
|
||||||
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
|
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
|
||||||
import { NodePermissionService } from '../../services/node-permission.service';
|
import { NodePermissionService } from '../../../services/node-permission.service';
|
||||||
import { currentFolder } from '../../store/selectors/app.selectors';
|
import { currentFolder } from '../../../store/selectors/app.selectors';
|
||||||
import { AppStore } from '../../store/states';
|
import { AppStore } from '../../../store/states';
|
||||||
import { BreakpointObserver } from '@angular/cdk/layout';
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-layout',
|
selector: 'app-layout',
|
||||||
templateUrl: './layout.component.html',
|
templateUrl: './app-layout.component.html',
|
||||||
styleUrls: ['./layout.component.scss'],
|
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
host: { class: 'app-layout' }
|
host: { class: 'app-layout' }
|
||||||
})
|
})
|
||||||
export class LayoutComponent implements OnInit, OnDestroy {
|
export class AppLayoutComponent implements OnInit, OnDestroy {
|
||||||
@ViewChild('layout')
|
@ViewChild('layout')
|
||||||
layout: SidenavLayoutComponent;
|
layout: SidenavLayoutComponent;
|
||||||
|
|
17
src/app/components/layout/app-layout/app-layout.theme.scss
Normal file
17
src/app/components/layout/app-layout/app-layout.theme.scss
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
@mixin app-layout-theme($theme) {
|
||||||
|
.app-layout {
|
||||||
|
@include flex-column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 599px) {
|
||||||
|
.adf-app-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 719px) {
|
||||||
|
.adf-app-logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@@ -1,40 +0,0 @@
|
|||||||
<div class="layout">
|
|
||||||
<adf-upload-drag-area
|
|
||||||
[parentId]="currentFolderId"
|
|
||||||
[disabled]="!canUpload">
|
|
||||||
|
|
||||||
<adf-sidenav-layout
|
|
||||||
#layout
|
|
||||||
[sidenavMin]="70"
|
|
||||||
[sidenavMax]="320"
|
|
||||||
[stepOver]="600"
|
|
||||||
[hideSidenav]="hideSidenav"
|
|
||||||
[expandedSidenav]="expandedSidenav"
|
|
||||||
(expanded)="onExpanded($event)">
|
|
||||||
|
|
||||||
<adf-sidenav-layout-header>
|
|
||||||
<ng-template>
|
|
||||||
<app-header
|
|
||||||
*ngIf="!hideSidenav"
|
|
||||||
(toggleClicked)="layout.toggleMenu($event)">
|
|
||||||
</app-header>
|
|
||||||
</ng-template>
|
|
||||||
</adf-sidenav-layout-header>
|
|
||||||
|
|
||||||
<adf-sidenav-layout-navigation>
|
|
||||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
|
||||||
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
|
|
||||||
</ng-template>
|
|
||||||
</adf-sidenav-layout-navigation>
|
|
||||||
|
|
||||||
<adf-sidenav-layout-content>
|
|
||||||
<ng-template>
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
</ng-template>
|
|
||||||
</adf-sidenav-layout-content>
|
|
||||||
|
|
||||||
</adf-sidenav-layout>
|
|
||||||
|
|
||||||
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
|
|
||||||
</adf-upload-drag-area>
|
|
||||||
</div>
|
|
@@ -1,16 +0,0 @@
|
|||||||
:host {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 599px) {
|
|
||||||
.adf-app-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 719px) {
|
|
||||||
.adf-app-logo {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
@@ -26,12 +26,16 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { CoreModule } from '@alfresco/adf-core';
|
import { CoreModule } from '@alfresco/adf-core';
|
||||||
import { LayoutComponent } from './layout.component';
|
import { AppLayoutComponent } from './app-layout/app-layout.component';
|
||||||
import { ContentModule } from '@alfresco/adf-content-services';
|
import { ContentModule } from '@alfresco/adf-content-services';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { AppSidenavModule } from '../sidenav/sidenav.module';
|
import { AppSidenavModule } from '../sidenav/sidenav.module';
|
||||||
import { AppCommonModule } from '../common/common.module';
|
import { AppCommonModule } from '../common/common.module';
|
||||||
import { AppHeaderModule } from '../header/header.module';
|
import { AppHeaderModule } from '../header/header.module';
|
||||||
|
import { PageLayoutComponent } from './page-layout/page-layout.component';
|
||||||
|
import { PageLayoutHeaderComponent } from './page-layout/page-layout-header.component';
|
||||||
|
import { PageLayoutContentComponent } from './page-layout/page-layout-content.component';
|
||||||
|
import { PageLayoutErrorComponent } from './page-layout/page-layout-error.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@@ -43,7 +47,19 @@ import { AppHeaderModule } from '../header/header.module';
|
|||||||
AppSidenavModule,
|
AppSidenavModule,
|
||||||
AppHeaderModule
|
AppHeaderModule
|
||||||
],
|
],
|
||||||
declarations: [LayoutComponent],
|
declarations: [
|
||||||
exports: [LayoutComponent]
|
AppLayoutComponent,
|
||||||
|
PageLayoutComponent,
|
||||||
|
PageLayoutHeaderComponent,
|
||||||
|
PageLayoutContentComponent,
|
||||||
|
PageLayoutErrorComponent
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
AppLayoutComponent,
|
||||||
|
PageLayoutComponent,
|
||||||
|
PageLayoutHeaderComponent,
|
||||||
|
PageLayoutContentComponent,
|
||||||
|
PageLayoutErrorComponent
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class AppLayoutModule {}
|
export class AppLayoutModule {}
|
||||||
|
7
src/app/components/layout/layout.theme.scss
Normal file
7
src/app/components/layout/layout.theme.scss
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@import './app-layout/app-layout.theme.scss';
|
||||||
|
@import './page-layout/page-layout.theme.scss';
|
||||||
|
|
||||||
|
@mixin layout-theme($theme) {
|
||||||
|
@include app-layout-theme($theme);
|
||||||
|
@include app-page-layout-theme($theme);
|
||||||
|
}
|
@@ -0,0 +1,45 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Input,
|
||||||
|
HostBinding
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-page-layout-content',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
host: { class: 'app-page-layout-content' }
|
||||||
|
})
|
||||||
|
export class PageLayoutContentComponent {
|
||||||
|
@Input()
|
||||||
|
@HostBinding('class.scrollable')
|
||||||
|
scrollable = false;
|
||||||
|
}
|
@@ -0,0 +1,39 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ChangeDetectionStrategy
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-page-layout-error',
|
||||||
|
template: `<ng-content></ng-content>`,
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
host: { class: 'app-page-layout-error' }
|
||||||
|
})
|
||||||
|
export class PageLayoutErrorComponent {}
|
@@ -0,0 +1,39 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ChangeDetectionStrategy
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-page-layout-header',
|
||||||
|
template: '<ng-content></ng-content>',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
host: { class: 'app-page-layout-header' }
|
||||||
|
})
|
||||||
|
export class PageLayoutHeaderComponent {}
|
@@ -0,0 +1,3 @@
|
|||||||
|
<ng-content select="app-page-layout-header"></ng-content>
|
||||||
|
<ng-content select="app-page-layout-error" *ngIf="hasError"></ng-content>
|
||||||
|
<ng-content select="app-page-layout-content" *ngIf="!hasError"></ng-content>
|
@@ -0,0 +1,43 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Input
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-page-layout',
|
||||||
|
templateUrl: 'page-layout.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
host: { class: 'app-page-layout' },
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||||||
|
})
|
||||||
|
export class PageLayoutComponent {
|
||||||
|
@Input()
|
||||||
|
hasError = false;
|
||||||
|
}
|
46
src/app/components/layout/page-layout/page-layout.theme.scss
Normal file
46
src/app/components/layout/page-layout/page-layout.theme.scss
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
@mixin app-page-layout-theme($theme) {
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
||||||
|
.app-page-layout {
|
||||||
|
@include flex-column;
|
||||||
|
|
||||||
|
.app-page-layout-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 0 0 65px;
|
||||||
|
flex-basis: 48px;
|
||||||
|
background: #fafafa;
|
||||||
|
border-bottom: 1px solid mat-color($foreground, text, 0.07);
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-page-layout-content {
|
||||||
|
@include flex-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-page-layout-error {
|
||||||
|
@include flex-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
@include flex-column;
|
||||||
|
border-right: 1px solid mat-color($foreground, text, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable {
|
||||||
|
overflow: auto !important;
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
overflow: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-width: 350px;
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@@ -1,82 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @license
|
|
||||||
* Alfresco Example Content Application
|
|
||||||
*
|
|
||||||
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
|
||||||
*
|
|
||||||
* This file is part of the Alfresco Example Content Application.
|
|
||||||
* If the software was purchased under a paid Alfresco license, the terms of
|
|
||||||
* the paid license agreement will prevail. Otherwise, the software is
|
|
||||||
* provided under the following open source license terms:
|
|
||||||
*
|
|
||||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Lesser General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Lesser General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Lesser General Public License
|
|
||||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
|
|
||||||
import { NavigationEnd } from '@angular/router';
|
|
||||||
import { Subject } from 'rxjs';
|
|
||||||
|
|
||||||
class RouterMock {
|
|
||||||
private subject = new Subject();
|
|
||||||
public events = this.subject.asObservable();
|
|
||||||
|
|
||||||
navigate(url = '') {
|
|
||||||
const navigationEnd = new NavigationEnd(0, '', url);
|
|
||||||
this.subject.next(navigationEnd);
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
this.subject.next(null);
|
|
||||||
this.subject.complete();
|
|
||||||
this.subject = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('SidenavViewsManagerDirective', () => {
|
|
||||||
let component;
|
|
||||||
let router;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
router = <any>new RouterMock();
|
|
||||||
component = new SidenavViewsManagerDirective(router, null, null);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
router.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Router events', () => {
|
|
||||||
it('should set minimizeSidenav to true when url is in minimizeConditions', () => {
|
|
||||||
router.navigate('/search/');
|
|
||||||
expect(component.minimizeSidenav).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should set minimizeSidenav to false when url is not in minimizeConditions', () => {
|
|
||||||
router.navigate('/somewhere/');
|
|
||||||
expect(component.minimizeSidenav).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should set hideSidenav property to true when url is in hideConditions', () => {
|
|
||||||
router.navigate('/preview/');
|
|
||||||
expect(component.hideSidenav).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should set hideSidenav property to false when url is not in hideConditions', () => {
|
|
||||||
router.navigate('somewhere');
|
|
||||||
expect(component.hideSidenav).toBe(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
*/
|
|
@@ -1,78 +1,79 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<app-page-layout-header>
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
|
||||||
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<ng-container *ifExperimental="'extensions'">
|
<adf-toolbar class="inline">
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
</adf-toolbar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inner-layout__content">
|
<ng-container *ifExperimental="'extensions'">
|
||||||
<div class="inner-layout__panel">
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
<adf-document-list #documentList
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
acaDocumentList
|
</ng-container>
|
||||||
[display]="documentDisplayMode$ | async"
|
</ng-container>
|
||||||
currentFolderId="-mysites-"
|
</adf-toolbar>
|
||||||
selectionMode="single"
|
</app-page-layout-header>
|
||||||
[navigate]="false"
|
|
||||||
[sorting]="[ 'title', 'asc' ]"
|
|
||||||
(node-dblclick)="navigateTo($event.detail?.node)"
|
|
||||||
(name-click)="navigateTo($event.detail?.node)">
|
|
||||||
|
|
||||||
<empty-folder-content>
|
<app-page-layout-content>
|
||||||
<ng-template>
|
<div class="main-content">
|
||||||
<adf-empty-content
|
<adf-document-list #documentList
|
||||||
icon="group_work"
|
acaDocumentList
|
||||||
[title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE'"
|
[display]="documentDisplayMode$ | async"
|
||||||
subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT">
|
currentFolderId="-mysites-"
|
||||||
</adf-empty-content>
|
selectionMode="single"
|
||||||
</ng-template>
|
[navigate]="false"
|
||||||
</empty-folder-content>
|
[sorting]="[ 'title', 'asc' ]"
|
||||||
|
(node-dblclick)="navigateTo($event.detail?.node)"
|
||||||
|
(name-click)="navigateTo($event.detail?.node)">
|
||||||
|
|
||||||
<data-columns>
|
<empty-folder-content>
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
<ng-template>
|
||||||
|
<adf-empty-content
|
||||||
|
icon="group_work"
|
||||||
|
[title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE'"
|
||||||
|
subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT">
|
||||||
|
</adf-empty-content>
|
||||||
|
</ng-template>
|
||||||
|
</empty-folder-content>
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
<data-columns>
|
||||||
<data-column
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
<ng-template let-context>
|
|
||||||
<app-dynamic-column
|
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
|
||||||
<data-column
|
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
|
</ng-template>
|
||||||
|
</data-column>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</data-columns>
|
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
</adf-pagination>
|
<data-column
|
||||||
</div>
|
[key]="column.key"
|
||||||
</div>
|
[title]="column.title"
|
||||||
</div>
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
</data-columns>
|
||||||
|
</adf-document-list>
|
||||||
|
|
||||||
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
|
</adf-pagination>
|
||||||
|
</div>
|
||||||
|
</app-page-layout-content>
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -1,83 +1,83 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<app-page-layout-header>
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
|
||||||
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<adf-toolbar class="inline">
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
</ng-container>
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
</adf-toolbar>
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
</div>
|
</ng-container>
|
||||||
|
</adf-toolbar>
|
||||||
|
</app-page-layout-header>
|
||||||
|
|
||||||
<div class="inner-layout__content">
|
<app-page-layout-content>
|
||||||
<div class="inner-layout__panel">
|
<div class="main-content">
|
||||||
<adf-document-list #documentList
|
<adf-document-list #documentList
|
||||||
acaDocumentList
|
acaDocumentList
|
||||||
acaContextActions
|
acaContextActions
|
||||||
[display]="documentDisplayMode$ | async"
|
[display]="documentDisplayMode$ | async"
|
||||||
currentFolderId="-recent-"
|
currentFolderId="-recent-"
|
||||||
selectionMode="multiple"
|
selectionMode="multiple"
|
||||||
[navigate]="false"
|
[navigate]="false"
|
||||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||||
[imageResolver]="imageResolver"
|
[imageResolver]="imageResolver"
|
||||||
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
||||||
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
||||||
|
|
||||||
<empty-folder-content>
|
<empty-folder-content>
|
||||||
<ng-template>
|
<ng-template>
|
||||||
<adf-empty-content
|
<adf-empty-content
|
||||||
icon="access_time"
|
icon="access_time"
|
||||||
[title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
|
[title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
|
||||||
subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
|
subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
|
||||||
</adf-empty-content>
|
</adf-empty-content>
|
||||||
|
</ng-template>
|
||||||
|
</empty-folder-content>
|
||||||
|
|
||||||
|
<data-columns>
|
||||||
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</empty-folder-content>
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<data-columns>
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
</ng-container>
|
||||||
<data-column
|
</data-columns>
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
<ng-template let-context>
|
|
||||||
<app-dynamic-column
|
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
</adf-document-list>
|
||||||
<data-column
|
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</ng-container>
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
</data-columns>
|
</adf-pagination>
|
||||||
|
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
|
||||||
</adf-pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
|
||||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||||
|
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||||
|
</div>
|
||||||
|
</app-page-layout-content>
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -34,6 +34,7 @@ import { AppToolbarModule } from '../toolbar/toolbar.module';
|
|||||||
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
||||||
import { RecentFilesComponent } from './recent-files.component';
|
import { RecentFilesComponent } from './recent-files.component';
|
||||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@@ -55,7 +56,8 @@ const routes: Routes = [
|
|||||||
AppCommonModule,
|
AppCommonModule,
|
||||||
AppToolbarModule,
|
AppToolbarModule,
|
||||||
ContextMenuModule,
|
ContextMenuModule,
|
||||||
AppInfoDrawerModule
|
AppInfoDrawerModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
declarations: [RecentFilesComponent],
|
declarations: [RecentFilesComponent],
|
||||||
exports: [RecentFilesComponent]
|
exports: [RecentFilesComponent]
|
||||||
|
@@ -33,6 +33,7 @@ import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
|||||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||||
import { AppCommonModule } from '../common/common.module';
|
import { AppCommonModule } from '../common/common.module';
|
||||||
import { DirectivesModule } from '../../directives/directives.module';
|
import { DirectivesModule } from '../../directives/directives.module';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@@ -42,7 +43,8 @@ import { DirectivesModule } from '../../directives/directives.module';
|
|||||||
AppCommonModule,
|
AppCommonModule,
|
||||||
AppInfoDrawerModule,
|
AppInfoDrawerModule,
|
||||||
AppToolbarModule,
|
AppToolbarModule,
|
||||||
DirectivesModule
|
DirectivesModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
declarations: [SearchResultsComponent, SearchResultsRowComponent],
|
declarations: [SearchResultsComponent, SearchResultsRowComponent],
|
||||||
exports: [SearchResultsComponent, SearchResultsRowComponent]
|
exports: [SearchResultsComponent, SearchResultsRowComponent]
|
||||||
|
@@ -1,89 +1,91 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
|
<app-page-layout-header>
|
||||||
</adf-breadcrumb>
|
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
|
||||||
<adf-toolbar class="inline">
|
</adf-breadcrumb>
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<adf-toolbar class="inline">
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
</ng-container>
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
</adf-toolbar>
|
</ng-container>
|
||||||
|
</adf-toolbar>
|
||||||
|
</app-page-layout-header>
|
||||||
|
|
||||||
|
<app-page-layout-content>
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="adf-search-results">
|
||||||
|
<adf-search-filter
|
||||||
|
#searchFilter
|
||||||
|
[ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"></adf-search-filter>
|
||||||
|
<div class="adf-search-results__content">
|
||||||
|
<mat-progress-bar
|
||||||
|
*ngIf="isLoading"
|
||||||
|
color="primary"
|
||||||
|
mode="indeterminate">
|
||||||
|
</mat-progress-bar>
|
||||||
|
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
|
||||||
|
<div class="content__side--left">
|
||||||
|
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
|
||||||
|
|
||||||
|
<div class="adf-search-results__facets">
|
||||||
|
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<adf-search-sorting-picker class="content__side--right"></adf-search-sorting-picker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<adf-document-list
|
||||||
|
#documentList
|
||||||
|
acaDocumentList
|
||||||
|
[showHeader]="false"
|
||||||
|
[selectionMode]="'multiple'"
|
||||||
|
[sortingMode]="'server'"
|
||||||
|
[sorting]="sorting"
|
||||||
|
[node]="data"
|
||||||
|
(node-dblclick)="onNodeDoubleClick($event.detail?.node)">
|
||||||
|
|
||||||
|
<data-columns>
|
||||||
|
<data-column
|
||||||
|
[key]="'$thumbnail'"
|
||||||
|
[type]="'image'"
|
||||||
|
[sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
|
||||||
|
[sortable]="false">
|
||||||
|
</data-column>
|
||||||
|
|
||||||
|
<data-column
|
||||||
|
key
|
||||||
|
type="text">
|
||||||
|
<ng-template let-context>
|
||||||
|
<aca-search-results-row [context]="context"></aca-search-results-row>
|
||||||
|
</ng-template>
|
||||||
|
</data-column>
|
||||||
|
|
||||||
|
</data-columns>
|
||||||
|
|
||||||
|
<empty-folder-content>
|
||||||
|
<ng-template>
|
||||||
|
<ng-container *ngIf="data">
|
||||||
|
<div class="empty-search__block">
|
||||||
|
<p class="empty-search__text">
|
||||||
|
{{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
</empty-folder-content>
|
||||||
|
</adf-document-list>
|
||||||
|
|
||||||
|
<adf-pagination *ngIf="!documentList.isEmpty()"
|
||||||
|
acaPagination
|
||||||
|
[target]="documentList"
|
||||||
|
(change)="onPaginationChanged($event)">
|
||||||
|
</adf-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||||
<div class="inner-layout__content">
|
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||||
<div class="inner-layout__panel">
|
|
||||||
<div class="adf-search-results">
|
|
||||||
<adf-search-filter
|
|
||||||
#searchFilter
|
|
||||||
[ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"></adf-search-filter>
|
|
||||||
<div class="adf-search-results__content">
|
|
||||||
<mat-progress-bar
|
|
||||||
*ngIf="isLoading"
|
|
||||||
color="primary"
|
|
||||||
mode="indeterminate">
|
|
||||||
</mat-progress-bar>
|
|
||||||
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
|
|
||||||
<div class="content__side--left">
|
|
||||||
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
|
|
||||||
|
|
||||||
<div class="adf-search-results__facets">
|
|
||||||
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<adf-search-sorting-picker class="content__side--right"></adf-search-sorting-picker>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<adf-document-list
|
|
||||||
#documentList
|
|
||||||
acaDocumentList
|
|
||||||
[showHeader]="false"
|
|
||||||
[selectionMode]="'multiple'"
|
|
||||||
[sortingMode]="'server'"
|
|
||||||
[sorting]="sorting"
|
|
||||||
[node]="data"
|
|
||||||
(node-dblclick)="onNodeDoubleClick($event.detail?.node)">
|
|
||||||
|
|
||||||
<data-columns>
|
|
||||||
<data-column
|
|
||||||
[key]="'$thumbnail'"
|
|
||||||
[type]="'image'"
|
|
||||||
[sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
|
|
||||||
[sortable]="false">
|
|
||||||
</data-column>
|
|
||||||
|
|
||||||
<data-column
|
|
||||||
key
|
|
||||||
type="text">
|
|
||||||
<ng-template let-context>
|
|
||||||
<aca-search-results-row [context]="context"></aca-search-results-row>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
|
|
||||||
</data-columns>
|
|
||||||
|
|
||||||
<empty-folder-content>
|
|
||||||
<ng-template>
|
|
||||||
<ng-container *ngIf="data">
|
|
||||||
<div class="empty-search__block">
|
|
||||||
<p class="empty-search__text">
|
|
||||||
{{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</ng-template>
|
|
||||||
</empty-folder-content>
|
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination *ngIf="!documentList.isEmpty()"
|
|
||||||
acaPagination
|
|
||||||
[target]="documentList"
|
|
||||||
(change)="onPaginationChanged($event)">
|
|
||||||
</adf-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
|
||||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</app-page-layout-content>
|
||||||
|
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -1,80 +1,79 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
<app-page-layout-header>
|
||||||
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
|
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
|
||||||
</adf-breadcrumb>
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<adf-toolbar class="inline">
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
|
</ng-container>
|
||||||
|
</adf-toolbar>
|
||||||
|
</app-page-layout-header>
|
||||||
|
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<app-page-layout-content>
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
<div class="main-content">
|
||||||
</ng-container>
|
<adf-document-list #documentList
|
||||||
</adf-toolbar>
|
acaDocumentList
|
||||||
</div>
|
acaContextActions
|
||||||
|
[display]="documentDisplayMode$ | async"
|
||||||
|
currentFolderId="-sharedlinks-"
|
||||||
|
selectionMode="multiple"
|
||||||
|
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||||
|
(node-dblclick)="showPreview($event.detail?.node)"
|
||||||
|
(name-click)="showPreview($event.detail?.node)">
|
||||||
|
|
||||||
<div class="inner-layout__content">
|
<empty-folder-content>
|
||||||
<div class="inner-layout__panel">
|
<ng-template>
|
||||||
<adf-document-list #documentList
|
<adf-empty-content
|
||||||
acaDocumentList
|
icon="people"
|
||||||
acaContextActions
|
[title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'"
|
||||||
[display]="documentDisplayMode$ | async"
|
subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
|
||||||
currentFolderId="-sharedlinks-"
|
</adf-empty-content>
|
||||||
selectionMode="multiple"
|
</ng-template>
|
||||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
</empty-folder-content>
|
||||||
(node-dblclick)="showPreview($event.detail?.node)"
|
|
||||||
(name-click)="showPreview($event.detail?.node)">
|
|
||||||
|
|
||||||
<empty-folder-content>
|
<data-columns>
|
||||||
<ng-template>
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
<adf-empty-content
|
|
||||||
icon="people"
|
|
||||||
[title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'"
|
|
||||||
subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
|
|
||||||
</adf-empty-content>
|
|
||||||
</ng-template>
|
|
||||||
</empty-folder-content>
|
|
||||||
|
|
||||||
<data-columns>
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
<data-column
|
||||||
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
|
</ng-template>
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
<data-column
|
<data-column
|
||||||
[key]="column.key"
|
[key]="column.key"
|
||||||
[title]="column.title"
|
[title]="column.title"
|
||||||
[type]="column.type"
|
[type]="column.type"
|
||||||
[format]="column.format"
|
[format]="column.format"
|
||||||
[class]="column.class"
|
[class]="column.class"
|
||||||
[sortable]="column.sortable">
|
[sortable]="column.sortable">
|
||||||
<ng-template let-context>
|
</data-column>
|
||||||
<app-dynamic-column
|
</ng-container>
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
</ng-container>
|
||||||
<data-column
|
</data-columns>
|
||||||
[key]="column.key"
|
</adf-document-list>
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</ng-container>
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
</data-columns>
|
</adf-pagination>
|
||||||
</adf-document-list>
|
</div>
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||||
</adf-pagination>
|
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||||
</div>
|
</div>
|
||||||
|
</app-page-layout-content>
|
||||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
</app-page-layout>
|
||||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
@@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module';
|
|||||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||||
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
||||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@@ -56,7 +57,8 @@ const routes: Routes = [
|
|||||||
AppCommonModule,
|
AppCommonModule,
|
||||||
AppToolbarModule,
|
AppToolbarModule,
|
||||||
ContextMenuModule,
|
ContextMenuModule,
|
||||||
AppInfoDrawerModule
|
AppInfoDrawerModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
declarations: [SharedFilesComponent],
|
declarations: [SharedFilesComponent],
|
||||||
exports: [SharedFilesComponent]
|
exports: [SharedFilesComponent]
|
||||||
|
@@ -1,83 +1,85 @@
|
|||||||
<div class="inner-layout">
|
<app-page-layout>
|
||||||
<div class="inner-layout__header">
|
|
||||||
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
|
|
||||||
</adf-breadcrumb>
|
|
||||||
|
|
||||||
<adf-toolbar class="inline">
|
<app-page-layout-header>
|
||||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
|
||||||
|
</adf-breadcrumb>
|
||||||
|
|
||||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
<adf-toolbar class="inline">
|
||||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||||
</ng-container>
|
|
||||||
</adf-toolbar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inner-layout__content">
|
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||||
<div class="inner-layout__panel">
|
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||||
<adf-document-list #documentList
|
</ng-container>
|
||||||
acaDocumentList
|
</adf-toolbar>
|
||||||
acaContextActions
|
</app-page-layout-header>
|
||||||
[display]="documentDisplayMode$ | async"
|
|
||||||
currentFolderId="-trashcan-"
|
|
||||||
selectionMode="multiple"
|
|
||||||
[navigate]="false"
|
|
||||||
[sorting]="[ 'archivedAt', 'desc' ]">
|
|
||||||
|
|
||||||
<empty-folder-content>
|
<app-page-layout-content>
|
||||||
<ng-template>
|
<div class="main-content">
|
||||||
<adf-empty-content
|
<adf-document-list #documentList
|
||||||
icon="delete"
|
acaDocumentList
|
||||||
[title]="'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE'">
|
acaContextActions
|
||||||
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
|
[display]="documentDisplayMode$ | async"
|
||||||
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
|
currentFolderId="-trashcan-"
|
||||||
</adf-empty-content>
|
selectionMode="multiple"
|
||||||
</ng-template>
|
[navigate]="false"
|
||||||
</empty-folder-content>
|
[sorting]="[ 'archivedAt', 'desc' ]">
|
||||||
|
|
||||||
<data-columns>
|
<empty-folder-content>
|
||||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
<ng-template>
|
||||||
|
<adf-empty-content
|
||||||
|
icon="delete"
|
||||||
|
[title]="'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE'">
|
||||||
|
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
|
||||||
|
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
|
||||||
|
</adf-empty-content>
|
||||||
|
</ng-template>
|
||||||
|
</empty-folder-content>
|
||||||
|
|
||||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
<data-columns>
|
||||||
<data-column
|
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
<ng-template let-context>
|
|
||||||
<app-dynamic-column
|
|
||||||
[id]="column.template"
|
|
||||||
[context]="context">
|
|
||||||
</app-dynamic-column>
|
|
||||||
</ng-template>
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
|
||||||
<data-column
|
|
||||||
[key]="column.key"
|
|
||||||
[title]="column.title"
|
|
||||||
[type]="column.type"
|
|
||||||
[format]="column.format"
|
|
||||||
[class]="column.class"
|
|
||||||
[sortable]="column.sortable">
|
|
||||||
</data-column>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
<data-column
|
<data-column
|
||||||
*ngIf="!isSmallScreen && (user$ | async)?.isAdmin"
|
[key]="column.key"
|
||||||
class="adf-data-table-cell--ellipsis"
|
[title]="column.title"
|
||||||
key="archivedByUser.displayName"
|
[type]="column.type"
|
||||||
title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
<ng-template let-context>
|
||||||
|
<app-dynamic-column
|
||||||
|
[id]="column.template"
|
||||||
|
[context]="context">
|
||||||
|
</app-dynamic-column>
|
||||||
|
</ng-template>
|
||||||
</data-column>
|
</data-column>
|
||||||
</data-columns>
|
</ng-container>
|
||||||
</adf-document-list>
|
|
||||||
|
|
||||||
<adf-pagination acaPagination [target]="documentList">
|
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||||
</adf-pagination>
|
<data-column
|
||||||
</div>
|
[key]="column.key"
|
||||||
|
[title]="column.title"
|
||||||
|
[type]="column.type"
|
||||||
|
[format]="column.format"
|
||||||
|
[class]="column.class"
|
||||||
|
[sortable]="column.sortable">
|
||||||
|
</data-column>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<data-column
|
||||||
|
*ngIf="!isSmallScreen && (user$ | async)?.isAdmin"
|
||||||
|
class="adf-data-table-cell--ellipsis"
|
||||||
|
key="archivedByUser.displayName"
|
||||||
|
title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">
|
||||||
|
</data-column>
|
||||||
|
</data-columns>
|
||||||
|
</adf-document-list>
|
||||||
|
|
||||||
|
<adf-pagination acaPagination [target]="documentList">
|
||||||
|
</adf-pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</app-page-layout-content>
|
||||||
|
|
||||||
|
</app-page-layout>
|
||||||
|
@@ -33,6 +33,7 @@ import { AppCommonModule } from '../common/common.module';
|
|||||||
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||||
import { DirectivesModule } from '../../directives/directives.module';
|
import { DirectivesModule } from '../../directives/directives.module';
|
||||||
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
||||||
|
import { AppLayoutModule } from '../layout/layout.module';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@@ -54,7 +55,8 @@ const routes: Routes = [
|
|||||||
DirectivesModule,
|
DirectivesModule,
|
||||||
AppCommonModule,
|
AppCommonModule,
|
||||||
AppToolbarModule,
|
AppToolbarModule,
|
||||||
ContextMenuModule
|
ContextMenuModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
declarations: [TrashcanComponent],
|
declarations: [TrashcanComponent],
|
||||||
exports: [TrashcanComponent]
|
exports: [TrashcanComponent]
|
||||||
|
@@ -26,7 +26,7 @@
|
|||||||
import { CoreModule } from '@alfresco/adf-core';
|
import { CoreModule } from '@alfresco/adf-core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
|
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { LayoutComponent } from '../components/layout/layout.component';
|
import { AppLayoutComponent } from '../components/layout/app-layout/app-layout.component';
|
||||||
import * as repository from './evaluators/repository.evaluators';
|
import * as repository from './evaluators/repository.evaluators';
|
||||||
import * as app from './evaluators/app.evaluators';
|
import * as app from './evaluators/app.evaluators';
|
||||||
import * as nav from './evaluators/navigation.evaluators';
|
import * as nav from './evaluators/navigation.evaluators';
|
||||||
@@ -75,7 +75,7 @@ export class CoreExtensionsModule {
|
|||||||
|
|
||||||
constructor(extensions: ExtensionService) {
|
constructor(extensions: ExtensionService) {
|
||||||
extensions.setComponents({
|
extensions.setComponents({
|
||||||
'app.layout.main': LayoutComponent,
|
'app.layout.main': AppLayoutComponent,
|
||||||
'app.components.tabs.metadata': MetadataTabComponent,
|
'app.components.tabs.metadata': MetadataTabComponent,
|
||||||
'app.components.tabs.comments': CommentsTabComponent,
|
'app.components.tabs.comments': CommentsTabComponent,
|
||||||
'app.components.tabs.versions': VersionsTabComponent,
|
'app.components.tabs.versions': VersionsTabComponent,
|
||||||
|
@@ -16,9 +16,9 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// todo: move this to corresponding component theme files
|
||||||
app-root,
|
app-root,
|
||||||
app-about,
|
app-about,
|
||||||
app-layout,
|
|
||||||
adf-layout-container,
|
adf-layout-container,
|
||||||
aca-search-results,
|
aca-search-results,
|
||||||
ng-component {
|
ng-component {
|
||||||
|
@@ -11,6 +11,7 @@
|
|||||||
@import '../components/context-menu/context-menu.component.theme';
|
@import '../components/context-menu/context-menu.component.theme';
|
||||||
@import '../dialogs/node-versions/node-versions.dialog.theme';
|
@import '../dialogs/node-versions/node-versions.dialog.theme';
|
||||||
@import '../components/create-menu/create-menu.component.scss';
|
@import '../components/create-menu/create-menu.component.scss';
|
||||||
|
@import '../components/layout/layout.theme.scss';
|
||||||
|
|
||||||
@import './overrides/adf-toolbar.theme';
|
@import './overrides/adf-toolbar.theme';
|
||||||
@import './overrides/adf-search-filter.theme';
|
@import './overrides/adf-search-filter.theme';
|
||||||
@@ -26,7 +27,6 @@
|
|||||||
@import './overrides/adf-layout-header.theme';
|
@import './overrides/adf-layout-header.theme';
|
||||||
@import './overrides/adf-version-manager.theme';
|
@import './overrides/adf-version-manager.theme';
|
||||||
|
|
||||||
@import 'layout';
|
|
||||||
@import 'snackbar';
|
@import 'snackbar';
|
||||||
|
|
||||||
$grey-scale: (
|
$grey-scale: (
|
||||||
@@ -83,7 +83,7 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
|
|||||||
@include adf-layout-header-theme($theme);
|
@include adf-layout-header-theme($theme);
|
||||||
@include adf-version-manager-theme($theme);
|
@include adf-version-manager-theme($theme);
|
||||||
|
|
||||||
@include aca-layout-theme($theme);
|
@include layout-theme($theme);
|
||||||
@include aca-search-input-theme($theme);
|
@include aca-search-input-theme($theme);
|
||||||
@include aca-generic-error-theme($theme);
|
@include aca-generic-error-theme($theme);
|
||||||
@include app-permission-manager-theme($theme);
|
@include app-permission-manager-theme($theme);
|
||||||
|
@@ -1,55 +0,0 @@
|
|||||||
@import 'mixins';
|
|
||||||
|
|
||||||
@mixin aca-layout-theme($theme) {
|
|
||||||
$foreground: map-get($theme, foreground);
|
|
||||||
|
|
||||||
$app-layout--header-height: 65px;
|
|
||||||
$app-layout--side-width: 320px;
|
|
||||||
$app-inner-layout--header-height: 48px;
|
|
||||||
$app-inner-layout--footer-height: 48px;
|
|
||||||
$alfresco-divider-color: mat-color($foreground, text, 0.07);
|
|
||||||
$alfresco-gray-background: #fafafa;
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
@include flex-column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner-layout {
|
|
||||||
@include flex-column;
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 $app-layout--header-height;
|
|
||||||
flex-basis: $app-inner-layout--header-height;
|
|
||||||
background: $alfresco-gray-background;
|
|
||||||
border-bottom: 1px solid $alfresco-divider-color;
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
@include flex-row;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content--hide {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__panel {
|
|
||||||
@include flex-column;
|
|
||||||
border-right: 1px solid mat-color($foreground, text, 0.07);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__side-panel {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
max-width: 350px;
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content--scroll {
|
|
||||||
overflow: auto !important;
|
|
||||||
}
|
|
||||||
}
|
|
Reference in New Issue
Block a user