gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-09-04 15:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): apply tooltip to full label text for settings

Browse Source
This commit is contained in:
Koala
2026-05-25 23:19:23 +02:00
parent 473eacda22
commit f1f41e5cac
2 changed files with 66 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/popup.html
+59 -8
View File
@@ -237,6 +237,45 @@
from { opacity: 1; } from { opacity: 1; }
to { opacity: 0; transform: translateY(-10px); } to { opacity: 0; transform: translateY(-10px); }
} }
/* Toggle Switch CSS */
.toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #334155;
transition: .3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: #94a3b8;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--accent);
}
input:checked + .slider:before {
transform: translateX(16px);
background-color: white;
}
</style> </style>
</head> </head>
<body> <body>
@@ -379,23 +418,35 @@
</div> </div>
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;"> <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<label style="margin-bottom: 0;" title="Hides non-video sites like search engines or social media.">Hide Clutter Tabs ℹ️</label> <label style="margin-bottom: 0; cursor: help;" title="Hides non-video sites like search engines or social media.">Hide Clutter Tabs ℹ️</label>
<input type="checkbox" id="filterNoise" style="width: auto;" checked> <label class="toggle-switch">
<input type="checkbox" id="filterNoise" checked>
<span class="slider"></span>
</label>
</div> </div>
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;"> <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<label style="margin-bottom: 0;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode ℹ️</label> <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode ℹ️</label>
<input type="checkbox" id="autoSyncNextEpisode" style="width: auto;"> <label class="toggle-switch">
<input type="checkbox" id="autoSyncNextEpisode">
<span class="slider"></span>
</label>
</div> </div>
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;"> <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<label style="margin-bottom: 0;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label> <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label>
<input type="checkbox" id="autoCopyInvite" style="width: auto;" checked> <label class="toggle-switch">
<input type="checkbox" id="autoCopyInvite" checked>
<span class="slider"></span>
</label>
</div> </div>
<div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;"> <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<label style="margin-bottom: 0;">Browser Notifications</label> <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications ℹ️</label>
<input type="checkbox" id="browserNotifications" style="width: auto;"> <label class="toggle-switch">
<input type="checkbox" id="browserNotifications">
<span class="slider"></span>
</label>
</div> </div>
extension/popup.js
+7 -3
View File
@@ -155,9 +155,11 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
const inRoom = !!roomId; const inRoom = !!roomId;
toggleUIState(inRoom); toggleUIState(inRoom);
if (inRoom) { if (inRoom) {
const serverFlag = useCustomServer ? '1' : '0'; let invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}`;
const encodedUrl = encodeURIComponent(serverUrl || ''); if (useCustomServer) {
const invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}:${serverFlag}:${encodedUrl}`; const encodedUrl = encodeURIComponent(serverUrl || '');
invite += `:1:${encodedUrl}`;
}
elements.inviteLink.value = invite; elements.inviteLink.value = invite;
if (window.justCreatedRoom) { if (window.justCreatedRoom) {
@@ -1417,6 +1419,7 @@ let onboardingStep = 0;
function showOnboarding() { function showOnboarding() {
const overlay = document.getElementById('onboarding-overlay'); const overlay = document.getElementById('onboarding-overlay');
if (!overlay) return; if (!overlay) return;
document.body.style.minHeight = '400px';
overlay.style.display = 'flex'; overlay.style.display = 'flex';
renderOnboardingStep(); renderOnboardingStep();
} }
@@ -1464,6 +1467,7 @@ function renderOnboardingStep() {
function completeOnboarding() { function completeOnboarding() {
const overlay = document.getElementById('onboarding-overlay'); const overlay = document.getElementById('onboarding-overlay');
if (overlay) overlay.style.display = 'none'; if (overlay) overlay.style.display = 'none';
document.body.style.minHeight = '';
chrome.storage.sync.set({ onboardingComplete: true }); chrome.storage.sync.set({ onboardingComplete: true });
const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block'; const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';