inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1611] Demo shell responsiveness (#2426)

Browse Source 
* Reapplying the unreappliable

* Fix buggy search button

* Fix settings

* Last bit of responsive stylings
This commit is contained in:
Popovics András 2017-10-04 17:54:18 +01:00 committed by Eugenio Romano
parent b2452f6097
commit cc1efc9cd6
24 changed files with 464 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell-ng2/app/app.component.html
View File

@ -1,2 +1 @@
<adf-app-menu *ngIf="showAppMenu"></adf-app-menu>
<router-outlet></router-outlet>

22
demo-shell-ng2/app/app.component.ts
View File

@ -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() {

4
demo-shell-ng2/app/app.module.ts
View File

@ -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 },

36
demo-shell-ng2/app/app.routes.ts
View File

@ -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,22 +45,21 @@ 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]
component: AppLayoutComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: HomeComponent
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard]
component: HomeComponent
},
{
path: 'files',
@ -71,14 +71,6 @@ export const appRoutes: Routes = [
component: FilesComponent,
canActivate: [AuthGuardEcm]
},
{
path: 'files/:nodeId/view',
component: FileViewComponent,
canActivate: [ AuthGuardEcm ],
data: {
showAppMenu: false
}
},
{
path: 'dl-custom-sources',
component: CustomSourcesComponent,
@ -86,8 +78,7 @@ export const appRoutes: Routes = [
},
{
path: 'datatable',
component: DataTableDemoComponent,
canActivate: [AuthGuard]
component: DataTableDemoComponent
},
{
path: 'uploader',
@ -158,9 +149,10 @@ export const appRoutes: Routes = [
canActivate: [AuthGuardEcm]
},
{ path: 'about', component: AboutComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'form', component: FormDemoComponent },
{ path: 'form-list', component: FormListDemoComponent }
]
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

49
demo-shell-ng2/app/components/app-layout/app-layout.component.html Normal file
View File

@ -0,0 +1,49 @@
<md-sidenav-container class="adf-nav-container">
<md-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
<md-nav-list>
<a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
<md-icon mdListIcon>{{link.icon}}</md-icon>
<span>{{link.title}}</span>
</a>
<a md-list-item adf-logout (click)="sidenav.close()">
<md-icon mdListIcon>exit_to_app</md-icon>
<span>Logout</span>
</a>
</md-nav-list>
</md-sidenav>
<md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
<adf-userinfo
class="adf-app-layout-user-profile"
[menuPositionX]="'before'"
[menuPositionY]="'above'">
</adf-userinfo>
<span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
<div class="adf-app-layout-menu-spacer"></div>
<search-bar fxFlex="0 1 auto"></search-bar>
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Content Services</a>
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Process Services</a>
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
<theme-picker></theme-picker>
<button md-icon-button [mdMenuTriggerFor]="langMenu">
<md-icon>language</md-icon>
</button>
<md-menu #langMenu="mdMenu">
<button md-menu-item (click)="changeLanguage('en')">English</button>
<button md-menu-item (click)="changeLanguage('it')">Italian</button>
<button md-menu-item (click)="changeLanguage('ru')">Russian</button>
</md-menu>
<button md-icon-button (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button>
</md-toolbar>
<router-outlet></router-outlet>
</md-sidenav-container>

52
demo-shell-ng2/app/components/app-layout/app-layout.component.scss Normal file
View File

@ -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);
}
}
}
}
}

53
demo-shell-ng2/app/components/app-layout/app-layout.component.ts Normal file
View File

@ -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<any> = [
{ 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);
}
}

96
demo-shell-ng2/app/components/app-menu/app-menu.component.html
View File

