From 1caca3a3d262bef862055e7edb366cf7a2bd8d3d Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Tue, 23 Feb 2021 16:52:06 +0530
Subject: [PATCH] feat: placeholder for Select fields

- set select icon for only_input field as well
---
 .../public/js/frappe/form/controls/select.js  | 36 ++++++++++++++++--
 frappe/public/js/frappe/ui/page.js            |  4 +-
 frappe/public/scss/common/global.scss         | 38 +++++++++++++++----
 3 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/frappe/public/js/frappe/form/controls/select.js b/frappe/public/js/frappe/form/controls/select.js
index f1655502ae..bab1de4d4d 100644
--- a/frappe/public/js/frappe/form/controls/select.js
+++ b/frappe/public/js/frappe/form/controls/select.js
@@ -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);
 	}
 });
 
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index 1dad29132b..705d1ac8cd 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -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")
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 12dd5dfe7b..cdb2c23558 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -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;
 		}
 	}
 }