From 87bcf40e813e9d6b858fdfca10b9310b8799bc2e Mon Sep 17 00:00:00 2001 From: dkanada Date: Thu, 26 Mar 2020 08:14:28 +0900 Subject: [PATCH] Merge pull request #937 from dmitrylyzo/fix_radio_style Fix radio style (cherry picked from commit 8a1262eedd78f5b7e91ba1c99279cdfac827ca3f) Signed-off-by: Joshua M. Boniface --- src/elements/emby-checkbox/emby-checkbox.css | 2 +- src/elements/emby-radio/emby-radio.css | 106 +++++++++++-------- src/elements/emby-radio/emby-radio.js | 28 ++++- src/themes/purplehaze/theme.css | 13 ++- 4 files changed, 98 insertions(+), 51 deletions(-) diff --git a/src/elements/emby-checkbox/emby-checkbox.css b/src/elements/emby-checkbox/emby-checkbox.css index 42a9207560..b33a216140 100644 --- a/src/elements/emby-checkbox/emby-checkbox.css +++ b/src/elements/emby-checkbox/emby-checkbox.css @@ -55,7 +55,7 @@ height: 1.83em; margin: 0; overflow: hidden; - border: 2px solid currentcolor; + border: 0.14em solid currentcolor; border-radius: 0.14em; z-index: 2; display: flex; diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css index 6db3c39e4d..2d7f584171 100644 --- a/src/elements/emby-radio/emby-radio.css +++ b/src/elements/emby-radio/emby-radio.css @@ -4,7 +4,6 @@ display: inline-block; box-sizing: border-box; margin: 0; - padding-left: 24px; } .radio-label-block { @@ -31,67 +30,82 @@ border: none; } -.mdl-radio__outer-circle { - position: absolute; - top: 4px; - left: 0; - display: inline-block; - box-sizing: border-box; - width: 16px; - height: 16px; - margin: 0; - cursor: pointer; - border: 2px solid currentcolor; +.mdl-radio__circles { + position: relative; + margin-right: 0.54em; + width: 1.08em; + height: 1.08em; border-radius: 50%; - z-index: 2; + cursor: pointer; } -.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle { - border: 2px solid #00a4dc; +.mdl-radio__circles svg { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 1; + overflow: visible; } -.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle { - border: 2px solid rgba(0, 0, 0, 0.26); +.mdl-radio__button:disabled + .mdl-radio__circles { cursor: auto; } +.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__outer-circle { + color: rgba(0, 0, 0, 0.26); +} + +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle { + color: #00a4dc; +} + .mdl-radio__inner-circle { - position: absolute; - z-index: 1; - margin: 0; - top: 8px; - left: 4px; - box-sizing: border-box; - width: 8px; - height: 8px; - cursor: pointer; - transition-duration: 0.28s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; - -webkit-transform: scale3d(0, 0, 0); - transform: scale3d(0, 0, 0); + -webkit-transform: scale(0); + transform: scale(0); + transform-origin: 50% 50%; +} + +.mdl-radio__button:checked + .mdl-radio__circles .mdl-radio__inner-circle { + -webkit-transform: scale(1); + transform: scale(1); +} + +.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__inner-circle { + color: rgba(0, 0, 0, 0.26); +} + +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle { + color: #00a4dc; +} + +.mdl-radio__focus-circle { + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + width: 100%; + height: 100%; + margin: 0; border-radius: 50%; background: #00a4dc; + opacity: 0.26; + transition-duration: 0.2s; + transition-property: -webkit-transform; + transition-property: transform; + transition-property: transform, -webkit-transform; + -webkit-transform: scale(0); + transform: scale(0); } -.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); -} - -.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - background: rgba(0, 0, 0, 0.26); - cursor: auto; -} - -.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76); -} - -.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26); +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { + -webkit-transform: scale(1.75); + transform: scale(1.75); } .mdl-radio__label { diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 000c656822..46a3e3826c 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,4 +1,4 @@ -define(['css!./emby-radio', 'registerElement'], function () { +define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { 'use strict'; var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); @@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () { } EmbyRadioPrototype.attachedCallback = function () { + var showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -37,13 +38,36 @@ define(['css!./emby-radio', 'registerElement'], function () { labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); labelElement.classList.add('mdl-js-ripple-effect'); + if (showFocus) { + labelElement.classList.add('show-focus'); + } var labelTextElement = labelElement.querySelector('span'); labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('mdl-radio__label'); - labelElement.insertAdjacentHTML('beforeend', ''); + var html = ''; + + html += '
'; + + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + + if (showFocus) { + html += '
'; + } + + html += '
'; + + this.insertAdjacentHTML('afterend', html); this.addEventListener('keydown', onKeyDown); }; diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 9c13841422..45f43abc2f 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -382,7 +382,7 @@ a[data-role=button] { .emby-checkbox:checked + span + .checkboxOutline { background-color: #030322; - border: 2px solid rgb(72, 195, 200); + border: 0.14em solid rgb(72, 195, 200); } .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked { @@ -394,7 +394,7 @@ a[data-role=button] { } .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { - border: 2px solid #ff77f1; + border: 0.14em solid #ff77f1; } .itemProgressBarForeground { @@ -438,6 +438,15 @@ a[data-role=button] { color: #f8f8fe; } +.mdl-radio.show-focus .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__inner-circle { + color: #ff77f1; +} + +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { + background: #00a4dc; +} + .emby-tab-button { color: #999; }