Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-08 04:27:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

design fixes

Browse Source
This commit is contained in:
Áron Hegymegi-Kiss
2021-12-15 22:22:06 +01:00
parent 9a9e564dbf
commit 46e515b130
5 changed files with 137 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/_locales/en/messages.json
View File

@@ -848,34 +848,34 @@
},
"optionsTabCategories" : {
"message": "Categories",
"description": "Appears in Options as a tab header for setting up 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)."
},
"optionsTabBehavior" : {
"message": "Behavior",
"description": "Appears in Options as a tab header for options related to the general behavior of the extension."
"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" : {
"message": "Interface",
"description": "Appears in Options as a tab header for options related to GUI and sounds"
"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" : {
"message": "Key Bindings",
"description": "Appears in Options as a tab header for keybinds"
"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" : {
"message": "Privacy",
"description": "Appears in Options as a tab header for options related to privacy (data stored/sent to server)"
"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" : {
"message": "Backup/Restore",
"description": "Appears in Options as a tab header for options related to saving/restoring your settings"
"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" : {
"message": "Advanced",
"description": "Appears in Options as a tab header for advanced/niche options"
"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" : {
"message": "Notice appearance:",
"message": "Skip notice appearance",
"description": "Option label"
}
}

21
public/help/styles.css
View File

@@ -60,6 +60,8 @@ body {
text-decoration: none;
border-radius: 15px;
transition: font-size 1s;
}
@@ -200,3 +202,22 @@ svg {
text-align: center;
}
}
/* Light mode, if requested */
@media only screen and (prefers-color-scheme: light) {
html {
color-scheme: light;
}
body {
background-color: #f9f9f9;
}
p,li,a {
color: #262626;
}
h1,h2,h3,h4,h5,h6 {
color: #707070;
}
#title {
color: white;
}
}

31
public/options/options.css
View File

@@ -89,6 +89,7 @@ h1,h2,h3,h4,h5,h6 {
html, body {
font-family: sans-serif;
margin: 0;
font-size: 14px;
}
* {
@@ -109,6 +110,7 @@ html, body {
max-width: 600px;
border-radius: 15px;
margin: 15px;
z-index: 10;
}
.tab-heading {
@@ -129,6 +131,10 @@ html, body {
color: white;
}
.tab-heading:active {
background-color: #950000;
}
.option-group > div {
min-height: 50px;
padding: 20px 0;
@@ -168,6 +174,10 @@ input[type='number'] {
display: none !important;
}
.spacing {
margin-top: 15px;
}
.keybind-status {
display: inline;
}
@@ -181,6 +191,10 @@ input[type='number'] {
padding: 10px 0 20px 20px;
}
.indent {
padding-left: 20px;
}
.categoryTableElement td {
padding-top: 10px;
}
@@ -511,9 +525,11 @@ svg {
}
.tab-heading {
width: unset;
min-width: 150px;
height: 40px;
line-height: 40px;
min-width: unset;
height: 35px;
line-height: 35px;
font-size: 16px;
padding: 0 10px;
margin: 0;
flex-grow: 1;
}
@@ -531,6 +547,15 @@ svg {
#version {
font-size: 10px;
}
.sticky #navigation {
position: fixed;
left: 0;
right: 0;
margin: 0 15px;
}
.sticky #title, .sticky #createdBy {
display: none;
}
}
@media only screen and (max-width: 800px) {

42
public/options/options.html
View File

@@ -23,7 +23,7 @@
<div id="version"></div>
</div>
<div class="tab-heading selected" data-for="segment-options">
<div class="tab-heading" data-for="segment-options">
__MSG_optionsTabCategories__
</div>
@@ -62,7 +62,7 @@
<div id="options" class="hidden">
<div id="segment-options" class="option-group">
<div id="segment-options" class="option-group hidden">
<div id="category-type" data-type="react-CategoryChooserComponent">
@@ -159,7 +159,7 @@
</div>
<div data-type="selector" data-sync="noticeVisibilityMode">
<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__:</label>
<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
<option value="0">__MSG_noticeVisibilityMode0__</option>
@@ -379,10 +379,10 @@
<div class="small-description">__MSG_whatChangeUserID__</div>
<div class="option-hidden-section hidden">
<div class="option-hidden-section hidden spacing indent">
<input class="option-text-box" type="text">
<div class="option-button text-change-set">
<div class="option-button text-change-set inline low-profile">
__MSG_setUserID__
</div>
</div>
@@ -395,8 +395,8 @@
<div class="small-description">__MSG_whatExportOptions__</div>
<div class="option-hidden-section hidden">
<input class="option-text-box" type="text">
<div class="option-hidden-section hidden spacing indent">
<textarea class="option-text-box" rows="10" style="width:80%"></textarea>
<div class="option-button text-change-set">
__MSG_setOptions__
@@ -420,8 +420,7 @@
</div>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
<br/>
<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
</div>
<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true">
@@ -431,24 +430,25 @@
<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
<div class="option-hidden-section hidden">
<div class="indent option-hidden-section hidden spacing">
<input class="option-text-box" type="text">
<div>
<div class="option-button text-change-set inline">
<div class="inline">
<div class="option-button text-change-set inline low-profile">
__MSG_add__
</div>
<div class="option-button text-change-reset inline low-profile">
__MSG_cancel__
</div>
</div>
</div>
<div class="option-button invidious-instance-reset inline">
<div style="margin-top:15px">
<span>__MSG_currentInstances__</span>
<span data-type="display" data-sync="invidiousInstances"></span>
<div class="option-button invidious-instance-reset spacing hidden">
__MSG_resetInvidiousInstance__
</div>
</div>
<div>
<span class="small-description">__MSG_currentInstances__</span>
<span class="small-description" data-type="display" data-sync="invidiousInstances"></span>
</div>
</div>
</div>
<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
@@ -480,6 +480,7 @@
<input class="option-text-box" type="text" style="margin-right:10px">
</label>
<div class="inline">
<div class="option-button text-change-set inline low-profile">
__MSG_save__
</div>
@@ -487,6 +488,7 @@
<div class="option-button text-change-reset inline low-profile">
__MSG_reset__
</div>
</div>
<div class="small-description">__MSG_customServerAddressDescription__</div>
</div>

55
src/options.ts
View File

@@ -236,23 +236,59 @@ async function init() {
}
// Tab interaction
if (location.hash != "") {
const substr = location.hash.substring(1);
let menuItem = document.querySelector(`[data-for='${substr}']`);
if (menuItem == null)
menuItem = document.querySelector(`[data-for='segment-options']`);
menuItem.classList.add("selected");
} else {
document.querySelector(`[data-for='segment-options']`).classList.add("selected");
}
const tabElements = document.getElementsByClassName("tab-heading");
for (let i = 0; i < tabElements.length; i++) {
const tabFor = tabElements[i].getAttribute("data-for");
if (tabElements[i].classList.contains("selected"))
document.getElementById(tabFor).classList.remove("hidden");
tabElements[i].addEventListener("click", () => {
location.hash = tabFor;
createStickyHeader();
document.querySelectorAll(".tab-heading").forEach(element => { element.classList.remove("selected"); });
optionsContainer.querySelectorAll(".option-group").forEach(element => { element.classList.add("hidden"); });
tabElements[i].classList.add("selected");
document.getElementById(tabElements[i].getAttribute("data-for")).classList.remove("hidden");
document.getElementById(tabFor).classList.remove("hidden");
});
}
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
window.onscroll = () => createStickyHeader();
optionsContainer.classList.remove("hidden");
optionsContainer.classList.add("animated");
}
function createStickyHeader() {
const container = document.getElementById("options-container");
const options = document.getElementById("options");
if (window.pageYOffset > 115) {
if (!container.classList.contains("sticky")) {
options.style.marginTop = options.offsetTop.toString()+"px";
container.classList.add("sticky");
}
} else {
options.style.marginTop = "unset";
container.classList.remove("sticky");
}
}
/**
* Handle special cases where an option shouldn't show
*
@@ -294,6 +330,10 @@ function updateDisplayElement(element: HTMLElement) {
switch (displayOption) {
case "invidiousInstances":
element.innerText = displayText.join(', ');
if (displayText.length > 1) {
const resetButton = element.parentElement.querySelector(".invidious-instance-reset");
resetButton.classList.remove("hidden");
}
break;
}
}
@@ -309,6 +349,8 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
const button = element.querySelector(".trigger-button");
const setButton = element.querySelector(".text-change-set");
const cancelButton = element.querySelector(".text-change-reset");
const resetButton = element.querySelector(".invidious-instance-reset");
setButton.addEventListener("click", async function() {
if (textBox.value == "" || textBox.value.includes("/") || textBox.value.includes("http")) {
alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
@@ -326,19 +368,26 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
invidiousOnClick(checkbox, "supportInvidious");
textBox.value = "";
resetButton.classList.remove("hidden");
// Hide this section again
textBox.value = "";
element.querySelector(".option-hidden-section").classList.add("hidden");
button.classList.remove("disabled");
}
});
const resetButton = element.querySelector(".invidious-instance-reset");
cancelButton.addEventListener("click", async function() {
textBox.value = "";
element.querySelector(".option-hidden-section").classList.add("hidden");
button.classList.remove("disabled");
});
resetButton.addEventListener("click", function() {
if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
// Set to a clone of the default
Config.config[option] = Config.defaults[option].slice(0);
resetButton.classList.add("hidden");
}
});
}