vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

fix: added label & description to column

Browse source
This commit is contained in:
Shariq Ansari 2023-01-02 20:30:25 +05:30
parent 69af3e883b
commit eac4f2a58c
5 changed files with 115 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
frappe/public/js/form_builder/components/Column.vue
View file

@ -1,6 +1,7 @@
<script setup>
import draggable from "vuedraggable";
import Field from "./Field.vue";
import EditableInput from "./EditableInput.vue";
import { ref } from "vue";
import { useStore } from "../store";
import { move_children_to_parent } from "../utils";
@ -74,25 +75,43 @@ function move_columns_to_section() {
@mouseover.stop="hovered = true"
@mouseout.stop="hovered = false"
>
<div class="column-actions" :hidden="store.read_only">
<button
v-if="section.columns.indexOf(column)"
class="btn btn-xs btn-icon"
:title="__('Move the current column & the following columns to a new section')"
@click="move_columns_to_section"
>
<div v-html="frappe.utils.icon('move', 'sm')"></div>
</button>
<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
<div v-html="frappe.utils.icon('add', 'sm')"></div>
</button>
<button
class="btn btn-xs btn-icon"
:title="__('Remove Column')"
@click="remove_column"
>
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
<div
:class="[
'column-header',
column.df.label ? 'has-label' : '',
]"
:hidden="!column.df.label && store.read_only"
>
<div class="column-label">
<EditableInput
:text="column.df.label"
:placeholder="__('Column Title')"
v-model="column.df.label"
/>
</div>
<div class="column-actions">
<button
v-if="section.columns.indexOf(column)"
class="btn btn-xs btn-icon"
:title="__('Move the current column & the following columns to a new section')"
@click="move_columns_to_section"
>
<div v-html="frappe.utils.icon('move', 'sm')"></div>
</button>
<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
<div v-html="frappe.utils.icon('add', 'sm')"></div>
</button>
<button
class="btn btn-xs btn-icon"
:title="__('Remove Column')"
@click="remove_column"
>
<div v-html="frappe.utils.icon('remove', 'sm')"></div>
</button>
</div>
</div>
<div v-if="column.df.description" class="column-description">
{{ column.df.description }}
</div>
<draggable
class="column-container"
@ -140,7 +159,7 @@ function move_columns_to_section() {
}
&.selected {
.column-actions {
.column-header {
display: flex;
}
@ -149,6 +168,48 @@ function move_columns_to_section() {
}
}
.column-header {
display: none;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5rem;
padding-left: 0.3rem;
&.has-label {
display: flex;
}
.column-label {
:deep(span) {
font-weight: 600;
color: var(--heading-color);
}
}
.column-actions {
display: flex;
justify-content: flex-end;
.btn.btn-icon {
padding: 2px;
box-shadow: none;
opacity: 0;
&:hover {
opacity: 1;
background-color: var(--fg-color);
}
}
}
}
.column-description {
margin-bottom: 10px;
margin-left: 0.3rem;
font-size: var(--text-xs);
color: var(--text-muted);
}
&:first-child {
margin-left: 0px;
}
@ -162,22 +223,5 @@ function move_columns_to_section() {
min-height: 2rem;
border-radius: var(--border-radius);
}
.column-actions {
display: none;
justify-content: flex-end;
padding-bottom: 0.5rem;
.btn.btn-icon {
padding: 2px;
box-shadow: none;
opacity: 0;
&:hover {
opacity: 1;
background-color: var(--fg-color);
}
}
}
}
</style>

8
frappe/public/js/form_builder/components/FormBuilder.vue
View file

@ -223,6 +223,14 @@ onMounted(() => {
padding-right: 15px;
margin: 0;
.column-header {
padding-left: 0;
}
.column-description {
margin-left: 0;
}
.field {
margin: 0;
margin-bottom: 1rem;

1
frappe/public/js/form_builder/components/Section.vue
View file

@ -207,6 +207,7 @@ function move_sections_to_tab() {
:deep(span) {
font-weight: 600;
color: var(--heading-color);
}
.collapse-indicator {

12
frappe/public/js/frappe/form/column.js
View file

@ -19,12 +19,20 @@ export default class Column {
this.form = this.wrapper.find("form").on("submit", () => false);
if (this.df.description) {
$(`
<p class="col-sm-12 form-column-description">
${__(this.df.description)}
</p>
`).prependTo(this.wrapper);
}
if (this.df.label) {
$(`
<label class="control-label">
<label class="column-label">
${__(this.df.label)}
</label>
`).appendTo(this.wrapper);
`).prependTo(this.wrapper);
}
}

15
frappe/public/scss/desk/form.scss
View file

@ -70,6 +70,21 @@
}
}
.form-column {
.form-column-description {
margin-bottom: 10px;
font-size: var(--text-xs);
color: var(--text-muted);
padding-left: 0;
}
.column-label {
font-weight: 600;
color: var(--heading-color);
cursor: pointer;
}
}
.empty-section {
display: none !important;
border: 0 !important;