Skip to content

Add support for inline paper-icon in paper-input component. #154

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

Merged
merged 1 commit into from
Aug 19, 2015
Merged

Add support for inline paper-icon in paper-input component. #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion addon/components/paper-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import FlexMixin from 'ember-paper/mixins/flex-mixin';
export default BaseFocusable.extend(ColorMixin, FlexMixin, {
tagName: 'md-input-container',
classNames: ['md-default-theme'],
classNameBindings: ['hasValue:md-input-has-value', 'focus:md-input-focused', 'isInvalid:md-input-invalid'],
classNameBindings: ['hasValue:md-input-has-value', 'focus:md-input-focused', 'isInvalid:md-input-invalid', 'iconFloat:md-icon-float'],
type: 'text',
autofocus: false,
tabindex: -1,
hideAllMessages: false,
hasValue: Ember.computed.notEmpty('value'),
inputElementId: Ember.computed('elementId', function() {
return 'input-' + this.get('elementId');
Expand All @@ -21,6 +22,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
var currentLength = this.get('value') ? this.get('value').length : 0;
return currentLength + '/' + this.get('maxlength');
}),
iconFloat: Ember.computed.and('icon', 'label'),

validate() {
var returnValue = false;
Expand Down
21 changes: 15 additions & 6 deletions app/templates/components/paper-input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
<label for={{inputElementId}}>{{label}}</label>
{{#if label}}
<label for={{inputElementId}}>{{label}}</label>
{{/if}}

{{#if icon}}
{{paper-icon icon=icon class=icon-class}}
{{/if}}

{{#if textarea}}
{{textarea class="md-input" id=inputElementId value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{textarea class="md-input" id=inputElementId placeholder=placeholder value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{else}}
{{input class="md-input" id=inputElementId type=type value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{input class="md-input" id=inputElementId placeholder=placeholder type=type value=value focus-in="focusIn" key-down="keyDown" focus-out="focusOut" disabled=disabled required=required autofocus=autofocus}}
{{/if}}

<div ng-messages>
{{#unless hideAllMessages}}
<div ng-messages>
<div id="error-{{inputElementId}}" ng-message="{{ng-message}}" class="{{if isInvalid 'ng-enter ng-enter-active' 'ng-leave ng-leave-active'}}">{{errortext}}</div>
</div>
</div>
{{/unless}}

{{#if maxlength}}
<div class="md-char-counter">{{renderCharCount}}</div>
<div class="md-char-counter">{{renderCharCount}}</div>
{{/if}}
28 changes: 21 additions & 7 deletions tests/dummy/app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ ul li:first-child {

body {

&> div.ember-view {
& > div.ember-view {
width: 100%;
height: 100%;
}
Expand Down Expand Up @@ -164,13 +164,13 @@ p {
}

.menu-sidenav-toggle {
font-size: 24px!important;
font-size: 24px !important;
margin-right: 16px;
padding: 0;
}

.logo {
font-size:24px;
font-size: 24px;
}

/*.sidenav ul {
Expand Down Expand Up @@ -232,11 +232,25 @@ p {

.icon-demo md-icon {
font-size: 24px;
margin:16px;
margin: 16px;
}

.icon-demo .icon-tile {
float:left;
min-width:200px;
text-align:center;
float: left;
min-width: 200px;
text-align: center;
}

md-input-container:not(.md-input-invalid) > md-icon.email {
color: green;
}

md-input-container:not(.md-input-invalid) > md-icon.name {
color: dodgerblue;
}

md-input-container.md-input-invalid > md-icon.email,
md-input-container.md-input-invalid > md-icon.name,
{
color: red;
}
18 changes: 18 additions & 0 deletions tests/dummy/app/templates/input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@
}}
</p>

<h3>Icons</h3>
<p>
{{paper-input label="Name" value=name icon="person" icon-class="name"}}
{{paper-input placeholder="Phone Number" type="text" value=user.phone icon="phone"}}
{{paper-input label="Email (required)" type="email" value=user.email icon="email" icon-class="email" required=true hideAllMessages=true}}
{{paper-input placeholder="Address" type="text" value=user.address icon="place"}}
</p>

<h3>Template</h3>
{{#code-block language="handlebars"}}
\{{paper-input label="Name" value=name}}
Expand All @@ -54,6 +62,16 @@
maxlength="2"
maxlength-errortext="Max length exceeded."
}}

&lt;h3&gt;Icons&lt;/h3&gt;
&lt;p&gt;
\{{paper-input label="Name" value=name icon="person" icon-class="name"}}
\{{paper-input placeholder="Phone Number" type="text" value=user.phone icon="phone" md-no-float=''}}
\{{paper-input label="Email (required)" type="email" value=user.email icon="email" icon-class="email" required=true hideAllMessages=true}}
\{{paper-input placeholder="Address" type="text" value=user.address icon="place"}}
&lt;/p&gt;


{{/code-block}}
</div>
{{/paper-content}}