feat: add color property to button field

This commit is contained in:
Pugazhendhi Velu 2025-11-11 20:30:41 +00:00
parent 5a5f8924bf
commit e6ebd6ec15
9 changed files with 62 additions and 4 deletions

View file

@ -32,6 +32,7 @@
"fetch_from",
"fetch_if_empty",
"visibility_section",
"button_color",
"hidden",
"show_on_timeline",
"bold",
@ -617,6 +618,13 @@
"fieldname": "mask",
"fieldtype": "Check",
"label": "Mask"
},
{
"depends_on": "eval:doc.fieldtype===\"Button\"",
"fieldname": "button_color",
"fieldtype": "Select",
"label": "Button Color",
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
}
],
"grid_page_length": 50,

View file

@ -18,6 +18,7 @@ class DocField(Document):
allow_in_quick_entry: DF.Check
allow_on_submit: DF.Check
bold: DF.Check
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
collapsible: DF.Check
collapsible_depends_on: DF.Code | None
columns: DF.Int

View file

@ -19,6 +19,7 @@
"link_filters",
"column_break_6",
"fieldtype",
"button_color",
"precision",
"hide_seconds",
"hide_days",
@ -467,6 +468,13 @@
"fieldname": "placeholder",
"fieldtype": "Data",
"label": "Placeholder"
},
{
"depends_on": "eval:doc.fieldtype===\"Button\"",
"fieldname": "button_color",
"fieldtype": "Select",
"label": "Button Color",
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
}
],
"grid_page_length": 50,
@ -474,7 +482,7 @@
"idx": 1,
"index_web_pages_for_search": 1,
"links": [],
"modified": "2025-10-10 11:10:23.862393",
"modified": "2025-11-12 01:14:24.753774",
"modified_by": "Administrator",
"module": "Custom",
"name": "Custom Field",

View file

@ -25,6 +25,7 @@ class CustomField(Document):
allow_in_quick_entry: DF.Check
allow_on_submit: DF.Check
bold: DF.Check
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
collapsible: DF.Check
collapsible_depends_on: DF.Code | None
columns: DF.Int

View file

@ -806,6 +806,7 @@ docfield_properties = {
"is_virtual": "Check",
"link_filters": "JSON",
"placeholder": "Data",
"button_color": "Select",
}
doctype_link_properties = {

View file

@ -54,6 +54,7 @@
"column_break_33",
"read_only_depends_on",
"display",
"button_color",
"in_filter",
"hide_seconds",
"hide_days",
@ -485,6 +486,13 @@
"fieldname": "placeholder",
"fieldtype": "Data",
"label": "Placeholder"
},
{
"depends_on": "eval:doc.fieldtype===\"Button\"",
"fieldname": "button_color",
"fieldtype": "Select",
"label": "Button Color",
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
}
],
"grid_page_length": 50,
@ -492,7 +500,7 @@
"index_web_pages_for_search": 1,
"istable": 1,
"links": [],
"modified": "2025-10-14 13:56:58.033573",
"modified": "2025-11-12 01:13:53.053888",
"modified_by": "Administrator",
"module": "Custom",
"name": "Customize Form Field",

View file

@ -17,6 +17,7 @@ class CustomizeFormField(Document):
allow_in_quick_entry: DF.Check
allow_on_submit: DF.Check
bold: DF.Check
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
collapsible: DF.Check
collapsible_depends_on: DF.Code | None
columns: DF.Int

View file

@ -1,6 +1,22 @@
<!-- Used as Button & Heading Control -->
<script setup>
import { computed } from "vue";
const props = defineProps(["df", "value"]);
const button_class = computed(() => {
const color_map = {
Default: "btn-default",
Primary: "btn-primary",
Info: "btn-info",
Success: "btn-success",
Warning: "btn-warning",
Danger: "btn-danger",
};
const color = props.df.button_color ?? "Default";
return `btn btn-xs ${color_map[color] || color_map.Default}`;
});
</script>
<template>
@ -10,7 +26,7 @@ const props = defineProps(["df", "value"]);
<h4 v-if="df.fieldtype == 'Heading'">
<slot name="label" />
</h4>
<button v-else class="btn btn-xs btn-default">
<button v-else :class="button_class">
<slot name="label" />
</button>
<slot name="actions" />

View file

@ -5,7 +5,21 @@ frappe.ui.form.ControlButton = class ControlButton extends frappe.ui.form.Contro
}
make_input() {
var me = this;
const btn_type = this.df.primary ? "btn-primary" : "btn-default";
let btn_type = "btn-default";
if (this.df.button_color) {
const color_map = {
Default: "btn-default",
Primary: "btn-primary",
Info: "btn-info",
Success: "btn-success",
Warning: "btn-warning",
Danger: "btn-danger",
};
btn_type = color_map[this.df.button_color] || "btn-default";
} else if (this.df.primary) {
btn_type = "btn-primary";
}
const btn_size = this.df.btn_size ? `btn-${this.df.btn_size}` : "btn-xs";
this.$input = $(
`<button