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

merge

Browse source
This commit is contained in:
isUnknown 2025-12-11 13:39:23 +01:00
parent 4ae4a6d509
commit 5fb9cf68a3
7 changed files with 50 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

22
public/assets/css/src/_forms-section.scss
View file

@ -14,19 +14,19 @@
font-size: 0.8rem;
color: var(--color-interface-400);
}
}
.settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100);
}
.settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100);
}
.settings-subsection {
padding: var(--space-xs) 0;
.settings-subsection {
padding: var(--space-xs) 0;
h3 {
margin-top: calc(var(--space-xs) * 1.5);
margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem;
font-weight: 600;
}
h3 {
margin-top: calc(var(--space-xs) * 1.5);
margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem;
font-weight: 600;
}
}

1
public/assets/css/src/_forms.scss
View file

@ -78,6 +78,7 @@ input[type="number"] {
width: 100%;
}
.field-checkbox{
grid-column: 2;
padding-top: var(--space-xs);
label{
font-weight: 400;

5
public/assets/css/src/_settings-popup.scss
View file

@ -47,10 +47,7 @@
flex: 1;
padding: 1rem;
overflow-y: auto;
background: white;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--color-panel-bg);
}
.settings-subsection h4 {

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

@ -333,6 +333,7 @@ input[type=number] {
width: 100%;
}
.field-font .field-checkbox {
grid-column: 2;
padding-top: var(--space-xs);
}
.field-font .field-checkbox label {
@ -464,13 +465,15 @@ input[type=number] {
font-size: 0.8rem;
color: var(--color-interface-400);
}
.settings-section .settings-subsection:not(:last-child) {
.settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-interface-100);
}
.settings-section .settings-subsection {
.settings-subsection {
padding: var(--space-xs) 0;
}
.settings-section .settings-subsection h3 {
.settings-subsection h3 {
margin-top: calc(var(--space-xs) * 1.5);
margin-bottom: calc(var(--space-xs) * 2);
font-size: 1rem;
@ -563,10 +566,7 @@ input[type=number] {
flex: 1;
padding: 1rem;
overflow-y: auto;
background: white;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--color-panel-bg);
}
.settings-subsection h4 {

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

File diff suppressed because one or more lines are too long

87
src/components/ElementPopup.vue
View file

@ -18,19 +18,17 @@
<div class="popup-controls">
<!-- Font Family -->
<div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="font-family">Police</label>
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
<option value="Alegreya Sans">Alegreya Sans</option>
<option value="Alegreya">Alegreya</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<label class="checkbox-inline label-with-tooltip" data-css="font-style">
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
<span>Italique</span>
</label>
<div class="field-with-option">
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select>
<div class="field-checkbox">
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
<label class="label-with-tooltip" data-css="font-style">Italique</label>
</div>
</div>
</div>
</div>
@ -38,18 +36,7 @@
<div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="font-weight">Graisse</label>
<div class="button-group">
<button
v-for="weight in [200, 300, 400, 600, 800]"
:key="weight"
type="button"
:class="{ active: fontWeight.value === weight }"
:disabled="inheritanceLocked"
@click="fontWeight.value = weight"
>
{{ weight }}
</button>
</div>
<UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
</div>
</div>
@ -276,6 +263,7 @@ import { useStylesheetStore } from '../stores/stylesheet';
import { usePopupPosition } from '../composables/usePopupPosition';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
import UnitToggle from './ui/UnitToggle.vue';
import Coloris from '@melloware/coloris';
import '@melloware/coloris/dist/coloris.css';
import hljs from 'highlight.js/lib/core';
@ -321,6 +309,18 @@ const background = ref({ value: 'transparent' });
const marginOuter = ref({ value: 0, unit: 'mm' });
const paddingInner = ref({ value: 0, unit: 'mm' });
// Constants
const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
const weights = ['200', '300', '400', '600', '800'];
// Computed to adapt fontWeight for UnitToggle
const fontWeightString = computed({
get: () => String(fontWeight.value.value),
set: (val) => {
fontWeight.value.value = parseInt(val);
}
});
const immediateUpdate = (callback) => {
callback();
};
@ -794,43 +794,4 @@ defineExpose({ handleIframeClick, close, visible });
color: var(--color-purple);
font-size: 0.875rem;
}
.button-group {
display: flex;
gap: 0.25rem;
}
.button-group button {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border: 1px solid #ddd;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.button-group button.active {
background: #61afef;
color: white;
border-color: #61afef;
}
.button-group button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkbox-inline {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 1rem;
font-size: 0.875rem;
cursor: pointer;
}
.checkbox-inline input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
</style>

5
src/components/ui/UnitToggle.vue
View file

@ -5,6 +5,7 @@
:key="unit"
type="button"
:class="{ active: modelValue === unit }"
:disabled="disabled"
@click="$emit('update:modelValue', unit)"
>
{{ unit }}
@ -21,6 +22,10 @@ defineProps({
units: {
type: Array,
default: () => ['mm', 'px']
},
disabled: {
type: Boolean,
default: false
}
});