bostame/workdock-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot: preserve compact builder rule and custom-field refinement

Browse Source
This commit is contained in:
Md Bayazid Bostame
2026-03-27 21:19:55 +01:00
parent 855eb8e02f
commit e84ddd558b
2 changed files with 104 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
backend/workflows/static/workflows/css/form_builder.css
View File

@@ -643,16 +643,16 @@ body {
.conditional-rule-grid { .conditional-rule-grid {
display: grid; display: grid;
gap: 12px; gap: 10px;
} }
.conditional-rule-card { .conditional-rule-card {
border: 1px solid #d7e0ec; border: 1px solid #d7e0ec;
border-radius: 16px; border-radius: 14px;
background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%); background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
padding: 14px; padding: 12px;
display: grid; display: grid;
gap: 12px; gap: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
} }
@@ -666,8 +666,8 @@ body {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 12px;
padding-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px solid #e6edf6; border-bottom: 1px solid #e6edf6;
} }
@@ -676,8 +676,8 @@ body {
} }
.conditional-rule-head h3 { .conditional-rule-head h3 {
margin: 2px 0 4px; margin: 2px 0 2px;
font-size: 16px; font-size: 15px;
color: #142033; color: #142033;
} }
@@ -698,39 +698,45 @@ body {
.conditional-toggle { .conditional-toggle {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
color: #5f7089; color: #5f7089;
font-size: 12px; font-size: 11px;
font-weight: 800; font-weight: 800;
white-space: nowrap; white-space: nowrap;
} }
.conditional-toggle input[type='checkbox'] { .conditional-toggle input[type='checkbox'] {
width: 16px; width: 15px;
height: 16px; height: 15px;
}
.conditional-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
} }
.conditional-targets { .conditional-targets {
display: grid; display: grid;
gap: 8px; gap: 6px;
padding: 12px; padding: 10px 12px;
border: 1px solid #e7edf6; border: 1px solid #e7edf6;
border-radius: 14px; border-radius: 12px;
background: #f9fbff; background: #f9fbff;
} }
.conditional-rule-summary { .conditional-rule-summary {
display: grid; display: grid;
gap: 8px; gap: 6px;
padding: 12px; padding: 10px 12px;
border: 1px solid #dbe6f5; border: 1px solid #dbe6f5;
border-radius: 14px; border-radius: 12px;
background: linear-gradient(180deg, #f6faff, #ffffff); background: linear-gradient(180deg, #f6faff, #ffffff);
} }
.conditional-summary-prefix { .conditional-summary-prefix {
color: #294567; color: #294567;
font-size: 12px; font-size: 11px;
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -744,7 +750,7 @@ body {
.conditional-target-label { .conditional-target-label {
color: #5f7089; color: #5f7089;
font-size: 12px; font-size: 11px;
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -763,23 +769,23 @@ body {
.conditional-sentence-builder { .conditional-sentence-builder {
display: grid; display: grid;
gap: 10px; gap: 8px;
} }
.conditional-sentence-row { .conditional-sentence-row {
display: grid; display: grid;
grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.3fr) minmax(160px, 0.9fr) minmax(160px, 0.9fr); grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.3fr) minmax(160px, 0.9fr) minmax(160px, 0.9fr);
gap: 10px; gap: 8px;
align-items: end; align-items: end;
padding: 12px; padding: 10px 12px;
border: 1px solid #e5ebf3; border: 1px solid #e5ebf3;
border-radius: 14px; border-radius: 12px;
background: #f8fbff; background: #f8fbff;
} }
.conditional-sentence-label { .conditional-sentence-label {
color: #33506f; color: #33506f;
font-size: 12px; font-size: 11px;
font-weight: 800; font-weight: 800;
line-height: 1.45; line-height: 1.45;
text-transform: uppercase; text-transform: uppercase;
@@ -789,10 +795,10 @@ body {
.conditional-sentence-row select, .conditional-sentence-row select,
.conditional-sentence-row input[type='text'] { .conditional-sentence-row input[type='text'] {
width: 100%; width: 100%;
min-height: 40px; min-height: 38px;
border: 1px solid #cbd5e1; border: 1px solid #cbd5e1;
border-radius: 10px; border-radius: 10px;
padding: 8px 10px; padding: 7px 9px;
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
} }
@@ -838,16 +844,16 @@ body {
.conditional-extra-clause { .conditional-extra-clause {
border: 1px dashed #d7e0ec; border: 1px dashed #d7e0ec;
border-radius: 14px; border-radius: 12px;
background: #fbfdff; background: #fbfdff;
} }
.conditional-extra-clause summary { .conditional-extra-clause summary {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
padding: 10px 12px; padding: 8px 12px;
color: #35506f; color: #35506f;
font-size: 12px; font-size: 11px;
font-weight: 800; font-weight: 800;
letter-spacing: 0.03em; letter-spacing: 0.03em;
text-transform: uppercase; text-transform: uppercase;
@@ -1392,34 +1398,54 @@ body {
} }
.custom-fields-surface .builder-entity-form { .custom-fields-surface .builder-entity-form {
gap: 10px; gap: 8px;
padding: 14px; padding: 12px;
} }
.custom-fields-surface .builder-entity-grid { .custom-fields-surface .builder-entity-grid {
gap: 10px; gap: 8px;
} }
.custom-fields-surface .builder-group-stack { .custom-fields-surface .builder-group-stack {
gap: 10px; gap: 8px;
} }
.custom-fields-surface .builder-group-card { .custom-fields-surface .builder-group-card {
border-radius: 16px;
}
.custom-fields-surface .builder-group-head {
padding: 10px 12px;
}
.custom-fields-surface .builder-entity-card {
padding: 14px;
gap: 10px;
border-radius: 14px; border-radius: 14px;
} }
.custom-fields-surface .builder-group-head {
padding: 8px 12px;
}
.custom-fields-surface .builder-entity-card {
padding: 11px 12px;
gap: 8px;
border-radius: 12px;
}
.custom-fields-surface .builder-entity-card-head strong { .custom-fields-surface .builder-entity-card-head strong {
font-size: 14px; font-size: 13px;
}
.custom-fields-surface .builder-entity-card-head {
gap: 10px;
}
.custom-fields-surface .builder-switch-stack {
gap: 6px;
}
.custom-fields-surface .builder-entity-control span {
font-size: 11px;
}
.custom-fields-surface .builder-entity-control input[type='text'],
.custom-fields-surface .builder-entity-control input[type='number'],
.custom-fields-surface .builder-entity-control select,
.custom-fields-surface .builder-entity-control textarea {
min-height: 38px;
padding: 7px 9px;
} }
.builder-entity-form { .builder-entity-form {
@@ -1789,6 +1815,10 @@ body {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.conditional-meta-grid {
grid-template-columns: 1fr;
}
.builder-entity-card-head { .builder-entity-card-head {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;

59
backend/workflows/templates/workflows/form_builder.html
View File

@@ -368,34 +368,36 @@
<input type="checkbox" name="conditional_active_{{ item.target_key }}" {% if item.is_active %}checked{% endif %} /> <input type="checkbox" name="conditional_active_{{ item.target_key }}" {% if item.is_active %}checked{% endif %} />
</label> </label>
</div> </div>
<div class="conditional-rule-summary"> <div class="conditional-meta-grid">
<span class="conditional-summary-prefix">{% trans "Sichtbar, wenn" %}</span> <div class="conditional-rule-summary">
<div class="conditional-summary-chips"> <span class="conditional-summary-prefix">{% trans "Sichtbar, wenn" %}</span>
{% with first_clause=item.clauses.0 second_clause=item.clauses.1 %} <div class="conditional-summary-chips">
{% if first_clause.field %} {% with first_clause=item.clauses.0 second_clause=item.clauses.1 %}
<span class="preview-chip">{{ first_clause.field }}</span> {% if first_clause.field %}
<span class="preview-chip">{{ first_clause.operator }}</span> <span class="preview-chip">{{ first_clause.field }}</span>
{% if first_clause.value %}<span class="preview-chip">{{ first_clause.value }}</span>{% endif %} <span class="preview-chip">{{ first_clause.operator }}</span>
{% else %} {% if first_clause.value %}<span class="preview-chip">{{ first_clause.value }}</span>{% endif %}
<span class="preview-chip">{% trans "Keine Bedingung" %}</span> {% else %}
{% endif %} <span class="preview-chip">{% trans "Keine Bedingung" %}</span>
{% if second_clause.field %} {% endif %}
<span class="preview-chip">{% trans "und" %}</span> {% if second_clause.field %}
<span class="preview-chip">{{ second_clause.field }}</span> <span class="preview-chip">{% trans "und" %}</span>
<span class="preview-chip">{{ second_clause.operator }}</span> <span class="preview-chip">{{ second_clause.field }}</span>
{% if second_clause.value %}<span class="preview-chip">{{ second_clause.value }}</span>{% endif %} <span class="preview-chip">{{ second_clause.operator }}</span>
{% endif %} {% if second_clause.value %}<span class="preview-chip">{{ second_clause.value }}</span>{% endif %}
{% endwith %} {% endif %}
{% endwith %}
</div>
</div> </div>
</div> <div class="conditional-targets">
<div class="conditional-targets"> <span class="conditional-target-label">{% trans "Steuert" %}</span>
<span class="conditional-target-label">{% trans "Steuert" %}</span> <div class="conditional-target-chips">
<div class="conditional-target-chips"> {% for field_name in item.target_fields %}
{% for field_name in item.target_fields %} <span class="preview-chip">{{ field_name }}</span>
<span class="preview-chip">{{ field_name }}</span> {% empty %}
{% empty %} <span class="mini">{% trans "Keine Ziel-Felder." %}</span>
<span class="mini">{% trans "Keine Ziel-Felder." %}</span> {% endfor %}
{% endfor %} </div>
</div> </div>
</div> </div>
<div class="conditional-sentence-builder"> <div class="conditional-sentence-builder">
@@ -435,9 +437,6 @@
</details> </details>
{% endwith %} {% endwith %}
</div> </div>
<div class="conditional-clause-list">
<span class="mini">{% trans "Nutzen Sie die zusätzliche Bedingung nur, wenn ein zweites Kriterium wirklich nötig ist." %}</span>
</div>
</section> </section>
{% endif %} {% endif %}
{% endfor %} {% endfor %}