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

#1214 use angular 2 mdl input field (#1762)

Browse Source
This commit is contained in:
Mario Romano 2017-03-24 10:32:09 +00:00
parent ace279671f
commit aa87a374dd
4 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell-ng2/app/vendor.ts
View File

@ -37,7 +37,7 @@ import '../public/css/app.css';
import '../public/css/muli-font.css'; import '../public/css/muli-font.css';
// Load the Angular Material 2 stylesheet // Load the Angular Material 2 stylesheet
import '@angular/material/core/theming/prebuilt/deeppurple-amber.css' import '../public/css/angular-material.css'
import 'ng2-activiti-form/stencils/runtime.ng1'; import 'ng2-activiti-form/stencils/runtime.ng1';
import 'ng2-activiti-form/stencils/runtime.adf'; import 'ng2-activiti-form/stencils/runtime.adf';

1
demo-shell-ng2/public/css/angular-material.css Normal file
View File

File diff suppressed because one or more lines are too long

9
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
View File

@ -194,7 +194,8 @@
.alfresco-login__password-icon { .alfresco-login__password-icon {
float: right; float: right;
margin-right: -24px; margin-right: -30px;
margin-top: 14px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -222,6 +223,10 @@
display: block; display: block;
} }
.alfresco-login__message{ .alfresco-login__message {
color: blue; color: blue;
} }
.adf-full-width {
width: 100%;
}

35
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@ -22,16 +22,19 @@
<!--USERNAME FIELD--> <!--USERNAME FIELD-->
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label for="username" class="mdl-textfield__label">{{'LOGIN.LABEL.USERNAME' | translate }}</label>
<input <md-input-container class="adf-full-width">
(blur)="trimUsername($event)" <input md-input placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
type="text" type="text"
class="mdl-textfield__input" class="mdl-textfield__input adf-full-width"
id="username" [formControl]="form.controls['username']"
data-automation-id="username" autocapitalize="none"
[formControl]="form.controls['username']" id="username"
tabindex="1" data-automation-id="username"
autocapitalize="none"/> (blur)="trimUsername($event)"
tabindex="1">
</md-input-container>
<span class="alfresco-login__validation" for="username" *ngIf="formError.username"> <span class="alfresco-login__validation" for="username" *ngIf="formError.username">
<span id="username-error" class="alfresco-login__error" data-automation-id="username-error">{{formError.username | translate }}</span> <span id="username-error" class="alfresco-login__error" data-automation-id="username-error">{{formError.username | translate }}</span>
</span> </span>
@ -41,8 +44,16 @@
<div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password"> <div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password">
<md-icon *ngIf="!isPasswordShow" class="alfresco-login__password-icon" data-automation-id="show_password" (click)="toggleShowPassword()">visibility</md-icon> <md-icon *ngIf="!isPasswordShow" class="alfresco-login__password-icon" data-automation-id="show_password" (click)="toggleShowPassword()">visibility</md-icon>
<md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon> <md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon>
<label for="password" class="mdl-textfield__label">{{'LOGIN.LABEL.PASSWORD' | translate }}</label>
<input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" [formControl]="form.controls['password']" tabindex="2" /> <md-input-container class="adf-full-width">
<input md-input placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
type="password"
class="mdl-textfield__input"
[formControl]="form.controls['password']"
id="password"
data-automation-id="password"
tabindex="2">
</md-input-container>
<span class="alfresco-login__validation" for="password" *ngIf="formError.password"> <span class="alfresco-login__validation" for="password" *ngIf="formError.password">
<span id="password-required" class="alfresco-login__error" data-automation-id="password-required">{{formError.password | translate }}</span> <span id="password-required" class="alfresco-login__error" data-automation-id="password-required">{{formError.password | translate }}</span>
</span> </span>