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

fix: Changed shorcut widgets color picker to dropdown

Browse source 
(cherry picked from commit 509d482541)
This commit is contained in:
shariquerik 2021-04-30 12:12:23 +05:30 • committed by mergify-bot
parent 1722d2f863
commit 8a6fb8d535
3 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frappe/public/js/frappe/widgets/shortcut_widget.js
View file

@ -2,7 +2,6 @@ import Widget from "./base_widget.js";
frappe.provide("frappe.utils");
const INDICATOR_COLORS = ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan", "Teal"];
export default class ShortcutWidget extends Widget {
constructor(opts) {
opts.shadow = true;
@ -79,7 +78,7 @@ export default class ShortcutWidget extends Widget {
this.action_area.empty();
const label = get_label();
let color = INDICATOR_COLORS.includes(this.color) && count ? this.color.toLowerCase() : 'gray';
let color = this.color && count ? this.color.toLowerCase() : 'gray';
$(`<div class="indicator-pill ellipsis ${color}">${label}</div>`).appendTo(this.action_area);
}
}

12
frappe/public/js/frappe/widgets/widget_dialog.js
View file

@ -237,9 +237,19 @@ class ShortcutDialog extends WidgetDialog {
hidden: 1,
},
{
fieldtype: "Color",
fieldtype: "Select",
fieldname: "color",
label: __("Color"),
options: ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan", "Teal"],
default: "Grey",
onchange: () => {
let color = this.dialog.fields_dict.color.value.toLowerCase();
let $select = this.dialog.fields_dict.color.$input;
if (!$select.parent().find('.color-box').get(0)) {
$(`<div class="color-box"></div>`).insertBefore($select.get(0));
}
$select.parent().find('.color-box').get(0).style.backgroundColor = color;
}
},
{
fieldtype: "Column Break",

16
frappe/public/scss/common/global.scss
View file

@ -76,6 +76,22 @@ input[type="checkbox"] {
@include card();
}
.frappe-control[data-fieldtype="Select"].frappe-control[data-fieldname="color"] {
select {
padding-left: 40px;
}
.color-box {
position: absolute;
top: calc(50% - 11px);
left: 8px;
width: 22px;
height: 22px;
border-radius: 5px;
z-index: 1;
}
}
.frappe-control[data-fieldtype="Select"] .control-input,
.frappe-control[data-fieldtype="Select"].form-group {
position: relative;