style actions-btn
This commit is contained in:
Julie Blanc
parent
c321a17f3e
commit
3dd1f032f9
12 changed files with 410 additions and 223 deletions
41
src/App.vue
41
src/App.vue
|
|
@ -133,7 +133,7 @@ onMounted(async () => {
|
|||
|
||||
<ZoomControls ref="zoomControls" />
|
||||
|
||||
<div id="group-btn">
|
||||
<div id="actions-btn">
|
||||
<SaveButton />
|
||||
<PrintButton :printPreview="printPreview" />
|
||||
</div>
|
||||
|
|
@ -168,50 +168,13 @@ onMounted(async () => {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--color-page-highlight);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.print-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.print-btn svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
/* Coloris button - ensure it's clickable and visible */
|
||||
:deep(.clr-field button) {
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Hide UI elements when printing */
|
||||
@media print {
|
||||
#editor-panel,
|
||||
#element-popup,
|
||||
#page-popup,
|
||||
#actions-btn,
|
||||
.preview-loader,
|
||||
.print-btn {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
@click="printPreview"
|
||||
:title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`"
|
||||
>
|
||||
<svg
|
||||
<span class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
@ -13,6 +14,9 @@
|
|||
d="M17 2H7V6H17V2ZM19 8H5C3.34 8 2 9.34 2 11V17H6V21H18V17H22V11C22 9.34 20.66 8 19 8ZM16 19H8V14H16V19ZM19 12C18.45 12 18 11.55 18 11C18 10.45 18.45 10 19 10C19.55 10 20 10.45 20 11C20 11.55 19.55 12 19 12Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="txt">Imprimer</span>
|
||||
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,15 @@
|
|||
@click="handleSave"
|
||||
:title="getTooltip()"
|
||||
>
|
||||
<!-- Save icon (default state) -->
|
||||
<svg v-if="!isSaving && !showSuccess" class="save-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
|
||||
<span class="icon">
|
||||
<svg v-if="!isSaving && !showSuccess" class="save-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3ZM19 19H5V5H16.17L19 7.83V19ZM12 12C10.34 12 9 13.34 9 15S10.34 18 12 18 15 16.66 15 15 13.66 12 12 12ZM6 6H15V10H6V6Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="txt">Sauvegarder</span>
|
||||
|
||||
|
||||
<!-- Spinner (saving state) -->
|
||||
<div v-if="isSaving" class="spinner"></div>
|
||||
|
|
@ -99,102 +104,5 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.save-button-wrapper {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 5rem;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--color-interface-300, #ccc);
|
||||
color: white;
|
||||
cursor: not-allowed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.save-btn.has-changes {
|
||||
background: var(--color-page-highlight, #ff8a50);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn.has-changes:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.save-btn.is-saving {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.save-btn.has-error {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.save-btn.save-success {
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
.save-icon,
|
||||
.success-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid white;
|
||||
border-right: 2px solid transparent;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.last-saved {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-interface-600, #666);
|
||||
background: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.error-tooltip {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
max-width: 15rem;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ nav {
|
|||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-browngray-100);
|
||||
color: var(--color-interface-100);
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -133,7 +133,7 @@ nav {
|
|||
left: calc(var(--panel-w) * -1);
|
||||
|
||||
background-color: var(--color-panel-bg);
|
||||
box-shadow: -5px 0px 12px;
|
||||
box-shadow: -5px 0px 12px var(--color-interface-600);
|
||||
|
||||
transition: left 0.3s var(--curve);
|
||||
pointer-events: all;
|
||||
|
|
@ -144,10 +144,24 @@ nav {
|
|||
}
|
||||
|
||||
.tab-panel {
|
||||
height: calc(100% - var(--panel-nav-h) * 2);
|
||||
height: calc(100% - var(--panel-nav-h) * 2.75);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0 2em;
|
||||
margin-top: var(--panel-nav-h);
|
||||
border-bottom: 1px solid var(--color-interface-200);
|
||||
box-shadow: 0px 10px 10px -2px var(--color-interface-200);
|
||||
|
||||
|
||||
position: relative;
|
||||
// &::after{
|
||||
// content: "";
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 4px;
|
||||
// background-color: var(--color-interface-300);
|
||||
// position: absolute;
|
||||
// top: calc(100% - var(--panel-nav-h) * 3);
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue