verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 61 Releases Wiki Activity

Merge branch 'dev' of https://git.verdnatura.es/salix into dev 

* 'dev' of https://git.verdnatura.es/salix:
  moved textfield styles
  textfield: clear icon dinamic display
This commit is contained in:
Carlos 2017-09-27 14:10:42 +02:00
parent 66c80fd5bd 35454c5c53
commit 720cf89204
4 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/core/src/drop-down/drop-down.js
View File

@ -11,6 +11,7 @@ export default class DropDown {
this._search = null; this._search = null;
this.itemsFiltered = []; this.itemsFiltered = [];
this._activeOption = -1; this._activeOption = -1;
this._focusingFilter = false;
} }
get show() { get show() {
return this._show; return this._show;
@ -18,11 +19,13 @@ export default class DropDown {
set show(value) { set show(value) {
let oldValue = this.show; let oldValue = this.show;
this._show = value; this._show = value;
if (value && oldValue !== value && this.filter) { if (value && !this._focusingFilter && oldValue !== value && this.filter) {
let inputFilterSearch = this.$element[0].querySelector('input'); let inputFilterSearch = this.$element[0].querySelector('input');
this._focusingFilter = true;
this.$timeout(() => { this.$timeout(() => {
inputFilterSearch.focus(); inputFilterSearch.focus();
}); this._focusingFilter = false;
}, 250);
} }
} }
get search() { get search() {

3
client/core/src/textfield/style.scss
View File

@ -1,4 +1,7 @@
vn-textfield { vn-textfield {
div {
outline: none; //remove chrome outline
}
.mdl-chip__action { .mdl-chip__action {
position: absolute; position: absolute;
width: auto; width: auto;

11
client/core/src/textfield/textfield.html
View File

@ -1,4 +1,11 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
tabindex="1"
ng-focus="$ctrl.hasFocus = true"
ng-blur="$ctrl.hasFocus = false"
ng-mouseenter="$ctrl.hasMouseIn = true"
ng-mouseleave="$ctrl.hasMouseIn = false"
>
<input <input
class="mdl-textfield__input" class="mdl-textfield__input"
type="{{$ctrl.type}}" type="{{$ctrl.type}}"
@ -9,7 +16,7 @@
ng-readonly="$ctrl.readonly" ng-readonly="$ctrl.readonly"
/> />
<div class="mdl-chip__action"> <div class="mdl-chip__action">
<i class="material-icons pointer" ng-show="$ctrl.hasValue" ng-click="$ctrl.clear()">clear</i> <i class="material-icons pointer" ng-show="$ctrl.hasValue&&($ctrl.hasFocus||$ctrl.hasMouseIn)" ng-click="$ctrl.clear()">clear</i>
<i class="material-icons" ng-if="$ctrl.hasInfo" vn-tooltip="{{$ctrl.info}}" tooltip-position="up">info_outline</i> <i class="material-icons" ng-if="$ctrl.hasInfo" vn-tooltip="{{$ctrl.info}}" tooltip-position="up">info_outline</i>
</div> </div>
<label class="mdl-textfield__label" translate>{{$ctrl.label}}</label> <label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>

9
client/core/src/textfield/textfield.js
View File

@ -4,7 +4,7 @@ import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss'; import './style.scss';
export default class TextfieldController extends Component { export default class TextfieldController extends Component {
constructor($element, $scope, $attrs, normalizer) { constructor($element, $scope, $attrs, $timeout, normalizer) {
super($element); super($element);
normalizer.normalize($attrs); normalizer.normalize($attrs);
@ -12,6 +12,7 @@ export default class TextfieldController extends Component {
this.$scope = $scope; this.$scope = $scope;
this.$attrs = $attrs; this.$attrs = $attrs;
this.$element = $element; this.$element = $element;
this.$timeout = $timeout;
this._value = null; this._value = null;
this.type = this.$attrs.type || 'text'; this.type = this.$attrs.type || 'text';
@ -20,6 +21,8 @@ export default class TextfieldController extends Component {
this.focus = false; this.focus = false;
this.hasInfo = Boolean(this.$attrs.info); this.hasInfo = Boolean(this.$attrs.info);
this.info = this.$attrs.info || null; this.info = this.$attrs.info || null;
this.hasFocus = false;
this.hasMouseIn = false;
componentHandler.upgradeElement($element[0].firstChild); componentHandler.upgradeElement($element[0].firstChild);
} }
@ -33,7 +36,7 @@ export default class TextfieldController extends Component {
this.hasValue = Boolean(this._value); this.hasValue = Boolean(this._value);
this.mdlUpdate(); this.mdlUpdate();
} }
mdlUpdate() { mdlUpdate() {
let mdlField = this.$element[0].firstChild.MaterialTextfield; let mdlField = this.$element[0].firstChild.MaterialTextfield;
if (mdlField) if (mdlField)
@ -45,7 +48,7 @@ export default class TextfieldController extends Component {
this.input.focus(); this.input.focus();
} }
} }
TextfieldController.$inject = ['$element', '$scope', '$attrs', normalizerFactory.NAME]; TextfieldController.$inject = ['$element', '$scope', '$attrs', '$timeout', normalizerFactory.NAME];
module.component('vnTextfield', { module.component('vnTextfield', {
template: require('./textfield.html'), template: require('./textfield.html'),