From cc1efc9cd6987ea94b50e5d4c01ef27812314fa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Popovics=20Andr=C3=A1s?= Date: Wed, 4 Oct 2017 17:54:18 +0100 Subject: [PATCH] [ADF-1611] Demo shell responsiveness (#2426) * Reapplying the unreappliable * Fix buggy search button * Fix settings * Last bit of responsive stylings --- demo-shell-ng2/app/app.component.html | 3 +- demo-shell-ng2/app/app.component.ts | 22 +- demo-shell-ng2/app/app.module.ts | 4 +- demo-shell-ng2/app/app.routes.ts | 222 +++++++++-------- .../app-layout/app-layout.component.html | 49 ++++ .../app-layout/app-layout.component.scss | 52 ++++ .../app-layout/app-layout.component.ts | 53 ++++ .../app-menu/app-menu.component.html | 96 -------- .../app-menu/app-menu.component.scss | 28 --- .../components/app-menu/app-menu.component.ts | 34 --- .../app/components/files/files.component.html | 227 +++++++++--------- ...les.component.css => files.component.scss} | 23 ++ .../app/components/files/files.component.ts | 3 +- .../form/form-list-demo.component.ts | 1 - .../settings/settings.component.css | 20 -- .../settings/settings.component.html | 8 +- .../settings/settings.component.scss | 37 +++ .../components/settings/settings.component.ts | 8 +- demo-shell-ng2/app/material.module.ts | 2 + demo-shell-ng2/app/theme.scss | 2 + .../components/document-list.component.scss | 4 +- .../components/search-control.component.html | 2 +- .../components/search-control.component.scss | 14 +- .../components/search-control.component.ts | 2 +- 24 files changed, 464 insertions(+), 452 deletions(-) create mode 100644 demo-shell-ng2/app/components/app-layout/app-layout.component.html create mode 100644 demo-shell-ng2/app/components/app-layout/app-layout.component.scss create mode 100644 demo-shell-ng2/app/components/app-layout/app-layout.component.ts delete mode 100644 demo-shell-ng2/app/components/app-menu/app-menu.component.html delete mode 100644 demo-shell-ng2/app/components/app-menu/app-menu.component.scss delete mode 100644 demo-shell-ng2/app/components/app-menu/app-menu.component.ts rename demo-shell-ng2/app/components/files/{files.component.css => files.component.scss} (70%) delete mode 100644 demo-shell-ng2/app/components/settings/settings.component.css create mode 100644 demo-shell-ng2/app/components/settings/settings.component.scss diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index a66de4b6d2..90c6b64632 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -1,2 +1 @@ - - + \ No newline at end of file diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index ad678f1b80..d25c345123 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -16,7 +16,7 @@ */ import { Component, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-alfresco-core'; @Component({ @@ -27,7 +27,6 @@ import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-a }) export class AppComponent { searchTerm: string = ''; - showAppMenu = true; constructor(private settingsService: AlfrescoSettingsService, private storage: StorageService, @@ -36,25 +35,6 @@ export class AppComponent { router: Router) { this.setProvider(); pageTitleService.setTitle(); - - router.events - .filter(event => event instanceof NavigationEnd) - .subscribe(() => { - let currentRoute = route.root; - - while (currentRoute.firstChild) { - currentRoute = currentRoute.firstChild; - } - - const snapshot: any = currentRoute.snapshot || {}; - const data: any = snapshot.data || {}; - - if (data && data['showAppMenu'] !== undefined) { - this.showAppMenu = data && data.showAppMenu; - } else { - this.showAppMenu = true; - } - }); } private setProvider() { diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts index fcafb18ef4..c5073419f3 100644 --- a/demo-shell-ng2/app/app.module.ts +++ b/demo-shell-ng2/app/app.module.ts @@ -41,7 +41,7 @@ import { ChartsModule } from 'ng2-charts'; import { AppComponent } from './app.component'; import { routing } from './app.routes'; import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component'; -import { AppMenuComponent } from './components/app-menu/app-menu.component'; +import { AppLayoutComponent } from './components/app-layout/app-layout.component'; import { FileViewComponent } from './components/file-view/file-view.component'; import { FormListDemoComponent } from './components/form/form-list-demo.component'; import { ThemePickerModule } from './components/theme-picker/theme-picker'; @@ -123,7 +123,7 @@ import { FormListDemoComponent, CustomSourcesComponent, FileViewComponent, - AppMenuComponent + AppLayoutComponent ], providers: [ { provide: AppConfigService, useClass: DebugAppConfigService }, diff --git a/demo-shell-ng2/app/app.routes.ts b/demo-shell-ng2/app/app.routes.ts index d4dd1cf762..829aab11ad 100644 --- a/demo-shell-ng2/app/app.routes.ts +++ b/demo-shell-ng2/app/app.routes.ts @@ -18,6 +18,7 @@ import { ModuleWithProviders } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core'; +import { AppLayoutComponent } from './components/app-layout/app-layout.component'; import { AboutComponent, @@ -44,123 +45,114 @@ import { CustomSourcesComponent } from './components/files/custom-sources.compon import { FormListDemoComponent } from './components/form/form-list-demo.component'; export const appRoutes: Routes = [ - { - path: 'login', - component: LoginDemoComponent, - data: { - showAppMenu: false - } - }, + { path: 'login', component: LoginDemoComponent }, + { path: 'settings', component: SettingsComponent }, + { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] }, { path: '', - component: HomeComponent, - canActivate: [AuthGuard] - }, - { - path: 'home', - component: HomeComponent, - canActivate: [AuthGuard] - }, - { - path: 'files', - component: FilesComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'files/:id', - component: FilesComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'files/:nodeId/view', - component: FileViewComponent, - canActivate: [ AuthGuardEcm ], - data: { - showAppMenu: false - } - }, - { - path: 'dl-custom-sources', - component: CustomSourcesComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'datatable', - component: DataTableDemoComponent, - canActivate: [AuthGuard] - }, - { - path: 'uploader', - component: UploadButtonComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'search', - component: SearchComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'activiti', - component: ActivitiAppsViewComponent, - canActivate: [AuthGuardBpm] - }, - { - path: 'activiti/apps', - component: ActivitiAppsViewComponent, - canActivate: [AuthGuardBpm] - }, - { - path: 'activiti/apps/:appId/tasks', - component: ActivitiDemoComponent, - canActivate: [AuthGuardBpm] - }, - { - path: 'activiti/apps/:appId/processes', - component: ActivitiDemoComponent, - canActivate: [AuthGuardBpm] - }, - { - path: 'activiti/apps/:appId/diagram/:processDefinitionId', - component: ActivitiShowDiagramComponent, - canActivate: [AuthGuardBpm] - }, - // TODO: check if neeeded - { - path: 'activiti/appId/:appId', - component: ActivitiDemoComponent, - canActivate: [AuthGuardBpm] - }, - // TODO: check if needed - { - path: 'activiti/tasks/:id', - component: FormViewerComponent, - canActivate: [AuthGuardBpm] - }, - // TODO: check if needed - { - path: 'activiti/tasksnode/:id', - component: FormNodeViewerComponent, - canActivate: [AuthGuardBpm] - }, - { - path: 'webscript', - component: WebscriptComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'tag', - component: TagComponent, - canActivate: [AuthGuardEcm] - }, - { - path: 'social', - component: SocialComponent, - canActivate: [AuthGuardEcm] - }, - { path: 'about', component: AboutComponent }, - { path: 'settings', component: SettingsComponent }, - { path: 'form', component: FormDemoComponent }, - { path: 'form-list', component: FormListDemoComponent } + component: AppLayoutComponent, + canActivate: [AuthGuard], + children: [ + { + path: '', + component: HomeComponent + }, + { + path: 'home', + component: HomeComponent + }, + { + path: 'files', + component: FilesComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'files/:id', + component: FilesComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'dl-custom-sources', + component: CustomSourcesComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'datatable', + component: DataTableDemoComponent + }, + { + path: 'uploader', + component: UploadButtonComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'search', + component: SearchComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'activiti', + component: ActivitiAppsViewComponent, + canActivate: [AuthGuardBpm] + }, + { + path: 'activiti/apps', + component: ActivitiAppsViewComponent, + canActivate: [AuthGuardBpm] + }, + { + path: 'activiti/apps/:appId/tasks', + component: ActivitiDemoComponent, + canActivate: [AuthGuardBpm] + }, + { + path: 'activiti/apps/:appId/processes', + component: ActivitiDemoComponent, + canActivate: [AuthGuardBpm] + }, + { + path: 'activiti/apps/:appId/diagram/:processDefinitionId', + component: ActivitiShowDiagramComponent, + canActivate: [AuthGuardBpm] + }, + // TODO: check if neeeded + { + path: 'activiti/appId/:appId', + component: ActivitiDemoComponent, + canActivate: [AuthGuardBpm] + }, + // TODO: check if needed + { + path: 'activiti/tasks/:id', + component: FormViewerComponent, + canActivate: [AuthGuardBpm] + }, + // TODO: check if needed + { + path: 'activiti/tasksnode/:id', + component: FormNodeViewerComponent, + canActivate: [AuthGuardBpm] + }, + { + path: 'webscript', + component: WebscriptComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'tag', + component: TagComponent, + canActivate: [AuthGuardEcm] + }, + { + path: 'social', + component: SocialComponent, + canActivate: [AuthGuardEcm] + }, + { path: 'about', component: AboutComponent }, + { path: 'form', component: FormDemoComponent }, + { path: 'form-list', component: FormListDemoComponent } + ] + } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); diff --git a/demo-shell-ng2/app/components/app-layout/app-layout.component.html b/demo-shell-ng2/app/components/app-layout/app-layout.component.html new file mode 100644 index 0000000000..5f0f5131ea --- /dev/null +++ b/demo-shell-ng2/app/components/app-layout/app-layout.component.html @@ -0,0 +1,49 @@ + + + + + {{link.icon}} + {{link.title}} + + + exit_to_app + Logout + + + + + + + + ADF Demo Application + +
+ + + + Home + Content Services + Process Services + Login + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo-shell-ng2/app/components/app-layout/app-layout.component.scss b/demo-shell-ng2/app/components/app-layout/app-layout.component.scss new file mode 100644 index 0000000000..f9aebf5138 --- /dev/null +++ b/demo-shell-ng2/app/components/app-layout/app-layout.component.scss @@ -0,0 +1,52 @@ +@mixin adf-app-layout-theme($theme) { + $primary: map-get($theme, primary); + $minimumAppWidth: 320px; + $toolbarHeight: 64px; + + .adf-app-layout { + display: block; + min-width: $minimumAppWidth; + height: 100%; + + .adf-nav-container { + display: block; + min-width: $minimumAppWidth; + height: 100%; + } + + .adf-sidenav-link { + &.active { + color: mat-color($primary); + } + } + + &-user-profile { + margin-right: 10px; + } + + &-menu-spacer { + flex: 1 1 auto; + } + + &-toolbar { + height: $toolbarHeight; + line-height: $toolbarHeight; + overflow: hidden; + + md-toolbar-row { + height: $toolbarHeight; + align-items: stretch; + justify-content: space-between; + } + + .adf-toolbar-link { + min-width: 0; + line-height: $toolbarHeight; + + &.active { + background-color: rgba(0,0,0,.12); + } + } + } + } +} \ No newline at end of file diff --git a/demo-shell-ng2/app/components/app-layout/app-layout.component.ts b/demo-shell-ng2/app/components/app-layout/app-layout.component.ts new file mode 100644 index 0000000000..494a107fa2 --- /dev/null +++ b/demo-shell-ng2/app/components/app-layout/app-layout.component.ts @@ -0,0 +1,53 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ViewEncapsulation } from '@angular/core'; +import { AlfrescoTranslationService } from 'ng2-alfresco-core'; + +@Component({ + templateUrl: 'app-layout.component.html', + styleUrls: ['app-layout.component.scss'], + host: { + 'class': 'adf-app-layout' + }, + encapsulation: ViewEncapsulation.None +}) +export class AppLayoutComponent { + + links: Array = [ + { href: '/home', icon: 'home', title: 'Home' }, + { href: '/files', icon: 'folder_open', title: 'Content Services' }, + { href: '/activiti', icon: 'device_hub', title: 'Process Services' }, + { href: '/login', icon: 'vpn_key', title: 'Login' }, + { href: '/dl-custom-sources', icon: 'extension', title: 'DL: Custom Sources' }, + { href: '/datatable', icon: 'view_module', title: 'DataTable' }, + { href: '/form', icon: 'poll', title: 'Form' }, + { href: '/form-list', icon: 'library_books', title: 'Form List' }, + { href: '/uploader', icon: 'file_upload', title: 'Uploader' }, + { href: '/webscript', icon: 'extension', title: 'Webscript' }, + { href: '/tag', icon: 'local_offer', title: 'Tag' }, + { href: '/social', icon: 'thumb_up', title: 'Social' }, + { href: '/settings', icon: 'settings', title: 'Settings' }, + { href: '/about', icon: 'info_outline', title: 'About' } + ]; + + constructor(private translateService: AlfrescoTranslationService) {} + + changeLanguage(lang: string) { + this.translateService.use(lang); + } +} diff --git a/demo-shell-ng2/app/components/app-menu/app-menu.component.html b/demo-shell-ng2/app/components/app-menu/app-menu.component.html deleted file mode 100644 index 4bfcb76628..0000000000 --- a/demo-shell-ng2/app/components/app-menu/app-menu.component.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - ADF Demo Application - -
- - - - Home - Content Services - Process Services - Login - - - - - - - - - - - - - - - home - Home - - - folder_open - Content Services - - - device_hub - Process Services - - - vpn_key - Login - - - extension - DL: Custom Sources - - - view_module - DataTable - - - poll - Form - - - library_books - Form List - - - file_upload - Uploader - - - extension - Webscript - - - local_offer - Tag - - - thumb_up - Social - - - settings - Settings - - - info_outline - About - - - - diff --git a/demo-shell-ng2/app/components/app-menu/app-menu.component.scss b/demo-shell-ng2/app/components/app-menu/app-menu.component.scss deleted file mode 100644 index 016d5d4a01..0000000000 --- a/demo-shell-ng2/app/components/app-menu/app-menu.component.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '~@angular/material/theming'; - -.adf-app-user-profile { - margin-right: 10px; -} - -.adf-app-menu-spacer { - flex: 1 1 auto; -} - -.adf-app-toolbar { - overflow: hidden; -} - -@media ($mat-small) { - - .adf-app-hide-small{ - display: none !important; - } - -} -@media ($mat-xsmall) { - - .adf-app-hide-xsmall{ - display: none !important; - } - -} diff --git a/demo-shell-ng2/app/components/app-menu/app-menu.component.ts b/demo-shell-ng2/app/components/app-menu/app-menu.component.ts deleted file mode 100644 index 278d336db5..0000000000 --- a/demo-shell-ng2/app/components/app-menu/app-menu.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * @license - * Copyright 2016 Alfresco Software, Ltd. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Component } from '@angular/core'; -import { AlfrescoTranslationService } from 'ng2-alfresco-core'; - -@Component({ - selector: 'adf-app-menu', - templateUrl: 'app-menu.component.html', - styleUrls: ['app-menu.component.scss'] -}) -export class AppMenuComponent { - - constructor(private translateService: AlfrescoTranslationService) { - } - - changeLanguage(lang: string) { - this.translateService.use(lang); - } -} diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index c23ca0eb2b..475f6394d2 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -16,13 +16,13 @@ - - @@ -31,21 +31,23 @@ - - - +
+ + + +
- + - - - - @@ -213,91 +221,90 @@ -

Current folder ID: {{ documentList.currentFolderId }}

+
-
- Selected Nodes: -
    -
  • - {{ node.entry.name }} -
    • -
-
- -
-
- Multiselect (with checkboxes) -
- -
- Dropdown breadcrumb -
- -
- Multiple File Upload -
- -
- Folder upload -
- -
- Custom extensions filter -
- -
- Enable versioning -
- -
Upload
-
- - - -
-
- - +

Current folder ID: {{ documentList.currentFolderId }}

+ +
+ Selected Nodes: +
    +
  • + {{ node.entry.name }} +
    • +
-
- - + +
+
+ Multiselect (with checkboxes) +
+ +
+ Multiple File Upload +
+ +
+ Folder upload +
+ +
+ Custom extensions filter +
+ +
+ Enable versioning +
+ +
Upload
+
+ + + +
+
+ + +
+
+ + +
+
+ Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically) +
-
- Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically) -
-
- -
-

For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.

- - - {{mode.viewValue}} - - + +
+

For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.

+ + + {{mode.viewValue}} + + +
diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.scss similarity index 70% rename from demo-shell-ng2/app/components/files/files.component.css rename to demo-shell-ng2/app/components/files/files.component.scss index 62054c1077..fe58b85bd0 100644 --- a/demo-shell-ng2/app/components/files/files.component.css +++ b/demo-shell-ng2/app/components/files/files.component.scss @@ -1,3 +1,5 @@ +$minimumDocumentListWidth: 425px; + .container { margin: 10px; } @@ -57,4 +59,25 @@ adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before { min-width: 200px; } +.adf-content-service-settings { + padding: 16px; +} + +@media (max-width: $minimumDocumentListWidth) { + adf-document-list /deep/ adf-datatable { + & /deep/ .adf-data-table-cell--fileSize { + display: none; + } + } + + .adf-demo-site-container-style { + width: 100%; + display: block; + + & /deep/ .adf-site-dropdown-list-element { + width: 100%; + } + } +} + diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts index a74bcdef67..9c33269d76 100644 --- a/demo-shell-ng2/app/components/files/files.component.ts +++ b/demo-shell-ng2/app/components/files/files.component.ts @@ -32,7 +32,7 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-'; @Component({ selector: 'adf-files-component', templateUrl: './files.component.html', - styleUrls: ['./files.component.css'] + styleUrls: ['./files.component.scss'] }) export class FilesComponent implements OnInit { // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root- @@ -43,7 +43,6 @@ export class FilesComponent implements OnInit { showViewer: boolean = false; toolbarColor = 'default'; - useDropdownBreadcrumb = false; selectionModes = [ { value: 'none', viewValue: 'None' }, diff --git a/demo-shell-ng2/app/components/form/form-list-demo.component.ts b/demo-shell-ng2/app/components/form/form-list-demo.component.ts index 8ace89ac05..162b04084b 100644 --- a/demo-shell-ng2/app/components/form/form-list-demo.component.ts +++ b/demo-shell-ng2/app/components/form/form-list-demo.component.ts @@ -22,7 +22,6 @@ import { ActivitiForm } from 'ng2-activiti-form'; @Component({ selector: 'form-list-demo', template: ` -
diff --git a/demo-shell-ng2/app/components/settings/settings.component.css b/demo-shell-ng2/app/components/settings/settings.component.css deleted file mode 100644 index df2ab9e208..0000000000 --- a/demo-shell-ng2/app/components/settings/settings.component.css +++ /dev/null @@ -1,20 +0,0 @@ -.adf-setting-container { - display: table; - border-collapse: collapse; - border-spacing: 0; -} - -.adf-setting-card { - width: 400px; -} - -.full-width { - width: 100%; -} - -.adf-setting-card-padding { - width: 50%; - display: table-cell; - vertical-align: middle; - margin: 0; -} diff --git a/demo-shell-ng2/app/components/settings/settings.component.html b/demo-shell-ng2/app/components/settings/settings.component.html index 4887e80030..ced5a98a59 100644 --- a/demo-shell-ng2/app/components/settings/settings.component.html +++ b/demo-shell-ng2/app/components/settings/settings.component.html @@ -10,7 +10,7 @@ {{'SETTINGS.CS-HOST' | translate }} - link + link {{'SETTINGS.BP-HOST' | translate }} - link + link - + - diff --git a/demo-shell-ng2/app/components/settings/settings.component.scss b/demo-shell-ng2/app/components/settings/settings.component.scss new file mode 100644 index 0000000000..dd75412397 --- /dev/null +++ b/demo-shell-ng2/app/components/settings/settings.component.scss @@ -0,0 +1,37 @@ +.adf-app-settings { + display: flex; + height: 100%; + align-items: center; + + .adf-setting-container { + display: table; + border-collapse: collapse; + border-spacing: 0; + } + + .adf-setting-card { + width: 400px; + } + + .full-width { + width: 100%; + } + + .adf-setting-card-padding { + width: 50%; + display: table-cell; + vertical-align: middle; + margin: 0; + } + + .adf-settings-link-icon { + position: relative; + top: 6px; + margin-right: 10px; + } + + .adf-settings-actions { + display: flex; + justify-content: flex-end; + } +} \ No newline at end of file diff --git a/demo-shell-ng2/app/components/settings/settings.component.ts b/demo-shell-ng2/app/components/settings/settings.component.ts index e0eca71dd6..d14bc7da23 100644 --- a/demo-shell-ng2/app/components/settings/settings.component.ts +++ b/demo-shell-ng2/app/components/settings/settings.component.ts @@ -15,14 +15,18 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core'; @Component({ selector: 'app-settings', templateUrl: 'settings.component.html', - styleUrls: ['settings.component.css'] + host: { + 'class': 'adf-app-settings' + }, + styleUrls: ['settings.component.scss'], + encapsulation: ViewEncapsulation.None }) export class SettingsComponent { diff --git a/demo-shell-ng2/app/material.module.ts b/demo-shell-ng2/app/material.module.ts index 98ef17108b..68d96368d0 100644 --- a/demo-shell-ng2/app/material.module.ts +++ b/demo-shell-ng2/app/material.module.ts @@ -21,6 +21,7 @@ import { MdInputModule, MdProgressBarModule, MdSelectModule, + MdSidenavModule, MdSlideToggleModule } from '@angular/material'; @@ -29,6 +30,7 @@ const MATERIAL_MODULES = [ MdInputModule, MdSelectModule, MdDialogModule, + MdSidenavModule, MdProgressBarModule ]; diff --git a/demo-shell-ng2/app/theme.scss b/demo-shell-ng2/app/theme.scss index afe0b34b12..d0d7ec0d82 100644 --- a/demo-shell-ng2/app/theme.scss +++ b/demo-shell-ng2/app/theme.scss @@ -1,3 +1,4 @@ +@import './components/app-layout/app-layout.component.scss'; @import '~ng2-alfresco-core/styles/theming'; @import '~ng2-alfresco-core/styles/index'; @import '~ng2-activiti-analytics/styles/index'; @@ -27,6 +28,7 @@ $theme: mat-light-theme($primary, $accent, $warn); @include angular-material-theme($theme); +@include adf-app-layout-theme($theme); @include alfresco-core-theme($theme); @include alfresco-activity-analytics-theme($theme); @include alfresco-activity-diagrams-theme($theme); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss index 03fca5be07..17fa5b4f98 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss @@ -91,7 +91,7 @@ &-drag-drop { height: 56px; opacity: 0.54; - font-size: 56px; + font-size: 53px; line-height: 1; letter-spacing: -2px; color: mat-color($foreground, text); @@ -110,7 +110,7 @@ &-image { width: 565px; - height: 161px; + max-width: 100%; object-fit: contain; margin-top: 17px; } diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html index fd6374f91f..7e7594a7a1 100644 --- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html @@ -1,7 +1,7 @@
- active', animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),