[design] column picker and other minor fixes
This commit is contained in:
Anand Doshi
parent
756af9af97
commit
5f5bd707a4
12 changed files with 144 additions and 77 deletions
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -115,6 +115,7 @@
|
|||
margin-top: 3px;
|
||||
}
|
||||
.list-row-right .list-row-modified {
|
||||
margin-right: 9px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.list-row-right {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;">×</a>\
|
||||
var me = this;
|
||||
|
||||
var w = $('<div class="column-list-item">\
|
||||
<i class="icon icon-sort text-muted drag-handle"></i>\
|
||||
<a class="close">×</a>\
|
||||
</div>')
|
||||
.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();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue