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

feat: add close button to editor panel

Browse source 
Adds a close button in the top-right corner of the editor panel with double arrow icon. The button closes the panel when clicked.

🤖 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 16:55:39 +01:00
parent 0df5d7c6e9
commit 2068e9a1f9
1 changed files with 39 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/editor/EditorPanel.vue
View file

@ -27,6 +27,18 @@
</button>
</nav>
<button
v-if="activeTab.length > 0"
type="button"
class="close-button"
@click="activeTab = ''"
title="Fermer le panneau"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
</svg>
</button>
<div class="tab-content" :class="{ open: activeTab.length > 0 }">
<div v-if="activeTab === 'document'" class="tab-panel">
<PageSettings />
@ -74,6 +86,33 @@ nav {
z-index: 2;
}
.close-button {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 2rem;
height: 2rem;
padding: 0.25rem;
background: transparent;
border: none;
cursor: pointer;
color: var(--color-browngray-300);
transition: color 0.2s ease;
&:hover {
color: var(--color-browngray-100);
}
svg {
width: 100%;
height: 100%;
}
}
.tab-content {
flex: 1;
overflow: hidden;