mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Turn off radiobutton focus on Mobile

Browse source
This commit is contained in:
Dmitry Lyzo 2020-03-12 20:45:27 +03:00
parent 17d1dc3559
commit a2ccaa29c3
3 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/elements/emby-radio/emby-radio.css
View file

@ -53,7 +53,7 @@
cursor: auto; cursor: auto;
} }
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle { .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
color: #00a4dc; color: #00a4dc;
} }
@ -80,7 +80,7 @@
color: rgba(0, 0, 0, 0.26); color: rgba(0, 0, 0, 0.26);
} }
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle { .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
color: #00a4dc; color: #00a4dc;
} }
@ -103,7 +103,7 @@
transform: scale(0); transform: scale(0);
} }
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
-webkit-transform: scale(1.75); -webkit-transform: scale(1.75);
transform: scale(1.75); transform: scale(1.75);
} }

8
src/elements/emby-radio/emby-radio.js
View file

@ -1,4 +1,4 @@
define(['css!./emby-radio', 'registerElement'], function () { define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
'use strict'; 'use strict';
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () {
} }
EmbyRadioPrototype.attachedCallback = function () { EmbyRadioPrototype.attachedCallback = function () {
var showFocus = !layoutManager.mobile;
if (this.getAttribute('data-radio') === 'true') { if (this.getAttribute('data-radio') === 'true') {
return; return;
@ -37,6 +38,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-radio');
labelElement.classList.add('mdl-js-radio'); labelElement.classList.add('mdl-js-radio');
labelElement.classList.add('mdl-js-ripple-effect'); labelElement.classList.add('mdl-js-ripple-effect');
if (showFocus) {
labelElement.classList.add('show-focus');
}
var labelTextElement = labelElement.querySelector('span'); var labelTextElement = labelElement.querySelector('span');
@ -57,7 +61,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />'; html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
html += '</svg>'; html += '</svg>';
if (showFocus) {
html += '<div class="mdl-radio__focus-circle"></div>'; html += '<div class="mdl-radio__focus-circle"></div>';
}
html += '</div>'; html += '</div>';

6
src/themes/purplehaze/theme.css
View file

@ -438,12 +438,12 @@ a[data-role=button] {
color: #f8f8fe; color: #f8f8fe;
} }
.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle, .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle { .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
color: #ff77f1; color: #ff77f1;
} }
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
background: #00a4dc; background: #00a4dc;
} }