studio-variable/geoproject-app
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement functional lock/unlock inheritance button

Browse source 
- Toggle between locked/unlocked states
- Dynamic text: "Déverrouiller l'héritage" / "Verrouiller l'héritage"
- Show appropriate lock/unlock icon based on state
- Style as simple text button with icon (matching design)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-05 17:51:09 +01:00
parent 33fdf6c94f
commit 25ef4685c1
1 changed files with 27 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/PagePopup.vue
View file

@ -186,10 +186,16 @@
</div> </div>
</div> </div>
<!-- Unlock Inheritance Button --> <!-- Lock/Unlock Inheritance Button -->
<div class="settings-subsection"> <div class="settings-subsection">
<button class="unlock-btn" @click="toggleInheritance"> <button class="inheritance-btn" @click="toggleInheritance">
Déverrouiller l'héritage <svg v-if="inheritanceLocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path>
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"></path>
</svg>
<span>{{ inheritanceLocked ? 'Déverrouiller l\'héritage' : 'Verrouiller l\'héritage' }}</span>
</button> </button>
</div> </div>
</div> </div>
@ -237,7 +243,7 @@ const visible = ref(false);
const position = ref({ x: 0, y: 0 }); const position = ref({ x: 0, y: 0 });
const selectedPageElement = ref(null); const selectedPageElement = ref(null);
const isEditable = ref(false); const isEditable = ref(false);
const inheritanceUnlocked = ref(false); const inheritanceLocked = ref(true);
const backgroundColorInput = ref(null); const backgroundColorInput = ref(null);
let isUpdatingFromStore = false; let isUpdatingFromStore = false;
@ -408,8 +414,8 @@ const close = () => {
}; };
const toggleInheritance = () => { const toggleInheritance = () => {
inheritanceUnlocked.value = !inheritanceUnlocked.value; inheritanceLocked.value = !inheritanceLocked.value;
// TODO: Implement inheritance unlock logic // TODO: Implement CSS priority logic when unlocked
}; };
const pageCss = computed(() => { const pageCss = computed(() => {
@ -538,19 +544,26 @@ defineExpose({ open, close, visible });
/* Unit toggle styles are inherited from global styles */ /* Unit toggle styles are inherited from global styles */
.unlock-btn { .inheritance-btn {
width: 100%; display: flex;
padding: 0.5rem; align-items: center;
gap: 0.5rem;
padding: 0;
background: transparent; background: transparent;
border: 1px solid #ddd; border: none;
border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
transition: background 0.2s; color: #666;
transition: color 0.2s;
} }
.unlock-btn:hover { .inheritance-btn:hover {
background: #f5f5f5; color: #333;
}
.inheritance-btn svg {
width: 1.25rem;
height: 1.25rem;
} }
.popup-css { .popup-css {