From 5f5bd707a45ea9dcf8beb90cb28f56a72c844022 Mon Sep 17 00:00:00 2001 From: Anand Doshi Date: Fri, 6 Feb 2015 12:29:26 +0530 Subject: [PATCH] [design] column picker and other minor fixes --- .../core/page/desktop/desktop_icon_grid.html | 2 +- frappe/public/css/desk.css | 12 ++-- frappe/public/css/form_grid.css | 16 ++--- frappe/public/css/list.css | 1 + frappe/public/css/report.css | 28 ++++++++ .../public/js/frappe/list/list_item_row.html | 2 +- frappe/public/js/frappe/views/calendar.js | 9 ++- .../js/frappe/views/reports/reportview.js | 68 +++++++++---------- frappe/public/less/desk.less | 25 +++---- frappe/public/less/form_grid.less | 18 ++--- frappe/public/less/list.less | 2 + frappe/public/less/report.less | 38 +++++++++++ 12 files changed, 144 insertions(+), 77 deletions(-) diff --git a/frappe/core/page/desktop/desktop_icon_grid.html b/frappe/core/page/desktop/desktop_icon_grid.html index c6f665384a..474b07f149 100644 --- a/frappe/core/page/desktop/desktop_icon_grid.html +++ b/frappe/core/page/desktop/desktop_icon_grid.html @@ -1,4 +1,4 @@ -
+
{% for (var i=0, l=desktop_items.length; i < l; i++) { var module = frappe.get_module(desktop_items[i]); diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index ce8b980bfb..002f1e9e95 100644 --- a/frappe/public/css/desk.css +++ b/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; diff --git a/frappe/public/css/form_grid.css b/frappe/public/css/form_grid.css index 66e36d59aa..9e3639952c 100644 --- a/frappe/public/css/form_grid.css +++ b/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; diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css index 5191293343..64d5adee77 100644 --- a/frappe/public/css/list.css +++ b/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 { diff --git a/frappe/public/css/report.css b/frappe/public/css/report.css index dc8f7ef542..a8b2f28055 100644 --- a/frappe/public/css/report.css +++ b/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; +} diff --git a/frappe/public/js/frappe/list/list_item_row.html b/frappe/public/js/frappe/list/list_item_row.html index a5bbaba7a9..09916c15a3 100644 --- a/frappe/public/js/frappe/list/list_item_row.html +++ b/frappe/public/js/frappe/list/list_item_row.html @@ -41,7 +41,7 @@
- + {%= comment_when(data.modified, true) %}
diff --git a/frappe/public/js/frappe/views/calendar.js b/frappe/public/js/frappe/views/calendar.js index f63f62056c..7b044cc189 100644 --- a/frappe/public/js/frappe/views/calendar.js +++ b/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); diff --git a/frappe/public/js/frappe/views/reports/reportview.js b/frappe/public/js/frappe/views/reports/reportview.js index 0d4d41f8bb..031edf752c 100644 --- a/frappe/public/js/frappe/views/reports/reportview.js +++ b/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('
'+__("Drag to sort columns")+'
\ + $(this.dialog.body).html('
'+__("Drag to sort columns")+'
\
\
\ -
\ -
'); + '+__("Add Column")+'
'); }, 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 = $('
\ - \ - ×\ + var me = this; + + var w = $('
\ + \ + ×\
') - .appendTo($(this.dialog.body).find('.column-list')); + .appendTo(this.column_list); - var fieldselect = new frappe.ui.FieldSelect({parent:w, doctype:this.doctype}), - me = this; - - fieldselect.$select.css({"display": "inline"}); - - 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(); } }); diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index a76c7d4712..0b5d59e4fb 100644 --- a/frappe/public/less/desk.less +++ b/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 { diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less index f639f5b819..25cad93902 100644 --- a/frappe/public/less/form_grid.less +++ b/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 { diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less index 3329dc09a7..b96758939c 100644 --- a/frappe/public/less/list.less +++ b/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; } + diff --git a/frappe/public/less/report.less b/frappe/public/less/report.less index 2fe2d38761..52a5715197 100644 --- a/frappe/public/less/report.less +++ b/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; + } +}