Add more launcher online effects

This commit is contained in:
rajchales-monito
2026-07-30 17:20:54 +02:00
parent 84d8a21d38
commit 332e6d20f4
5 changed files with 50 additions and 3 deletions
+17
View File
@@ -283,6 +283,9 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.launcher-preview.notify-wiggle .launcher-preview-icon { .launcher-preview.notify-wiggle .launcher-preview-icon {
animation: launcherPreviewWiggle .62s ease-in-out infinite; animation: launcherPreviewWiggle .62s ease-in-out infinite;
} }
.launcher-preview.effect-sway .launcher-preview-icon {
animation: launcherPreviewSway 4.8s ease-in-out infinite;
}
.launcher-preview-status { .launcher-preview-status {
position: absolute; position: absolute;
top: -3px; top: -3px;
@@ -293,6 +296,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-radius: 50%; border-radius: 50%;
background: #c9d4ce; background: #c9d4ce;
box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); box-shadow: 0 0 0 4px rgb(201 212 206 / 24%);
display: none;
}
.launcher-preview.show-status .launcher-preview-status {
display: block;
} }
.launcher-preview.online .launcher-preview-status { .launcher-preview.online .launcher-preview-status {
background: #2f9e44; background: #2f9e44;
@@ -338,6 +345,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
opacity: 1; opacity: 1;
transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0);
} }
.launcher-preview.label-always .launcher-preview-label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.launcher-preview-icon, .launcher-preview-icon,
.launcher-preview-icon::before, .launcher-preview-icon::before,
.launcher-preview-icon::after { .launcher-preview-icon::after {
@@ -470,6 +481,12 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
48% { transform: translateY(2px) rotate(3deg); } 48% { transform: translateY(2px) rotate(3deg); }
72% { transform: translateY(-1px) rotate(-2deg); } 72% { transform: translateY(-1px) rotate(-2deg); }
} }
@keyframes launcherPreviewSway {
0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
78% { transform: translateX(-2px) rotate(-4deg); }
84% { transform: translateX(2px) rotate(4deg); }
90% { transform: translateX(-1px) rotate(-2deg); }
}
.widget-language-settings { .widget-language-settings {
grid-template-columns: 112px minmax(230px, 1fr); grid-template-columns: 112px minmax(230px, 1fr);
} }
+3
View File
@@ -173,6 +173,9 @@
<label><input name="launcherBreathe" type="checkbox"> jemne dychani</label> <label><input name="launcherBreathe" type="checkbox"> jemne dychani</label>
<label><input name="launcherRing" type="checkbox"> svetelny prstenec</label> <label><input name="launcherRing" type="checkbox"> svetelny prstenec</label>
<label><input name="launcherHoverLabel" type="checkbox"> napis pri najeti</label> <label><input name="launcherHoverLabel" type="checkbox"> napis pri najeti</label>
<label><input name="launcherStatusDot" type="checkbox"> stavova tecka</label>
<label><input name="launcherPersistentLabel" type="checkbox"> stitek stale</label>
<label><input name="launcherSway" type="checkbox"> jemne zhoupnuti</label>
<div class="launcher-preview-stage"> <div class="launcher-preview-stage">
<button id="launcherPreview" class="launcher-preview" type="button" aria-label="Nahled online tlacitka"> <button id="launcherPreview" class="launcher-preview" type="button" aria-label="Nahled online tlacitka">
<span class="launcher-preview-status" aria-hidden="true"></span> <span class="launcher-preview-status" aria-hidden="true"></span>
+12 -3
View File
@@ -143,12 +143,12 @@ $("#settingsForm").defaultLanguage.addEventListener("change", () => {
renderLauncherPreview(); renderLauncherPreview();
}); });
$("#settingsForm").addEventListener("input", (event) => { $("#settingsForm").addEventListener("input", (event) => {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='copyOnlineLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle'], [name='copyNewReplyLabel']")) { if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='launcherStatusDot'], [name='launcherPersistentLabel'], [name='launcherSway'], [name='copyOnlineLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle'], [name='copyNewReplyLabel']")) {
renderLauncherPreview(); renderLauncherPreview();
} }
}); });
$("#settingsForm").addEventListener("change", (event) => { $("#settingsForm").addEventListener("change", (event) => {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle']")) { if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='launcherStatusDot'], [name='launcherPersistentLabel'], [name='launcherSway'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle']")) {
renderLauncherPreview(); renderLauncherPreview();
} }
}); });
@@ -221,7 +221,10 @@ $("#settingsForm").addEventListener("submit", async (event) => {
shape: form.get("launcherShape") || "bubble", shape: form.get("launcherShape") || "bubble",
breathe: form.get("launcherBreathe") === "on", breathe: form.get("launcherBreathe") === "on",
ring: form.get("launcherRing") === "on", ring: form.get("launcherRing") === "on",
hoverLabel: form.get("launcherHoverLabel") === "on" hoverLabel: form.get("launcherHoverLabel") === "on",
statusDot: form.get("launcherStatusDot") === "on",
persistentLabel: form.get("launcherPersistentLabel") === "on",
sway: form.get("launcherSway") === "on"
}; };
settings.notifications = settings.notifications || {}; settings.notifications = settings.notifications || {};
settings.notifications.pulseOnAdminReply = form.get("messagePulse") === "on"; settings.notifications.pulseOnAdminReply = form.get("messagePulse") === "on";
@@ -536,6 +539,9 @@ function renderSite() {
form.launcherBreathe.checked = s.launcherEffects?.breathe !== false; form.launcherBreathe.checked = s.launcherEffects?.breathe !== false;
form.launcherRing.checked = s.launcherEffects?.ring !== false; form.launcherRing.checked = s.launcherEffects?.ring !== false;
form.launcherHoverLabel.checked = s.launcherEffects?.hoverLabel !== false; form.launcherHoverLabel.checked = s.launcherEffects?.hoverLabel !== false;
form.launcherStatusDot.checked = s.launcherEffects?.statusDot !== false;
form.launcherPersistentLabel.checked = Boolean(s.launcherEffects?.persistentLabel);
form.launcherSway.checked = Boolean(s.launcherEffects?.sway);
form.messagePulse.checked = s.notifications?.pulseOnAdminReply !== false; form.messagePulse.checked = s.notifications?.pulseOnAdminReply !== false;
form.messageBadge.checked = s.notifications?.badgeOnAdminReply !== false; form.messageBadge.checked = s.notifications?.badgeOnAdminReply !== false;
form.messageLabel.checked = s.notifications?.labelOnAdminReply !== false; form.messageLabel.checked = s.notifications?.labelOnAdminReply !== false;
@@ -659,6 +665,9 @@ function renderLauncherPreview() {
$("#onlineToggle").checked ? "online" : "", $("#onlineToggle").checked ? "online" : "",
form.launcherBreathe.checked ? "effect-breathe" : "", form.launcherBreathe.checked ? "effect-breathe" : "",
form.launcherRing.checked ? "effect-ring" : "", form.launcherRing.checked ? "effect-ring" : "",
form.launcherStatusDot.checked ? "show-status" : "",
form.launcherPersistentLabel.checked ? "label-always" : "",
form.launcherSway.checked ? "effect-sway" : "",
form.launcherHoverLabel.checked ? "show-label" : "" form.launcherHoverLabel.checked ? "show-label" : ""
].filter(Boolean).join(" "); ].filter(Boolean).join(" ");
messagePreview.className = [ messagePreview.className = [
+15
View File
@@ -33,6 +33,7 @@
<style>${styles(settings)}</style> <style>${styles(settings)}</style>
<button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${escapeHtml(copy.title)}"> <button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${escapeHtml(copy.title)}">
<span class="mf-reply-pulse" aria-hidden="true"></span> <span class="mf-reply-pulse" aria-hidden="true"></span>
<span class="mf-status-dot" aria-hidden="true"></span>
<span class="mf-launcher-icon"></span> <span class="mf-launcher-icon"></span>
<span class="mf-launcher-label">${escapeHtml(site.isOnline ? copy.onlineLabel : copy.offlineLabel)}</span> <span class="mf-launcher-label">${escapeHtml(site.isOnline ? copy.onlineLabel : copy.offlineLabel)}</span>
<span class="mf-message-badge" hidden>0</span> <span class="mf-message-badge" hidden>0</span>
@@ -546,6 +547,9 @@
isOnline ? "mf-online" : "", isOnline ? "mf-online" : "",
isOnline && effects.breathe ? "mf-effect-breathe" : "", isOnline && effects.breathe ? "mf-effect-breathe" : "",
isOnline && effects.ring ? "mf-effect-ring" : "", isOnline && effects.ring ? "mf-effect-ring" : "",
effects.statusDot ? "mf-effect-status-dot" : "",
effects.persistentLabel ? "mf-effect-persistent-label" : "",
isOnline && effects.sway ? "mf-effect-sway" : "",
effects.hoverLabel ? "mf-effect-hover-label" : "", effects.hoverLabel ? "mf-effect-hover-label" : "",
].filter(Boolean).join(" "); ].filter(Boolean).join(" ");
} }
@@ -638,13 +642,18 @@
} }
.mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; } .mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
.mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); } .mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-effect-persistent-label .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; } .mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
.mf-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); } .mf-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-status-dot { position: absolute; top: -3px; left: -3px; width: 14px; height: 14px; display: none; border: 2px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); }
.mf-effect-status-dot .mf-status-dot { display: block; }
.mf-online .mf-status-dot { background: #2f9e44; box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); }
.mf-message-badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 2px solid white; background: #ff3b30; color: white; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgb(0 0 0 / 18%); } .mf-message-badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 2px solid white; background: #ff3b30; color: white; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgb(0 0 0 / 18%); }
.mf-message-badge[hidden] { display: none !important; } .mf-message-badge[hidden] { display: none !important; }
.mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; } .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
.mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; } .mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; }
.mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; } .mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; }
.mf-online.mf-effect-sway .mf-launcher-icon { animation: mfSway 4.8s ease-in-out infinite; }
.mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; } .mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; }
.mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; } .mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; }
.mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; } .mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; }
@@ -709,6 +718,12 @@
48% { transform: translateY(2px) rotate(3deg); } 48% { transform: translateY(2px) rotate(3deg); }
72% { transform: translateY(-1px) rotate(-2deg); } 72% { transform: translateY(-1px) rotate(-2deg); }
} }
@keyframes mfSway {
0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
78% { transform: translateX(-2px) rotate(-4deg); }
84% { transform: translateX(2px) rotate(4deg); }
90% { transform: translateX(-1px) rotate(-2deg); }
}
@media (max-width: 640px) { @media (max-width: 640px) {
.mf-launcher { .mf-launcher {
${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px)); ${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px));
+3
View File
@@ -341,6 +341,9 @@ function defaultSettings() {
breathe: true, breathe: true,
ring: true, ring: true,
hoverLabel: true, hoverLabel: true,
statusDot: true,
persistentLabel: false,
sway: false,
avatar: false avatar: false
}, },
notifications: { notifications: {