Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature(md-input): refactor MdInput as an attribute #1858

Closed
wants to merge 4 commits into from
Closed

feature(md-input): refactor MdInput as an attribute #1858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8551274
feature(md-input): refactor MdInput as an attribute
hansl Nov 2, 2016
92f48f9
add test for attributes class and style
hansl Nov 15, 2016
4a5f035
feat(md-input): add back placeholder as a portal directive
hansl Nov 17, 2016
3fe01d9
comments, round 1
hansl Nov 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 81 additions & 142 deletions src/demo-app/input/input-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,181 +2,120 @@
<md-toolbar color="primary">Basic</md-toolbar>
<md-card-content>
<form>
<md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
</md-input>
<input md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">

<input md-input value="test">

<table style="width: 100%" cellspacing="0"><tr>
<td><md-input placeholder="First name" style="width: 100%"></md-input></td>
<td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
<td><input md-input placeholder="First name" style="width: 100%"></td>
<td><input md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></td>
</tr></table>
<p>
<md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></md-textarea>
<md-textarea class="demo-full-width" placeholder="Address 2"></md-textarea>
<textarea md-textarea class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
<textarea md-textarea md-autosize class="demo-full-width" placeholder="Address 2"></textarea>
</p>
<table style="width: 100%" cellspacing="0"><tr>
<td><md-input class="demo-full-width" placeholder="City" value="Mountain View"></md-input></td>
<td><md-input class="demo-full-width" placeholder="State" maxLength="2" value="CA"></md-input></td>
<td><md-input #postalCode class="demo-full-width" maxLength="5"
placeholder="Postal Code"
value="94043">
<md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
</md-input></td>
</tr></table>
</form>
</md-card-content>
</md-card>

<md-card class="demo-card demo-basic">
<md-toolbar color="primary">Prefix + Suffix</md-toolbar>
<md-card class="demo-card">
<md-card-title>
Hello <input md-input [(ngModel)]="name" type="text" placeholder="First name">,
how are you?
</md-card-title>
<md-card-content>
<md-input placeholder="amount" align="end">
<span md-prefix>$&nbsp;</span>
<span md-suffix>.00</span>
</md-input>
</md-card-content>
</md-card>
<p>
<input md-input disabled placeholder="Disabled field" value="Value">
<input md-input required placeholder="Required field">

<md-card class="demo-card demo-basic">
<md-toolbar color="primary">Divider Colors</md-toolbar>
<md-card-content>
<h4>Input</h4>
<md-input dividerColor="primary" placeholder="Default Color" value="example"></md-input>
<md-input dividerColor="accent" placeholder="Accent Color" value="example"></md-input>
<md-input dividerColor="warn" placeholder="Warn Color" value="example"></md-input>
</p>
<p>
<input md-input style="margin: 32px" placeholder="Prefixed" value="example" [mdPrefix]="prefix">
<input md-input placeholder="Suffixed" value="123" align="end" [mdSuffix]="suffix">

<h4>Textarea</h4>
<md-textarea dividerColor="primary" placeholder="Default Color" value="example"></md-textarea>
<md-textarea dividerColor="accent" placeholder="Accent Color" value="example"></md-textarea>
<md-textarea dividerColor="warn" placeholder="Warn Color" value="example"></md-textarea>
<template #prefix><div>Example:&nbsp;</div></template>
<template #suffix><span>.00 €</span></template>
<br/>

<input md-input placeholder="Prefixed" value="example" [mdPrefix]="'Example: '">
<input md-input placeholder="Suffixed" value="123" align="end" mdSuffix=".00 $">
<br/>

Both:
<input md-input #email placeholder="Email Address" value="angular-core" align="end" [mdPrefix]="bothPrefix" [mdSuffix]="bothSuffix">

<template #bothPrefix><span><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span></template>
<template #bothSuffix><span class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span></template>
</p>
</md-card-content>






























</md-card>

<md-card class="demo-card demo-basic">
<md-toolbar color="primary">Hints</md-toolbar>
<md-toolbar color="primary">Divider Colors</md-toolbar>
<md-card-content>
<h4>Input</h4>
<p>
<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
value="Hello world. How are you?"
#characterCountHintExample>
<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
</md-input>
</p>
<input md-input dividerColor="primary" placeholder="Default Color">
<input md-input dividerColor="accent" placeholder="Accent Color">
<input md-input dividerColor="warn" placeholder="Warn Color">

<h4>Textarea</h4>
<p>
<md-textarea placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
value="Hello world. How are you?"
#characterCountHintExample>
<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
</md-textarea>
</p>
<textarea md-textarea dividerColor="primary" placeholder="Default Color"></textarea>
<textarea md-textarea dividerColor="accent" placeholder="Accent Color"></textarea>
<textarea md-textarea dividerColor="warn" placeholder="Warn Color"></textarea>

</md-card-content>
</md-card>

<md-card class="demo-card">
<md-card-title>
Hello <md-input [(ngModel)]="name" type="text" placeholder="First name"></md-input>,
how are you?
</md-card-title>
<md-toolbar color="primary">Placeholder Templates</md-toolbar>

