From 3e95d0868e58ac1469d03800d81fd4e65632331d Mon Sep 17 00:00:00 2001 From: D-Bao <49440133+D-Bao@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:46:48 +0100 Subject: [PATCH 1/3] fix "sl-button" class name conflict --- src/content_script/input_tools.css | 12 ++++++------ src/content_script/input_tools.js | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content_script/input_tools.css b/src/content_script/input_tools.css index b459cf9..56f5c93 100644 --- a/src/content_script/input_tools.css +++ b/src/content_script/input_tools.css @@ -1,9 +1,9 @@ -.sl-button-wrapper { +.simplelogin-extension--button-wrapper { position: absolute; z-index: 999999; } -.sl-button { +.simplelogin-extension--button { cursor: pointer; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); max-height: 30px; @@ -22,14 +22,14 @@ background-size: contain; } -.sl-button:hover { +.simplelogin-extension--button:hover { transform: translate(-50%, -50%) scale(1.2); } -.sl-button.loading { +.simplelogin-extension--button.loading { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: none; display: block; shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='50' cy='50' fill='none' stroke='%23aa2990' stroke-width='10' r='35' stroke-dasharray='164.93361431346415 56.97787143782138' transform='rotate(178.465 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' values='0 50 50;360 50 50' keyTimes='0;1'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E"); } -.sl-button.loading:hover { +.simplelogin-extension--button.loading:hover { transform: translate(-50%, -50%); -} \ No newline at end of file +} diff --git a/src/content_script/input_tools.js b/src/content_script/input_tools.js index d93f2cc..0d4f964 100644 --- a/src/content_script/input_tools.js +++ b/src/content_script/input_tools.js @@ -89,7 +89,7 @@ if (!window._hasExecutedSlExtension) { addSLButtonToInput(inputElem) { // create wrapper for SL button - const btnWrapper = InputTools.newDiv("sl-button-wrapper"); + const btnWrapper = InputTools.newDiv("simplelogin-extension--button-wrapper"); const inputSumHeight = inputElem.getBoundingClientRect().height + "px"; btnWrapper.style.height = inputSumHeight; @@ -97,7 +97,7 @@ if (!window._hasExecutedSlExtension) { document.body.appendChild(btnWrapper); // create the SL button - const slButton = InputTools.newDiv("sl-button"); + const slButton = InputTools.newDiv("simplelogin-extension--button"); slButton.addEventListener("click", function () { InputTools.handleOnClickSLButton(inputElem, slButton); }); From d6cf7a7baf8391b8b56f4f65c67f6d646c101100 Mon Sep 17 00:00:00 2001 From: D-Bao <49440133+D-Bao@users.noreply.github.com> Date: Fri, 24 Mar 2023 12:51:52 +0100 Subject: [PATCH 2/3] define a constant css prefix in input_tools.js --- src/content_script/input_tools.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/content_script/input_tools.js b/src/content_script/input_tools.js index 0d4f964..f932c9b 100644 --- a/src/content_script/input_tools.js +++ b/src/content_script/input_tools.js @@ -88,8 +88,11 @@ if (!window._hasExecutedSlExtension) { }, addSLButtonToInput(inputElem) { + const CSS_CLASS_PREFIX = "simplelogin-extension--"; + const prefixClassName = (classname) => `${CSS_CLASS_PREFIX}${classname}`; + // create wrapper for SL button - const btnWrapper = InputTools.newDiv("simplelogin-extension--button-wrapper"); + const btnWrapper = InputTools.newDiv(prefixClassName("button-wrapper")); const inputSumHeight = inputElem.getBoundingClientRect().height + "px"; btnWrapper.style.height = inputSumHeight; @@ -97,7 +100,7 @@ if (!window._hasExecutedSlExtension) { document.body.appendChild(btnWrapper); // create the SL button - const slButton = InputTools.newDiv("simplelogin-extension--button"); + const slButton = InputTools.newDiv(prefixClassName("button")); slButton.addEventListener("click", function () { InputTools.handleOnClickSLButton(inputElem, slButton); }); From 3ceacb087ce3bea799ac37988887eb29fcd48791 Mon Sep 17 00:00:00 2001 From: D-Bao <49440133+D-Bao@users.noreply.github.com> Date: Fri, 24 Mar 2023 13:08:16 +0100 Subject: [PATCH 3/3] Revert "define a constant css prefix in input_tools.js" This reverts commit d6cf7a7baf8391b8b56f4f65c67f6d646c101100. --- src/content_script/input_tools.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/content_script/input_tools.js b/src/content_script/input_tools.js index f932c9b..0d4f964 100644 --- a/src/content_script/input_tools.js +++ b/src/content_script/input_tools.js @@ -88,11 +88,8 @@ if (!window._hasExecutedSlExtension) { }, addSLButtonToInput(inputElem) { - const CSS_CLASS_PREFIX = "simplelogin-extension--"; - const prefixClassName = (classname) => `${CSS_CLASS_PREFIX}${classname}`; - // create wrapper for SL button - const btnWrapper = InputTools.newDiv(prefixClassName("button-wrapper")); + const btnWrapper = InputTools.newDiv("simplelogin-extension--button-wrapper"); const inputSumHeight = inputElem.getBoundingClientRect().height + "px"; btnWrapper.style.height = inputSumHeight; @@ -100,7 +97,7 @@ if (!window._hasExecutedSlExtension) { document.body.appendChild(btnWrapper); // create the SL button - const slButton = InputTools.newDiv(prefixClassName("button")); + const slButton = InputTools.newDiv("simplelogin-extension--button"); slButton.addEventListener("click", function () { InputTools.handleOnClickSLButton(inputElem, slButton); });