Fix profile locks
This commit is contained in:
fraxle
2026-06-05 12:09:53 +01:00
parent 14a4b4623a
commit 8540ae6782
3 changed files with 32 additions and 22 deletions
+13 -3
View File
@@ -276,15 +276,25 @@
opacity: 1; opacity: 1;
} }
.profile-lock-badge {
position: absolute;
top: 4px;
right: 4px;
font-size: 11px;
line-height: 1;
pointer-events: none;
z-index: 1;
}
.profile-btn-label { .profile-btn-label {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 24px; height: 24px;
display: flex; display: block;
align-items: center; line-height: 24px;
justify-content: center; text-align: center;
font-family: Manrope, sans-serif; font-family: Manrope, sans-serif;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
+16 -16
View File
@@ -187,16 +187,16 @@ export function DayTabs({
<button <button
key=${key} key=${key}
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`} class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
style=${{ filter: locked ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }} style=${{ cursor: 'pointer', position: 'relative' }}
title=${locked ? `Profile ${profile.label} is part of SunScope Extra` : ''} title=${locked ? `Profile ${profile.label} is part of SunScope Extra` : ''}
onClick=${() => { onClick=${() => {
if (locked) { setProPromptSource(`profile:${key}`); setProPromptDay(0); return; } if (locked) { setProPromptSource(`profile:${key}`); setProPromptDay(0); return; }
activateProfile(key); activateProfile(key);
}} }}
> >
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span> <span class="profile-btn-scene" style=${{ background: profile.scene, filter: locked ? 'grayscale(100%)' : 'none' }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
<span class="profile-btn-label">${profile.label}</span> <span class="profile-btn-label">${locked ? '🔒 ' : ''}${profile.label}</span>
${locked && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`} ${locked && html`<span class="profile-lock-badge">🔒</span>`}
</button>`; </button>`;
})} })}
@@ -204,7 +204,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${placeValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} class=${`profile-btn${placeValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }} style=${{ cursor: 'pointer', position: 'relative' }}
onClick=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {} try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
@@ -215,9 +215,9 @@ export function DayTabs({
setIndoorManaged(false); setIndoorManaged(false);
}} }}
> >
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span> <span class="profile-btn-scene" style=${{ background: opt.scene, filter: opt.disabled ? 'grayscale(100%)' : 'none' }}></span>
<span class="profile-btn-label">${opt.name}</span> <span class="profile-btn-label">${opt.disabled ? '🔒 ' : ''}${opt.name}</span>
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`} ${opt.disabled && html`<span class="profile-lock-badge">🔒</span>`}
</button> </button>
`)} `)}
@@ -225,7 +225,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${activityValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} class=${`profile-btn${activityValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }} style=${{ cursor: 'pointer', position: 'relative' }}
onClick=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {} try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
@@ -236,9 +236,9 @@ export function DayTabs({
setIndoorManaged(false); setIndoorManaged(false);
}} }}
> >
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span> <span class="profile-btn-scene" style=${{ background: opt.scene, filter: opt.disabled ? 'grayscale(100%)' : 'none' }}></span>
<span class="profile-btn-label">${opt.name}</span> <span class="profile-btn-label">${opt.disabled ? '🔒 ' : ''}${opt.name}</span>
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`} ${opt.disabled && html`<span class="profile-lock-badge">🔒</span>`}
</button> </button>
`)} `)}
@@ -246,7 +246,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${workValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} class=${`profile-btn${workValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }} style=${{ cursor: 'pointer', position: 'relative' }}
onClick=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
if (opt.value === 'farming') { activateProfile('farming'); return; } if (opt.value === 'farming') { activateProfile('farming'); return; }
@@ -258,9 +258,9 @@ export function DayTabs({
else { setIndoorMode('off'); setIndoorManaged(false); } else { setIndoorMode('off'); setIndoorManaged(false); }
}} }}
> >
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span> <span class="profile-btn-scene" style=${{ background: opt.scene, filter: opt.disabled ? 'grayscale(100%)' : 'none' }}></span>
<span class="profile-btn-label">${opt.name}</span> <span class="profile-btn-label">${opt.disabled ? '🔒 ' : ''}${opt.name}</span>
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`} ${opt.disabled && html`<span class="profile-lock-badge">🔒</span>`}
</button> </button>
`)} `)}
+3 -3
View File
@@ -316,7 +316,7 @@ export function useAppState() {
return { return {
value: k, value: k,
label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`, label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`,
name: `${v.name}${locked ? ' 🔒' : ''}`, name: v.name,
scene: v.scene, scene: v.scene,
icon: v.icon, icon: v.icon,
disabled: locked, disabled: locked,
@@ -328,7 +328,7 @@ export function useAppState() {
return { return {
value: k, value: k,
label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`, label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`,
name: `${v.name}${locked ? ' 🔒' : ''}`, name: v.name,
scene: v.scene, scene: v.scene,
icon: v.icon, icon: v.icon,
disabled: locked, disabled: locked,
@@ -343,7 +343,7 @@ export function useAppState() {
return { return {
value: k, value: k,
label: `${iconGlyph} ${v.name}${locked ? ' 🔒' : ''}`, label: `${iconGlyph} ${v.name}${locked ? ' 🔒' : ''}`,
name: `${v.name}${locked ? ' 🔒' : ''}`, name: v.name,
scene: v.scene, scene: v.scene,
icon: v.icon || iconGlyph, icon: v.icon || iconGlyph,
disabled: locked, disabled: locked,