mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-08-28 17:21:05 +00:00
Merge branch 'main' into various-bugfixes
This commit is contained in:
StroepWafel
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
let {
|
||||
value = $bindable<[number, number]>([0, 100]),
|
||||
min = 0,
|
||||
@@ -13,9 +15,15 @@
|
||||
|
||||
let dragging: "min" | "max" | null = $state(null);
|
||||
|
||||
const span = $derived(max - min || 1);
|
||||
const minPercent = $derived(((value[0] - min) / span) * 100);
|
||||
const maxPercent = $derived(((value[1] - min) / span) * 100);
|
||||
let visual: [number, number] = $state([...value]);
|
||||
let animationFrame: number | null = null;
|
||||
onDestroy(() => {
|
||||
if (animationFrame !== null) cancelAnimationFrame(animationFrame);
|
||||
});
|
||||
|
||||
const span = $derived(Math.max(max - min, 1));
|
||||
const minPercent = $derived(((visual[0] - min) / span) * 100);
|
||||
const maxPercent = $derived(((visual[1] - min) / span) * 100);
|
||||
|
||||
const minZ = $derived(
|
||||
dragging === "min" ? 5 : dragging === "max" ? 2 : value[0] > (min + max) / 2 ? 4 : 3,
|
||||
@@ -24,23 +32,69 @@
|
||||
dragging === "max" ? 5 : dragging === "min" ? 2 : value[1] <= (min + max) / 2 ? 4 : 3,
|
||||
);
|
||||
|
||||
function onMinInput(e: Event) {
|
||||
const raw = Number((e.currentTarget as HTMLInputElement).value);
|
||||
if (raw > value[1]) {
|
||||
value = [value[1], raw];
|
||||
} else {
|
||||
value = [raw, value[1]];
|
||||
}
|
||||
function clamp(n: number) {
|
||||
return Math.min(max, Math.max(min, n));
|
||||
}
|
||||
|
||||
function onMaxInput(e: Event) {
|
||||
const raw = Number((e.currentTarget as HTMLInputElement).value);
|
||||
if (raw < value[0]) {
|
||||
value = [raw, value[0]];
|
||||
} else {
|
||||
value = [value[0], raw];
|
||||
function animateVisualTo(target: [number, number]) {
|
||||
if (animationFrame !== null) cancelAnimationFrame(animationFrame);
|
||||
|
||||
const start: [number, number] = [...visual];
|
||||
const startTime = performance.now();
|
||||
const duration = 200;
|
||||
|
||||
function frame(now: number) {
|
||||
// sine wave ease animation
|
||||
const t = Math.min(1, (now - startTime) / duration);
|
||||
const eased = Math.sin((t * Math.PI) / 2);
|
||||
|
||||
visual = [
|
||||
start[0] + (target[0] - start[0]) * eased,
|
||||
start[1] + (target[1] - start[1]) * eased,
|
||||
];
|
||||
|
||||
if (t < 1) {
|
||||
animationFrame = requestAnimationFrame(frame);
|
||||
} else {
|
||||
visual = target;
|
||||
animationFrame = null;
|
||||
}
|
||||
}
|
||||
animationFrame = requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
function onInput(e: Event, which: "min" | "max", animate: boolean) {
|
||||
const raw = clamp(Number((e.currentTarget as HTMLInputElement).value));
|
||||
|
||||
let next: [number, number];
|
||||
|
||||
if (animate) {
|
||||
next = which === "min"
|
||||
// if next[0] > next[1]: next[1] = next[0]
|
||||
? [raw, Math.max(raw, value[1])]
|
||||
// if next[1] < next[0]: next[0] = next[1]
|
||||
: [Math.min(raw, value[0]), raw];
|
||||
} else {
|
||||
if (which === "min") {
|
||||
next = raw > value[1]
|
||||
? [value[1], raw]
|
||||
: [raw, value[1]];
|
||||
} else {
|
||||
next = raw < value[0]
|
||||
? [raw, value[0]]
|
||||
: [value[0], raw];
|
||||
}
|
||||
}
|
||||
|
||||
value = next;
|
||||
|
||||
if (animate) {
|
||||
animateVisualTo(next);
|
||||
} else {
|
||||
visual = next;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="bsplus-grade-range-slider">
|
||||
@@ -59,8 +113,8 @@
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
value={value[0]}
|
||||
oninput={onMinInput}
|
||||
value={visual[0]}
|
||||
oninput={(e) => onInput(e, "min", false)}
|
||||
onpointerdown={() => (dragging = "min")}
|
||||
onpointerup={() => (dragging = null)}
|
||||
onpointercancel={() => (dragging = null)}
|
||||
@@ -79,8 +133,8 @@
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
value={value[1]}
|
||||
oninput={onMaxInput}
|
||||
value={visual[1]}
|
||||
oninput={(e) => onInput(e, "max", false)}
|
||||
onpointerdown={() => (dragging = "max")}
|
||||
onpointerup={() => (dragging = null)}
|
||||
onpointercancel={() => (dragging = null)}
|
||||
@@ -94,15 +148,42 @@
|
||||
aria-valuenow={value[1]}
|
||||
/>
|
||||
</div>
|
||||
<span class="bsplus-analytics-range-value" aria-live="polite">
|
||||
{value[0]}% – {value[1]}%
|
||||
</span>
|
||||
|
||||
<div class="bsplus-analytics-range-display" aria-live="polite">
|
||||
<span class="bsplus-analytics-range-input-wrap">
|
||||
<input
|
||||
type="number"
|
||||
class="bsplus-analytics-range-value"
|
||||
value={value[0]}
|
||||
oninput={(e) => onInput(e, "min", true)}
|
||||
placeholder={min}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
/>
|
||||
<span class="bsplus-analytics-range-suffix">%</span>
|
||||
</span>
|
||||
<span class="bsplus-analytics-range-dash">–</span>
|
||||
<span class="bsplus-analytics-range-input-wrap">
|
||||
<input
|
||||
type="number"
|
||||
class="bsplus-analytics-range-value"
|
||||
value={value[1]}
|
||||
oninput={(e) => onInput(e, "max", true)}
|
||||
placeholder={max}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
/>
|
||||
<span class="bsplus-analytics-range-suffix">%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bsplus-grade-range-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -110,12 +191,44 @@
|
||||
|
||||
.bsplus-grade-range-slider-track-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-input-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-suffix {
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--bsplus-analytics-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-dash {
|
||||
color: var(--bsplus-analytics-muted);
|
||||
font-weight: 700;
|
||||
padding: 0 0.15rem;
|
||||
}
|
||||
|
||||
.bsplus-grade-range-slider-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@@ -421,8 +421,10 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-filters .bsplus-analytics-range-value {
|
||||
min-width: 3.75rem;
|
||||
text-align: right;
|
||||
background-color: var(--bsplus-analytics-control-bg-elevated);
|
||||
border-color: var(--bsplus-analytics-control-border-strong);
|
||||
box-shadow: 0 1px 4px
|
||||
color-mix(in srgb, var(--bsplus-analytics-text) 10%, transparent);
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
@@ -702,12 +704,62 @@
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--bsplus-analytics-muted);
|
||||
white-space: nowrap;
|
||||
min-width: 4.5rem;
|
||||
text-align: right;
|
||||
appearance: none;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--bsplus-analytics-text);
|
||||
background-color: var(--bsplus-analytics-control-bg);
|
||||
border: 2px solid var(--bsplus-analytics-control-border);
|
||||
border-radius: var(--bsplus-analytics-radius-sm);
|
||||
padding: 0.5rem 1.8rem 0.5rem 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
min-width: 3.5rem;
|
||||
width: auto;
|
||||
max-width: 4.5rem;
|
||||
text-align: center;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s var(--bsplus-analytics-ease);
|
||||
box-shadow: 0 1px 3px color-mix(in srgb, var(--bsplus-analytics-text) 8%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value:hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-accent) 35%,
|
||||
var(--bsplus-analytics-control-border)
|
||||
);
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value:focus {
|
||||
outline: none;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--bsplus-analytics-surface) 96%,
|
||||
var(--bsplus-analytics-surface-2) 4%
|
||||
);
|
||||
border-color: var(--bsplus-analytics-accent);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--bsplus-analytics-text) 12%, transparent),
|
||||
0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value::-webkit-outer-spin-button,
|
||||
.bsplus-analytics-range-value::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bsplus-analytics-range-value[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Custom dropdowns (time period, subjects) */
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
let {
|
||||
open = false,
|
||||
busy = false,
|
||||
providerLabel = "Google",
|
||||
onConfirm,
|
||||
onCancel,
|
||||
} = $props<{
|
||||
open?: boolean;
|
||||
busy?: boolean;
|
||||
providerLabel?: string;
|
||||
onConfirm: () => void | Promise<void>;
|
||||
onCancel: () => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="bsplus-cal-modal-backdrop"
|
||||
onclick={(e) => {
|
||||
if (e.target === e.currentTarget && !busy) onCancel();
|
||||
}}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Escape" && !busy) onCancel();
|
||||
}}
|
||||
role="presentation"
|
||||
transition:fade={{ duration: 150 }}
|
||||
>
|
||||
<div
|
||||
class="bsplus-cal-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="bsplus-cal-delete-title"
|
||||
transition:fade={{ duration: 180 }}
|
||||
>
|
||||
<h2 id="bsplus-cal-delete-title" class="bsplus-cal-modal-title">
|
||||
Remove synced events?
|
||||
</h2>
|
||||
<p class="bsplus-cal-modal-body">
|
||||
This removes all BetterSEQTA+ timetable events from your {providerLabel} Calendar for this school.
|
||||
Your connection stays active — you can sync again later.
|
||||
</p>
|
||||
<div class="bsplus-cal-modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-btn bsplus-cal-btn--ghost"
|
||||
disabled={busy}
|
||||
onclick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-btn bsplus-cal-btn--danger"
|
||||
disabled={busy}
|
||||
onclick={() => void onConfirm()}
|
||||
>
|
||||
{busy ? "Removing…" : "Remove from calendar"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bsplus-cal-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2147483647;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal {
|
||||
width: min(100%, 400px);
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
background: var(--bsplus-cal-surface, #fff);
|
||||
color: var(--bsplus-cal-text, #111);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid color-mix(in srgb, var(--bsplus-cal-text, #111) 12%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-body {
|
||||
margin: 0 0 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 72%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--ghost {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 8%, transparent);
|
||||
color: var(--bsplus-cal-text, #111);
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--ghost:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 14%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--danger {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--danger:hover:not(:disabled) {
|
||||
background: #b91c1c;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
let {
|
||||
open = false,
|
||||
busy = false,
|
||||
providerLabel = "Google",
|
||||
onConfirm,
|
||||
onCancel,
|
||||
} = $props<{
|
||||
open?: boolean;
|
||||
busy?: boolean;
|
||||
providerLabel?: string;
|
||||
onConfirm: () => void | Promise<void>;
|
||||
onCancel: () => void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="bsplus-cal-modal-backdrop"
|
||||
onclick={(e) => {
|
||||
if (e.target === e.currentTarget && !busy) onCancel();
|
||||
}}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Escape" && !busy) onCancel();
|
||||
}}
|
||||
role="presentation"
|
||||
transition:fade={{ duration: 150 }}
|
||||
>
|
||||
<div
|
||||
class="bsplus-cal-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="bsplus-cal-disconnect-title"
|
||||
transition:fade={{ duration: 180 }}
|
||||
>
|
||||
<h2 id="bsplus-cal-disconnect-title" class="bsplus-cal-modal-title">
|
||||
Disconnect {providerLabel} Calendar?
|
||||
</h2>
|
||||
<p class="bsplus-cal-modal-body">
|
||||
Your synced timetable events will stay in {providerLabel} Calendar, but BetterSEQTA+ will stop
|
||||
updating them until you connect again.
|
||||
</p>
|
||||
<div class="bsplus-cal-modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-btn bsplus-cal-btn--ghost"
|
||||
disabled={busy}
|
||||
onclick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-btn bsplus-cal-btn--danger"
|
||||
disabled={busy}
|
||||
onclick={() => void onConfirm()}
|
||||
>
|
||||
{busy ? "Disconnecting…" : "Disconnect"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bsplus-cal-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2147483647;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal {
|
||||
width: min(100%, 400px);
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
background: var(--bsplus-cal-surface, #fff);
|
||||
color: var(--bsplus-cal-text, #111);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid color-mix(in srgb, var(--bsplus-cal-text, #111) 12%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-body {
|
||||
margin: 0 0 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 72%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn {
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--ghost {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 8%, transparent);
|
||||
color: var(--bsplus-cal-text, #111);
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--ghost:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 14%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--danger {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bsplus-cal-btn--danger:hover:not(:disabled) {
|
||||
background: #b91c1c;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,946 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { fade, fly } from "svelte/transition";
|
||||
import browser from "webextension-polyfill";
|
||||
import {
|
||||
GOOGLE_CALENDAR_SYNC_WEEKS_MAX,
|
||||
GOOGLE_CALENDAR_SYNC_WEEKS_MIN,
|
||||
} from "@/config/googleCalendar";
|
||||
import { maybeRunDueWeeklySync } from "@/seqta/utils/googleCalendar/calendarSyncListener";
|
||||
import { deleteSyncedEventsFromGoogleCalendar } from "@/seqta/utils/googleCalendar/syncEngine";
|
||||
import {
|
||||
formatOutlookSyncResultMessage,
|
||||
runOutlookCalendarSync,
|
||||
} from "@/seqta/utils/outlookCalendar/syncRunner";
|
||||
import {
|
||||
formatSyncResultMessage,
|
||||
runGoogleCalendarSync,
|
||||
} from "@/seqta/utils/googleCalendar/syncRunner";
|
||||
import type {
|
||||
GoogleCalendarStatus,
|
||||
GoogleCalendarSyncProgress,
|
||||
GoogleCalendarSyncResult,
|
||||
} from "@/seqta/utils/googleCalendar/types";
|
||||
import type { OutlookCalendarStatus } from "@/seqta/utils/outlookCalendar/types";
|
||||
import { deleteSyncedEventsFromOutlookCalendar } from "@/seqta/utils/outlookCalendar/syncEngine";
|
||||
import CalendarDeleteEventsModal from "./CalendarDeleteEventsModal.svelte";
|
||||
import CalendarDisconnectModal from "./CalendarDisconnectModal.svelte";
|
||||
import CalendarSyncProgress from "./CalendarSyncProgress.svelte";
|
||||
import OutlookCalendarIcon from "./OutlookCalendarIcon.svelte";
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import { syncCalendarSyncTheme } from "./calendarSyncTheme";
|
||||
|
||||
type CalendarProvider = "google" | "outlook";
|
||||
type BusyPhase = "connect" | "sync" | "delete" | "disconnect" | null;
|
||||
type BusyState = { provider: CalendarProvider; phase: BusyPhase } | null;
|
||||
|
||||
let googleStatus = $state<GoogleCalendarStatus>({ configured: true, connected: false });
|
||||
let outlookStatus = $state<OutlookCalendarStatus>({ configured: true, connected: false });
|
||||
let busy = $state<BusyState>(null);
|
||||
let menuOpen = $state(false);
|
||||
let modalProvider = $state<CalendarProvider | null>(null);
|
||||
let showDisconnect = $state(false);
|
||||
let showDeleteEvents = $state(false);
|
||||
let toast = $state<{ message: string; error: boolean } | null>(null);
|
||||
let syncProgress = $state<GoogleCalendarSyncProgress | null>(null);
|
||||
let syncWeeksAhead = $state(12);
|
||||
let autoSyncWeekly = $state(true);
|
||||
|
||||
let rootEl = $state<HTMLDivElement | null>(null);
|
||||
let triggerEl = $state<HTMLButtonElement | null>(null);
|
||||
let menuEl = $state<HTMLDivElement | null>(null);
|
||||
let menuStyle = $state("");
|
||||
let toastTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const isBusy = $derived(busy !== null);
|
||||
const anyConnected = $derived(googleStatus.connected || outlookStatus.connected);
|
||||
const accent = "var(--bsplus-cal-accent, var(--better-main, #3b82f6))";
|
||||
|
||||
function isProviderBusy(provider: CalendarProvider): boolean {
|
||||
return busy?.provider === provider;
|
||||
}
|
||||
|
||||
function providerPhase(provider: CalendarProvider): BusyPhase {
|
||||
return busy?.provider === provider ? busy.phase : null;
|
||||
}
|
||||
|
||||
function showToastMessage(message: string, isError = false) {
|
||||
toast = { message, error: isError };
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => {
|
||||
toast = null;
|
||||
}, 4500);
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
const [google, outlook] = await Promise.all([
|
||||
browser.runtime.sendMessage({ type: "googleCalendarStatus" }) as Promise<GoogleCalendarStatus>,
|
||||
browser.runtime.sendMessage({ type: "outlookCalendarStatus" }) as Promise<OutlookCalendarStatus>,
|
||||
]);
|
||||
googleStatus = google;
|
||||
outlookStatus = outlook;
|
||||
syncWeeksAhead = google.syncWeeksAhead ?? 12;
|
||||
autoSyncWeekly = google.autoSyncWeekly !== false;
|
||||
}
|
||||
|
||||
async function getAccessToken(provider: CalendarProvider): Promise<string> {
|
||||
const messageType =
|
||||
provider === "google" ? "googleCalendarGetAccessToken" : "outlookCalendarGetAccessToken";
|
||||
const res = (await browser.runtime.sendMessage({ type: messageType })) as {
|
||||
success?: boolean;
|
||||
accessToken?: string;
|
||||
error?: string;
|
||||
};
|
||||
if (!res?.success || !res.accessToken) {
|
||||
throw new Error(res?.error ?? "Could not get calendar access token.");
|
||||
}
|
||||
return res.accessToken;
|
||||
}
|
||||
|
||||
function handleSyncProgress(progress: GoogleCalendarSyncProgress) {
|
||||
syncProgress = progress;
|
||||
}
|
||||
|
||||
async function saveSyncSettings(patch: {
|
||||
syncWeeksAhead?: number;
|
||||
autoSyncWeekly?: boolean;
|
||||
}) {
|
||||
const result = (await browser.runtime.sendMessage({
|
||||
type: "googleCalendarUpdateSyncSettings",
|
||||
...patch,
|
||||
})) as GoogleCalendarStatus & { success?: boolean };
|
||||
if (result.syncWeeksAhead != null) syncWeeksAhead = result.syncWeeksAhead;
|
||||
if (result.autoSyncWeekly != null) autoSyncWeekly = result.autoSyncWeekly;
|
||||
googleStatus = { ...googleStatus, ...result };
|
||||
}
|
||||
|
||||
async function performSync(
|
||||
provider: CalendarProvider,
|
||||
mode: "full" | "incremental" = "full",
|
||||
): Promise<boolean> {
|
||||
const run = provider === "google" ? runGoogleCalendarSync : runOutlookCalendarSync;
|
||||
const format = provider === "google" ? formatSyncResultMessage : formatOutlookSyncResultMessage;
|
||||
|
||||
const result = await run({ mode, onProgress: handleSyncProgress });
|
||||
syncProgress = null;
|
||||
|
||||
if (!result.success) {
|
||||
showToastMessage(result.error ?? "Calendar sync failed.", true);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (provider === "google") {
|
||||
googleStatus = {
|
||||
...googleStatus,
|
||||
connected: true,
|
||||
lastSyncAt: result.lastSyncAt ?? googleStatus.lastSyncAt,
|
||||
};
|
||||
} else {
|
||||
outlookStatus = {
|
||||
...outlookStatus,
|
||||
connected: true,
|
||||
lastSyncAt: result.lastSyncAt ?? outlookStatus.lastSyncAt,
|
||||
};
|
||||
}
|
||||
|
||||
showToastMessage(format(result));
|
||||
return true;
|
||||
}
|
||||
|
||||
async function connectProvider(provider: CalendarProvider) {
|
||||
const status = provider === "google" ? googleStatus : outlookStatus;
|
||||
if (!status.configured || isBusy) return;
|
||||
menuOpen = true;
|
||||
busy = { provider, phase: "connect" };
|
||||
const connectType =
|
||||
provider === "google" ? "googleCalendarConnect" : "outlookCalendarConnect";
|
||||
try {
|
||||
const result = (await browser.runtime.sendMessage({
|
||||
type: connectType,
|
||||
})) as GoogleCalendarSyncResult;
|
||||
if (!result.success) {
|
||||
const label = provider === "google" ? "Google" : "Outlook";
|
||||
showToastMessage(result.error ?? `Could not connect to ${label} Calendar.`, true);
|
||||
return;
|
||||
}
|
||||
if (provider === "google") {
|
||||
googleStatus = { ...googleStatus, connected: true };
|
||||
} else {
|
||||
outlookStatus = { ...outlookStatus, connected: true };
|
||||
}
|
||||
busy = { provider, phase: "sync" };
|
||||
await performSync(provider);
|
||||
} catch (err) {
|
||||
showToastMessage(err instanceof Error ? err.message : "Could not connect.", true);
|
||||
} finally {
|
||||
syncProgress = null;
|
||||
busy = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function syncProvider(provider: CalendarProvider) {
|
||||
const status = provider === "google" ? googleStatus : outlookStatus;
|
||||
if (!status.configured || isBusy) return;
|
||||
if (!status.connected) {
|
||||
await connectProvider(provider);
|
||||
return;
|
||||
}
|
||||
|
||||
busy = { provider, phase: "sync" };
|
||||
try {
|
||||
await performSync(provider);
|
||||
} catch (err) {
|
||||
showToastMessage(err instanceof Error ? err.message : "Calendar sync failed.", true);
|
||||
} finally {
|
||||
syncProgress = null;
|
||||
busy = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDeleteEvents() {
|
||||
if (isBusy || !modalProvider) return;
|
||||
const provider = modalProvider;
|
||||
busy = { provider, phase: "delete" };
|
||||
syncProgress = {
|
||||
phase: "preparing",
|
||||
current: 0,
|
||||
total: 1,
|
||||
message: "Preparing removal…",
|
||||
};
|
||||
try {
|
||||
const deleteFn =
|
||||
provider === "google"
|
||||
? deleteSyncedEventsFromGoogleCalendar
|
||||
: deleteSyncedEventsFromOutlookCalendar;
|
||||
const result = await deleteFn(location.origin, () => getAccessToken(provider), {
|
||||
onProgress: handleSyncProgress,
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
showToastMessage(result.error ?? "Could not remove calendar events.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const removed = result.deleted ?? 0;
|
||||
showDeleteEvents = false;
|
||||
menuOpen = false;
|
||||
modalProvider = null;
|
||||
if (removed === 0) {
|
||||
showToastMessage("No synced events to remove.");
|
||||
} else {
|
||||
showToastMessage(`Removed ${removed} event${removed === 1 ? "" : "s"} from Google Calendar.`);
|
||||
}
|
||||
} catch (err) {
|
||||
showToastMessage(err instanceof Error ? err.message : "Remove failed.", true);
|
||||
} finally {
|
||||
syncProgress = null;
|
||||
busy = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function onWeeksAheadChange(event: Event) {
|
||||
const value = Number((event.currentTarget as HTMLInputElement).value);
|
||||
if (!Number.isFinite(value)) return;
|
||||
await saveSyncSettings({ syncWeeksAhead: value });
|
||||
}
|
||||
|
||||
async function onAutoSyncToggle(event: Event) {
|
||||
const checked = (event.currentTarget as HTMLInputElement).checked;
|
||||
autoSyncWeekly = checked;
|
||||
await saveSyncSettings({ autoSyncWeekly: checked });
|
||||
}
|
||||
|
||||
async function confirmDisconnect() {
|
||||
if (isBusy || !modalProvider) return;
|
||||
const provider = modalProvider;
|
||||
busy = { provider, phase: "disconnect" };
|
||||
const disconnectType =
|
||||
provider === "google" ? "googleCalendarDisconnect" : "outlookCalendarDisconnect";
|
||||
const label = provider === "google" ? "Google" : "Outlook";
|
||||
try {
|
||||
const result = (await browser.runtime.sendMessage({
|
||||
type: disconnectType,
|
||||
})) as { success?: boolean };
|
||||
if (!result?.success) {
|
||||
showToastMessage(`Could not disconnect ${label} Calendar.`, true);
|
||||
return;
|
||||
}
|
||||
if (provider === "google") {
|
||||
googleStatus = { ...googleStatus, connected: false, lastSyncAt: undefined };
|
||||
} else {
|
||||
outlookStatus = { ...outlookStatus, connected: false, lastSyncAt: undefined };
|
||||
}
|
||||
showDisconnect = false;
|
||||
menuOpen = false;
|
||||
modalProvider = null;
|
||||
showToastMessage(`Disconnected from ${label} Calendar.`);
|
||||
} catch (err) {
|
||||
showToastMessage(err instanceof Error ? err.message : "Disconnect failed.", true);
|
||||
} finally {
|
||||
busy = null;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
if (isBusy) return;
|
||||
menuOpen = !menuOpen;
|
||||
if (menuOpen) {
|
||||
queueMicrotask(() => syncMenuTheme());
|
||||
}
|
||||
}
|
||||
|
||||
function formatLastSync(ts?: number): string | null {
|
||||
if (!ts) return null;
|
||||
const diff = Date.now() - ts;
|
||||
if (diff < 60_000) return "Synced just now";
|
||||
if (diff < 3_600_000) return `Synced ${Math.floor(diff / 60_000)}m ago`;
|
||||
if (diff < 86_400_000) return `Synced ${Math.floor(diff / 3_600_000)}h ago`;
|
||||
return `Synced ${new Date(ts).toLocaleDateString()}`;
|
||||
}
|
||||
|
||||
function updateMenuPosition() {
|
||||
if (!triggerEl) return;
|
||||
const rect = triggerEl.getBoundingClientRect();
|
||||
menuStyle = `top:${rect.bottom + 8}px;right:${window.innerWidth - rect.right}px;`;
|
||||
syncMenuTheme();
|
||||
}
|
||||
|
||||
function syncMenuTheme() {
|
||||
if (!menuEl) return;
|
||||
syncCalendarSyncTheme(menuEl);
|
||||
}
|
||||
|
||||
function syncMountedTheme() {
|
||||
const themeHost = rootEl?.closest(".bsplus-calendar-sync-mount") as HTMLElement | null;
|
||||
if (themeHost) syncCalendarSyncTheme(themeHost);
|
||||
if (menuOpen) syncMenuTheme();
|
||||
}
|
||||
|
||||
function portalMenu(node: HTMLElement) {
|
||||
document.body.appendChild(node);
|
||||
return {
|
||||
destroy() {
|
||||
node.remove();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const host = rootEl?.closest(".timetable-calendar-controls");
|
||||
host?.classList.toggle("bsplus-cal-menu-open", menuOpen);
|
||||
return () => host?.classList.remove("bsplus-cal-menu-open");
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!menuOpen || !menuEl) return;
|
||||
syncMenuTheme();
|
||||
updateMenuPosition();
|
||||
const onLayout = () => updateMenuPosition();
|
||||
window.addEventListener("resize", onLayout);
|
||||
window.addEventListener("scroll", onLayout, true);
|
||||
return () => {
|
||||
window.removeEventListener("resize", onLayout);
|
||||
window.removeEventListener("scroll", onLayout, true);
|
||||
};
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
void refreshStatus().then(() => {
|
||||
void maybeRunDueWeeklySync((message, isError) => {
|
||||
showToastMessage(message, isError);
|
||||
void refreshStatus();
|
||||
});
|
||||
});
|
||||
|
||||
const themeKeys = [
|
||||
"selectedColor",
|
||||
"selectedFont",
|
||||
"DarkMode",
|
||||
"adaptiveThemeColour",
|
||||
"adaptiveThemeGradient",
|
||||
"selectedTheme",
|
||||
] as const;
|
||||
const onThemeChange = () => syncMountedTheme();
|
||||
for (const key of themeKeys) {
|
||||
settingsState.register(key, onThemeChange);
|
||||
}
|
||||
|
||||
const themeObserver = new MutationObserver(onThemeChange);
|
||||
themeObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["style", "class"],
|
||||
});
|
||||
|
||||
const onDocPointer = (event: PointerEvent) => {
|
||||
if (!menuOpen) return;
|
||||
const target = event.target as Node;
|
||||
if (rootEl?.contains(target)) return;
|
||||
if (menuEl?.contains(target)) return;
|
||||
menuOpen = false;
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", onDocPointer);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", onDocPointer);
|
||||
for (const key of themeKeys) {
|
||||
settingsState.unregister(key, onThemeChange);
|
||||
}
|
||||
themeObserver.disconnect();
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="bsplus-cal-sync" bind:this={rootEl}>
|
||||
<button
|
||||
type="button"
|
||||
class="uiButton bsplus-cal-trigger"
|
||||
bind:this={triggerEl}
|
||||
class:bsplus-cal-trigger--open={menuOpen}
|
||||
class:bsplus-cal-trigger--connected={anyConnected}
|
||||
class:bsplus-cal-trigger--busy={isBusy}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
aria-busy={isBusy}
|
||||
aria-label={anyConnected ? "Calendar sync options" : "Sync with Calendar"}
|
||||
onclick={() => {
|
||||
if (!isBusy) toggleMenu();
|
||||
}}
|
||||
>
|
||||
<span class="bsplus-cal-trigger-icon iconFamily" aria-hidden="true"></span>
|
||||
<span class="bsplus-cal-trigger-text">Sync with Calendar</span>
|
||||
{#if anyConnected}
|
||||
<span class="bsplus-cal-status-dot" aria-hidden="true"></span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if menuOpen}
|
||||
<div
|
||||
class="bsplus-cal-menu"
|
||||
role="menu"
|
||||
bind:this={menuEl}
|
||||
style={menuStyle}
|
||||
use:portalMenu
|
||||
transition:fly={{ y: -6, duration: 160 }}
|
||||
>
|
||||
<div class="bsplus-cal-menu-header">
|
||||
<span class="bsplus-cal-menu-title">Calendar sync</span>
|
||||
<span class="bsplus-cal-menu-sub">Connect providers to sync your timetable</span>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-cal-provider" role="none">
|
||||
<div class="bsplus-cal-provider-row">
|
||||
<span class="bsplus-cal-provider-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M22 12c0-.96-.08-1.88-.24-2.76H12v5.22h5.68c-.24 1.28-.96 2.44-2.04 3.18v2.64h3.3c1.92-1.76 3.06-4.36 3.06-7.28z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M12 22c2.76 0 5.08-.92 6.78-2.5l-3.3-2.64c-.92.62-2.1.98-3.48.98-2.68 0-4.96-1.8-5.78-4.22H2.18v2.72A10 10 0 0 0 12 22z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M6.22 13.62A5.98 5.98 0 0 1 5.82 12c0-.56.1-1.1.28-1.62V7.66H2.18A10 10 0 0 0 2 12c0 1.62.38 3.16 1.06 4.52l3.16-2.9z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12 5.38c1.5 0 2.84.52 3.9 1.54l2.92-2.92C17.08 2.34 14.76 1.2 12 1.2 7.54 1.2 3.72 3.94 2.18 7.66l4.04 3.14c.82-2.42 3.1-4.22 5.78-4.22z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="bsplus-cal-provider-copy">
|
||||
<span class="bsplus-cal-provider-name">
|
||||
<span class="bsplus-google-word bsplus-google-word--sm">
|
||||
<span class="bsplus-google-g">G</span><span class="bsplus-google-o1">o</span><span class="bsplus-google-o2">o</span><span class="bsplus-google-g2">g</span><span class="bsplus-google-l">l</span><span class="bsplus-google-e">e</span>
|
||||
</span>
|
||||
<span> Calendar</span>
|
||||
</span>
|
||||
<span class="bsplus-cal-provider-status">
|
||||
{#if !googleStatus.configured}
|
||||
Not available in this build
|
||||
{:else if googleStatus.connected}
|
||||
Connected{formatLastSync(googleStatus.lastSyncAt) ? ` · ${formatLastSync(googleStatus.lastSyncAt)}` : ""}
|
||||
{:else}
|
||||
Not connected
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-cal-provider-actions">
|
||||
{#if !googleStatus.connected}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--primary"
|
||||
style:--bsplus-cal-accent={accent}
|
||||
role="menuitem"
|
||||
disabled={!googleStatus.configured || isBusy}
|
||||
onclick={() => void connectProvider("google")}
|
||||
>
|
||||
{providerPhase("google") === "connect" ? "Connecting…" : "Connect"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--primary"
|
||||
style:--bsplus-cal-accent={accent}
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => void syncProvider("google")}
|
||||
>
|
||||
{providerPhase("google") === "sync" ? "Syncing…" : "Sync now"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--ghost"
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => {
|
||||
modalProvider = "google";
|
||||
showDeleteEvents = true;
|
||||
}}
|
||||
>
|
||||
{providerPhase("google") === "delete" ? "Removing…" : "Remove from calendar"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--ghost"
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => {
|
||||
modalProvider = "google";
|
||||
showDisconnect = true;
|
||||
}}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-cal-provider" role="none">
|
||||
<div class="bsplus-cal-provider-row">
|
||||
<span class="bsplus-cal-provider-icon" aria-hidden="true">
|
||||
<OutlookCalendarIcon />
|
||||
</span>
|
||||
<div class="bsplus-cal-provider-copy">
|
||||
<span class="bsplus-cal-provider-name">Outlook Calendar</span>
|
||||
<span class="bsplus-cal-provider-status">
|
||||
{#if !outlookStatus.configured}
|
||||
Set OUTLOOK_OAUTH_CLIENT_ID to enable
|
||||
{:else if outlookStatus.connected}
|
||||
Connected{formatLastSync(outlookStatus.lastSyncAt) ? ` · ${formatLastSync(outlookStatus.lastSyncAt)}` : ""}
|
||||
{:else}
|
||||
Not connected
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsplus-cal-provider-actions">
|
||||
{#if !outlookStatus.connected}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--primary"
|
||||
style:--bsplus-cal-accent={accent}
|
||||
role="menuitem"
|
||||
disabled={!outlookStatus.configured || isBusy}
|
||||
onclick={() => void connectProvider("outlook")}
|
||||
>
|
||||
{providerPhase("outlook") === "connect" ? "Connecting…" : "Connect"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--primary"
|
||||
style:--bsplus-cal-accent={accent}
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => void syncProvider("outlook")}
|
||||
>
|
||||
{providerPhase("outlook") === "sync" ? "Syncing…" : "Sync now"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--ghost"
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => {
|
||||
modalProvider = "outlook";
|
||||
showDeleteEvents = true;
|
||||
}}
|
||||
>
|
||||
{providerPhase("outlook") === "delete" ? "Removing…" : "Remove from calendar"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bsplus-cal-action bsplus-cal-action--ghost"
|
||||
role="menuitem"
|
||||
disabled={isBusy}
|
||||
onclick={() => {
|
||||
modalProvider = "outlook";
|
||||
showDisconnect = true;
|
||||
}}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if anyConnected}
|
||||
<div class="bsplus-cal-settings" role="group" aria-label="Sync settings">
|
||||
<label class="bsplus-cal-setting">
|
||||
<span class="bsplus-cal-setting-label">Weeks ahead</span>
|
||||
<input
|
||||
type="number"
|
||||
class="bsplus-cal-setting-input"
|
||||
min={GOOGLE_CALENDAR_SYNC_WEEKS_MIN}
|
||||
max={GOOGLE_CALENDAR_SYNC_WEEKS_MAX}
|
||||
value={syncWeeksAhead}
|
||||
disabled={isBusy}
|
||||
onchange={(e) => void onWeeksAheadChange(e)}
|
||||
/>
|
||||
</label>
|
||||
<label class="bsplus-cal-setting bsplus-cal-setting--toggle">
|
||||
<span class="bsplus-cal-setting-label">Auto-sync weekly</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="bsplus-cal-setting-checkbox"
|
||||
checked={autoSyncWeekly}
|
||||
disabled={isBusy}
|
||||
onchange={(e) => void onAutoSyncToggle(e)}
|
||||
/>
|
||||
</label>
|
||||
<p class="bsplus-cal-setting-hint">
|
||||
Syncs {syncWeeksAhead} weeks ahead on connect and manual sync. Weekly auto-sync adds each new week forward.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<CalendarSyncProgress progress={syncProgress} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<CalendarDeleteEventsModal
|
||||
open={showDeleteEvents}
|
||||
busy={busy?.phase === "delete"}
|
||||
providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
|
||||
onCancel={() => {
|
||||
if (busy?.phase !== "delete") showDeleteEvents = false;
|
||||
}}
|
||||
onConfirm={confirmDeleteEvents}
|
||||
/>
|
||||
|
||||
<CalendarDisconnectModal
|
||||
open={showDisconnect}
|
||||
busy={busy?.phase === "disconnect"}
|
||||
providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
|
||||
onCancel={() => {
|
||||
if (busy?.phase !== "disconnect") showDisconnect = false;
|
||||
}}
|
||||
onConfirm={confirmDisconnect}
|
||||
/>
|
||||
|
||||
{#if toast}
|
||||
<div
|
||||
class="bsplus-cal-toast"
|
||||
class:bsplus-cal-toast--error={toast.error}
|
||||
role="status"
|
||||
transition:fade={{ duration: 150 }}
|
||||
>
|
||||
{toast.message}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bsplus-cal-sync {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
|
||||
color: var(--bsplus-cal-text, var(--text-primary, #111));
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-width: auto;
|
||||
height: auto;
|
||||
padding: 0 10px;
|
||||
margin-left: 4px;
|
||||
border-radius: 16px !important;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger-icon {
|
||||
font-family: "IconFamily" !important;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger-text {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bsplus-google-word {
|
||||
display: inline-flex;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.bsplus-google-word--sm {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bsplus-google-g,
|
||||
.bsplus-google-g2 {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.bsplus-google-o1,
|
||||
.bsplus-google-e {
|
||||
color: #ea4335;
|
||||
}
|
||||
|
||||
.bsplus-google-o2 {
|
||||
color: #fbbc05;
|
||||
}
|
||||
|
||||
.bsplus-google-l {
|
||||
color: #34a853;
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger:hover:not(.bsplus-cal-trigger--busy) {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger:active:not(.bsplus-cal-trigger--busy) {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger--open {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 14%, transparent) !important;
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger--connected .bsplus-cal-status-dot {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bsplus-cal-trigger--busy {
|
||||
opacity: 0.85;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.bsplus-cal-status-dot {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 0 2px var(--bsplus-cal-surface, #fff);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bsplus-cal-settings {
|
||||
margin: 8px 0 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent));
|
||||
background: color-mix(in srgb, var(--bsplus-cal-surface, #fff) 92%, transparent);
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bsplus-cal-setting-label {
|
||||
font-weight: 600;
|
||||
color: var(--bsplus-cal-text, var(--text-primary, #111));
|
||||
}
|
||||
|
||||
.bsplus-cal-setting-input {
|
||||
width: 64px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 18%, transparent));
|
||||
background: var(--bsplus-cal-surface, #fff);
|
||||
color: var(--bsplus-cal-text, var(--text-primary, #111));
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bsplus-cal-setting-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
|
||||
}
|
||||
|
||||
.bsplus-cal-setting-hint {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 58%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-menu {
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
width: min(320px, calc(100vw - 24px));
|
||||
padding: 10px;
|
||||
border-radius: 14px;
|
||||
background: var(--bsplus-cal-surface, #fff);
|
||||
color: var(--bsplus-cal-text, #18181b);
|
||||
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent));
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
|
||||
}
|
||||
|
||||
.bsplus-cal-menu.dark {
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.bsplus-cal-menu-header {
|
||||
padding: 6px 8px 10px;
|
||||
border-bottom: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 10%, transparent));
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-menu-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bsplus-cal-menu-sub {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-provider {
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--bsplus-cal-surface-muted, color-mix(in srgb, var(--bsplus-cal-text) 4%, transparent));
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-icon {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-status {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
font-size: 11px;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-provider-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bsplus-cal-action {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 7px 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bsplus-cal-action:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bsplus-cal-action--primary {
|
||||
background: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bsplus-cal-action--primary:hover:not(:disabled) {
|
||||
filter: brightness(1.06);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.bsplus-cal-action--ghost {
|
||||
background: var(--bsplus-cal-surface-muted, color-mix(in srgb, var(--bsplus-cal-text) 8%, transparent));
|
||||
color: var(--bsplus-cal-text, #18181b);
|
||||
}
|
||||
|
||||
.bsplus-cal-action--ghost:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text) 14%, var(--bsplus-cal-surface));
|
||||
}
|
||||
|
||||
.bsplus-cal-toast {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 100000;
|
||||
max-width: min(360px, calc(100vw - 32px));
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bsplus-cal-toast--error {
|
||||
background: rgba(120, 24, 24, 0.95);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import type { GoogleCalendarSyncProgress } from "@/seqta/utils/googleCalendar/types";
|
||||
|
||||
let {
|
||||
progress = null,
|
||||
} = $props<{
|
||||
progress?: GoogleCalendarSyncProgress | null;
|
||||
}>();
|
||||
|
||||
const percent = $derived(
|
||||
progress && progress.total > 0
|
||||
? Math.min(100, Math.round((progress.current / progress.total) * 100))
|
||||
: progress?.phase === "preparing"
|
||||
? 8
|
||||
: 0,
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if progress && progress.phase !== "done"}
|
||||
<div class="bsplus-cal-progress" role="status" aria-live="polite" aria-busy="true">
|
||||
<div class="bsplus-cal-progress-label">{progress.message}</div>
|
||||
<div class="bsplus-cal-progress-track" aria-hidden="true">
|
||||
<div class="bsplus-cal-progress-bar" style:width={`${percent}%`}></div>
|
||||
</div>
|
||||
{#if progress.total > 0}
|
||||
<div class="bsplus-cal-progress-meta">{progress.current} / {progress.total}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bsplus-cal-progress {
|
||||
margin-top: 8px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 22%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-progress-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--bsplus-cal-text, var(--text-primary, #111));
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bsplus-cal-progress-track {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 10%, transparent);
|
||||
}
|
||||
|
||||
.bsplus-cal-progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
.bsplus-cal-progress-meta {
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,231 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="60 90.4 570.02 539.67" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear0"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="9.98908"
|
||||
y1="22.364901"
|
||||
x2="30.932199"
|
||||
y2="9.37495"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(12.54902%,65.490196%,98.039216%);stop-opacity:1;" />
|
||||
<stop offset="0.4" style="stop-color:rgb(23.137255%,83.529412%,100%);stop-opacity:1;" />
|
||||
<stop offset="1" style="stop-color:rgb(76.862745%,69.019608%,100%);stop-opacity:1;" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="17.197201"
|
||||
y1="26.7945"
|
||||
x2="28.856199"
|
||||
y2="8.12575"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(8.627451%,35.294118%,85.098039%);stop-opacity:1;" />
|
||||
<stop offset="0.5008" style="stop-color:rgb(9.411765%,50.196078%,89.803922%);stop-opacity:1;" />
|
||||
<stop offset="1" style="stop-color:rgb(52.156863%,52.941176%,100%);stop-opacity:1;" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="25.7005"
|
||||
y1="27.048401"
|
||||
x2="12.7563"
|
||||
y2="16.501301"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0.236946" style="stop-color:rgb(26.666667%,54.117647%,100%);stop-opacity:0;" />
|
||||
<stop offset="0.792113" style="stop-color:rgb(0%,19.607843%,69.411765%);stop-opacity:0.2;" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear3"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="24.0534"
|
||||
y1="31.1099"
|
||||
x2="44.509998"
|
||||
y2="18.0177"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(10.196078%,26.27451%,65.098039%);stop-opacity:1;" />
|
||||
<stop offset="0.492267" style="stop-color:rgb(12.54902%,32.156863%,79.607843%);stop-opacity:1;" />
|
||||
<stop offset="1" style="stop-color:rgb(37.254902%,12.54902%,79.607843%);stop-opacity:1;" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear4"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="29.8281"
|
||||
y1="30.327299"
|
||||
x2="17.397499"
|
||||
y2="19.570801"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(0%,27.058824%,72.54902%);stop-opacity:0;" />
|
||||
<stop offset="0.669859" style="stop-color:rgb(5.098039%,12.156863%,41.176471%);stop-opacity:0.2;" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial0"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(0.000000000000024802,-405.040512,438.393002,0.000000000000026844,360.027008,102.268202)"
|
||||
>
|
||||
<stop offset="0.568182" style="stop-color:rgb(15.294118%,37.254902%,94.117647%);stop-opacity:0;" />
|
||||
<stop offset="0.992424" style="stop-color:rgb(0%,12.941176%,46.666667%);stop-opacity:1;" />
|
||||
</radialGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="41.998001"
|
||||
y1="29.9431"
|
||||
x2="23.8517"
|
||||
y2="29.9431"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(30.196078%,76.862745%,100%);stop-opacity:1;" />
|
||||
<stop offset="0.196145" style="stop-color:rgb(5.882353%,68.627451%,100%);stop-opacity:1;" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(122.73959,-122.73959,122.73959,122.73959,421.392002,568.675518)"
|
||||
>
|
||||
<stop offset="0.259477" style="stop-color:rgb(0%,37.647059%,81.960784%);stop-opacity:0.4;" />
|
||||
<stop offset="0.908166" style="stop-color:rgb(1.176471%,51.372549%,94.509804%);stop-opacity:0;" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(357.407022,-468.445926,423.594568,323.187085,159.471002,697.080002)"
|
||||
>
|
||||
<stop offset="0.732317" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0;" />
|
||||
<stop offset="1" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0.501961;" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial3"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(-170.860868,259.725406,-674.018133,-443.404152,278.562012,412.978506)"
|
||||
>
|
||||
<stop offset="0" style="stop-color:rgb(28.627451%,87.058824%,100%);stop-opacity:1;" />
|
||||
<stop offset="0.724349" style="stop-color:rgb(16.078431%,76.470588%,100%);stop-opacity:1;" />
|
||||
</radialGradient>
|
||||
<linearGradient
|
||||
id="bsplus-outlook-linear6"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="3.45756"
|
||||
y1="37.872299"
|
||||
x2="20.9291"
|
||||
y2="37.859699"
|
||||
gradientTransform="matrix(15,0,0,15,0,0)"
|
||||
>
|
||||
<stop offset="0.205882" style="stop-color:rgb(42.352941%,87.843137%,100%);stop-opacity:1;" />
|
||||
<stop offset="0.535" style="stop-color:rgb(31.372549%,83.529412%,100%);stop-opacity:0;" />
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial4"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(215.76719,230.769125,-230.769125,215.76719,59.143649,354.231005)"
|
||||
>
|
||||
<stop offset="0.038877" style="stop-color:rgb(0%,56.862745%,100%);stop-opacity:1;" />
|
||||
<stop offset="0.919119" style="stop-color:rgb(9.411765%,23.921569%,67.843137%);stop-opacity:1;" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="bsplus-outlook-radial5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="0"
|
||||
cy="0"
|
||||
fx="0"
|
||||
fy="0"
|
||||
r="1"
|
||||
gradientTransform="matrix(0.000000000000010287,167.999997,-193.782005,0.000000000000011866,180,491.158504)"
|
||||
>
|
||||
<stop offset="0.557796" style="stop-color:rgb(5.882353%,64.705882%,96.862745%);stop-opacity:0;" />
|
||||
<stop offset="1" style="stop-color:rgb(45.490196%,77.647059%,100%);stop-opacity:0.501961;" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear0);"
|
||||
d="M 463.984375 140.144531 L 119.636719 358.414062 L 90.023438 311.695312 L 90.023438 271.4375 C 90.023438 256.78125 97.445312 243.121094 109.742188 235.144531 L 309.910156 105.257812 C 340.40625 85.46875 379.6875 85.464844 410.1875 105.25 Z M 463.984375 140.144531 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear1);"
|
||||
d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear2);"
|
||||
d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear3);"
|
||||
d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear4);"
|
||||
d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial0);"
|
||||
d="M 410.1875 105.25 C 379.6875 85.464844 340.40625 85.46875 309.90625 105.257812 L 109.742188 235.144531 C 97.445312 243.121094 90.023438 256.78125 90.023438 271.4375 L 90.023438 273.40625 C 90.507812 288.121094 98.25 301.679688 110.757812 309.566406 L 359.644531 466.476562 L 609.160156 309.804688 C 622.121094 301.667969 629.984375 287.441406 629.984375 272.140625 L 629.984375 310.308594 L 629.992188 271.34375 C 629.992188 256.683594 622.566406 243.023438 610.269531 235.042969 Z M 410.1875 105.25 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear5);"
|
||||
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial1);"
|
||||
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial2);"
|
||||
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial3);"
|
||||
d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear6);"
|
||||
d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial4);"
|
||||
d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial5);"
|
||||
d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
|
||||
d="M 179.386719 534 C 159.539062 534 143.25 527.789062 130.511719 515.375 C 117.773438 502.960938 111.402344 486.757812 111.402344 466.769531 C 111.402344 445.660156 117.867188 428.589844 130.796875 415.550781 C 143.730469 402.515625 160.660156 396 181.59375 396 C 201.375 396 217.472656 402.238281 229.890625 414.714844 C 242.375 427.191406 248.617188 443.644531 248.617188 464.066406 C 248.617188 485.050781 242.148438 501.964844 229.21875 514.816406 C 216.351562 527.605469 199.742188 534 179.386719 534 Z M 179.960938 507.648438 C 190.777344 507.648438 199.484375 503.953125 206.078125 496.566406 C 212.671875 489.179688 215.96875 478.902344 215.96875 465.742188 C 215.96875 452.023438 212.765625 441.347656 206.367188 433.710938 C 199.964844 426.074219 191.417969 422.257812 180.730469 422.257812 C 169.71875 422.257812 160.851562 426.199219 154.132812 434.082031 C 147.410156 441.90625 144.050781 452.273438 144.050781 465.183594 C 144.050781 478.285156 147.410156 488.652344 154.132812 496.285156 C 160.851562 503.859375 169.460938 507.648438 179.960938 507.648438 Z M 179.960938 507.648438 "
|
||||
/>
|
||||
<path
|
||||
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
|
||||
d="M 179.332031 535.847656 C 159.5625 535.847656 143.332031 529.472656 130.640625 516.71875 C 117.953125 503.964844 111.605469 487.320312 111.605469 466.789062 C 111.605469 445.105469 118.046875 427.570312 130.929688 414.179688 C 143.8125 400.785156 160.679688 394.089844 181.53125 394.089844 C 201.234375 394.089844 217.273438 400.5 229.644531 413.316406 C 242.082031 426.136719 248.296875 443.035156 248.296875 464.015625 C 248.296875 485.566406 241.855469 502.945312 228.976562 516.144531 C 216.15625 529.28125 199.609375 535.847656 179.332031 535.847656 Z M 179.902344 508.78125 C 190.679688 508.78125 199.355469 504.984375 205.921875 497.398438 C 212.492188 489.808594 215.773438 479.253906 215.773438 465.734375 C 215.773438 451.640625 212.585938 440.675781 206.210938 432.832031 C 199.832031 424.988281 191.320312 421.066406 180.671875 421.066406 C 169.699219 421.066406 160.867188 425.113281 154.171875 433.214844 C 147.476562 441.246094 144.128906 451.898438 144.128906 465.160156 C 144.128906 478.617188 147.476562 489.265625 154.171875 497.109375 C 160.867188 504.890625 169.445312 508.78125 179.902344 508.78125 Z M 179.902344 508.78125 "
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,24 @@
|
||||
.timetablepage #toolbar {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.timetable-calendar-controls {
|
||||
position: relative;
|
||||
z-index: 100001;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timetable-calendar-controls.bsplus-cal-menu-open {
|
||||
z-index: 2147483646;
|
||||
}
|
||||
|
||||
.timetablepage #toolbar:has(.bsplus-cal-menu-open) {
|
||||
z-index: 2147483646 !important;
|
||||
}
|
||||
|
||||
.bsplus-calendar-sync-mount {
|
||||
display: inline-flex;
|
||||
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||
import { extractSolidColor } from "@/seqta/ui/colors/parseCssColor";
|
||||
import { ensureFontLoaded } from "@/seqta/ui/fonts/Manager";
|
||||
import { getFontPreset } from "@/seqta/ui/fonts/presets";
|
||||
|
||||
export const CALENDAR_THEME_CSS_VARS = [
|
||||
"--better-main",
|
||||
"--better-pale",
|
||||
"--better-light",
|
||||
"--text-color",
|
||||
"--background-primary",
|
||||
"--background-secondary",
|
||||
"--text-primary",
|
||||
"--theme-offset-bg",
|
||||
"--better-sub",
|
||||
] as const;
|
||||
|
||||
const ACCENT_CSS_VARS = [
|
||||
"--better-main",
|
||||
"--accent-color-value",
|
||||
"--accentColor",
|
||||
"--colour-betterseqta-blue",
|
||||
] as const;
|
||||
|
||||
export function isCalendarDarkMode(): boolean {
|
||||
return !!settingsState.DarkMode || document.documentElement.classList.contains("dark");
|
||||
}
|
||||
|
||||
function resolvePageAccentColor(): string {
|
||||
const computed = getComputedStyle(document.documentElement);
|
||||
for (const name of ACCENT_CSS_VARS) {
|
||||
const solid = extractSolidColor(computed.getPropertyValue(name));
|
||||
if (solid) return solid;
|
||||
}
|
||||
const fromSettings = settingsState.selectedColor?.trim();
|
||||
if (fromSettings) {
|
||||
const solid = extractSolidColor(fromSettings);
|
||||
if (solid) return solid;
|
||||
}
|
||||
return "#3b82f6";
|
||||
}
|
||||
|
||||
/** Sync extension theme (including dark mode) onto a calendar UI host or portaled menu. */
|
||||
export function syncCalendarSyncTheme(target: HTMLElement): void {
|
||||
const computed = getComputedStyle(document.documentElement);
|
||||
const dark = isCalendarDarkMode();
|
||||
const fontPreset = getFontPreset(settingsState.selectedFont);
|
||||
|
||||
ensureFontLoaded(fontPreset);
|
||||
target.style.setProperty("--bsplus-cal-font-family", fontPreset.stack);
|
||||
|
||||
for (const name of CALENDAR_THEME_CSS_VARS) {
|
||||
const value =
|
||||
document.documentElement.style.getPropertyValue(name).trim() ||
|
||||
computed.getPropertyValue(name).trim();
|
||||
if (value) target.style.setProperty(name, value);
|
||||
}
|
||||
|
||||
const accent = resolvePageAccentColor();
|
||||
target.style.setProperty("--bsplus-cal-accent", accent);
|
||||
target.style.setProperty("--better-main", accent);
|
||||
target.classList.toggle("dark", dark);
|
||||
|
||||
const textPrimary =
|
||||
computed.getPropertyValue("--text-primary").trim() ||
|
||||
computed.getPropertyValue("--text-color").trim();
|
||||
const bgPrimary =
|
||||
computed.getPropertyValue("--background-primary").trim() ||
|
||||
computed.getPropertyValue("--background-secondary").trim() ||
|
||||
computed.getPropertyValue("--theme-offset-bg").trim();
|
||||
|
||||
target.style.setProperty(
|
||||
"--bsplus-cal-text",
|
||||
textPrimary || (dark ? "#f4f4f5" : "#18181b"),
|
||||
);
|
||||
target.style.setProperty(
|
||||
"--bsplus-cal-surface",
|
||||
bgPrimary || (dark ? "#27272a" : "#ffffff"),
|
||||
);
|
||||
target.style.setProperty(
|
||||
"--bsplus-cal-surface-muted",
|
||||
dark ? "#3f3f46" : "color-mix(in srgb, var(--bsplus-cal-text) 5%, var(--bsplus-cal-surface))",
|
||||
);
|
||||
target.style.setProperty(
|
||||
"--bsplus-cal-border",
|
||||
dark ? "color-mix(in srgb, #ffffff 14%, transparent)" : "color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent)",
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { mount, unmount } from "svelte";
|
||||
import CalendarSyncControl from "./CalendarSyncControl.svelte";
|
||||
import { syncCalendarSyncTheme } from "./calendarSyncTheme";
|
||||
import { registerCalendarContentHandlers } from "@/seqta/utils/googleCalendar/calendarSyncListener";
|
||||
import hostStyles from "./calendarSyncHost.css?inline";
|
||||
|
||||
const CONTROLS_CLASS = "timetable-calendar-controls";
|
||||
const HOST_STYLE_ID = "bsplus-calendar-sync-host-styles";
|
||||
|
||||
let currentApp: ReturnType<typeof mount> | null = null;
|
||||
let mountRoot: HTMLElement | null = null;
|
||||
|
||||
function ensureHostStyles() {
|
||||
if (document.getElementById(HOST_STYLE_ID)) return;
|
||||
const style = document.createElement("style");
|
||||
style.id = HOST_STYLE_ID;
|
||||
style.textContent = hostStyles;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function teardown() {
|
||||
if (currentApp) {
|
||||
unmount(currentApp);
|
||||
currentApp = null;
|
||||
}
|
||||
|
||||
mountRoot = null;
|
||||
document.querySelector(`.${CONTROLS_CLASS}`)?.remove();
|
||||
document.getElementById(HOST_STYLE_ID)?.remove();
|
||||
}
|
||||
|
||||
export async function mountGoogleCalendarButton(): Promise<void> {
|
||||
if (document.querySelector(`.${CONTROLS_CLASS}`)) return;
|
||||
|
||||
const toolbar = document.getElementById("toolbar");
|
||||
if (!toolbar) return;
|
||||
|
||||
ensureHostStyles();
|
||||
registerCalendarContentHandlers();
|
||||
|
||||
const controls = document.createElement("div");
|
||||
controls.className = `${CONTROLS_CLASS} bsplus-timetable-control`;
|
||||
toolbar.appendChild(controls);
|
||||
|
||||
mountRoot = document.createElement("div");
|
||||
mountRoot.className = "bsplus-calendar-sync-mount";
|
||||
syncCalendarSyncTheme(mountRoot);
|
||||
controls.appendChild(mountRoot);
|
||||
|
||||
currentApp = mount(CalendarSyncControl, { target: mountRoot });
|
||||
}
|
||||
|
||||
export function unmountGoogleCalendarButton(): void {
|
||||
teardown();
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { attachTimetableColorisRecovery } from "@/seqta/utils/timetableColoris";
|
||||
import { convertTo12HourFormat } from "@/seqta/utils/convertTo12HourFormat";
|
||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||
import { verboseLog } from "@/utils/verboseLog";
|
||||
import { mountGoogleCalendarButton, unmountGoogleCalendarButton } from "./calendarSyncUi";
|
||||
|
||||
const timetablePlugin: Plugin<{}, {}> = {
|
||||
id: "timetable",
|
||||
@@ -28,6 +29,7 @@ const timetablePlugin: Plugin<{}, {}> = {
|
||||
const hideControls = document.querySelector(".timetable-hide-controls");
|
||||
if (hideControls) hideControls.remove();
|
||||
|
||||
unmountGoogleCalendarButton();
|
||||
resetTimetableStyles();
|
||||
}
|
||||
};
|
||||
@@ -85,6 +87,7 @@ async function handleTimetable(): Promise<void> {
|
||||
|
||||
handleTimetableZoom();
|
||||
handleTimetableAssessmentHide();
|
||||
void mountGoogleCalendarButton();
|
||||
}
|
||||
|
||||
function handleTimetableZoom(): void {
|
||||
|
||||
Reference in New Issue
Block a user