inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-23 18:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4227] Sidenav Layout - support direction (#4583)

Browse Source 
* basic ui direction service

* direction property

* demo shell integration

* move the direction in up sidenav layout to allow also the header to reorganize
use the configuration editor to change rtl ltr
add documenation

* Update app.component.html

* fix unit tests

* fix overlay viewer e2e

* fix e2e
This commit is contained in:
Cilibiu Bogdan 2019-04-25 02:48:41 +03:00 committed by Eugenio Romano
parent 83cb98f435
commit 3b83539b13
13 changed files with 124 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/app.component.html
View File

@ -1,4 +1,4 @@
<div [dir]="textOrientation" class="adf-demo-app-container" >
<div class="adf-demo-app-container">
<router-outlet></router-outlet>
<router-outlet name="overlay"></router-outlet>
</div>

10
demo-shell/src/app/app.component.ts
View File

@ -17,7 +17,6 @@
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import {
UserPreferencesService,
AuthenticationService,
AlfrescoApiService,
PageTitleService
@ -33,24 +32,15 @@ import { MatDialog } from '@angular/material';
})
export class AppComponent implements OnInit {
textOrientation: string = 'ltr';
constructor(private pageTitleService: PageTitleService,
private alfrescoApiService: AlfrescoApiService,
private authenticationService: AuthenticationService,
private userPreferencesService: UserPreferencesService,
private router: Router,
private dialogRef: MatDialog) {
this.userPreferencesService.set('textOrientation', this.textOrientation);
}
ngOnInit() {
this.userPreferencesService.select('textOrientation').subscribe((textOrientation) => {
this.textOrientation = textOrientation;
});
this.pageTitleService.setTitle('title');
this.alfrescoApiService.getInstance().on('error', (error) => {

16
demo-shell/src/app/app.routes.ts
View File

@ -85,15 +85,18 @@ export const appRoutes: Routes = [
]
},
{ path: 'preview/s/:id', component: SharedLinkViewComponent },
{
path: '',
component: AppLayoutComponent,
canActivate: [AuthGuard],
children: [
{
path: 'breadcrumb',
canActivate: [AuthGuardEcm],
component: AppLayoutComponent,
loadChildren: 'app/components/breadcrumb-demo/breadcrumb-demo.module#AppBreadcrumbModule'
},
{
path: 'notifications',
component: AppLayoutComponent,
children: [
{
path: '',
@ -103,7 +106,6 @@ export const appRoutes: Routes = [
},
{
path: 'config-editor',
component: AppLayoutComponent,
children: [
{
path: '',
@ -113,7 +115,6 @@ export const appRoutes: Routes = [
},
{
path: 'card-view',
component: AppLayoutComponent,
children: [
{
path: '',
@ -123,7 +124,6 @@ export const appRoutes: Routes = [
},
{
path: 'sites',
component: AppLayoutComponent,
children: [
{
path: '',
@ -133,7 +133,6 @@ export const appRoutes: Routes = [
},
{
path: 'header-data',
component: AppLayoutComponent,
children: [
{
path: '',
@ -141,11 +140,6 @@ export const appRoutes: Routes = [
}
]
},
{
path: '',
component: AppLayoutComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: HomeComponent

2
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@ -1,4 +1,4 @@
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav" [direction]="direction"
[expandedSidenav]="expandedSidenav" (expanded)="setState($event)" [position]="position">
<adf-sidenav-layout-header>

8
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@ -84,6 +84,7 @@ export class AppLayoutComponent implements OnInit {
expandedSidenav = false;
position = 'start';
direction = 'ltr';
hideSidenav = false;
showMenu = true;
@ -113,16 +114,23 @@ export class AppLayoutComponent implements OnInit {
this.headerService.tooltip.subscribe((tooltip) => this.tooltip = tooltip);
this.headerService.position.subscribe((position) => this.position = position);
this.headerService.hideSidenav.subscribe((hideSidenav) => this.hideSidenav = hideSidenav);
this.userPreferencesService.select('textOrientation').subscribe((textOrientation) => {
this.direction = textOrientation;
});
}
constructor(
private userPreferences: UserPreferencesService,
private config: AppConfigService,
private alfrescoApiService: AlfrescoApiService,
private userPreferencesService: UserPreferencesService,
private headerService: HeaderDataService) {
if (this.alfrescoApiService.getInstance().isOauthConfiguration()) {
this.enableRedirect = false;
}
this.userPreferencesService.set('textOrientation', this.direction);
}
setState(state) {

1
docs/core/components/sidenav-layout.component.md
View File

@ -75,6 +75,7 @@ sub-components (note the use of `<ng-template>` in the sub-components' body sect
| sidenavMax | `number` | | Maximum size of the navigation region. |
| sidenavMin | `number` | | Minimum size of the navigation region. |
| stepOver | `number` | | Screen size at which display switches from small screen to large screen configuration. |
| direction | `string` | `ltr` | The direction of the layout. 'ltr' or 'rtl' |
### Events

12
docs/user-guide/rtl-support.md
View File

@ -18,6 +18,18 @@ added to the main `<body>` element in `index.html`. When the attribute is set to
</body>
```
If you use the [Sidenav Layout component](../core/components/sidenav-layout.component.md) you can choose set the direction property in it using the property direction ans set it to **'rtl'**
```html
<adf-sidenav-layout
[direction]="'rtl'">
......
</adf-sidenav-layout>
```
Also, we have a [translation file](internationalization.md) for Arabic (code: "ar"),
which is the
[most widely used](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers)

1
e2e/core/viewer/viewer-properties.e2e.ts
View File

@ -187,6 +187,7 @@ describe('Viewer - properties', () => {
it('[C260100] Should be possible to disable Overlay viewer', () => {
viewerPage.clickCloseButton();
navigationBarPage.scrollTo(navigationBarPage.overlayViewerButton);
navigationBarPage.clickOverlayViewerButton();
dataTable.doubleClickRow('Name', fileForOverlay.name);

8
e2e/pages/adf/navigationBarPage.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { browser, by, element } from 'protractor';
import { browser, by, element, ElementFinder } from 'protractor';
import { ProcessServicesPage } from './process-services/processServicesPage';
import { AppListCloudPage } from '@alfresco/adf-testing';
import TestConfig = require('../../test.config');
@ -24,6 +24,7 @@ import { BrowserVisibility } from '@alfresco/adf-testing';
export class NavigationBarPage {
linkListContainer = element(by.css('.adf-sidenav-linklist'));
contentServicesButton = element(by.css('a[data-automation-id="Content Services"]'));
dataTableButton = element(by.css('a[data-automation-id="Datatable"]'));
dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]'));
@ -247,4 +248,9 @@ export class NavigationBarPage {
BrowserVisibility.waitUntilElementIsVisible(this.customSourcesButton);
this.customSourcesButton.click();
}
scrollTo(el: ElementFinder) {
browser.executeScript(`return arguments[0].scrollTop = arguments[1].offsetTop`, this.linkListContainer.getWebElement(), el.getWebElement());
return this;
}
}

12
lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
View File

@ -1,9 +1,10 @@
<ng-container *ngIf="!isHeaderInside">
<div [dir]="direction" class="adf-sidenav-layout-full-space">
<ng-container *ngIf="!isHeaderInside">
<ng-container class="adf-sidenav-layout-outer-header"
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
</ng-container>
</ng-container>
<adf-layout-container #container
<adf-layout-container #container
[position]="position"
[sidenavMin]="sidenavMin"
[sidenavMax]="sidenavMax"
@ -22,6 +23,7 @@
</ng-container>
<ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
</ng-container>
</adf-layout-container>
</adf-layout-container>
<ng-template #emptyTemplate></ng-template>
<ng-template #emptyTemplate></ng-template>
</div>

11
lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

@ -2,6 +2,17 @@
$adf-sidenav-max: 300px !default;
.adf-sidenav-layout {
&-full-space {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
width: 100%;
}
@include flex-column;
width: 100%;

4
lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
View File

@ -144,8 +144,8 @@ describe('SidenavLayoutComponent', () => {
describe('adf-sidenav-layout-header', () => {
const outerHeaderSelector = By.css('.adf-sidenav-layout > #header-test'),
innerHeaderSelector = By.css('.adf-sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
const outerHeaderSelector = By.css('.adf-sidenav-layout-full-space > #header-test');
const innerHeaderSelector = By.css('.adf-layout__content > #header-test');
it('should contain the transcluded header template outside of the layout-container', () => {
mediaQueryList.matches = false;

4
lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
View File

@ -42,9 +42,11 @@ import { BehaviorSubject, Observable } from 'rxjs';
host: { class: 'adf-sidenav-layout' }
})
export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
static STEP_OVER = 600;
/** The direction of the layout. 'ltr' or 'rtl' */
@Input() direction = 'ltr';
/** The side that the drawer is attached to. Possible values are 'start' and 'end'. */
@Input() position = 'start';