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';