Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moving away from Azure Devops #1

Merged
Janus007 merged 113 commits from refac into master 2026-02-03 00:04:27 +01:00
Conversation 1 Commits 113 Files changed 622 +61 -17
1 changed files with 61 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 11338012cd - Show all commits

78
wwwroot/poc-indstillinger.html
View file

@ -953,9 +953,14 @@
}
swp-variable-tag:hover {
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
border-color: var(--color-teal);
color: var(--color-teal);
cursor: pointer;
}
swp-message-preview .highlight.active {
background: color-mix(in srgb, var(--color-teal) 35%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-teal) 20%, transparent);
}
swp-variable-tag i {
@ -975,11 +980,9 @@
}
swp-message-preview .highlight {
background: color-mix(in srgb, var(--color-teal) 20%, transparent);
padding: 1px 4px;
border-radius: 3px;
color: var(--color-teal);
font-weight: 500;
transition: all 150ms ease;
}
swp-preview-meta {
@ -1239,11 +1242,16 @@
color: var(--color-text-secondary);
}
/* Highlight in email preview - subtle background only */
/* Highlight in email preview - only on hover */
swp-email-preview .editable {
background: rgba(0, 137, 123, 0.12);
padding: 1px 3px;
border-radius: 2px;
transition: all 150ms ease;
}
swp-email-preview .editable.active {
background: rgba(0, 137, 123, 0.35);
box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.2);
}
</style>
</head>
@ -1972,13 +1980,13 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
<swp-message-section>
<swp-message-section-title>Forhåndsvisning</swp-message-section-title>
<swp-message-preview id="messagePreview">
Hej <span class="highlight">Anna Jensen</span>!<br><br>
Hej <span class="highlight" data-var="{kunde_navn}">Anna Jensen</span>!<br><br>
Din tid er bekræftet:<br>
<span class="highlight">Dameklip + Føn</span><br>
<span class="highlight">Torsdag d. 2. januar</span> kl. <span class="highlight">14:30</span><br><br>
Hos <span class="highlight">Maria</span><br>
<span class="highlight">Salon Beauty</span>, <span class="highlight">Hovedgaden 123</span><br><br>
Vil du ændre din tid? <span class="highlight">book.plantempus.dk/x7k2</span>
<span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
<span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
<span class="highlight" data-var="{firma_navn}">Salon Beauty</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
</swp-message-preview>
<swp-preview-meta>
<span><i class="ph ph-chat-text"></i> 312 tegn</span>
@ -2072,26 +2080,26 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
</swp-email-header>
<swp-email-body>
<swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable">Anna</span>,</swp-email-greeting>
<swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable" data-var="{kunde_navn}">Anna</span>,</swp-email-greeting>
<swp-email-text id="emailPreviewBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-email-text>
<swp-email-appointment-card>
<swp-email-appointment-row>
<i class="ph ph-scissors"></i>
<span><strong class="editable">Dameklip + Føn</strong></span>
<span><strong class="editable" data-var="{behandling}">Dameklip + Føn</strong></span>
</swp-email-appointment-row>
<swp-email-appointment-row>
<i class="ph ph-calendar"></i>
<span><span class="editable">Torsdag d. 2. januar 2025</span></span>
<span><span class="editable" data-var="{dato}">Torsdag d. 2. januar 2025</span></span>
</swp-email-appointment-row>
<swp-email-appointment-row>
<i class="ph ph-clock"></i>
<span>Kl. <span class="editable">14:30</span> – <span class="editable">15:15</span></span>
<span>Kl. <span class="editable" data-var="{tid}">14:30</span> – <span class="editable" data-var="{tid}">15:15</span></span>
</swp-email-appointment-row>
<swp-email-appointment-row>
<i class="ph ph-user-circle"></i>
<span>Hos <strong class="editable">Maria</strong></span>
<span>Hos <strong class="editable" data-var="{medarbejder}">Maria</strong></span>
</swp-email-appointment-row>
<swp-email-appointment-row>
<i class="ph ph-map-pin"></i>
@ -2302,6 +2310,42 @@ Vil du ændre din tid? {booking_link}</swp-message-editor>
}
editor.textContent += varText;
});
// Highlight preview on hover
tag.addEventListener('mouseenter', () => {
const varName = tag.dataset.var;
const preview = document.getElementById('messagePreview');
preview.querySelectorAll(`.highlight[data-var="${varName}"]`).forEach(span => {
span.classList.add('active');
});
});
tag.addEventListener('mouseleave', () => {
const preview = document.getElementById('messagePreview');
preview.querySelectorAll('.highlight.active').forEach(span => {
span.classList.remove('active');
});
});
});
// ==========================================
// HIGHLIGHT EMAIL PREVIEW ON HOVER
// ==========================================
document.querySelectorAll('#emailDrawer swp-variable-tag').forEach(tag => {
tag.addEventListener('mouseenter', () => {
const varName = tag.dataset.var;
const preview = document.querySelector('swp-email-preview');
preview.querySelectorAll(`.editable[data-var="${varName}"]`).forEach(span => {
span.classList.add('active');
});
});
tag.addEventListener('mouseleave', () => {
const preview = document.querySelector('swp-email-preview');
preview.querySelectorAll('.editable.active').forEach(span => {
span.classList.remove('active');
});
});
});
// ==========================================