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

feat: placeholder for Select fields

Browse source 
- set select icon for only_input field as well
This commit is contained in:
prssanna 2021-02-23 16:52:06 +05:30
parent 5111387c09
commit 1caca3a3d2
3 changed files with 67 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frappe/public/js/frappe/form/controls/select.js
View file

@ -2,11 +2,36 @@ frappe.ui.form.ControlSelect = frappe.ui.form.ControlData.extend({
html_element: 'select',
make_input: function() {
this._super();
this.$wrapper.find('.control-input')
.addClass('flex align-center')
.append(frappe.utils.icon('select'));
const is_xs_input = this.df.input_class
&& this.df.input_class.includes('input-xs');
this.set_icon(is_xs_input);
this.df.placeholder && this.set_placeholder(is_xs_input);
this.$input.addClass('ellipsis')
this.set_options();
},
set_icon: function(is_xs_input) {
const select_icon_html =
`<div class="select-icon ${is_xs_input ? 'xs' : ''}">
${frappe.utils.icon('select', is_xs_input ? 'xs' : 'sm')}
</div>`
if (this.only_input) {
this.$wrapper.append(select_icon_html);
} else {
this.$wrapper.find('.control-input')
.addClass('flex align-center')
.append(select_icon_html);
}
},
set_placeholder: function(is_xs_input) {
this.$wrapper.append(`
<div class="placeholder ellipsis text-extra-muted ${is_xs_input ? 'xs' : ''}">
<span>${this.df.placeholder}</span>
</div>`
);
this.toggle_placeholder();
},
set_formatted_input: function(value) {
// refresh options first - (new ones??)
if(value==null) value = '';
@ -26,6 +51,7 @@ frappe.ui.form.ControlSelect = frappe.ui.form.ControlData.extend({
// model value must be same as whatever the input is
this.set_model_value(input_value);
}
this.toggle_placeholder();
},
set_options: function(value) {
// reset options, if something new is set
@ -64,6 +90,10 @@ frappe.ui.form.ControlSelect = frappe.ui.form.ControlData.extend({
this.set_description(__("Please attach a file first."));
return [""];
}
},
toggle_placeholder: function() {
const input_set = Boolean(this.$input.val());
this.$wrapper.find('.placeholder').toggle(!input_set);
}
});

4
frappe/public/js/frappe/ui/page.js
View file

@ -771,6 +771,8 @@ frappe.ui.Page = Class.extend({
df.placeholder = df.label;
}
df.input_class = 'input-xs';
var f = frappe.ui.form.make_control({
df: df,
parent: parent || this.page_form,
@ -792,7 +794,7 @@ frappe.ui.Page = Class.extend({
// hidden fields dont have $input
if (!f.$input) f.make_input();
f.$input.addClass("input-xs").attr("placeholder", __(df.label));
f.$input.attr("placeholder", __(df.label));
if(df.fieldtype==="Check") {
$(f.wrapper).find(":first-child")

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

@ -84,7 +84,8 @@ html.firefox, html.safari {
@include card();
}
.frappe-control[data-fieldtype="Select"] .control-input {
.frappe-control[data-fieldtype="Select"] .control-input,
.frappe-control[data-fieldtype="Select"].form-group {
position: relative;
select {
@ -94,14 +95,37 @@ html.firefox, html.safari {
-webkit-appearance: none;
}
.icon {
.select-icon {
padding-left: inherit;
padding-right: inherit;
position: absolute;
top: 8px;
height: 15px;
right: 12px;
pointer-events: none;
use {
stroke: var(--text-muted);
top: 7px;
right: 12px;
&.xs {
top: 3px;
right: 10px;
}
.icon {
use {
stroke: var(--text-muted);
}
}
}
.placeholder {
padding-left: inherit;
padding-right: inherit;
position: absolute;
pointer-events: none;
top: 7px;
left: 12px;
max-width: 80%;
&.xs {
top: 3px;
}
}
}