Skip to content

Commit f5d8595

Browse files
VulpeloVulpelo
authored
Merge pull request #46 from Vulpelo/retouch-plugin-menu-is-too-long
Modified plugin's menu because it was getting too long
2 parents 95046ef + b8ce338 commit f5d8595

File tree

5 files changed

+117
-104
lines changed

5 files changed

+117
-104
lines changed

‎manifest-chrome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 3,
3-
"version": "1.8.1",
3+
"version": "1.8.2",
44

55
"name": "__MSG_extensionName__",
66
"description": "__MSG_extensionDescription__",

‎manifest-firefox.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 2,
3-
"version": "1.8.1",
3+
"version": "1.8.2",
44

55
"name": "__MSG_extensionName__",
66
"description": "__MSG_extensionDescription__",

‎src/popup.css‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ body {
22
max-width: 14rem;
33
min-width: 12rem;
44
height: 100%;
5-
overflow: hidden;
65
}
76

87
.bottom {
@@ -21,46 +20,46 @@ body {
2120

2221
#hideYTShortsVideosInput:checked + span + .rearrangeVideosContent {
2322
display: inline;
24-
height: 5%;
2523
width: 100%;
2624
opacity: 1;
2725
pointer-events: auto;
2826
cursor: auto;
2927
visibility: visible;
3028
}
3129

32-
.tooltip {
33-
position: relative;
34-
display: inline;
35-
border-bottom: 1px dotted black;
30+
.more-dropdown {
31+
max-height: 210px;
32+
overflow-y: scroll;
33+
overflow-x: hidden;
3634
}
3735

3836
.tooltip .tooltiptext {
3937
width: 120px;
40-
bottom: 100%;
4138
left: 0;
4239
visibility: hidden;
4340
background-color: black;
4441
color: #fff;
4542
text-align: center;
4643
border-radius: 6px;
47-
padding: 5px 0;
44+
padding: 5px 5px;
45+
}
4846

49-
/* Position the tooltip */
50-
position: absolute;
51-
z-index: 0;
47+
.tooltip {
48+
border-bottom: 1px dotted black;
5249
}
5350

5451
.tooltiptext {
5552
display: block;
53+
position: absolute;
54+
z-index: 9999;
55+
bottom: 100%;
5656
}
5757

58-
.tooltip:hover .tooltiptext {
59-
visibility: visible;
58+
.tooltip:hover > .tooltiptext {
6059
transition-delay: 700ms;
60+
visibility: visible;
6161
}
6262

63-
6463
details {
6564
width: 100%;
6665
background: #ffffff;
@@ -89,4 +88,3 @@ summary:hover, .details {
8988
top: 0.75em;
9089
background: #ffffff;
9190
}
92-

‎src/popup.html‎

Lines changed: 89 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h2>Hide Youtube-Shorts</h2>
1414
</center>
1515

1616
<!-- Options -->
17-
<fieldset id="settings" style="transform: scale(1); pointer-events: auto; opacity: 1;">
17+
<fieldset id="settings" style="pointer-events: auto; opacity: 1;">
1818
<legend id="settings_text">
1919
Options
2020
</legend>
@@ -45,101 +45,103 @@ <h2>Hide Youtube-Shorts</h2>
4545
<summary>
4646
<span id="more_dropdown_text" class="summary-title">More</span>
4747
</summary>
48-
<div class="summary-content">
49-
<fieldset id="settings_more" style="transform: scale(1); pointer-events: auto; opacity: 1;">
50-
<legend id="settings_hiding_on_text">
51-
Hiding on
52-
</legend>
53-
<label class="setting">
54-
<input type="checkbox" id="hideYTShortsVideosOnHomePageInput">
55-
<span id="hide_videos_home_text" class="switchLabel">
56-
Home page
57-
</span>
58-
</label>
59-
<br>
60-
<label class="setting">
61-
<input type="checkbox" id="hideYTShortsVideosOnSubscriptionPageInput">
62-
<span id="hide_videos_subscription_text" class="switchLabel">
63-
Subscription page
64-
</span>
65-
</label>
66-
<br>
67-
<label class="setting">
68-
<input type="checkbox" id="hideYTShortsVideosOnSearchPageInput">
69-
<span id="hide_videos_search_text" class="switchLabel">
70-
Search page
71-
</span>
72-
</label>
73-
<br>
74-
<label class="setting">
75-
<input type="checkbox" id="hideYTShortsVideosOnChannelPageInput">
76-
<span id="hide_videos_channel_text" class="switchLabel">
77-
Channel page
78-
</span>
79-
</label>
80-
</fieldset>
81-
</div>
48+
<div class="more-dropdown">
49+
<div class="summary-content">
50+
<fieldset id="settings_more" style="pointer-events: auto; opacity: 1;">
51+
<legend id="settings_hiding_on_text">
52+
Hiding on
53+
</legend>
54+
<label class="setting">
55+
<input type="checkbox" id="hideYTShortsVideosOnHomePageInput">
56+
<span id="hide_videos_home_text" class="switchLabel">
57+
Home page
58+
</span>
59+
</label>
60+
<br>
61+
<label class="setting">
62+
<input type="checkbox" id="hideYTShortsVideosOnSubscriptionPageInput">
63+
<span id="hide_videos_subscription_text" class="switchLabel">
64+
Subscription page
65+
</span>
66+
</label>
67+
<br>
68+
<label class="setting">
69+
<input type="checkbox" id="hideYTShortsVideosOnSearchPageInput">
70+
<span id="hide_videos_search_text" class="switchLabel">
71+
Search page
72+
</span>
73+
</label>
74+
<br>
75+
<label class="setting">
76+
<input type="checkbox" id="hideYTShortsVideosOnChannelPageInput">
77+
<span id="hide_videos_channel_text" class="switchLabel">
78+
Channel page
79+
</span>
80+
</label>
81+
</fieldset>
82+
</div>
8283

83-
<div class="summary-content">
84-
<fieldset id="settings_more" style="transform: scale(1); pointer-events: auto; opacity: 1;">
85-
<legend id="settings_performance_text">
86-
Performance
87-
</legend>
84+
<div class="summary-content">
85+
<fieldset id="settings_more" style="pointer-events: auto; opacity: 1;">
86+
<legend id="settings_performance_text">
87+
Performance
88+
</legend>
8889

89-
<label class="setting">
90-
<label class="tooltip">
91-
<input type="checkbox" id="hidingShortsTimeoutTimeMsInputCheckbox">
92-
<span id="hide_shorts_timeout_tooltip_text" class="tooltiptext">Dont allow checking for shorts more often than specified time. Bigger timeout then better performance but shorts might not get hidden immediatelly</span>
93-
<span id="hide_shorts_timeout_text" class="switchLabel">
94-
Timeout for rechecking videos (ms)
95-
</span>
96-
<input type="number" id="hidingShortsTimeoutTimeMsInput" min="0" max="10000" style="width: 50px">
90+
<label class="setting">
91+
<label class="tooltip">
92+
<input type="checkbox" id="hidingShortsTimeoutTimeMsInputCheckbox">
93+
<span id="hide_shorts_timeout_tooltip_text" class="tooltiptext">Dont allow checking for shorts more often than specified time. Bigger timeout then better performance but shorts might not get hidden immediatelly</span>
94+
<span id="hide_shorts_timeout_text" class="switchLabel">
95+
Timeout for rechecking videos (ms)
96+
</span>
97+
<input type="number" id="hidingShortsTimeoutTimeMsInput" min="0" max="10000" style="width: 50px">
98+
</label>
9799
</label>
98-
</label>
99-
</fieldset>
100-
</div>
100+
</fieldset>
101+
</div>
101102

102-
<div class="summary-content">
103-
<fieldset id="settings_more" style="transform: scale(1); pointer-events: auto; opacity: 1;">
104-
<legend id="settings_experimental_text">
105-
Experimental
106-
</legend>
103+
<div class="summary-content">
104+
<fieldset id="settings_more" style="pointer-events: auto; opacity: 1;">
105+
<legend id="settings_experimental_text">
106+
Experimental
107+
</legend>
107108

108-
<label class="setting">
109-
<label class="tooltip">
110-
<input type="checkbox" id="subscriptionShelfCloseButtonInputCheckbox">
111-
<span id="subscription_shelf_close_button_tooltip_text" class="tooltiptext">Adds a close button to the shelf with shorts on subscription page</span>
112-
<span id="subscription_shelf_close_button_text" class="switchLabel">
113-
Shelf close button
109+
<label class="setting">
110+
<label class="tooltip">
111+
<input type="checkbox" id="subscriptionShelfCloseButtonInputCheckbox">
112+
<span id="subscription_shelf_close_button_tooltip_text" class="tooltiptext">Adds a close button to the shelf with shorts on subscription page</span>
113+
<span id="subscription_shelf_close_button_text" class="switchLabel">
114+
Shelf close button
115+
</span>
116+
</label>
117+
</label>
118+
<br>
119+
<label class="setting">
120+
<label class="tooltip">
121+
<input type="checkbox" id="hidingShortVideosTimeSecondsInputCheckbox">
122+
<span id="hide_short_videos_tooltip_text" class="tooltiptext">Hides videos that are shorter than specified time in seconds</span>
123+
<span id="hide_short_videos_text" class="switchLabel">
124+
Hide videos shorter than (s)
125+
</span>
126+
<input type="number" id="hidingShortVideosTimeSecondsInput" min="0" max="1000" style="width: 50px">
127+
</label>
128+
</label>
129+
<br>
130+
<label class="setting">
131+
<input type="checkbox" id="hidingLiveVideosInputCheckbox">
132+
<span id="hide_live_videos_text" class="switchLabel">
133+
Hide Live videos
114134
</span>
115135
</label>
116-
</label>
117-
<br>
118-
<label class="setting">
119-
<label class="tooltip">
120-
<input type="checkbox" id="hidingShortVideosTimeSecondsInputCheckbox">
121-
<span id="hide_short_videos_tooltip_text" class="tooltiptext">Hides videos that are shorter than specified time in seconds</span>
122-
<span id="hide_short_videos_text" class="switchLabel">
123-
Hide videos shorter than (s)
136+
<br>
137+
<label class="setting">
138+
<input type="checkbox" id="hidingUpcomingVideosInputCheckbox">
139+
<span id="hide_upcoming_videos_text" class="switchLabel">
140+
Hide Upcoming videos
124141
</span>
125-
<input type="number" id="hidingShortVideosTimeSecondsInput" min="0" max="1000" style="width: 50px">
126142
</label>
127-
</label>
128-
<br>
129-
<label class="setting">
130-
<input type="checkbox" id="hidingLiveVideosInputCheckbox">
131-
<span id="hide_live_videos_text" class="switchLabel">
132-
Hide Live videos
133-
</span>
134-
</label>
135-
<br>
136-
<label class="setting">
137-
<input type="checkbox" id="hidingUpcomingVideosInputCheckbox">
138-
<span id="hide_upcoming_videos_text" class="switchLabel">
139-
Hide Upcoming videos
140-
</span>
141-
</label>
142-
</fieldset>
143+
</fieldset>
144+
</div>
143145
</div>
144146
</details>
145147

‎src/popup.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,16 @@ window.onload = function() {
150150
let manifestData = chrome.runtime.getManifest();
151151
document.getElementById("ext-version").textContent = "v" + manifestData.version;
152152
};
153+
154+
const tooltips = document.querySelectorAll(".tooltip");
155+
const details = document.querySelector("details");
156+
157+
tooltips.forEach(tooltip => {
158+
tooltip.onmouseover = function (e) {
159+
const detailsY = details.getBoundingClientRect().bottom;
160+
const tooltipRect = tooltip.getBoundingClientRect()
161+
162+
const tooltipText = tooltip.querySelector(".tooltiptext");
163+
tooltipText.style.bottom = (detailsY - tooltipRect.bottom + tooltipRect.height) + 'px';
164+
};
165+
});

0 commit comments

Comments
 (0)