From b0caecdce5754a95142d0bb1fa6bb7dc0965050c Mon Sep 17 00:00:00 2001 From: Vito Date: Mon, 3 Jul 2017 01:18:11 -0700 Subject: [PATCH] [ADF - 334] Added prefix to amount widget (#2031) [ADF - 334] added material design prefix to amount widget --- ng2-components/ng2-activiti-form/index.ts | 8 +-- .../activiti-start-form.component.spec.ts | 2 + .../widgets/amount/amount.widget.css | 54 +++++++++++++++++-- .../widgets/amount/amount.widget.html | 31 ++++++----- .../widgets/amount/amount.widget.spec.ts | 4 +- .../container/container.widget.spec.ts | 5 +- .../widgets/tabs/tabs.widget.spec.ts | 4 +- 7 files changed, 84 insertions(+), 24 deletions(-) diff --git a/ng2-components/ng2-activiti-form/index.ts b/ng2-components/ng2-activiti-form/index.ts index fb022bbd2c..d0ecafb8ea 100644 --- a/ng2-components/ng2-activiti-form/index.ts +++ b/ng2-components/ng2-activiti-form/index.ts @@ -16,7 +16,7 @@ */ import { NgModule, ModuleWithProviders } from '@angular/core'; -import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule } from '@angular/material'; +import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule, MdInputModule } from '@angular/material'; import { CoreModule } from 'ng2-alfresco-core'; import { ActivitiForm } from './src/components/activiti-form.component'; @@ -71,7 +71,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [ MdCardModule, MdButtonModule, MdIconModule, - MdSlideToggleModule + MdSlideToggleModule, + MdInputModule ], declarations: [ ...ACTIVITI_FORM_DIRECTIVES, @@ -90,7 +91,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [ MdCardModule, MdButtonModule, MdIconModule, - MdSlideToggleModule + MdSlideToggleModule, + MdInputModule ] }) export class ActivitiFormModule { diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts index 1a04e41d84..4206d50678 100644 --- a/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts @@ -30,6 +30,7 @@ import { EcmModelService } from './../services/ecm-model.service'; import { WidgetVisibilityService } from './../services/widget-visibility.service'; import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core'; import { TranslationMock } from './../assets/translation.service.mock'; +import { MdInputModule } from '@angular/material'; describe('ActivitiStartForm', () => { @@ -46,6 +47,7 @@ describe('ActivitiStartForm', () => { TestBed.configureTestingModule({ imports: [ MdTabsModule, + MdInputModule, CoreModule.forRoot()], declarations: [ ActivitiStartForm, diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.css index 1162c3ac64..e252d37a10 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.css +++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.css @@ -2,6 +2,56 @@ width: 100%; } +.amount-widget__container { + position: relative; + font-size: 16px; + display: inline-block; + box-sizing: border-box; + width: 300px; + max-width: 100%; + margin: 0; + padding: 20px 0; +} + +.adf-amount-widget { + vertical-align: baseline !important; +} + +.adf-amount-widget__prefix-spacing { + padding-right: 5px; +} + +:host() .amount-widget__input { + width: 100%; +} + +.amount-widget__input .mat-focused { + transition: none; +} + +.amount-widget__error_message { + color: #d50000; + position: absolute; + font-size: 12px; + margin-top: 3px; + display: block; + padding-top: 3px; +} + +md-input-container >>> .mat-input-wrapper { + margin-top: 0px; + padding-top: 4px; +} + +md-input-container >>> .mat-input-ripple { + transition: none; + visibility: hidden; +} + +md-input-container.mat-focused >>> .mat-input-underline .mat-input-ripple { + visibility: hidden; + transition: none; +} .amount-widget__invalid .mdl-textfield__input { border-color: #d50000; @@ -14,7 +64,3 @@ .amount-widget__invalid .mdl-textfield__label:after { background-color: #d50000; } - -.amount-widget__invalid .mdl-textfield__error { - visibility: visible !important; -} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html index 49878751aa..99ce800d07 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.html @@ -1,14 +1,21 @@ -
- - - {{field.validationSummary}} +
+ +
+ + {{currency }} + + {{field.validationSummary}} +
+ diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts index 90962c7f47..62ce03dada 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts @@ -22,6 +22,7 @@ import { CoreModule } from 'ng2-alfresco-core'; import { FormService } from './../../../services/form.service'; import { EcmModelService } from './../../../services/ecm-model.service'; import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service'; +import { MdInputModule } from '@angular/material'; describe('AmountWidget', () => { @@ -31,7 +32,8 @@ describe('AmountWidget', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - CoreModule.forRoot() + CoreModule.forRoot(), + MdInputModule ], declarations: [ AmountWidget diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts index a3aab4aa1b..24a5968328 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts @@ -25,7 +25,7 @@ import { MASK_DIRECTIVE } from '../index'; import { FormFieldComponent } from './../../form-field/form-field.component'; import { ActivitiContent } from './../../activiti-content.component'; import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock'; -import { MdTabsModule } from '@angular/material'; +import { MdTabsModule, MdInputModule } from '@angular/material'; import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { CoreModule } from 'ng2-alfresco-core'; import { FormService } from './../../../services/form.service'; @@ -45,7 +45,8 @@ describe('ContainerWidget', () => { TestBed.configureTestingModule({ imports: [ CoreModule.forRoot(), - MdTabsModule + MdTabsModule, + MdInputModule ], declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE], providers: [ diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts index 38df6f3338..32686037cb 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.spec.ts @@ -26,7 +26,7 @@ import { MASK_DIRECTIVE } from '../index'; import { FormFieldComponent } from './../../form-field/form-field.component'; import { ActivitiContent } from './../../activiti-content.component'; import { CoreModule } from 'ng2-alfresco-core'; -import { MdTabsModule } from '@angular/material'; +import { MdTabsModule, MdInputModule } from '@angular/material'; describe('TabsWidget', () => { @@ -105,7 +105,7 @@ describe('TabsWidget', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [CoreModule, MdTabsModule], + imports: [CoreModule, MdTabsModule, MdInputModule], declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE] }).compileComponents().then(() => { fixture = TestBed.createComponent(TabsWidget);