Styling for Attach control (#4340)

* Update attach.js

* Add attach control styling to form.less

* Add margin

frappe/public/css/form.css

@@ -718,3 +718,12 @@ select.form-control {
 body[data-route^="Form/Communication"] textarea[data-fieldname="subject"] {
   height: 80px !important;
 }
+.frappe-control[data-fieldtype="Attach"] .attached-file {
+  position: relative;
+  margin-top: 5px;
+}
+.frappe-control[data-fieldtype="Attach"] .attached-file .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

frappe/public/js/frappe/form/controls/attach.js

@@ -7,12 +7,14 @@ frappe.ui.form.ControlAttach = frappe.ui.form.ControlData.extend({
 			.on("click", function() {
 				me.onclick();
 			});
-		this.$value = $('<div style="margin-top: 5px;">\
-			<div class="ellipsis" style="display: inline-block; width: 90%;">\
-				<i class="fa fa-paperclip"></i> \
-				<a class="attached-file" target="_blank"></a>\
-			</div>\
-			<a class="close" style="position: absolute; right: 15px;">&times;</a></div>')
+		this.$value = $(
+			`<div class="attached-file">
+				<div class="ellipsis">
+					<i class="fa fa-paperclip"></i>
+					<a class="attached-file-link" target="_blank"></a>
+				</div>
+				<a class="close">&times;</a>
+			</div>`)
 			.prependTo(me.input_area)
 			.toggle(false);
 		this.input = this.$input.get(0);
@@ -156,7 +158,7 @@ frappe.ui.form.ControlAttach = frappe.ui.form.ControlData.extend({
 				var filename = parts[0];
 				dataurl = parts[1];
 			}
-			this.$value.toggle(true).find(".attached-file")
+			this.$value.toggle(true).find(".attached-file-link")
 				.html(filename || this.value)
 				.attr("href", dataurl || this.value);
 		} else {

frappe/public/less/form.less

@@ -913,4 +913,15 @@ body[data-route^="Form/Communication"] textarea[data-fieldname="subject"] {
 	height: 80px !important;
 }
 
+.frappe-control[data-fieldtype="Attach"] {
+	.attached-file {
+		position: relative;
+		margin-top: 5px;
 
+		.close {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+	}
+}