From 8b0621f5e114a01b1b4b69a9bc3ee4bdd206df8a Mon Sep 17 00:00:00 2001 From: Mario Romano Date: Mon, 12 Dec 2016 22:02:00 +0000 Subject: [PATCH] improve mobile login,home and settings styles --- .../app/components/home/home.component.css | 25 ++ .../app/components/home/home.component.html | 238 ++++++++++-------- .../app/components/home/home.component.ts | 3 +- .../components/login/login-demo.component.css | 41 ++- .../login/login-demo.component.html | 52 +++- .../components/login/login-demo.component.ts | 56 +++-- .../components/setting/setting.component.html | 5 + 7 files changed, 279 insertions(+), 141 deletions(-) create mode 100644 demo-shell-ng2/app/components/home/home.component.css diff --git a/demo-shell-ng2/app/components/home/home.component.css b/demo-shell-ng2/app/components/home/home.component.css new file mode 100644 index 0000000000..f708d9b9a1 --- /dev/null +++ b/demo-shell-ng2/app/components/home/home.component.css @@ -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; +} diff --git a/demo-shell-ng2/app/components/home/home.component.html b/demo-shell-ng2/app/components/home/home.component.html index e350e8ac33..172595fd44 100644 --- a/demo-shell-ng2/app/components/home/home.component.html +++ b/demo-shell-ng2/app/components/home/home.component.html @@ -1,112 +1,150 @@ -
-

Demo App

-

Demo Application for Alfresco Angular 2 Components

- -

Featured demos

- Some of the areas will require diffent authentication providers. - See details for each component. - You may be automatically redirected to Login screen. - - -

DocumentList

-
- Demonstrates multiple Alfresco ECM components used together: + +
+
+

dvr DocumentList - ECM

+
+
+ Demonstrates multiple Alfresco ECM components used together to show the files of you ECM instance : +
+
+ + + +
+
+

apps Activiti - BPM

+
+
+ Demonstrates multiple Alfresco BPM components used together to show your BPM prorcess and tasks: + +
+
+ + + +
+
+

view_module DataTable-ECM&BPM

+
+
+ Basic table component: +
    +
  • + brightness_1 Comunication with the Rest Api and core services + ng2-alfresco-core +
    • +
+
+
+ + +
+
+

file_upload Uploader - ECM

+
+
+ Basic table uploader component for the ECM and BPM: +
    +
  • + brightness_1 Comunication with the Rest Api and core services + ng2-alfresco-core +
    • +
+
+
+ + +
+
+

account_circle Login - ECM & BPM

+
+
+ Login component for the ECM and BPM: +
    +
  • + brightness_1 Comunication with the Rest Api and core services + ng2-alfresco-core +
    • +
+
+
+ + +
+
+

extension Webscript - ECM

+
+
+ Shows and create webscripts in your ECM instance: +
    +
  • + brightness_1 Comunication with the Rest Api and core services + ng2-alfresco-core +
    • +
+
+
+ + +
+
+

local_offer Tag - ECM

+
+
+ Shows and add tags to the node of your ECM instance: +
-

- Authentication provider: ECM -

- -

Activiti

-
- Demonstrates multiple Alfresco BPM components used together: - -
-

- Authentication provider: BPM -

- -

DataTable

-

TODO: summary

-

- Authentication provider: any -

- -

Uploader

-

TODO: summary

-

- Authentication provider: ECM -

- -

Login

-

TODO: summary

-

- Authentication provider: none -

- -

Webscript

-

TODO: summary

-

- Authentication provider: ECM -

- -

Tag

-

TODO: summary

-

- Authentication provider: ECM -

-
diff --git a/demo-shell-ng2/app/components/home/home.component.ts b/demo-shell-ng2/app/components/home/home.component.ts index 979c4d3a5a..06cb1aaccb 100644 --- a/demo-shell-ng2/app/components/home/home.component.ts +++ b/demo-shell-ng2/app/components/home/home.component.ts @@ -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 {} diff --git a/demo-shell-ng2/app/components/login/login-demo.component.css b/demo-shell-ng2/app/components/login/login-demo.component.css index 35336c30f5..78c114b065 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.css +++ b/demo-shell-ng2/app/components/login/login-demo.component.css @@ -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; + } +} + diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html index 526f36a440..c8e5f3a2aa 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -1,8 +1,42 @@ + + +
+

+ +

+

+ +

+

+ +

+

+
+ +

+
+ + + + + + -
+

-

-

-

diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts index cfe5c552e4..d5ee054b33 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/demo-shell-ng2/app/components/login/login-demo.component.ts @@ -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) { diff --git a/demo-shell-ng2/app/components/setting/setting.component.html b/demo-shell-ng2/app/components/setting/setting.component.html index 60d372d4e8..29566444e1 100644 --- a/demo-shell-ng2/app/components/setting/setting.component.html +++ b/demo-shell-ng2/app/components/setting/setting.component.html @@ -24,6 +24,11 @@ tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
+
+ + Back + +