fix: primary button on the card can be themed
This commit is contained in:
parent
f2b5c3f60f
commit
5e90c5f73b
3 changed files with 34 additions and 13 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue