[design] column picker and other minor fixes

frappe/core/page/desktop/desktop_icon_grid.html

@@ -1,4 +1,4 @@
-<div style="text-align: center; padding-top: calc(25px + 4%)">
+<div style="text-align: center; padding-top: calc(40px + 3%)">
 	<div id="icon-grid">
 		{% for (var i=0, l=desktop_items.length; i < l; i++) {
 			var module = frappe.get_module(desktop_items[i]);

frappe/public/css/desk.css

@@ -181,19 +181,23 @@ ul.linked-with-list li {
 .ui-autocomplete .ui-menu-item a:active {
   color: inherit;
 }
-.ui-widget-content {
+.ui-datepicker,
+.ui-autocomplete {
   border-radius: 0px 0px 4px 4px;
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
   border-color: #d1d8dd;
   padding: 0px;
 }
-.ui-widget-content .ui-state-focus,
-.ui-widget-content .ui-state-hover {
+.ui-datepicker .ui-state-focus,
+.ui-autocomplete .ui-state-focus,
+.ui-datepicker .ui-state-hover,
+.ui-autocomplete .ui-state-hover {
   background-color: #f0f4f7 !important;
   color: #36414c !important;
   text-shadow: none !important;
 }
-.ui-widget-content .ui-state-active {
+.ui-datepicker .ui-state-active,
+.ui-autocomplete .ui-state-active {
   background-color: #5e64ff !important;
   color: #fff !important;
   text-shadow: none !important;

frappe/public/css/form_grid.css

@@ -9,8 +9,9 @@
 }
 .grid-row {
   border-bottom: 1px solid #d1d8dd;
-  transition: 0.2s;
   -webkit-transition: 0.2s;
+  -o-transition: 0.2s;
+  transition: 0.2s;
 }
 .grid-row:last-child {
   border: none;
@@ -62,17 +63,14 @@
   position: relative;
   overflow: hidden;
   max-height: 0;
-  transform: scale3d(0.9, 0, 1);
-  -webkit-transform: scale3d(0.9, 0, 1);
-  transform-origin: top;
-  -webkit-transform-origin: top;
-  transition: all 0.2s ease;
-  -webkit-transition: all 0.2s ease;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease;
+  -o-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 .grid-row-open .form-in-grid {
+  opacity: 1;
   max-height: 10000px;
-  transform: scale3d(1, 1, 1);
-  -webkit-transform: scale3d(1, 1, 1);
 }
 .grid-form-heading {
   padding: 10px 15px;

frappe/public/css/list.css

@@ -115,6 +115,7 @@
   margin-top: 3px;
 }
 .list-row-right .list-row-modified {
+  margin-right: 9px;
   margin-top: 3px;
 }
 .list-row-right {

frappe/public/css/report.css

@@ -111,3 +111,31 @@ th.fc-widget-header {
   /* default BORDER color */
   background-color: #E8DDFF !important;
 }
+.column-picker-dialog .column-list {
+  margin: 15px -15px;
+  border-top: 1px solid #d1d8dd;
+  border-bottom: 1px solid #d1d8dd;
+}
+.column-picker-dialog .column-list .column-list-item {
+  padding: 10px;
+  cursor: move;
+  border-bottom: 1px solid #d1d8dd;
+}
+.column-picker-dialog .column-list .column-list-item:last-child {
+  border-bottom: none;
+}
+.column-picker-dialog .column-list .drag-handle {
+  margin: 0px 7px;
+  position: relative;
+  top: -1px;
+}
+.column-picker-dialog .column-list .form-control {
+  display: inline-block;
+  width: 89%;
+}
+.column-picker-dialog .column-list .close {
+  margin: 2px 7px 0px;
+}
+.column-picker-dialog .add-btn {
+  margin-bottom: 2px;
+}

frappe/public/js/frappe/list/list_item_row.html

@@ -41,7 +41,7 @@
 	        </span>
 		</div>
 		<div class="pull-right list-row-modified">
-            <span class="text-muted" style="margin-right: 10px;">
+            <span class="text-muted">
                 {%= comment_when(data.modified, true) %}</span>
 		</div>
     </div>

frappe/public/js/frappe/views/calendar.js

@@ -34,9 +34,12 @@ frappe.views.Calendar = Class.extend({
 		this.parent = frappe.make_page();
 		this.page = this.parent.page;
 		var module = locals.DocType[this.doctype].module;
-		this.page.set_title(__("Calendar") + " - " + __(this.doctype),
-			frappe.get_module("Calendar").icon);
-		frappe.add_breadcrumbs(module==="Core" ? "Calendar" : module, this.doctype)
+		this.page.set_title(__("Calendar") + " - " + __(this.doctype));
+
+		if (module !== "Desk") {
+			frappe.add_breadcrumbs(module, this.doctype)
+		}
+
 		this.page.set_primary_action(__("New"), function() {
 			var doc = frappe.model.get_new_doc(me.doctype);
 			frappe.set_route("Form", me.doctype, doc.name);

frappe/public/js/frappe/views/reports/reportview.js

@@ -591,12 +591,10 @@ frappe.ui.ColumnPicker = Class.extend({
 	},
 	clear: function() {
 		this.columns = [];
-		$(this.dialog.body).html('<div class="help">'+__("Drag to sort columns")+'</div>\
+		$(this.dialog.body).html('<div class="text-muted">'+__("Drag to sort columns")+'</div>\
 			<div class="column-list"></div>\
 			<div><button class="btn btn-default btn-add"><i class="icon-plus"></i>\
-				'+__("Add Column")+'</button></div>\
-			<hr>\
-			<div><button class="btn btn-primary">'+__("Update")+'</div>');
+				'+__("Add Column")+'</button></div>');
 
 	},
 	show: function(columns) {
@@ -604,18 +602,25 @@ frappe.ui.ColumnPicker = Class.extend({
 		if(!this.dialog) {
 			this.dialog = new frappe.ui.Dialog({
 				title: __("Pick Columns"),
-				width: '400'
+				width: '400',
+				primary_action_label: __("Update"),
+				primary_action: function() {
+					me.update_column_selection();
+				}
 			});
+			this.dialog.$wrapper.addClass("column-picker-dialog");
 		}
 
 		this.clear();
 
+		this.column_list = $(this.dialog.body).find('.column-list');
+
 		// show existing
 		$.each(columns, function(i, c) {
 			me.add_column(c);
 		});
 
-		new Sortable($(this.dialog.body).find('.column-list').get(0), {
+		new Sortable(this.column_list.get(0), {
 			onUpdate: function(event) {
 				me.columns = [];
 				$.each($(me.dialog.body).find('.column-list .column-list-item'),
@@ -630,45 +635,40 @@ frappe.ui.ColumnPicker = Class.extend({
 			me.add_column(['name']);
 		});
 
-		// update
-		$(this.dialog.body).find('.btn-primary').click(function() {
-			me.dialog.hide();
-			// selected columns as list of [column_name, table_name]
-			var columns = $.map(me.columns, function(v) {
-				return v ? [[v.selected_fieldname, v.selected_doctype]] : null;
-			});
-
-			frappe.defaults.set_default("_list_settings:" + me.doctype, columns);
-			me.list.columns = columns;
-			me.list.run();
-		});
-
 		this.dialog.show();
 	},
 	add_column: function(c) {
 		if(!c) return;
-		var w = $('<div style="padding: 5px; background-color: #eee; \
-			width: 90%; margin-bottom: 10px; border-radius: 3px; cursor: move;" class="column-list-item">\
-			<img src="assets/frappe/images/ui/drag-handle.png" style="margin-right: 10px;">\
-			<a class="close" style="margin-top: 5px;">&times</a>\
-			</div>')
-			.appendTo($(this.dialog.body).find('.column-list'));
-
-		var fieldselect = new frappe.ui.FieldSelect({parent:w, doctype:this.doctype}),
-			me = this;
+		var me = this;
 
-		fieldselect.$select.css({"display": "inline"});
+		var w = $('<div class="column-list-item">\
+				<i class="icon icon-sort text-muted drag-handle"></i>\
+				<a class="close">&times;</a>\
+			</div>')
+			.appendTo(this.column_list);
 
-		fieldselect.$select.css({width: '70%', 'margin-top':'5px'})
+		var fieldselect = new frappe.ui.FieldSelect({parent:w, doctype:this.doctype});
 		fieldselect.val((c[1] || this.doctype) + "." + c[0]);
 
 		w.data("fieldselect", fieldselect);
 
-		w.find('.close').data("fieldselect", fieldselect).click(function() {
-			delete me.columns[me.columns.indexOf($(this).data('fieldselect'))];
-			$(this).parent().remove();
-		});
+		w.find('.close').data("fieldselect", fieldselect)
+			.click(function() {
+				delete me.columns[me.columns.indexOf($(this).data('fieldselect'))];
+				$(this).parent().remove();
+			});
 
 		this.columns.push(fieldselect);
+	},
+	update_column_selection: function() {
+		this.dialog.hide();
+		// selected columns as list of [column_name, table_name]
+		var columns = $.map(this.columns, function(v) {
+			return v ? [[v.selected_fieldname, v.selected_doctype]] : null;
+		});
+
+		frappe.defaults.set_default("_list_settings:" + this.doctype, columns);
+		this.list.columns = columns;
+		this.list.run();
 	}
 });

frappe/public/less/desk.less

@@ -209,25 +209,26 @@ ul.linked-with-list li {
 	}
 }
 
-.ui-widget-content {
+.ui-datepicker,
+.ui-autocomplete {
 	// only rounded bottoms
 	border-radius: 0px 0px 4px 4px;
 	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
 	border-color: @border-color;
 	padding: 0px;
-}
 
-.ui-widget-content .ui-state-focus,
-.ui-widget-content .ui-state-hover {
-	background-color: @btn-bg !important;
-	color: @text-color !important;
-	text-shadow: none !important;
-}
+	.ui-state-focus,
+	.ui-state-hover {
+		background-color: @btn-bg !important;
+		color: @text-color !important;
+		text-shadow: none !important;
+	}
 
-.ui-widget-content .ui-state-active {
-	background-color: @brand-primary !important;
-	color: #fff !important;
-	text-shadow: none !important;
+	.ui-state-active {
+		background-color: @brand-primary !important;
+		color: #fff !important;
+		text-shadow: none !important;
+	}
 }
 
 .ui-menu .ui-menu-item {

frappe/public/less/form_grid.less

@@ -1,4 +1,5 @@
 @import "variables.less";
+@import "mixins.less";
 
 .form-grid {
 	border: 1px solid @border-color;
@@ -13,8 +14,7 @@
 
 .grid-row {
 	border-bottom: 1px solid @border-color;
-	transition: 0.2s;
-	-webkit-transition: 0.2s;
+	.transition(.2s);
 }
 
 .grid-row:last-child {
@@ -76,21 +76,13 @@
 	position: relative;
 	overflow: hidden;
 	max-height: 0;
-
-	transform: scale3d(0.9, 0, 1);
-	-webkit-transform: scale3d(0.9, 0, 1);
-
-	transform-origin: top;
-	-webkit-transform-origin: top;
-
-	transition: all 0.2s ease;
-	-webkit-transition: all 0.2s ease;
+	opacity: 0;
+	.transition(opacity .2s ease)
 }
 
 .grid-row-open .form-in-grid {
+	opacity: 1;
 	max-height: 10000px;
-	transform: scale3d(1, 1, 1);
-	-webkit-transform: scale3d(1, 1, 1);
 }
 
 .grid-form-heading {

frappe/public/less/list.less

@@ -148,6 +148,7 @@
 }
 
 .list-row-right .list-row-modified {
+	margin-right: 9px;
 	margin-top: 3px;
 }
 
@@ -190,3 +191,4 @@
 .list-value {
 	vertical-align: middle;
 }
+

frappe/public/less/report.less

@@ -126,3 +126,41 @@ th.fc-widget-header {
 	border: 1px solid #E8DDFF !important; /* default BORDER color */
 	background-color: #E8DDFF !important;
 }
+
+// column picker
+.column-picker-dialog {
+	.column-list {
+		margin: 15px -15px;
+		border-top: 1px solid @border-color;
+		border-bottom: 1px solid @border-color;
+
+		.column-list-item {
+			padding: 10px;
+			cursor: move;
+			border-bottom: 1px solid @border-color;
+		}
+
+		.column-list-item:last-child {
+			border-bottom: none;
+		}
+
+		.drag-handle {
+			margin: 0px 7px;
+			position: relative;
+			top: -1px;
+		}
+
+		.form-control {
+			display: inline-block;
+			width: 89%;
+		}
+
+		.close {
+			margin: 2px 7px 0px;
+		}
+	}
+
+	.add-btn {
+		margin-bottom: 2px;
+	}
+}