From 3ba93a68406e7ba1513cda1702efd675cd11c4be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Popovics=20Andr=C3=A1s?= Date: Sun, 10 Sep 2017 20:42:32 +0100 Subject: [PATCH] [ADF-1250] Remove MDL from Analytics (#2311) * Removal of MDL dialog from report parameters * Futher mdl removal * Futher mdl removal * Fixing demo shell icon position issues * Futher mdl removal * Futher mdl removal, tests fix * Remove mdl leftover --- .../app/components/home/home.component.scss | 5 + .../analytics-generator.component.html | 20 +- .../analytics-report-list.component.html | 34 +-- .../analytics-report-list.component.scss | 93 ++++--- .../analytics-report-list.component.spec.ts | 4 +- .../analytics-report-list.component.ts | 2 +- ...analytics-report-parameters.component.html | 246 +++++++++--------- ...analytics-report-parameters.component.scss | 22 +- ...lytics-report-parameters.component.spec.ts | 29 ++- .../analytics-report-parameters.component.ts | 14 +- .../src/components/analytics.component.html | 2 +- .../widgets/checkbox/checkbox.widget.html | 18 +- .../widgets/dropdown/dropdown.widget.scss | 6 +- .../widgets/duration/duration.widget.html | 26 +- .../widgets/duration/duration.widget.scss | 26 +- .../widgets/number/number.widget.html | 21 +- .../widgets/number/number.widget.scss | 19 +- .../widgets/number/number.widget.ts | 15 -- .../src/material.module.ts | 15 +- 19 files changed, 320 insertions(+), 297 deletions(-) diff --git a/demo-shell-ng2/app/components/home/home.component.scss b/demo-shell-ng2/app/components/home/home.component.scss index f8a2df62f3..ef2f88a86c 100644 --- a/demo-shell-ng2/app/components/home/home.component.scss +++ b/demo-shell-ng2/app/components/home/home.component.scss @@ -12,6 +12,11 @@ text-overflow: ellipsis; white-space: nowrap; } + + .material-icons { + position: relative; + top: 6px; + } } .adf-home-card-title { diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html index 6f5ca867ff..2aae8b7c2d 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html @@ -12,7 +12,7 @@
-
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
@@ -68,7 +68,7 @@
-
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
-
+

{{report.title}}

{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
- + Stacked + -
    -
  • + - - assignment + + assignment {{report.name}} -
    • -
-
-
- -
-

{{report.name}}

+ + +
+ + -
+
+

{{report.name}}

+
+

{{report.description}}

-
- done +
+ done
-
+
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss index dbfe665afe..55a059ce80 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss @@ -3,16 +3,17 @@ .adf-analytics-report-list { - .mdl-list__item { - cursor: pointer; - } - .activiti-filters__entry { cursor: pointer; } .activiti-filters__entry-icon { - margin-right: 12px !important; + position: relative; + top: 5px; + } + + .mat-nav-list .mat-list-item .mat-list-item-content { + line-height: 48px; } .activiti-filters__entry.active { @@ -23,39 +24,69 @@ color: mat-color($primary); } - .application-title { - z-index: 7; + .adf-report-card-grids { + display: flex; + padding: 8px; + flex-flow: row wrap; + margin: 0 auto; + align-items: stretch; } - .logo { - position: absolute; - right: 20px; - top: 35px; - z-index: 6; - } - - .logo i { - font-size: 70px; - } - - .theme-1 { + .adf-report-card { + margin: 8px; + width: calc(33.3333333333% - 16px); + position: relative; + min-height: 200px; + overflow: hidden; background-color: #269abc; - } + display: flex; + flex-direction: column; + cursor: pointer; - .theme-1 .logo i { - color: #168aac; - } + &-logo { + position: absolute; + right: 20px; + top: 35px; + z-index: 6; - .theme-1 .mdl-card__actions i { - color: #168aac; - } + &-icon { + font-size: 70px; + color: #168aac; + width: 1em; + height: 1em; + display: inline-block; + } + } - .theme-1 .mdl-card__actions i:hover { - color: #b7dfea; - } + &-title { + padding: 16px; + z-index: 7; - .selectedIcon { - color: #e9f1f3 !important; + .application-title { + font-size: 24px; + margin: 0; + } + } + + &-content { + padding: 16px; + flex-grow: 1; + } + + &-actions { + border-top: 1px solid rgba(0,0,0,.1); + padding: 8px; + box-sizing: border-box; + height: 40px; + + &-icon { + color: #e9f1f3; + + &:hover { + color: #b7dfea; + } + } + } } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts index 4b59567da6..33c30c0b46 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts @@ -115,7 +115,7 @@ describe('AnalyticsReportListComponent', () => { component.onSuccess.subscribe(() => { fixture.detectChanges(); - expect(element.querySelector('#report-list-0 > i').innerHTML).toBe('assignment'); + expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment'); expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map'); expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview'); expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview'); @@ -132,7 +132,7 @@ describe('AnalyticsReportListComponent', () => { component.onSuccess.subscribe(() => { fixture.detectChanges(); - expect(element.querySelector('#report-list-0 > i').innerHTML).toBe('assignment'); + expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment'); expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map'); expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview'); expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview'); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts index 28e9b674f2..d1b5f6b2c4 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts @@ -21,7 +21,7 @@ import { Observable, Observer } from 'rxjs/Rx'; import { AnalyticsService } from '../services/analytics.service'; @Component({ - selector: ' adf-analytics-report-list, analytics-report-list', + selector: 'adf-analytics-report-list, analytics-report-list', templateUrl: './analytics-report-list.component.html', styleUrls: ['./analytics-report-list.component.scss'], encapsulation: ViewEncapsulation.None diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html index 2cd6156980..afccf201a0 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html @@ -1,135 +1,139 @@
-
-
-
- - -
- - - -
-
- mode_edit -

{{reportParameters.name}}

-
- -
- - - - - - +
+ + + +
+ + +
- -
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
- {{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}} -
+
+ mode_edit +

{{reportParameters.name}}

+
+ +
+ + + + + + +
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ {{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}
- -
{{action}} report
-
+
+ +
+
{{action}} report
+
{{'DIALOG.SAVE_MESSAGE' | translate}}
-
- - +
+ + +
-
- - +
+ +
-
- -
+
+ +
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss index a016976088..db2e4614ea 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss @@ -18,10 +18,6 @@ background-color: #d50000; } -.dropdown-widget__invalid .mdl-textfield__error { - visibility: visible !important; -} - .adf-edit-report-title { float: left; font-size: 20px!important; @@ -78,14 +74,6 @@ padding-top: 20px; } -.mdl-dialog__title.choose_name { - padding: 0px; -} - -.mdl-dialog.options-name-dialog { - width: 30%; -} - .export-message { background-color: lightgray; } @@ -103,3 +91,13 @@ .hide { display: none; } + +.adf-report-dialog { + .mat-input-container { + width: 100%; + } + + .mat-dialog-actions { + justify-content: flex-end; + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts index 3382a2b24c..ac2eb4bef0 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts @@ -215,7 +215,7 @@ describe('AnalyticsReportParametersComponent', () => { it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => { component.onSuccessReportParams.subscribe(() => { fixture.detectChanges(); - let checkElement: any = element.querySelector('#typeFiltering'); + let checkElement: any = element.querySelector('#input-typeFiltering'); expect(checkElement.checked).toBeTruthy(); done(); }); @@ -513,9 +513,10 @@ describe('AnalyticsReportParametersComponent', () => { it('Should show a dialog to allowing report save', async(() => { component.saveReportSuccess.subscribe((repId) => { - let reportDialogTitle: HTMLElement = element.querySelector('#report-dialog'); - expect(reportDialogTitle.getAttribute('open')).toBeNull(); - expect(repId).toBe('1'); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(repId).toBe('1'); + }); }); component.submit(values); @@ -529,16 +530,16 @@ describe('AnalyticsReportParametersComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - let reportDialogTitle: HTMLElement = element.querySelector('#report-dialog-title'); - let saveTitleSubMessage: HTMLElement = element.querySelector('#save-title-submessage'); - let inputSaveName: HTMLInputElement = element.querySelector('#repName'); - let performActionButton: HTMLButtonElement = element.querySelector('#action-dialog-button'); + let reportDialogTitle: HTMLElement = window.document.querySelector('#report-dialog-title'); + let saveTitleSubMessage: HTMLElement = window.document.querySelector('#save-title-submessage'); + let inputSaveName: HTMLInputElement = window.document.querySelector('#repName'); + let performActionButton: HTMLButtonElement = window.document.querySelector('#action-dialog-button'); let todayDate = component.getTodayDate(); - expect(reportDialogTitle).not.toBeNull(); - expect(saveTitleSubMessage).not.toBeNull(); + expect(reportDialogTitle).not.toBeNull('Dialog title should not be null'); + expect(saveTitleSubMessage).not.toBeNull('Dialog save title submessage should not be null'); expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )'); - expect(performActionButton).not.toBeNull(); + expect(performActionButton).not.toBeNull('Dialog action button should not be null'); performActionButton.click(); @@ -562,9 +563,9 @@ describe('AnalyticsReportParametersComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - let reportDialogTitle: HTMLElement = element.querySelector('#report-dialog-title'); - let inputSaveName: HTMLInputElement = element.querySelector('#repName'); - let performActionButton: HTMLButtonElement = element.querySelector('#action-dialog-button'); + let reportDialogTitle: HTMLElement = window.document.querySelector('#report-dialog-title'); + let inputSaveName: HTMLInputElement = window.document.querySelector('#repName'); + let performActionButton: HTMLButtonElement = window.document.querySelector('#action-dialog-button'); let todayDate = component.getTodayDate(); expect(reportDialogTitle).not.toBeNull(); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts index 02b41197ad..de9e1a2e75 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts @@ -30,13 +30,13 @@ import { ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { MdDialog } from '@angular/material'; import * as moment from 'moment'; import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams'; import { ContentService, LogService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../services/analytics.service'; declare var componentHandler; -declare let dialogPolyfill: any; @Component({ selector: 'adf-analytics-report-parameters, analytics-report-parameters', @@ -104,7 +104,8 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On constructor(private analyticsService: AnalyticsService, private formBuilder: FormBuilder, private logService: LogService, - private contentService: ContentService) { + private contentService: ContentService, + private dialog: MdDialog) { } ngOnInit() { @@ -317,18 +318,13 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On } public showDialog(event: string) { - if (!this.reportNameDialog.nativeElement.showModal) { - dialogPolyfill.registerDialog(this.reportNameDialog.nativeElement); - } - this.reportNameDialog.nativeElement.showModal(); + this.dialog.open(this.reportNameDialog, { width: '500px' }); this.action = event; this.reportName = this.reportParameters.name + ' ( ' + this.getTodayDate() + ' )'; } closeDialog() { - if (this.reportNameDialog) { - this.reportNameDialog.nativeElement.close(); - } + this.dialog.closeAll(); } performAction(action: string, reportParamQuery: ReportQuery) { diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html index 8193e0f7ea..113a21c4c8 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -1,4 +1,4 @@ -
+
- - {{field.nameKey | translate}} - +
+ {{field.nameKey | translate}} +
\ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss index c28745241b..db4ec29ad0 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss @@ -16,8 +16,4 @@ .adf-dropdown-widget__invalid .adf-dropdown-widget__label:after { background-color: #d50000; -} - -.adf-dropdown-widget__invalid .mdl-textfield__error { - visibility: visible !important; -} +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html index e2b660bb73..be22e10e25 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html @@ -1,17 +1,19 @@ -
-
-
- - +
+
+
+ + +
-
+
- - +
+ + +
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss index a01ad04a0e..ccb5a6584a 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss @@ -1,18 +1,7 @@ .adf-number-widget { width: 100%; - } -.adf-number-widget__invalid { - .mdl-textfield__input { - border-color: #d50000; - } - .mdl-textfield__label { - color: #d50000; - &:after { - background-color: #d50000; - } - } - .mdl-textfield__error { - visibility: visible !important; - } -} + .mat-input-container { + width: 100%; + } +} \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts index 103fe978ee..2e7b31bd47 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts @@ -51,19 +51,4 @@ export class NumberWidgetComponent extends WidgetComponent implements OnInit { this.formGroup.get(this.controllerName).setValidators(Validators.required); } } - - setupMaterialComponents(handler: any): boolean { - // workaround for MDL issues with dynamic components - if (handler) { - handler.upgradeAllRegistered(); - if (this.elementRef && this.hasValue()) { - let container = this.elementRef.nativeElement.querySelector('.mdl-textfield'); - if (container && container.MaterialTextfield) { - container.MaterialTextfield.change(this.field.value.toString()); - } - } - return true; - } - return false; - } } diff --git a/ng2-components/ng2-activiti-analytics/src/material.module.ts b/ng2-components/ng2-activiti-analytics/src/material.module.ts index 7ee2e81621..74fdbc1c70 100644 --- a/ng2-components/ng2-activiti-analytics/src/material.module.ts +++ b/ng2-components/ng2-activiti-analytics/src/material.module.ts @@ -16,8 +16,17 @@ */ import { NgModule } from '@angular/core'; -import { MdButtonModule, MdDatepickerModule, MdGridListModule, - MdIconModule, MdInputModule, MdNativeDateModule, MdTooltipModule } from '@angular/material'; +import { + MdButtonModule, + MdCheckboxModule, + MdDatepickerModule, + MdGridListModule, + MdIconModule, + MdInputModule, + MdListModule, + MdNativeDateModule, + MdTooltipModule +} from '@angular/material'; export function modules() { return [ @@ -27,6 +36,8 @@ export function modules() { MdTooltipModule, MdNativeDateModule, MdDatepickerModule, + MdCheckboxModule, + MdListModule, MdGridListModule ]; }