add a close button to the reveal button

This commit is contained in:
Lawrence Hook
2023-09-26 16:13:12 -04:00
parent 3b19882d12
commit 215b4047af
2 changed files with 27 additions and 3 deletions
+14 -1
View File
@@ -171,11 +171,12 @@ html[global_enable="true"] ytd-rich-grid-row[empty="true"] #contents {
}
.rys_reveal_button {
position: relative;
margin-top: 20%;
font-size: 20px;
padding: var(--yt-button-padding);
cursor: pointer;
cursor: default;
z-index: 1000000;
color: var(--yt-spec-text-primary);
@@ -186,6 +187,18 @@ html[global_enable="true"] ytd-rich-grid-row[empty="true"] #contents {
.rys_reveal_button:hover {
background-color: var(--yt-spec-raised-background);
}
#close_reveal_button {
position: absolute;
top: 0;
right: 3px;
cursor: pointer;
z-index: 1000001;
color: var(--yt-spec-text-primary);
font-size: 12px;
}
#close_reveal_button:hover {
}
html:not([global_enable="true"]) #rys_homepage_reveal_button,
html:not([add_reveal_button="true"]) #rys_homepage_reveal_button,
+13 -2
View File
@@ -479,14 +479,25 @@ function runDynamicSettings() {
const { containerSelector, buttonId, innerText, clickListener } = obj;
const existingButton = qs(`#${buttonId}`);
if (!existingButton) {
const buttonContainer = document.createElement('div');
const newButton = document.createElement('button');
const container = qs(containerSelector);
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('rys_reveal_button_container');
const newButton = document.createElement('button');
newButton.setAttribute('id', buttonId);
newButton.classList.add('rys_reveal_button');
newButton.innerText = innerText;
newButton.addEventListener('click', clickListener);
const closeButton = document.createElement('div');
closeButton.setAttribute('id', 'close_reveal_button');
closeButton.innerHTML = "✖";
closeButton.addEventListener('click', e => {
e.stopPropagation();
updateSetting('add_reveal_button', false);
});
newButton.appendChild(closeButton);
buttonContainer.appendChild(newButton);
container?.appendChild(buttonContainer);
}