<md-card-content>
<p>
<md-input disabled placeholder="Disabled field" value="Value"></md-input>
<md-input required placeholder="Required field"></md-input>
</p>
<p>
<md-input placeholder="100% width placeholder" style="width: 100%"></md-input>
</p>
<p>
<md-input placeholder="Character count (100 max)" maxLength="100" style="width: 100%"
#input>
<md-hint align="end">{{input.characterCount}} / 100</md-hint>
</md-input>
</p>
<p>
<md-input placeholder="Show Hint Label" style="width: 100%"
hintLabel="Hint label"></md-input>
</p>
<input md-input [placeholder]="placeholderTemplate1">

<p>
<md-input>
<md-placeholder>
I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
</md-placeholder>
<md-hint>
I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
</md-hint>
</md-input>
</p>
<p>
<md-input placeholder="Show Hint Label With Character Count" style="width: 100%"
hintLabel="Hint label" characterCounter></md-input>
</p>
<p>
<md-checkbox [(ngModel)]="dividerColor">Check to change the divider color:</md-checkbox>
<md-input [dividerColor]="dividerColor ? 'primary' : 'accent'"
[placeholder]="dividerColor ? 'Primary color' : 'Accent color'"></md-input>
</p>
<p>
<md-checkbox [(ngModel)]="requiredField"> Check to make required:</md-checkbox>
<md-input [required]="requiredField"
[placeholder]="requiredField ? 'Required field' : 'Not required field'"></md-input>
</p>
<p>
<md-checkbox [(ngModel)]="floatingLabel"> Check to make floating label:</md-checkbox>
<md-input [floatingPlaceholder]="floatingLabel"
[placeholder]="floatingLabel ? 'Floating label' : 'Not floating label'"></md-input>
<template #placeholderTemplate1>
Example of a <b>placeholder</b> template
</template>
</p>

<p>
<md-input placeholder="Prefixed" value="example">
<div md-prefix>Example:&nbsp;</div>
</md-input>
<md-input placeholder="Suffixed" value="123" align="end">
<span md-suffix>.00 €</span>
</md-input>
<input md-input [placeholder]="placeholderTemplate2">
<br/>
Both:
<md-input #email placeholder="Email Address" value="angular-core" align="end">
<span md-prefix><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span>
<span md-suffix class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span>
</md-input>
</p>
Value: <input [(ngModel)]="value">

<p>
Empty: <md-input></md-input>
<label>Label: <md-input></md-input></label>
<template #placeholderTemplate2>
Value: {{value}}
</template>
</p>
</md-card-content>
</md-card>

<md-card class="demo-card">
<table width="100%">
<thead>
<td>Table</td>
<td colspan="3">
<button (click)="addABunch(5)">Add 5</button>
<button (click)="addABunch(10)">Add 10</button>
<button (click)="addABunch(100)">Add 100</button>
<button (click)="addABunch(1000)">Add 1000</button>
</td>
</thead>
<tr *ngFor="let item of items; let i = index">
<td>{{i+1}}</td>
<td>
<md-input type="number" placeholder="value" aria-label="hello" [(ngModel)]="items[i].value"></md-input>
</td>
<td>
<input type="number" [(ngModel)]="items[i].value">
</td>
<td>{{item.value}}</td>
</tr>
</table>
</md-card>


<md-card>
<h2>textarea autosize</h2>
<textarea md-autosize class="demo-textarea"></textarea>
</md-card>
1 change: 1 addition & 0 deletions src/demo-app/input/input-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ let max = 5;
styleUrls: ['input-demo.css'],
})
export class InputDemo {
value: string = 'test';
dividerColor: boolean;
requiredField: boolean;
floatingLabel: boolean;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/input/_input-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
$input-underline-disabled-color: md-color($foreground, hint-text);
$input-underline-focused-color: md-color($primary);

.md-input-placeholder {
.md-placeholder {
color: $input-placeholder-color;

// :focus is applied to the input, but we apply md-focused to the other elements
Expand All @@ -39,7 +39,7 @@
}

// See md-input-placeholder-floating mixin in input.scss
md-input input:-webkit-autofill + .md-input-placeholder, .md-input-placeholder.md-float.md-focused {
.md-input-wrapper input:-webkit-autofill + .md-placeholder, .md-placeholder.md-float.md-focused {

.md-placeholder-required {
color: $input-required-placeholder-color;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/input/autosize.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Component} from '@angular/core';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {MdInputModule} from './input';
import {MdInputModule} from './index';
import {MdTextareaAutosize} from './autosize';


Expand Down
27 changes: 27 additions & 0 deletions src/lib/input/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,28 @@
import {CommonModule} from '@angular/common';
import {ModuleWithProviders, NgModule} from '@angular/core';

import {ProjectionModule, PortalModule} from '../core';

import {MdTextareaAutosize} from './autosize';
import {MdInput} from './input';
import {MdPlaceholder, MdPlaceholderContent} from './placeholder';


export * from './input';
export * from './placeholder';


@NgModule({
declarations: [MdPlaceholderContent, MdPlaceholder, MdInput, MdTextareaAutosize],
imports: [PortalModule, ProjectionModule, CommonModule],
exports: [MdPlaceholder, MdInput, MdTextareaAutosize],
entryComponents: [MdPlaceholderContent]
})
export class MdInputModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: MdInputModule,
providers: []
};
}
}
Loading