diff --git a/demo-shell/src/app/app.component.html b/demo-shell/src/app/app.component.html
index d06c2af228..1fa3c352d9 100644
--- a/demo-shell/src/app/app.component.html
+++ b/demo-shell/src/app/app.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/demo-shell/src/app/app.component.ts b/demo-shell/src/app/app.component.ts
index 365e7095fa..f4db0e4f2e 100644
--- a/demo-shell/src/app/app.component.ts
+++ b/demo-shell/src/app/app.component.ts
@@ -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) => {
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index e3d521ac41..b7f17bb126 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -85,67 +85,61 @@ export const appRoutes: Routes = [
]
},
{ path: 'preview/s/:id', component: SharedLinkViewComponent },
- {
- path: 'breadcrumb',
- canActivate: [AuthGuardEcm],
- component: AppLayoutComponent,
- loadChildren: 'app/components/breadcrumb-demo/breadcrumb-demo.module#AppBreadcrumbModule'
- },
- {
- path: 'notifications',
- component: AppLayoutComponent,
- children: [
- {
- path: '',
- loadChildren: 'app/components/notifications/notifications.module#AppNotificationsModule'
- }
- ]
- },
- {
- path: 'config-editor',
- component: AppLayoutComponent,
- children: [
- {
- path: '',
- loadChildren: 'app/components/config-editor/config-editor.module#AppConfigEditorModule'
- }
- ]
- },
- {
- path: 'card-view',
- component: AppLayoutComponent,
- children: [
- {
- path: '',
- loadChildren: 'app/components/card-view/card-view.module#AppCardViewModule'
- }
- ]
- },
- {
- path: 'sites',
- component: AppLayoutComponent,
- children: [
- {
- path: '',
- loadChildren: 'app/components/sites/sites.module#SitesModule'
- }
- ]
- },
- {
- path: 'header-data',
- component: AppLayoutComponent,
- children: [
- {
- path: '',
- loadChildren: 'app/components/header-data/header-data.module#AppHeaderDataModule'
- }
- ]
- },
{
path: '',
component: AppLayoutComponent,
canActivate: [AuthGuard],
children: [
+ {
+ path: 'breadcrumb',
+ canActivate: [AuthGuardEcm],
+ loadChildren: 'app/components/breadcrumb-demo/breadcrumb-demo.module#AppBreadcrumbModule'
+ },
+ {
+ path: 'notifications',
+ children: [
+ {
+ path: '',
+ loadChildren: 'app/components/notifications/notifications.module#AppNotificationsModule'
+ }
+ ]
+ },
+ {
+ path: 'config-editor',
+ children: [
+ {
+ path: '',
+ loadChildren: 'app/components/config-editor/config-editor.module#AppConfigEditorModule'
+ }
+ ]
+ },
+ {
+ path: 'card-view',
+ children: [
+ {
+ path: '',
+ loadChildren: 'app/components/card-view/card-view.module#AppCardViewModule'
+ }
+ ]
+ },
+ {
+ path: 'sites',
+ children: [
+ {
+ path: '',
+ loadChildren: 'app/components/sites/sites.module#SitesModule'
+ }
+ ]
+ },
+ {
+ path: 'header-data',
+ children: [
+ {
+ path: '',
+ loadChildren: 'app/components/header-data/header-data.module#AppHeaderDataModule'
+ }
+ ]
+ },
{
path: '',
component: HomeComponent
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 1cc1e35967..5157b2218a 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -1,4 +1,4 @@
-
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index 7518587bc6..9344a33eab 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -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) {
diff --git a/docs/core/components/sidenav-layout.component.md b/docs/core/components/sidenav-layout.component.md
index 12c571a1e2..9909512001 100644
--- a/docs/core/components/sidenav-layout.component.md
+++ b/docs/core/components/sidenav-layout.component.md
@@ -75,6 +75,7 @@ sub-components (note the use of `` 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
diff --git a/docs/user-guide/rtl-support.md b/docs/user-guide/rtl-support.md
index d50e1c6dbc..b4327203be 100644
--- a/docs/user-guide/rtl-support.md
+++ b/docs/user-guide/rtl-support.md
@@ -18,6 +18,18 @@ added to the main `` element in `index.html`. When the attribute is set to
```
+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
+
+......
+
+```
+
+
+
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)
diff --git a/e2e/core/viewer/viewer-properties.e2e.ts b/e2e/core/viewer/viewer-properties.e2e.ts
index ba5db13ea8..76c764308d 100644
--- a/e2e/core/viewer/viewer-properties.e2e.ts
+++ b/e2e/core/viewer/viewer-properties.e2e.ts
@@ -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);
diff --git a/e2e/pages/adf/navigationBarPage.ts b/e2e/pages/adf/navigationBarPage.ts
index 31d72c2c0c..d90e02bf29 100644
--- a/e2e/pages/adf/navigationBarPage.ts
+++ b/e2e/pages/adf/navigationBarPage.ts
@@ -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;
+ }
}
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
index 294ddb56d1..2155d9b30b 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.html
@@ -1,27 +1,29 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
index 3b4e21fe08..e09993c521 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -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%;
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
index 5b59352694..7ca53632b5 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
@@ -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;
diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
index 006dc56c30..7ba0cff6b1 100644
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
@@ -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';