@ -1,96 +0,0 @@
<md-toolbar color="primary" class="adf-app-toolbar">
<adf-userinfo
class="adf-app-user-profile"
[menuPositionX]="'before'"
[menuPositionY]="'above'">
</adf-userinfo>
<span class="adf-app-hide-xsmall">ADF Demo Application</span>
<div class="adf-app-menu-spacer"></div>
<search-bar></search-bar>
<a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="home" href="" routerLink="/">Home</a>
<a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
<a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
<a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
<theme-picker></theme-picker>
<button md-icon-button [mdMenuTriggerFor]="langMenu">
<md-icon>language</md-icon>
</button>
<md-menu #langMenu="mdMenu">
<button md-menu-item (click)="changeLanguage('en')">English</button>
<button md-menu-item (click)="changeLanguage('it')">Italian</button>
<button md-menu-item (click)="changeLanguage('ru')">Russian</button>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="appMenu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #appMenu="mdMenu">
<a md-menu-item href="" routerLink="/">
<md-icon>home</md-icon>
<span>Home</span>
</a>
<a md-menu-item href="" routerLink="/files">
<md-icon>folder_open</md-icon>
<span>Content Services</span>
</a>
<a md-menu-item href="" routerLink="/activiti">
<md-icon>device_hub</md-icon>
<span>Process Services</span>
</a>
<a md-menu-item href="" routerLink="/login">
<md-icon>vpn_key</md-icon>
<span>Login</span>
</a>
<a md-menu-item href="" routerLink="/dl-custom-sources">
<md-icon>extension</md-icon>
<span>DL: Custom Sources</span>
</a>
<a md-menu-item href="" routerLink="/datatable">
<md-icon>view_module</md-icon>
<span>DataTable</span>
</a>
<a md-menu-item href="" routerLink="/form">
<md-icon>poll</md-icon>
<span>Form</span>
</a>
<a md-menu-item href="" routerLink="/form-list">
<md-icon>library_books</md-icon>
<span>Form List</span>
</a>
<a md-menu-item href="" routerLink="/uploader">
<md-icon>file_upload</md-icon>
<span>Uploader</span>
</a>
<a md-menu-item href="" routerLink="/webscript">
<md-icon>extension</md-icon>
<span>Webscript</span>
</a>
<a md-menu-item href="" routerLink="/tag">
<md-icon>local_offer</md-icon>
<span>Tag</span>
</a>
<a md-menu-item href="" routerLink="/social">
<md-icon>thumb_up</md-icon>
<span>Social</span>
</a>
<a md-menu-item href="" routerLink="/settings">
<md-icon>settings</md-icon>
<span>Settings</span>
</a>
<a md-menu-item href="" routerLink="/about">
<md-icon>info_outline</md-icon>
<span>About</span>
</a>
<button md-menu-item adf-logout>
<md-icon>exit_to_app</md-icon>
<span>Logout</span>
</button>
</md-menu>
</md-toolbar>

28
demo-shell-ng2/app/components/app-menu/app-menu.component.scss
View File

@ -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;
}
}

34
demo-shell-ng2/app/components/app-menu/app-menu.component.ts
View File

@ -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);
}
}

53
demo-shell-ng2/app/components/files/files.component.html
View File

@ -16,13 +16,13 @@
</div>
<adf-toolbar [color]="toolbarColor">
<adf-toolbar-title>
<adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="files-breadcrumb"
root="Personal Files"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
@ -31,6 +31,7 @@
<adf-toolbar-divider></adf-toolbar-divider>
<div class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
<button md-icon-button
(click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
@ -46,6 +47,7 @@
[adf-nodes]="documentList.selection">
<md-icon>delete</md-icon>
</button>
</div>
<button md-icon-button [mdMenuTriggerFor]="themePicker">
<md-icon>format_color_fill</md-icon>
@ -58,23 +60,29 @@
<button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
</md-menu>
<adf-toolbar-divider></adf-toolbar-divider>
<adf-toolbar-divider fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
<button md-icon-button [mdMenuTriggerFor]="menu">
<button md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>dialpad</md-icon>
<span>Redial</span>
<button md-menu-item
(click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
<span>New folder</span>
</button>
<button md-menu-item disabled>
<md-icon>voicemail</md-icon>
<span>Check voicemail</span>
<button md-menu-item
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<md-icon>get_app</md-icon>
<span>Download</span>
</button>
<button md-menu-item>
<md-icon>notifications_off</md-icon>
<span>Disable alerts</span>
<button md-menu-item
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<md-icon>delete</md-icon>
<span>Delete</span>
</button>
</md-menu>
</adf-toolbar>
@ -213,26 +221,24 @@
<context-menu-holder></context-menu-holder>
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
<div class="adf-content-service-settings">
<div class="p-10">
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
<div class="p-10">
Selected Nodes:
<ul>
<li *ngFor="let node of documentList.selection">
{{ node.entry.name }}
</li>
</ul>
</div>
</div>
<div class="container">
<div class="container">
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
</section>
@ -289,15 +295,16 @@
<section>
<md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
</section>
</div>
</div>
<div class="p-10">
<div class="p-10">
<p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
<md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
<md-option *ngFor="let mode of selectionModes" [value]="mode.value">
{{mode.viewValue}}
</md-option>
</md-select>
</div>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>

23
demo-shell-ng2/app/components/files/files.component.css → demo-shell-ng2/app/components/files/files.component.scss
View File

@ -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%;
}
}
}

