mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Merge pull request #1229 from Alfresco/dev-mromano-improvements
improve mobile login,home and settings styles
This commit is contained in:
Denys Vuika
GitHub
commit
a8ef1f8e4e
25
demo-shell-ng2/app/components/home/home.component.css
Normal file
25
demo-shell-ng2/app/components/home/home.component.css
Normal file
@ -0,0 +1,25 @@
|
||||
.home-cards {
|
||||
float: left;
|
||||
margin: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.mdl-card__supporting-text {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.demo-card-square.mdl-card {
|
||||
width: 320px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.demo-card-square > .mdl-card__title {
|
||||
color: #fff;
|
||||
background-color: #a1ce6d;
|
||||
}
|
||||
|
||||
.mdl-card__title {
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
}
|
||||
@ -1,112 +1,150 @@
|
||||
<div class="p-10">
|
||||
<h1>Demo App</h1>
|
||||
<p>Demo Application for Alfresco Angular 2 Components</p>
|
||||
|
||||
<h2>Featured demos</h2>
|
||||
Some of the areas will require diffent authentication providers.
|
||||
See details for each component.
|
||||
You may be automatically redirected to Login screen.
|
||||
|
||||
|
||||
<h3><a href="" routerLink="/files">DocumentList</a></h3>
|
||||
<div>
|
||||
Demonstrates multiple Alfresco ECM components used together:
|
||||
<!-- DOCUMENT LIST-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/files">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">dvr</i> DocumentList - ECM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Demonstrates multiple Alfresco ECM components used together to show the files of you ECM instance :
|
||||
<ul>
|
||||
<li>
|
||||
Document List (
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
|
||||
)
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
<li>
|
||||
Upload (
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
|
||||
)
|
||||
<i class="material-icons">dvr</i> Document List
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
|
||||
</li>
|
||||
<li>
|
||||
Context Menu (
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
)
|
||||
<i class="material-icons">file_upload</i> Upload
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
|
||||
</li>
|
||||
<li>
|
||||
DataTable (
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
)
|
||||
<i class="material-icons">view_module</i> DataTable
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ACTIVITI-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/activiti">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">apps</i> Activiti - BPM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Demonstrates multiple Alfresco BPM components used together to show your BPM prorcess and tasks:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">view_module</i> App List
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">view_headline</i> Task List
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">view_headline</i> Process List
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">view_quilt</i> Form
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">pie_chart</i> Analytics
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="material-icons">view_module</i> DataTable
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- DATATABLE-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/datatable">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">view_module</i> DataTable-ECM&BPM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Basic table component:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UPLOADER-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/uploader">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">file_upload</i> Uploader - ECM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Basic table uploader component for the ECM and BPM:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGIN-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/login">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">account_circle</i> Login - ECM & BPM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Login component for the ECM and BPM:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WEBSCRIPT-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/webscript">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">extension</i> Webscript - ECM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Shows and create webscripts in your ECM instance:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAG-->
|
||||
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
|
||||
<div class="mdl-card__title mdl-card--expand" routerLink="/tag">
|
||||
<h2 class="mdl-card__title-text"><i class="material-icons">local_offer</i> Tag - ECM</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
Shows and add tags to the node of your ECM instance:
|
||||
<ul>
|
||||
<li>
|
||||
<i class="material-icons">brightness_1</i> Comunication with Rest
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Authentication provider: ECM
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/activiti">Activiti</a></h3>
|
||||
<div>
|
||||
Demonstrates multiple Alfresco BPM components used together:
|
||||
<ul>
|
||||
<li>
|
||||
App List (
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
Task List (
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
Process List (
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
Form (
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
Analytics (
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
|
||||
)
|
||||
</li>
|
||||
<li>
|
||||
DataTable (
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Authentication provider: BPM
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/datatable">DataTable</a></h3>
|
||||
<p>TODO: summary</p>
|
||||
<p>
|
||||
Authentication provider: any
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/uploader">Uploader</a></h3>
|
||||
<p>TODO: summary</p>
|
||||
<p>
|
||||
Authentication provider: ECM
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/login">Login</a></h3>
|
||||
<p>TODO: summary</p>
|
||||
<p>
|
||||
Authentication provider: none
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/webscript">Webscript</a></h3>
|
||||
<p>TODO: summary</p>
|
||||
<p>
|
||||
Authentication provider: ECM
|
||||
</p>
|
||||
|
||||
<h3><a href="" routerLink="/tag">Tag</a></h3>
|
||||
<p>TODO: summary</p>
|
||||
<p>
|
||||
Authentication provider: ECM
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,7 @@ import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'home-view',
|
||||
templateUrl: './home.component.html'
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.css']
|
||||
})
|
||||
export class HomeComponent {}
|
||||
|
||||
@ -1,6 +1,39 @@
|
||||
.setting-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.settings {
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
background-color: papayawhip;
|
||||
color: cadetblue;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banned {
|
||||
width: 130px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 120px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
.mobile-settings {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.settings {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,42 @@
|
||||
<!--BPM, ECN AND CSRF TOGGLE-->
|
||||
|
||||
<div class="settings">
|
||||
<p class="toggle">
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
|
||||
(click)="toggleECM()">
|
||||
<span class="mdl-switch__label">ECM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
|
||||
(click)="toggleBPM()">
|
||||
<span class="mdl-switch__label">BPM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
|
||||
<span class="mdl-switch__label">CSRF</span>
|
||||
</label>
|
||||
</p>
|
||||
<p class="banned">
|
||||
<label for="blacklistusername">Banned username</label><br>
|
||||
<input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--SETTING BUTTON-->
|
||||
|
||||
<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
|
||||
<i class="material-icons">settings</i>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<!--LOGIN-->
|
||||
|
||||
<alfresco-login #alfrescologin
|
||||
[providers]="providers"
|
||||
[fieldsValidation]="customValidation"
|
||||
@ -10,24 +44,24 @@
|
||||
(executeSubmit)="validateForm($event)"
|
||||
(onSuccess)="onLogin($event)"
|
||||
(onError)="onError($event)">
|
||||
<div>
|
||||
<div class="mobile-settings">
|
||||
<p>
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
|
||||
(click)="toggleECM(ecm.checked)" #ecm>
|
||||
<label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
|
||||
(click)="toggleECM()">
|
||||
<span class="mdl-switch__label">ECM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
|
||||
(click)="toggleBPM(bpm.checked)" #bpm>
|
||||
<label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
|
||||
(click)="toggleBPM()">
|
||||
<span class="mdl-switch__label">BPM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
|
||||
<label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
|
||||
<span class="mdl-switch__label">CSRF</span>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
@ -31,10 +31,10 @@ export class LoginDemoComponent implements OnInit {
|
||||
alfrescologin: any;
|
||||
|
||||
providers: string = 'ECM';
|
||||
disableCsrf: boolean = false;
|
||||
blackListUsername: string;
|
||||
customValidation: any;
|
||||
|
||||
disableCsrf: boolean = false;
|
||||
isECM: boolean = true;
|
||||
isBPM: boolean = false;
|
||||
|
||||
@ -54,10 +54,10 @@ export class LoginDemoComponent implements OnInit {
|
||||
this.providers = this.storage.getItem('providers');
|
||||
}
|
||||
|
||||
this.setProviders();
|
||||
this.initProviders();
|
||||
}
|
||||
|
||||
setProviders() {
|
||||
initProviders() {
|
||||
if (this.providers === 'BPM') {
|
||||
this.isECM = false;
|
||||
this.isBPM = true;
|
||||
@ -78,38 +78,40 @@ export class LoginDemoComponent implements OnInit {
|
||||
console.log($event);
|
||||
}
|
||||
|
||||
toggleECM(checked) {
|
||||
if (checked && this.providers === 'BPM') {
|
||||
this.providers = 'ALL';
|
||||
} else if (checked) {
|
||||
this.providers = 'ECM';
|
||||
} else if (!checked && this.providers === 'ALL') {
|
||||
this.providers = 'BPM';
|
||||
} else if (!checked && this.providers === 'ECM') {
|
||||
this.providers = '';
|
||||
}
|
||||
|
||||
this.storage.setItem('providers', this.providers);
|
||||
toggleECM() {
|
||||
this.isECM = !this.isECM;
|
||||
this.storage.setItem('providers', this.updateProvider());
|
||||
}
|
||||
|
||||
toggleBPM(checked) {
|
||||
if (checked && this.providers === 'ECM') {
|
||||
this.providers = 'ALL';
|
||||
} else if (checked) {
|
||||
this.providers = 'BPM';
|
||||
} else if (!checked && this.providers === 'ALL') {
|
||||
this.providers = 'ECM';
|
||||
} else if (!checked && this.providers === 'BPM') {
|
||||
this.providers = '';
|
||||
}
|
||||
|
||||
this.storage.setItem('providers', this.providers);
|
||||
toggleBPM() {
|
||||
this.isBPM = !this.isBPM;
|
||||
this.storage.setItem('providers', this.updateProvider());
|
||||
}
|
||||
|
||||
toggleCSRF() {
|
||||
this.disableCsrf = !this.disableCsrf;
|
||||
}
|
||||
|
||||
updateProvider(){
|
||||
if (this.isBPM && this.isECM) {
|
||||
this.providers = 'ALL';
|
||||
return this.providers;
|
||||
}
|
||||
|
||||
if (this.isECM) {
|
||||
this.providers = 'ECM';
|
||||
return this.providers;
|
||||
}
|
||||
|
||||
if (this.isBPM) {
|
||||
this.providers = 'BPM';
|
||||
return this.providers;
|
||||
}
|
||||
|
||||
this.providers = '';
|
||||
return this.providers;
|
||||
};
|
||||
|
||||
validateForm(event: any) {
|
||||
let values = event.values;
|
||||
if (values.controls['username'].value === this.blackListUsername) {
|
||||
|
||||
@ -24,6 +24,11 @@
|
||||
tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()" >
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-card-padding"></div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user