Set image control alignment via df (#3754)

* image control alignment via df

* [wiz] remove application brand name

frappe/desk/page/setup_wizard/setup_wizard.css

@@ -2,25 +2,6 @@
     margin-top: 30px;
 }
 
-.setup-wizard-brand {
-	margin: 30px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center
-}
-
-.setup-wizard-brand .brand-icon {
-	width: 36px;
-	height: 36px;
-}
-
-.setup-wizard-brand .brand-name {
-	font-size: 20px;
-	margin-left: 8px;
-	color: #36414C;
-}
-
 .setup-wizard-slide {
 	padding-left: 0px;
 	padding-right: 0px;
@@ -59,14 +40,6 @@
 	font-weight: 500;
 }
 
-.setup-wizard-slide .has-error .control-label {
-	color: #ffa00a;
-}
-
-.setup-wizard-slide .has-error .form-control{
-	border-color: #ffa00a;
-}
-
 .setup-wizard-slide .form-control.bold {
 	background-color: #fff;
 }
@@ -113,8 +86,7 @@
 .setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] {
 	width: 140px;
 	height: 180px; /*depends on presence of heading*/
-	text-align: center;
-	margin-left: calc((100% - 140px)/2);
+	margin-top: 20px;
 }
 
 .setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .form-group,

frappe/desk/page/setup_wizard/setup_wizard.js

@@ -78,7 +78,6 @@ frappe.setup.Wizard = Class.extend({
 		</div>', {html:html}))
 	},
 	show_working: function() {
-		$('header').find('.setup-wizard-brand').hide();
 		this.hide_current_slide();
 		frappe.set_route(this.page_name);
 		this.current_slide = {"$wrapper": this.get_message(this.working_html()).appendTo(this.parent)};
@@ -506,7 +505,7 @@ var frappe_slides = [
 		icon: "fa fa-user",
 		fields: [
 			{ "fieldtype":"Attach Image", "fieldname":"attach_user_image",
-				label: __("Attach Your Picture"), is_private: 0},
+				label: __("Attach Your Picture"), is_private: 0, align: 'center'},
 			{ "fieldname": "full_name", "label": __("Full Name"), "fieldtype": "Data",
 				reqd:1},
 			{ "fieldname": "email", "label": __("Email Address") + ' (' + __("Will be your login ID") + ')',
@@ -721,12 +720,4 @@ var utils = {
 frappe.setup.on("before_load", function() {
 	// load slides
 	frappe_slides.map(frappe.setup.add_slide);
-
-	// set header image
-	let $icon = $('header .setup-wizard-brand');
-	if($icon.length === 0) {
-		$('header').append(`<div class="setup-wizard-brand"">
-			<img src="/assets/frappe/images/frappe-bird-grey.svg"
-			class="brand-icon frappe-icon" style="width:36px;"></div>`);
-	}
 });

frappe/public/css/form.css

@@ -515,6 +515,14 @@ h6.uppercase,
   padding: 0px;
   margin: 0px;
 }
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+.flex-justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
 .hide-control {
   display: none !important;
 }

frappe/public/js/frappe/form/control.js

@@ -1241,6 +1241,15 @@ frappe.ui.form.ControlAttachImage = frappe.ui.form.ControlAttach.extend({
 	make: function() {
 		var me = this;
 		this._super();
+
+		this.container = $('<div class="control-container">').appendTo($(this.parent).empty());
+		this.container.attr('data-fieldtype', this.df.fieldtype).append(this.wrapper);
+		if(this.df.align === 'center') {
+			this.container.addClass("flex-justify-center");
+		} else if (this.df.align === 'right') {
+			this.container.addClass("flex-justify-end");
+		}
+
 		this.img_wrapper = $('<div style="width: 100%; height: calc(100% - 40px); position: relative;">\
 			<div class="missing-image attach-missing-image"><i class="octicon octicon-device-camera"></i></div></div>')
 			.appendTo(this.wrapper);

frappe/public/less/form.less

@@ -650,6 +650,16 @@ h6.uppercase, .h6.uppercase {
 	}
 }
 
+.flex-justify-center {
+	display: flex;
+    justify-content: center;
+}
+
+.flex-justify-end {
+	display: flex;
+    justify-content: flex-end;
+}
+
 .hide-control {
 	display: none !important;
 }