fix: primary button on the card can be themed

This commit is contained in:
sokumon 2026-02-06 15:41:04 +05:30
parent f2b5c3f60f
commit 5e90c5f73b
3 changed files with 34 additions and 13 deletions

View file

@ -230,16 +230,24 @@ frappe.ui.form.ControlInput = class ControlInput extends frappe.ui.form.Control
.on("click", (event) => {
event.preventDefault();
me.$info_card.html("");
let card = new frappe.ui.SidebarCard({
// title: "Trial ends in 3 days",
// icon: "info",
let card_args = {
message: me.df.description,
parent: me.$info_card,
// primary_action_icon: "zap",
// primary_action_label: "Upgrade",
close_button: true,
// primary_action: () => {},
});
};
if (me.df.documentation_url) {
card_args.primary_action_label = "Read More";
card_args.primary_action_suffix_icon = "square-arrow-out-up-right";
card_args.primary_action = function () {
window.open(me.df.documentation_url);
};
$(":root").css({
"--sidebar-card-button-bg-color": "var(--surface-gray-2)",
"--sidebar-card-button-color": "var(--ink-gray-7)",
"--sidebar-card-button-outline": "var(--ink-gray-7)",
});
}
let card = new frappe.ui.SidebarCard(card_args);
if (me.info_card_display) {
me.info_card_display = false;
me.$info_card.removeAttr("data-show");

View file

@ -18,6 +18,14 @@
</div>
{% } %}
{% if(card.primary_action_label) { %}
<button class="sidebar-card-button btn">{{ frappe.utils.icon(card.primary_action_icon, "sm", "", "", "", true) }}{{ card.primary_action_label }}</button>
<button class="sidebar-card-button btn">
{% if (card.primary_action_icon) %}
{{ frappe.utils.icon(card.primary_action_icon, "sm", "", "", "", true) }}
{% } %}
{{ card.primary_action_label }}
{% if card.primary_action_suffix_icon %}
{{ frappe.utils.icon(card.primary_action_suffix_icon, "sm", "", "", "", true) }}
{% endif %}
</button>
{% } %}
</div>

View file

@ -1,3 +1,8 @@
:root {
--sidebar-card-button-outline: var(--surface-blue-3);
--sidebar-card-button-bg-color: var(var(--surface-blue-2));
--sidebar-card-button-color: var(--ink-blue-3);
}
.card-title-container {
display: flex;
align-items: center;
@ -33,16 +38,16 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--surface-blue-2);
color: var(--ink-blue-3);
background-color: var(--sidebar-card-button-bg-color);
color: var(--sidebar-card-button-color);
gap: 4px;
svg {
stroke: var(--ink-blue-3);
stroke: var(--sidebar-card-button-color);
margin: 0px;
}
}
.sidebar-card-button:hover,
.sidebar-card-button:focus {
outline: 1px solid var(--surface-blue-3);
color: var(--ink-blue-3);
outline: 1px solid var(--sidebar-card-button-outline);
color: var(--sidebar-card-button-color);
}