show version + clickable labels

This commit is contained in:
Áron Hegymegi-Kiss
2021-12-13 12:14:51 +01:00
parent 4971824067
commit 9a9e564dbf
3 changed files with 88 additions and 82 deletions

View File

@@ -20,6 +20,7 @@
<div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
SponsorBlock
<div id="version"></div>
</div>
<div class="tab-heading selected" data-for="segment-options">
@@ -59,7 +60,7 @@
</div>
<div id="options">
<div id="options" class="hidden">
<div id="segment-options" class="option-group">
@@ -74,31 +75,30 @@
<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoSkipOnMusicVideos" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoSkipOnMusicVideos">
__MSG_autoSkipOnMusicVideos__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="muteSegments">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="muteSegments" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="muteSegments">
__MSG_muteSegments__
</div>
</label>
</div>
</div>
<div data-type="number-change" data-sync="minDuration">
<span class="optionLabel">__MSG_minDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_minDuration__</span>
<input type="number" step="0.1" min="0">
</label>
@@ -108,12 +108,12 @@
<div data-type="toggle" data-sync="forceChannelCheck">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="forceChannelCheck" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="forceChannelCheck">
__MSG_forceChannelCheck__
</div>
</label>
</div>
<div class="small-description">__MSG_whatForceChannelCheck__</div>
@@ -122,12 +122,12 @@
<div data-type="toggle" data-sync="refetchWhenNotFound">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="refetchWhenNotFound" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="refetchWhenNotFound">
__MSG_enableRefetchWhenNotFound__
</div>
</label>
</div>
<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
@@ -138,9 +138,8 @@
<div id="interface-options" class="option-group hidden">
<div data-type="number-change" data-sync="skipNoticeDuration">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<label class="number-container">
<span class="optionLabel">__MSG_skipNoticeDuration__</span>
<input type="number" step="1" min="1">
</label>
@@ -150,19 +149,19 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="dontShowNotice" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="dontShowNotice">
__MSG_showSkipNotice__
</div>
</label>
</div>
</div>
<div data-type="selector" data-sync="noticeVisibilityMode">
<span class="optionLabel">__MSG_noticeVisibilityLabel__</span>
<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__</label>
<select class="selector-element optionsSelector" >
<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
<option value="0">__MSG_noticeVisibilityMode0__</option>
<option value="1">__MSG_noticeVisibilityMode1__</option>
<option value="2">__MSG_noticeVisibilityMode2__</option>
@@ -174,12 +173,12 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideVideoPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideVideoPlayerControls">
__MSG_showButtons__
</div>
</label>
</div>
<div class="small-description">__MSG_hideButtonsDescription__</div>
@@ -188,72 +187,72 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideDeleteButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideDeleteButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideDeleteButtonPlayerControls">
__MSG_showDeleteButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideUploadButtonPlayerControls" data-dependent-on="hideVideoPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideUploadButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideUploadButtonPlayerControls">
__MSG_showUploadButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideSkipButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideSkipButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideSkipButtonPlayerControls">
__MSG_showSkipButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="hideInfoButtonPlayerControls" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="hideInfoButtonPlayerControls">
__MSG_showInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="autoHideInfoButton" data-dependent-on="hideInfoButtonPlayerControls">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="autoHideInfoButton" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="autoHideInfoButton">
__MSG_autoHideInfoButton__
</div>
</label>
</div>
</div>
<div data-type="toggle" data-sync="audioNotificationOnSkip">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="audioNotificationOnSkip" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="audioNotificationOnSkip">
__MSG_audioNotification__
</div>
</label>
</div>
<div class="small-description">__MSG_audioNotificationDescription__</div>
@@ -262,12 +261,12 @@
<div data-type="toggle" data-sync="showTimeWithSkips">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="showTimeWithSkips" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showTimeWithSkips">
__MSG_showTimeWithSkips__
</div>
</label>
</div>
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
@@ -276,12 +275,12 @@
<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="showDonationLink" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="showDonationLink">
__MSG_hideDonationLink__
</div>
</label>
</div>
</div>
@@ -346,12 +345,12 @@
<div data-type="toggle" data-sync="trackViewCount">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCount" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCount">
__MSG_enableViewTracking__
</div>
</label>
</div>
<div class="small-description">__MSG_whatViewTracking__</div>
@@ -360,12 +359,12 @@
<div data-type="toggle" data-sync="trackViewCountInPrivate" data-dependent-on="trackViewCount" data-private-only="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<input id="trackViewCountInPrivate" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="trackViewCountInPrivate">
__MSG_enableViewTrackingInPrivate__
</div>
</label>
</div>
</div>
@@ -412,12 +411,12 @@
<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<input id="supportInvidious" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="supportInvidious">
__MSG_supportOtherSites__
</div>
</label>
</div>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
@@ -463,23 +462,23 @@
<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<input id="testingServer" type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
<label class="switch-label" for="testingServer">
__MSG_enableTestingServer__
</div>
</label>
</div>
<div class="small-description">__MSG_whatEnableTestingServer__</div>
</div>
<div data-type="text-change" data-sync="serverAddress" data-dependent-on="testingServer" data-dependent-on-inverted="true">
<div class="text-label-container inline">
<label class="optionLabel inline">
<span class="optionLabel">__MSG_customServerAddress__:</span>
<input class="option-text-box" type="text" style="margin-right:10px">
</div>
</label>
<div class="option-button text-change-set inline low-profile">
__MSG_save__