Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(mdChips): Autocomplete styling is incorrect.
Browse files Browse the repository at this point in the history 
The chips autocomplete had unnecessary styling and the default
autocomplete directive does not add the `md-input` class to it's
input, so it did not look correct.

Also fixes issue with md-chip readonly padding styles.

Fixes #4600.
  • Loading branch information
@topherfangio
topherfangio committed Sep 17, 2015
1 parent bfb8dac commit 2ced206
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 97 deletions.
185 changes: 91 additions & 94 deletions src/components/autocomplete/js/autocompleteDirective.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
angular
.module('material.components.autocomplete')
.directive('mdAutocomplete', MdAutocomplete);
.module('material.components.autocomplete')
.directive('mdAutocomplete', MdAutocomplete);

/**
* @ngdoc directive
Expand Down Expand Up @@ -146,114 +146,111 @@ function MdAutocomplete () {
var noItemsTemplate = getNoItemsTemplate(),
itemTemplate = getItemTemplate(),
leftover = element.html();
return '\
<md-autocomplete-wrap\
layout="row"\
ng-class="{ \'md-whiteframe-z1\': !floatingLabel, \'md-menu-showing\': !$mdAutocompleteCtrl.hidden }"\
role="listbox">\
' + getInputElement() + '\
<md-progress-linear\
ng-if="$mdAutocompleteCtrl.loading && !$mdAutocompleteCtrl.hidden"\
md-mode="indeterminate"></md-progress-linear>\
<md-virtual-repeat-container\
md-auto-shrink\
md-auto-shrink-min="1"\
ng-hide="$mdAutocompleteCtrl.hidden && !$mdAutocompleteCtrl.notFoundVisible()"\
class="md-autocomplete-suggestions-container md-whiteframe-z1"\
role="presentation">\
<ul class="md-autocomplete-suggestions"\
ng-class="::menuClass"\
id="ul-{{$mdAutocompleteCtrl.id}}"\
ng-mouseenter="$mdAutocompleteCtrl.listEnter()"\
ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\
ng-mouseup="$mdAutocompleteCtrl.mouseUp()">\
<li md-virtual-repeat="item in $mdAutocompleteCtrl.matches"\
ng-class="{ selected: $index === $mdAutocompleteCtrl.index }"\
ng-click="$mdAutocompleteCtrl.select($index)"\
md-extra-name="$mdAutocompleteCtrl.itemName">\
' + itemTemplate + '\
</li>' + noItemsTemplate + '\
</ul>\
</md-virtual-repeat-container>\
</md-autocomplete-wrap>\
<aria-status\
class="md-visually-hidden"\
role="status"\
aria-live="assertive">\
<p ng-repeat="message in $mdAutocompleteCtrl.messages track by $index" ng-if="message">{{message}}</p>\
</aria-status>';
return '' +
'<md-autocomplete-wrap' +
' layout="row"' +
' ng-class="{ \'md-whiteframe-z1\': !floatingLabel, \'md-menu-showing\': !$mdAutocompleteCtrl.hidden }"' +
' role="listbox">' + getInputElement() +
' <md-progress-linear' +
' ng-if="$mdAutocompleteCtrl.loading && !$mdAutocompleteCtrl.hidden"' +
' md-mode="indeterminate"></md-progress-linear>' +
' <md-virtual-repeat-container' +
' md-auto-shrink' +
' md-auto-shrink-min="1"' +
' ng-hide="$mdAutocompleteCtrl.hidden && !$mdAutocompleteCtrl.notFoundVisible()"' +
' class="md-autocomplete-suggestions-container md-whiteframe-z1"' +
' role="presentation">' +
' <ul class="md-autocomplete-suggestions"' +
' ng-class="::menuClass"' +
' id="ul-{{$mdAutocompleteCtrl.id}}"' +
' ng-mouseenter="$mdAutocompleteCtrl.listEnter()"' +
' ng-mouseleave="$mdAutocompleteCtrl.listLeave()"' +
' ng-mouseup="$mdAutocompleteCtrl.mouseUp()">' +
' <li md-virtual-repeat="item in $mdAutocompleteCtrl.matches"' +
' ng-class="{ selected: $index === $mdAutocompleteCtrl.index }"' +
' ng-click="$mdAutocompleteCtrl.select($index)"' +
' md-extra-name="$mdAutocompleteCtrl.itemName">' + itemTemplate +
' </li>' + noItemsTemplate +
' </ul>' +
' </md-virtual-repeat-container>' +
'</md-autocomplete-wrap>' +
'<aria-status' +
' class="md-visually-hidden"' +
' role="status"' +
' aria-live="assertive">' +
' <p ng-repeat="message in $mdAutocompleteCtrl.messages track by $index" ng-if="message">{{message}}</p>' +
'</aria-status>';

function getItemTemplate() {
var templateTag = element.find('md-item-template').detach(),
html = templateTag.length ? templateTag.html() : element.html();
html = templateTag.length ? templateTag.html() : element.html();
if (!templateTag.length) element.empty();
return '<md-autocomplete-parent-scope md-autocomplete-replace>' + html + '</md-autocomplete-parent-scope>';
}

function getNoItemsTemplate() {
var templateTag = element.find('md-not-found').detach(),
template = templateTag.length ? templateTag.html() : '';
template = templateTag.length ? templateTag.html() : '';
return template
? '<li ng-if="$mdAutocompleteCtrl.notFoundVisible()"\
md-autocomplete-parent-scope>' + template + '</li>'
: '';
? '<li ng-if="$mdAutocompleteCtrl.notFoundVisible()"' +
' md-autocomplete-parent-scope>' + template + '</li>'
: '';

}

function getInputElement () {
if (attr.mdFloatingLabel) {
return '\
<md-input-container flex ng-if="floatingLabel">\
<label>{{floatingLabel}}</label>\
<input type="search"\
id="{{ inputId || \'fl-input-\' + $mdAutocompleteCtrl.id }}"\
name="{{inputName}}"\
autocomplete="off"\
ng-required="$mdAutocompleteCtrl.isRequired"\
ng-minlength="inputMinlength"\
ng-maxlength="inputMaxlength"\
ng-disabled="$mdAutocompleteCtrl.isDisabled"\
ng-model="$mdAutocompleteCtrl.scope.searchText"\
ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
ng-blur="$mdAutocompleteCtrl.blur()"\
ng-focus="$mdAutocompleteCtrl.focus()"\
aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\
aria-label="{{floatingLabel}}"\
aria-autocomplete="list"\
aria-haspopup="true"\
aria-activedescendant=""\
aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
<div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>\
</md-input-container>';
return '' +
'<md-input-container flex ng-if="floatingLabel">' +
' <label>{{floatingLabel}}</label>' +
' <input type="search"' +
' id="{{ inputId || \'fl-input-\' + $mdAutocompleteCtrl.id }}"' +
' name="{{inputName}}"' +
' autocomplete="off"' +
' ng-required="$mdAutocompleteCtrl.isRequired"' +
' ng-minlength="inputMinlength"' +
' ng-maxlength="inputMaxlength"' +
' ng-disabled="$mdAutocompleteCtrl.isDisabled"' +
' ng-model="$mdAutocompleteCtrl.scope.searchText"' +
' ng-keydown="$mdAutocompleteCtrl.keydown($event)"' +
' ng-blur="$mdAutocompleteCtrl.blur()"' +
' ng-focus="$mdAutocompleteCtrl.focus()"' +
' aria-owns="ul-{{$mdAutocompleteCtrl.id}}"' +
' aria-label="{{floatingLabel}}"' +
' aria-autocomplete="list"' +
' aria-haspopup="true"' +
' aria-activedescendant=""' +
' aria-expanded="{{!$mdAutocompleteCtrl.hidden}}" />' +
' <div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>' +
'</md-input-container>';
} else {
return '\
<input flex type="search"\
id="{{ inputId || \'input-\' + $mdAutocompleteCtrl.id }}"\
name="{{inputName}}"\
ng-if="!floatingLabel"\
autocomplete="off"\
ng-required="$mdAutocompleteCtrl.isRequired"\
ng-disabled="$mdAutocompleteCtrl.isDisabled"\
ng-model="$mdAutocompleteCtrl.scope.searchText"\
ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
ng-blur="$mdAutocompleteCtrl.blur()"\
ng-focus="$mdAutocompleteCtrl.focus()"\
placeholder="{{placeholder}}"\
aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\
aria-label="{{placeholder}}"\
aria-autocomplete="list"\
aria-haspopup="true"\
aria-activedescendant=""\
aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
<button\
type="button"\
tabindex="-1"\
ng-if="$mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled"\
ng-click="$mdAutocompleteCtrl.clear()">\
<md-icon md-svg-icon="md-close"></md-icon>\
<span class="md-visually-hidden">Clear</span>\
</button>\
';
return '' +
'<input flex type="search"' +
' id="{{ inputId || \'input-\' + $mdAutocompleteCtrl.id }}"' +
' name="{{inputName}}"' +
' ng-if="!floatingLabel"' +
' autocomplete="off"' +
' ng-required="$mdAutocompleteCtrl.isRequired"' +
' ng-disabled="$mdAutocompleteCtrl.isDisabled"' +
' ng-model="$mdAutocompleteCtrl.scope.searchText"' +
' ng-keydown="$mdAutocompleteCtrl.keydown($event)"' +
' ng-blur="$mdAutocompleteCtrl.blur()"' +
' ng-focus="$mdAutocompleteCtrl.focus()"' +
' placeholder="{{placeholder}}"' +
' aria-owns="ul-{{$mdAutocompleteCtrl.id}}"' +
' aria-label="{{placeholder}}"' +
' aria-autocomplete="list"' +
' aria-haspopup="true"' +
' aria-activedescendant=""' +
' aria-expanded="{{!$mdAutocompleteCtrl.hidden}}" />' +
'<button' +
' type="button"' +
' tabindex="-1"' +
' ng-if="$mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled"' +
' ng-click="$mdAutocompleteCtrl.clear()">' +
' <md-icon md-svg-icon="md-close"></md-icon>' +
' <span class="md-visually-hidden">Clear</span>' +
'</button>';
}
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/chips/chips.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$chip-font-size: rem(1.6) !default;
$chip-height: rem(3.2) !default;
$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
$chip-input-padding: 0 !default;
$chip-remove-padding-right: rem(2.2) !default;
$chip-remove-line-height: rem(2.2) !default;
$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
Expand Down Expand Up @@ -62,7 +63,7 @@ $contact-chip-name-width: rem(12) !default;
&:not(.md-readonly) {
cursor: text;

.md-chip {
.md-chip:not(.md-readonly) {
padding-right: $chip-remove-padding-right;
}
}
Expand Down Expand Up @@ -122,7 +123,7 @@ $contact-chip-name-width: rem(12) !default;
display: block;
line-height: $chip-height;
margin: $chip-margin;
padding: $chip-padding;
padding: $chip-input-padding;
float: left;
input {
&:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
Expand Down
9 changes: 8 additions & 1 deletion src/components/chips/js/chipsDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@

var CHIP_INPUT_TEMPLATE = '\
<input\
class="md-input"\
tabindex="0"\
placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\
Expand Down Expand Up @@ -229,7 +230,6 @@
* Configures controller and transcludes.
*/
return function postLink(scope, element, attrs, controllers) {

$mdUtil.initOptionalProperties(scope, attr);

$mdTheming(element);
Expand Down Expand Up @@ -277,6 +277,13 @@
}
});
}

// At the next tick, if we find an input, make sure it has the md-input class
$mdUtil.nextTick(function() {
var input = element.find('input');

input && input.toggleClass('md-input', true);
});
}

// Compile with the parent's scope and prepend any static chips to the wrapper.
Expand Down

0 comments on commit 2ced206

Please sign in to comment.