Best posts made by Michael Redwine

If I understand the problem, I also have a situation like this. My login screen doesn’t need the splitter menu. But it doesn’t need a toolbar either. I first played with just removing swipeable, but later decided to keep my login page simple, and use “window.location = file.html” instead to go to the main page that has the splitter and everything.

So I think I figured it out after a bit more digging. If anybody is interested, here are the changes I made:

[onsenui.js]

I added this to around line 18972:

_this._boundOnInput = _this._update.bind(_this);
_this._boundOnFocusin = _this._update.bind(_this);
_this._boundOnFocusout = _this._update.bind(_this);//<--- added this line

In the same area a little further down is a line “value: function _updateLabelClass() {”. I changed the whole block inside to this:

value: function _updateLabelClass() {
	if(this == document.activeElement.parentNode){
		this._helper.classList.remove('text-input--material__label--inactive');
		this._helper.classList.add('text-input--material__label--active');
	}else if(this.value === ''){
		this._helper.classList.remove('text-input--material__label--active');
		this._helper.classList.add('text-input--material__label--inactive');
	}else{
		this._helper.classList.remove('text-input--material__label--inactive');
		this._helper.classList.add('text-input--material__label--active');
	}
}

It probably could be a bit cleaner, but it does the job for me.

There are two lines a little further down that read “contentReady(this, function () {”. In those sections, I add the following, respectively:

contentReady(this, function () {
        _this2._input.addEventListener('input', _this2._boundOnInput);
        _this2._input.addEventListener('focusin', _this2._boundOnFocusin);
        _this2._input.addEventListener('focusout', _this2._boundOnFocusout);//<-- - added this line
});

contentReady(this, function () {
        _this3._input.removeEventListener('input', _this3._boundOnInput);
        _this3._input.removeEventListener('focusin', _this3._boundOnFocusin);
        _this3._input.removeEventListener('focusout', _this3._boundOnFocusout);//<--- added this line
});

[onsen-css-components.css]

I modified this css file a little bit. I based these modifications off my F12ing the Google login card using Chrome. I also added a new “inactive” style.

/* modified this style */
.text-input--material__label--active {
	font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
	color: rgb(66, 133, 244);
	-webkit-transform: translate(0, -75%) scale(0.75);
	transform: translate(0, -75%) scale(0.75);
	-webkit-transform-origin: left top;
	transform-origin: left top;
	transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in;
	transition: transform 0.15s ease-in, color 0.15s ease-in;
	transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in;
}

/* added this style */
.text-input--material__label--inactive {
	color: rgba(0, 0, 0, .38);
	-webkit-transform: translate(0, 0%) scale(1);
	transform: translate(0, 0%) scale(1);
	-webkit-transform-origin: left top;
	transform-origin: left top;
	transition: color 0.15s ease-in, -webkit-transform 0.15s ease-in;
	transition: transform 0.15s ease-in, color 0.15s ease-in;
	transition: transform 0.15s ease-in, color 0.15s ease-in, -webkit-transform 0.15s ease-in;
}

I think I got it all. I haven’t done extensive testing, but so far so good. Hope this helps someone out who might be looking for that one step closer to Material behavior. Again, I’m just a tinkerer, so there is most definitely a better way to do this. But this works for me.