This commit is contained in:
Áron Hegymegi-Kiss
2022-01-08 16:34:49 +01:00
parent 46e515b130
commit 3b54fde3f9
6 changed files with 52 additions and 33 deletions

View File

@@ -846,35 +846,35 @@
"message": "h", "message": "h",
"description": "100h" "description": "100h"
}, },
"optionsTabCategories" : { "optionsTabCategories": {
"message": "Categories", "message": "Categories",
"description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for setting up categories. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabBehavior" : { "optionsTabBehavior": {
"message": "Behavior", "message": "Behavior",
"description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to the general behavior of the extension. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabInterface" : { "optionsTabInterface": {
"message": "Interface", "message": "Interface",
"description": "Appears in Options as a tab header for options related to GUI and sounds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to GUI and sounds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabKeyBinds" : { "optionsTabKeyBinds": {
"message": "Key Bindings", "message": "Key Bindings",
"description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabPrivacy" : { "optionsTabPrivacy": {
"message": "Privacy", "message": "Privacy",
"description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server). To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabBackup" : { "optionsTabBackup": {
"message": "Backup/Restore", "message": "Backup/Restore",
"description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"optionsTabAdvanced" : { "optionsTabAdvanced": {
"message": "Advanced", "message": "Advanced",
"description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)." "description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
}, },
"noticeVisibilityLabel" : { "noticeVisibilityLabel": {
"message": "Skip notice appearance", "message": "Skip notice appearance",
"description": "Option label" "description": "Option label"
} }

View File

@@ -21,7 +21,7 @@ body {
.medium-description, .switch-container, .optionLabel, .categoryTableElement { .medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: white; color: white;
} }
.small-description, p,li { .small-description, p, li, span, div {
color: #dfdfdf; color: #dfdfdf;
} }
.option-button.disabled { .option-button.disabled {
@@ -64,7 +64,7 @@ h1,h2,h3,h4,h5,h6 {
.medium-description, .switch-container, .optionLabel, .categoryTableElement { .medium-description, .switch-container, .optionLabel, .categoryTableElement {
color: black; color: black;
} }
.small-description, p,li { .small-description, p, li, span, div {
color: #262626; color: #262626;
} }
.option-button.disabled { .option-button.disabled {
@@ -170,6 +170,10 @@ input[type='number'] {
font-weight: bold; font-weight: bold;
} }
.hiding {
opacity: 0;
}
.hidden { .hidden {
display: none !important; display: none !important;
} }
@@ -546,6 +550,7 @@ svg {
} }
#version { #version {
font-size: 10px; font-size: 10px;
transform: translate(-50px, -5px);
} }
.sticky #navigation { .sticky #navigation {
position: fixed; position: fixed;

View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Link to specific tabs by using their ID in the URL like: options.html#keybinds -->
<head> <head>
<title>Options - SponsorBlock</title> <title>Options - SponsorBlock</title>
@@ -23,31 +24,31 @@
<div id="version"></div> <div id="version"></div>
</div> </div>
<div class="tab-heading" data-for="segment-options"> <div class="tab-heading" data-for="segments">
__MSG_optionsTabCategories__ __MSG_optionsTabCategories__
</div> </div>
<div class="tab-heading" data-for="logic-options"> <div class="tab-heading" data-for="behavior">
__MSG_optionsTabBehavior__ __MSG_optionsTabBehavior__
</div> </div>
<div class="tab-heading" data-for="interface-options"> <div class="tab-heading" data-for="interface">
__MSG_optionsTabInterface__ __MSG_optionsTabInterface__
</div> </div>
<div class="tab-heading" data-for="keybind-options"> <div class="tab-heading" data-for="keybinds">
__MSG_optionsTabKeyBinds__ __MSG_optionsTabKeyBinds__
</div> </div>
<div class="tab-heading" data-for="privacy-options"> <div class="tab-heading" data-for="privacy">
__MSG_optionsTabPrivacy__ __MSG_optionsTabPrivacy__
</div> </div>
<div class="tab-heading" data-for="import-options"> <div class="tab-heading" data-for="import">
__MSG_optionsTabBackup__ __MSG_optionsTabBackup__
</div> </div>
<div class="tab-heading" data-for="advanced-options"> <div class="tab-heading" data-for="advanced">
__MSG_optionsTabAdvanced__ __MSG_optionsTabAdvanced__
</div> </div>
@@ -62,7 +63,7 @@
<div id="options" class="hidden"> <div id="options" class="hidden">
<div id="segment-options" class="option-group hidden"> <div id="segments" class="option-group hidden">
<div id="category-type" data-type="react-CategoryChooserComponent"> <div id="category-type" data-type="react-CategoryChooserComponent">
@@ -70,7 +71,7 @@
</div> </div>
<div id="logic-options" class="option-group hidden"> <div id="behavior" class="option-group hidden">
<div data-type="toggle" data-sync="autoSkipOnMusicVideos"> <div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container"> <div class="switch-container">
@@ -135,7 +136,7 @@
</div> </div>
<div id="interface-options" class="option-group hidden"> <div id="interface" class="option-group hidden">
<div data-type="number-change" data-sync="skipNoticeDuration"> <div data-type="number-change" data-sync="skipNoticeDuration">
<label class="number-container"> <label class="number-container">
@@ -286,7 +287,7 @@
</div> </div>
<div id="keybind-options" class="option-group hidden"> <div id="keybinds" class="option-group hidden">
<div data-type="keybind-change" data-sync="skipKeybind"> <div data-type="keybind-change" data-sync="skipKeybind">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
@@ -340,7 +341,7 @@
</div> </div>
<div id="privacy-options" class="option-group hidden"> <div id="privacy" class="option-group hidden">
<div data-type="toggle" data-sync="trackViewCount"> <div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container"> <div class="switch-container">
@@ -370,7 +371,7 @@
</div> </div>
<div id="import-options" class="option-group hidden"> <div id="import" class="option-group hidden">
<div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning"> <div data-type="private-text-change" data-sync="userID" data-confirm-message="userIDChangeWarning">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
@@ -406,7 +407,7 @@
</div> </div>
<div id="advanced-options" class="option-group hidden"> <div id="advanced" class="option-group hidden">
<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true"> <div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
<div class="switch-container"> <div class="switch-container">
@@ -423,7 +424,7 @@
<div class="small-description">__MSG_supportOtherSitesDescription__ </div> <div class="small-description">__MSG_supportOtherSitesDescription__ </div>
</div> </div>
<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true"> <div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true" data-dependent-on="supportInvidious">
<div class="option-button trigger-button"> <div class="option-button trigger-button">
__MSG_addInvidiousInstance__ __MSG_addInvidiousInstance__
</div> </div>

View File

@@ -338,7 +338,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst") if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst")
.replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) { .replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) {
// Open options page // Open options page
chrome.runtime.sendMessage({message: "openConfig", hash: chosenCategory + "OptionsName"}); chrome.runtime.sendMessage({message: "openConfig", hash: "segments"});
} }
return; return;

View File

@@ -45,7 +45,7 @@ async function init() {
isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true"; isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true";
if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) { if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
optionsElements[i].classList.add("hidden"); optionsElements[i].classList.add("hidden", "hiding");
if (!dependentOn) if (!dependentOn)
continue; continue;
} }
@@ -109,8 +109,10 @@ async function init() {
const disableWhenChecked = dependents[j].getAttribute("data-dependent-on-inverted") === "true"; const disableWhenChecked = dependents[j].getAttribute("data-dependent-on-inverted") === "true";
if (!await shouldHideOption(dependents[j]) && (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked)) { if (!await shouldHideOption(dependents[j]) && (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked)) {
dependents[j].classList.remove("hidden"); dependents[j].classList.remove("hidden");
setTimeout(() => dependents[j].classList.remove("hiding"), 1);
} else { } else {
dependents[j].classList.add("hidden"); dependents[j].classList.add("hiding");
setTimeout(() => dependents[j].classList.add("hidden"), 400);
} }
} }
}); });
@@ -240,10 +242,10 @@ async function init() {
const substr = location.hash.substring(1); const substr = location.hash.substring(1);
let menuItem = document.querySelector(`[data-for='${substr}']`); let menuItem = document.querySelector(`[data-for='${substr}']`);
if (menuItem == null) if (menuItem == null)
menuItem = document.querySelector(`[data-for='segment-options']`); menuItem = document.querySelector(`[data-for='segments']`);
menuItem.classList.add("selected"); menuItem.classList.add("selected");
} else { } else {
document.querySelector(`[data-for='segment-options']`).classList.add("selected"); document.querySelector(`[data-for='segments']`).classList.add("selected");
} }
const tabElements = document.getElementsByClassName("tab-heading"); const tabElements = document.getElementsByClassName("tab-heading");
@@ -328,13 +330,20 @@ function updateDisplayElement(element: HTMLElement) {
// See if anything extra must be run // See if anything extra must be run
switch (displayOption) { switch (displayOption) {
case "invidiousInstances": case "invidiousInstances": {
element.innerText = displayText.join(', '); element.innerText = displayText.join(', ');
if (displayText.length > 1) { const defaults = Config.defaults[displayOption];
let allEquals = displayText.length == defaults.length;
for (let i = 0; i < defaults.length && allEquals; i++) {
if (displayText[i] != defaults[i])
allEquals = false;
}
if (!allEquals) {
const resetButton = element.parentElement.querySelector(".invidious-instance-reset"); const resetButton = element.parentElement.querySelector(".invidious-instance-reset");
resetButton.classList.remove("hidden"); resetButton.classList.remove("hidden");
} }
break; break;
}
} }
} }

View File

@@ -124,7 +124,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
unwhitelistChannel(); unwhitelistChannel();
} }
}); });
PageElements.whitelistForceCheck.addEventListener("click", openOptions); PageElements.whitelistForceCheck.addEventListener("click", () => {openOptionsAt("behavior")});
PageElements.toggleSwitch.addEventListener("change", function () { PageElements.toggleSwitch.addEventListener("change", function () {
toggleSkipping(!this.checked); toggleSkipping(!this.checked);
}); });
@@ -510,6 +510,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
chrome.runtime.sendMessage({ "message": "openConfig" }); chrome.runtime.sendMessage({ "message": "openConfig" });
} }
function openOptionsAt(location) {
chrome.runtime.sendMessage({ "message": "openConfig", "hash": location });
}
function openHelp() { function openHelp() {
chrome.runtime.sendMessage({ "message": "openHelp" }); chrome.runtime.sendMessage({ "message": "openHelp" });
} }