pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- verbeteringen client

Browse Source
This commit is contained in:
Josako
2025-07-20 19:31:55 +02:00
parent 7bbc32e381
commit 854d889413
6 changed files with 256 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
eveai_chat_client/static/assets/css/form.css
View File

@@ -42,12 +42,6 @@
margin-bottom: 20px;
}
@media (min-width: 768px) {
.form-fields {
grid-template-columns: repeat(2, 1fr);
}
}
.form-field {
margin-bottom: 5px;
}

6
eveai_chat_client/static/assets/vue-components/DynamicForm.vue
View File

@@ -333,12 +333,6 @@ export default {
margin-bottom: 20px;
}
@media (min-width: 768px) {
.form-fields {
grid-template-columns: repeat(2, 1fr);
}
}
.form-field {
margin-bottom: 5px;
}

143
eveai_chat_client/static/assets/vue-components/FormField.vue
View File

@@ -1,15 +1,17 @@
<template>
<div class="form-field" style="margin-bottom: 15px; display: grid; grid-template-columns: 35% 65%; align-items: center;">
<div class="form-field" :class="{ 'radio-field': fieldType === 'radio' }" style="margin-bottom: 15px;">
<!-- Label voor alle velden behalve boolean/checkbox die een speciale behandeling krijgen -->
<label v-if="fieldType !== 'checkbox'" :for="fieldId" style="margin-right: 10px; font-weight: 500;">
<label v-if="fieldType !== 'checkbox'" :for="fieldId" class="field-label" :class="{ 'tooltip-label': description }">
{{ field.name }}
<span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
<!-- Tooltip voor description -->
<span v-if="description" class="tooltip-content">{{ description }}</span>
</label>
<!-- Container voor input velden -->
<div style="width: 100%;">
<!-- Context informatie indien aanwezig -->
<div v-if="field.context" class="field-context" style="margin-bottom: 8px; font-size: 0.9em; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #4285f4;">
<div v-if="field.context" class="field-context" style="margin-bottom: 8px; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px;">
{{ field.context }}
</div>
@@ -70,12 +72,11 @@
</select>
<!-- Radio buttons (options) -->
<div v-if="fieldType === 'radio'" class="radio-group" style="display: flex; flex-direction: column; gap: 8px;">
<div v-if="fieldType === 'radio'" class="radio-group">
<label
v-for="option in (field.allowedValues || field.allowed_values || [])"
:key="option"
class="radio-label"
style="display: flex; align-items: center; cursor: pointer;"
>
<input
type="radio"
@@ -83,7 +84,6 @@
:value="option"
v-model="value"
:required="field.required"
style="margin-right: 8px;"
>
<span>{{ option }}</span>
</label>
@@ -162,10 +162,6 @@
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
>
<!-- Beschrijving/help tekst -->
<small v-if="description" class="field-description" style="display: block; margin-top: 5px; font-size: 0.8rem; color: #777; line-height: 1.4;">
{{ description }}
</small>
</div>
</div>
</template>
@@ -248,10 +244,81 @@ export default {
</script>
<style scoped>
/* Form field layout */
.form-field {
margin-bottom: 15px;
display: grid;
grid-template-columns: 35% 65%;
align-items: start;
gap: 10px;
}
/* Radio field special layout - full width for better alignment */
.form-field.radio-field {
display: block;
}
.form-field.radio-field .field-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-field.radio-field .field-context {
margin-left: 0;
margin-bottom: 12px;
}
/* Field label styling */
.field-label {
margin-right: 10px;
font-weight: 500;
position: relative;
}
/* Tooltip functionality */
.tooltip-label {
cursor: help;
}
.tooltip-content {
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 1000;
bottom: 125%;
left: 0;
background-color: #333;
color: white;
text-align: left;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: normal;
line-height: 1.4;
white-space: normal;
max-width: 300px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: opacity 0.3s, visibility 0.3s;
}
.tooltip-content::after {
content: "";
position: absolute;
top: 100%;
left: 20px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-label:hover .tooltip-content {
visibility: visible;
opacity: 1;
}
/* Input field focus styling */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
@@ -260,29 +327,48 @@ export default {
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
/* Radio button styling */
.radio-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.radio-label {
.radio-label[data-v-8b0edd] {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.9rem;
color: #555;
justify-content: flex-start;
gap: 12px;
width: 100%;
}
.radio-label input[type="radio"] {
flex: 0 0 20px; /* fixed width of 20px, no growing/shrinking */
height: 13px;
width: 13px;
margin: 0;
vertical-align: middle;
}
.radio-label span {
flex: 1; /* take up all remaining space */
word-break: break-word; /* break long words if needed */
margin-left: 12px;
}
/* Checkbox styling */
.checkbox-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
text-align: left;
}
.checkbox-text {
@@ -290,22 +376,15 @@ export default {
color: #555;
}
.field-description {
display: block;
margin-top: 5px;
font-size: 0.8rem;
color: #777;
line-height: 1.4;
}
/* Context field styling */
.field-context {
margin-bottom: 8px;
font-size: 0.9em;
font-size: 0.9rem;
color: #666;
background-color: #f8f9fa;
padding: 8px;
border-radius: 4px;
border-left: 3px solid #4285f4;
text-align: left;
}
.required {
@@ -316,13 +395,23 @@ export default {
/* Responsive adjustments */
@media (max-width: 768px) {
.form-field {
display: block !important;
grid-template-columns: none !important;
display: block;
grid-template-columns: none;
}
.form-field label {
.form-field .field-label {
margin-bottom: 8px;
display: block;
}
.tooltip-content {
position: fixed;
left: 10px;
right: 10px;
max-width: none;
bottom: auto;
top: 50%;
transform: translateY(-50%);
}
}
</style>

1
eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue
View File

@@ -93,7 +93,6 @@ onMounted(() => {
<style scoped>
.sidebar-explanation {
padding: 15px;
flex: 1;
overflow-y: auto;
}