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

style actions-btn

Browse source
This commit is contained in:
Julie Blanc 2026-03-09 14:31:56 +01:00
parent c321a17f3e
commit 3dd1f032f9
12 changed files with 410 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

178
public/assets/css/src/_actions-btn.scss Normal file
View file

@ -0,0 +1,178 @@
#actions-btn{
position: fixed;
bottom: 0.5rem;
left: 0rem;
padding: 2em;
width: calc(var(--panel-w) - 4em);
z-index: 1000;
--color-bg: var(--color-panel-bg);
--color-text: var(--color-interface-800);
display: flex;
align-items: center;
// align-content: stretch;
gap: 1em;
// background-color: var(--color-panel-bg);
button{
color: var(--color-text);
// font-size: 1.2rem;
font-family: var(--sans-serif);
height: calc(var(--input-h)*1.25);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: 5px;
font-weight: 500;
background-color: var(--color-panel-bg);
// width: 14ch;
display: flex;
align-items: center;
// justify-content: center;
gap: 0.5ch;
margin-top: var(--space-xs);
cursor: pointer;
.icon{
position: relative;
top: 2px;
}
svg{
width: 20px;
height: 20px;
fill: var(--color-text);
}
&.has-changes {
outline-offset: 2px;
outline: 3px solid rgb(247, 98, 98);
}
}
.error-tooltip{
position: absolute;
top: 0em;
font-size: 10px;
max-width: 20ch;
color: rgb(247, 98, 98);
}
}
.last-saved{
position: absolute;
padding-top: 0.75em;
font-size: 10px;
max-width: 20ch;
color: var(--color-interface-400);
}
.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;
// }

60
public/assets/css/src/_buttons.scss
View file

@ -1,60 +0,0 @@
.unit-toggle{
button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h)*0.75);
&:not(.active):hover{
background-color: var(--color-interface-100);
}
&.active {
// border: 1px solid var(--color-interface-700);
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
}
}
#editor-panel .tabs{
.tab{
color: var(--color-interface-600);
font-size: 1rem;
font-family: var(--sans-serif);
height: var(--input-h);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: calc(var(--input-h));
font-weight: 500;
background-color: var(--color-panel-bg);
&.active{
background-color: var(--color-interface-400);
border-color: var(--color-interface-400);
color: var(--color-panel-bg);
}
&:not(.active):hover{
cursor: pointer;
background-color: var(--color-interface-100);
}
}
// .tab {
// &.active {
// background-color: var(--color-txt);
// color: #fff;
// border: none;
// }
// }
}

26
public/assets/css/src/_panel-tabs.scss Normal file
View file

@ -0,0 +1,26 @@
#editor-panel .tabs{
.tab{
color: var(--color-interface-600);
font-size: 1rem;
font-family: var(--sans-serif);
height: var(--input-h);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: calc(var(--input-h));
font-weight: 500;
background-color: var(--color-panel-bg);
&.active{
background-color: var(--color-interface-400);
border-color: var(--color-interface-400);
color: var(--color-panel-bg);
}
&:not(.active):hover{
cursor: pointer;
background-color: var(--color-interface-100);
}
}
}

29
public/assets/css/src/_setting__section.scss
View file

@ -30,6 +30,35 @@
}
.unit-toggle{
button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h)*0.75);
&:not(.active):hover{
background-color: var(--color-interface-100);
}
&.active {
// border: 1px solid var(--color-interface-700);
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
}
}
}
.setting-disabled .setting__body {

109
public/assets/css/style.css
View file

@ -522,24 +522,6 @@ input[type=number] {
.number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900);
}
.unit-toggle button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h) * 0.75);
}
.unit-toggle button:not(.spinner-btn):not(.active):hover {
background-color: var(--color-interface-100);
}
.unit-toggle button:not(.spinner-btn).active {
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
#editor-panel .tabs .tab {
color: var(--color-interface-600);
font-size: 1rem;
@ -561,6 +543,80 @@ input[type=number] {
background-color: var(--color-interface-100);
}
#actions-btn {
position: fixed;
bottom: 0.5rem;
left: 0rem;
padding: 2em;
width: calc(var(--panel-w) - 4em);
z-index: 1000;
--color-bg: var(--color-panel-bg);
--color-text: var(--color-interface-800);
display: flex;
align-items: center;
gap: 1em;
}
#actions-btn button {
color: var(--color-text);
font-family: var(--sans-serif);
height: calc(var(--input-h) * 1.25);
padding: 0 1ch;
border: 1px solid currentColor;
border-radius: 5px;
font-weight: 500;
background-color: var(--color-panel-bg);
display: flex;
align-items: center;
gap: 0.5ch;
margin-top: var(--space-xs);
cursor: pointer;
}
#actions-btn button .icon {
position: relative;
top: 2px;
}
#actions-btn button svg {
width: 20px;
height: 20px;
fill: var(--color-text);
}
#actions-btn button.has-changes {
outline-offset: 2px;
outline: 3px solid rgb(247, 98, 98);
}
#actions-btn .error-tooltip {
position: absolute;
top: 0em;
font-size: 10px;
max-width: 20ch;
color: rgb(247, 98, 98);
}
.last-saved {
position: absolute;
padding-top: 0.75em;
font-size: 10px;
max-width: 20ch;
color: var(--color-interface-400);
}
.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);
}
}
.toggle-setting {
position: absolute;
opacity: 0;
@ -762,6 +818,23 @@ input[type=number] {
grid-column: 2;
padding-top: 4px;
}
.setting__section .unit-toggle button:not(.spinner-btn) {
cursor: pointer;
border: 1px solid var(--color-interface-400);
color: var(--color-interface-400);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
height: calc(var(--input-h) * 0.75);
}
.setting__section .unit-toggle button:not(.spinner-btn):not(.active):hover {
background-color: var(--color-interface-100);
}
.setting__section .unit-toggle button:not(.spinner-btn).active {
color: var(--color-interface-050);
background-color: var(--color-interface-500);
cursor: auto;
}
.setting-disabled .setting__body {
opacity: 0.4;

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

3
public/assets/css/style.scss
View file

@ -6,7 +6,8 @@
@use "src/_print-styles.scss" as *;
@use "src/_panel-settings.scss" as *;
@use "src/_forms.scss" as *;
@use "src/_buttons.scss" as *;
@use "src/_panel-tabs.scss" as *;
@use "src/_actions-btn.scss" as *;
@use "src/_toggle-setting.scss" as *;
@use "src/_settings-popup.scss" as *;
@use "src/_setting__section.scss" as *;

51
public/content/cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
View file

@ -20,6 +20,57 @@ Intro: <p>Ah le Japon... Quel beau pays où nous trouvons des créatures en tout
Customcss:
@page {
size: A5;
margin: 16mm 16mm 16mm 16mm;
}
body {
font-family: sans-serif;
color: rgb(0, 0, 0);
}
p {
font-size: 12px;
line-height: 18px;
}
h1 {
font-size: 38px;
line-height: 38px;
background: rgba(255, 255, 255, 0.521);
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
margin-top: 60px;
margin-bottom: 30px;
font-family: "Source Code Pro";
font-style: normal;
color: rgb(237, 13, 13);
}
em {
font-style: italic;
}
i {
font-style: italic;
}
strong {
font-weight: bold;
}
b {
font-weight: bold;
}
a {
color: #0000ee;
text-decoration-line: underline;
}
----
Uuid: xi60pjkz5bp1nlwp

41
src/App.vue
View file

@ -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;

6
src/components/PrintButton.vue
View file

@ -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>

106
src/components/SaveButton.vue
View file

@ -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>

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

@ -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>