3
demo-shell-ng2/app/components/files/files.component.ts
View File

@ -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' },

1
demo-shell-ng2/app/components/form/form-list-demo.component.ts
View File

@ -22,7 +22,6 @@ import { ActivitiForm } from 'ng2-activiti-form';
@Component({
selector: 'form-list-demo',
template: `
<adf-app-menu></adf-app-menu>
<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
</adf-form-list>
<div class="form-container" *ngIf="!isEmptyForm()">

20
demo-shell-ng2/app/components/settings/settings.component.css
View File

@ -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;
}

8
demo-shell-ng2/app/components/settings/settings.component.html
View File

@ -10,7 +10,7 @@
<md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
<md-input-container class="full-width">
<md-icon mdPrefix>link</md-icon>
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
<input mdInput
[formControl]="urlFormControlEcm"
data-automation-id="ecmHost"
@ -29,7 +29,7 @@
<md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
<md-input-container class="full-width">
<md-icon mdPrefix>link</md-icon>
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
<input mdInput
[formControl]="urlFormControlBpm"
data-automation-id="bpmHost"
@ -45,13 +45,13 @@
</md-input-container>
</md-card-content>
<md-card-actions>
<md-card-actions class="adf-settings-actions">
<button md-button onclick="window.history.back()" color="primary">
{{'SETTINGS.BACK' | translate }}
</button>
<button md-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
<button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
{{'SETTINGS.APPLY' | translate }}
</button>

37
demo-shell-ng2/app/components/settings/settings.component.scss Normal file
View File

@ -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;
}
}

8
demo-shell-ng2/app/components/settings/settings.component.ts
View File

@ -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 {

2
demo-shell-ng2/app/material.module.ts
View File

@ -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
];

2
demo-shell-ng2/app/theme.scss
View File

@ -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);

4
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
View File

@ -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;
}

2
ng2-components/ng2-alfresco-search/src/components/search-control.component.html
View File

@ -1,7 +1,7 @@
<form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="adf-search-form">
<div class="adf-search-container"
[@transitionMessages]="subscriptAnimationState">
<a md-button
<a md-icon-button
*ngIf="expandable"
id="adf-search-button"
(click)="toggleSearchBar()"

14
ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
View File

@ -1,19 +1,11 @@
@mixin mat-search-control-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.adf {
&-search-button.mat-button {
margin-right: 10px;
border-radius: 50%;
height: 32px;
width: 32px;
min-width: 20px;
padding: 0;
overflow: hidden;
color: inherit;
line-height: normal;
border: none;
&-search-button.mat-icon-button {
margin-right: 5px;
}
&-search-container {

2
ng2-components/ng2-alfresco-search/src/components/search-control.component.ts
View File

@ -29,7 +29,7 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component';
animations: [
trigger('transitionMessages', [
state('active', style({transform: 'translateX(0%)'})),
state('inactive', style({transform: 'translateX(86%)'})),
state('inactive', style({transform: 'translateX(83%)'})),
state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
transition('inactive => active',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),