chylex/Transparent-Twitch-Chat
1
0
Fork 0
mirror of https://github.com/chylex/Transparent-Twitch-Chat.git synced 2025-05-18 06:34:04 +02:00
Code

Tweak settings modal sizes and padding & add support for float:left toggles

Browse Source
This commit is contained in:
chylex 2020-04-06 14:50:06 +02:00
parent 35df47df21
commit 2ee5af520d
1 changed files with 35 additions and 31 deletions

66
src/main.js
View File

@ -450,10 +450,10 @@ function generateSettingsCSS(){
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 900px; width: 870px;
height: 292px; height: 294px;
margin-left: -450px; margin-left: -435px;
margin-top: -146px; margin-top: -147px;
z-index: 10000; z-index: 10000;
background-color: @#hex(111c); background-color: @#hex(111c);
} }
@ -480,10 +480,6 @@ function generateSettingsCSS(){
padding: 8px 4px; padding: 8px 4px;
} }
#chylex-ttc-settings-modal .ttc-flex-column {
flex: 0 0 calc(100% / 5);
}
#chylex-ttc-settings-modal p { #chylex-ttc-settings-modal p {
color: @#hex(fffd); color: @#hex(fffd);
font-size: 14px; font-size: 14px;
@ -505,13 +501,14 @@ function generateSettingsCSS(){
} }
#chylex-ttc-settings-modal .player-menu__item { #chylex-ttc-settings-modal .player-menu__item {
display: flex;
align-items: center; align-items: center;
margin: 2px 0 9px; margin: 2px 0 9px;
padding-left: 1px; padding-left: 1px;
} }
#chylex-ttc-settings-modal .player-menu__item.ttc-setting-small-margin { #chylex-ttc-settings-modal .player-menu__item.ttc-setting-small-margin {
margin-bottom: 3px; margin-bottom: 7px;
} }
#chylex-ttc-settings-modal .switch { #chylex-ttc-settings-modal .switch {
@ -543,13 +540,26 @@ function generateSettingsCSS(){
padding-right: 3px; padding-right: 3px;
} }
#chylex-ttc-settings-modal input[type="text"], #chylex-ttc-settings-modal select { #chylex-ttc-settings-modal input[type="text"] {
width: 100%; width: 100%;
padding: 1px 2px; padding: 1px 4px;
} }
#chylex-ttc-settings-modal input[type="range"] { #chylex-ttc-settings-modal input[type="range"] {
width: 110px; width: 100%;
}
#chylex-ttc-settings-modal select {
width: 100%;
padding: 1px 0;
}
#chylex-ttc-settings-modal output {
color: @#hex(fffc);
display: inline-block;
flex: 1 1 42px;
padding-left: 6px;
text-align: left;
} }
#chylex-ttc-settings-modal .tw-toggle__button { #chylex-ttc-settings-modal .tw-toggle__button {
@ -559,14 +569,6 @@ function generateSettingsCSS(){
#chylex-ttc-settings-modal .tw-toggle__button, #chylex-ttc-settings-modal .tw-toggle__button::after { #chylex-ttc-settings-modal .tw-toggle__button, #chylex-ttc-settings-modal .tw-toggle__button::after {
border-radius: 0; border-radius: 0;
} }
#chylex-ttc-settings-modal output {
color: @#hex(fffc);
width: 46px;
padding-left: 4px;
text-align: right;
vertical-align: 40%;
}
@#css}}@#rem}}`; @#css}}@#rem}}`;
document.head.appendChild(style); document.head.appendChild(style);
@ -705,13 +707,15 @@ function debounce(func, wait){
function createSettingsModal(){ function createSettingsModal(){
tryRemoveElement(document.getElementById("chylex-ttc-settings-modal")); tryRemoveElement(document.getElementById("chylex-ttc-settings-modal"));
const generateOptionBase = function(title, item, itemClasses){ const generateOptionBase = function(title, item, extra){
extra = extra || {};
return ` return `
<div class="player-menu__section" data-enabled="true"> <div class="player-menu__section" data-enabled="true"${extra.floatLeft ? ` style="float:left"` : ""}>
<div class="player-menu__header"> <div class="player-menu__header">
<span class="js-menu-header">${title}</span> <span class="js-menu-header">${title}</span>
</div> </div>
<div class="player-menu__item pl-flex pl-flex--nowrap flex-shrink-0${itemClasses ? " " + itemClasses : ""}"> <div class="player-menu__item ${extra.itemClasses ? " " + extra.itemClasses : ""}">
${item} ${item}
</div> </div>
</div>`; </div>`;
@ -731,7 +735,7 @@ function createSettingsModal(){
// Concrete option types // Concrete option types
const generateToggle = function(title, option){ const generateToggle = function(title, option, floatLeft){
prepareOptionEvent(option, function(ele){ prepareOptionEvent(option, function(ele){
ele.addEventListener("click", function(){ updateOption(option, ele.checked); }); ele.addEventListener("click", function(){ updateOption(option, ele.checked); });
}); });
@ -740,7 +744,7 @@ function createSettingsModal(){
<div class="tw-toggle"> <div class="tw-toggle">
<input class="tw-toggle__input" id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}> <input class="tw-toggle__input" id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}>
<label for="ttc-opt-${option}" class="tw-toggle__button"></label> <label for="ttc-opt-${option}" class="tw-toggle__button"></label>
</div>`); </div>`, floatLeft ? { floatLeft: true } : {});
}; };
const generateTxtbox = function(title, option, cfg){ const generateTxtbox = function(title, option, cfg){
@ -778,7 +782,7 @@ function createSettingsModal(){
return generateOptionBase(title, ` return generateOptionBase(title, `
<input id="ttc-opt-${option}" type="range" min="${cfg.min}" max="${cfg.max}" step="${cfg.step}" value="${settings[option]}"> <input id="ttc-opt-${option}" type="range" min="${cfg.min}" max="${cfg.max}" step="${cfg.step}" value="${settings[option]}">
<output id="ttc-optval-${option}" for="ttc-opt-${option}">${settings[option]}${cfg.text}</option> <output id="ttc-optval-${option}" for="ttc-opt-${option}">${settings[option]}${cfg.text}</option>
`, "ttc-setting-small-margin"); `, { itemClasses: "ttc-setting-small-margin" });
}; };
// Generate modal // Generate modal
@ -796,7 +800,7 @@ function createSettingsModal(){
</h2> </h2>
<div class="ttc-flex-container"> <div class="ttc-flex-container">
<div class="ttc-flex-column"> <div style="flex: 0 0 23%">
<p>General</p> <p>General</p>
${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })} ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })} ${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
@ -814,7 +818,7 @@ function createSettingsModal(){
${generateToggle("Gray Theme", "grayTheme")} ${generateToggle("Gray Theme", "grayTheme")}
</div> </div>
<div class="ttc-flex-column"> <div style="flex: 0 0 21%">
<p>Transparency</p> <p>Transparency</p>
${generateToggle("Transparent Chat", "transparentChat")} ${generateToggle("Transparent Chat", "transparentChat")}
${generateToggle("Smooth Text Shadow", "smoothTextShadow")} ${generateToggle("Smooth Text Shadow", "smoothTextShadow")}
@ -822,7 +826,7 @@ function createSettingsModal(){
${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })} ${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })}
</div> </div>
<div class="ttc-flex-column"> <div style="flex: 0 0 16%">
<p>Elements</p> <p>Elements</p>
${generateToggle("Hide Chat Header", "hideHeader")} ${generateToggle("Hide Chat Header", "hideHeader")}
${generateToggle("Hide Chat Input", "hideChatInput")} ${generateToggle("Hide Chat Input", "hideChatInput")}
@ -830,7 +834,7 @@ function createSettingsModal(){
${generateToggle("Hide Whispers", "hideConversations")} ${generateToggle("Hide Whispers", "hideConversations")}
</div> </div>
<div class="ttc-flex-column"> <div style="flex: 0 0 19%">
<p>Badges</p> <p>Badges</p>
${generateToggle("Hide Subscriber Badge", "hideBadgeSubscriber")} ${generateToggle("Hide Subscriber Badge", "hideBadgeSubscriber")}
${generateToggle("Hide Prime Badge", "hideBadgePrime")} ${generateToggle("Hide Prime Badge", "hideBadgePrime")}
@ -838,7 +842,7 @@ function createSettingsModal(){
${generateToggle("Hide VIP Badge", "hideBadgeVIP")} ${generateToggle("Hide VIP Badge", "hideBadgeVIP")}
</div> </div>
<div class="ttc-flex-column"> <div style="flex: 0 0 21%">
<p style="visibility: hidden">Badges</p> <p style="visibility: hidden">Badges</p>
${generateToggle("Hide Sub Gift Badge", "hideBadgeSubGift")} ${generateToggle("Hide Sub Gift Badge", "hideBadgeSubGift")}
${generateToggle("Hide Bit Cheer Badge", "hideBadgeBitCheer")} ${generateToggle("Hide Bit Cheer Badge", "hideBadgeBitCheer")}