Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
Suraj Shetty
commit
9979bd0251
9 changed files with 131 additions and 159 deletions
|
|
@ -58,6 +58,8 @@
|
|||
<div class="dropdown-search">
|
||||
<input type="text" placeholder="Search" data-element="search" class="form-control input-xs">
|
||||
</div>
|
||||
<div class="stat-result">
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="sidebar-action show-tags">
|
||||
|
|
|
|||
|
|
@ -47,10 +47,6 @@ frappe.views.ListSidebar = class ListSidebar {
|
|||
});
|
||||
}
|
||||
|
||||
get_cat_tags() {
|
||||
return this.cat_tags;
|
||||
}
|
||||
|
||||
get_stats() {
|
||||
var me = this;
|
||||
frappe.call({
|
||||
|
|
@ -63,74 +59,40 @@ frappe.views.ListSidebar = class ListSidebar {
|
|||
filters: (me.list_view.filter_area ? me.list_view.get_filters_for_args() : me.default_filters) || []
|
||||
},
|
||||
callback: function(r) {
|
||||
me.render_stat("_user_tags", (r.message.stats || {})["_user_tags"]);
|
||||
me.render_stat((r.message.stats || {})["_user_tags"]);
|
||||
let stats_dropdown = me.sidebar.find('.list-stats-dropdown');
|
||||
frappe.utils.setup_search(stats_dropdown, '.stat-link', '.stat-label');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render_stat(field, stat, tags) {
|
||||
var me = this;
|
||||
var sum = 0;
|
||||
var stats = [];
|
||||
var label = frappe.meta.docfield_map[this.doctype][field] ?
|
||||
frappe.meta.docfield_map[this.doctype][field].label : field;
|
||||
|
||||
stat = (stat || []).sort(function(a, b) {
|
||||
return b[1] - a[1];
|
||||
});
|
||||
$.each(stat, function(i, v) {
|
||||
sum = sum + v[1];
|
||||
});
|
||||
|
||||
if (tags) {
|
||||
for (var t in tags) {
|
||||
var nfound = -1;
|
||||
for (var i in stat) {
|
||||
if (tags[t] === stat[i][0]) {
|
||||
stats.push(stat[i]);
|
||||
nfound = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (nfound < 0) {
|
||||
stats.push([tags[t], 0]);
|
||||
} else {
|
||||
me.tempstats["_user_tags"].splice(nfound, 1);
|
||||
}
|
||||
}
|
||||
field = "_user_tags";
|
||||
} else {
|
||||
stats = stat;
|
||||
}
|
||||
var context = {
|
||||
field: field,
|
||||
stat: stats,
|
||||
sum: sum,
|
||||
label: field === '_user_tags' ? (tags ? __(label) : __("Tags")) : __(label),
|
||||
render_stat(stats) {
|
||||
let args = {
|
||||
stats: stats,
|
||||
label: __("Tags")
|
||||
};
|
||||
$(frappe.render_template("list_sidebar_stat", context))
|
||||
.on("click", ".stat-link", function() {
|
||||
var fieldname = $(this).attr('data-field');
|
||||
var label = $(this).attr('data-label');
|
||||
var condition = "like";
|
||||
var existing = me.list_view.filter_area.filter_list.get_filter(fieldname);
|
||||
if(existing) {
|
||||
existing.remove();
|
||||
}
|
||||
if (label == "No Tags") {
|
||||
label = "%,%";
|
||||
condition = "not like";
|
||||
}
|
||||
me.list_view.filter_area.add(
|
||||
me.doctype,
|
||||
fieldname,
|
||||
condition,
|
||||
label
|
||||
);
|
||||
})
|
||||
.appendTo(this.sidebar.find(".list-stats-dropdown"));
|
||||
|
||||
let tag_list = $(frappe.render_template("list_sidebar_stat", args)).on("click", ".stat-link", (e) => {
|
||||
let fieldname = $(e.currentTarget).attr('data-field');
|
||||
let label = $(e.currentTarget).attr('data-label');
|
||||
let condition = "like";
|
||||
let existing = this.list_view.filter_area.filter_list.get_filter(fieldname);
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
}
|
||||
if (label == "No Tags") {
|
||||
label = "%,%";
|
||||
condition = "not like";
|
||||
}
|
||||
this.list_view.filter_area.add(
|
||||
this.doctype,
|
||||
fieldname,
|
||||
condition,
|
||||
label
|
||||
);
|
||||
});
|
||||
|
||||
this.sidebar.find(".list-stats-dropdown .stat-result").html(tag_list);
|
||||
}
|
||||
|
||||
set_fieldtype(df) {
|
||||
|
|
@ -164,8 +126,4 @@ frappe.views.ListSidebar = class ListSidebar {
|
|||
this.sidebar.find(".stat-no-records").remove();
|
||||
this.get_stats();
|
||||
}
|
||||
|
||||
get_divider() {
|
||||
return $('<li role="separator" class="divider"></li>');
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
|
||||
{% if(!stat.length) { %}
|
||||
{% if (!stats.length) { %}
|
||||
<li class="stat-no-records text-muted">{{ __("No records tagged.") }}</li>
|
||||
{% } else {
|
||||
for (var i=0, l=stat.length; i < l; i++) {
|
||||
var stat_label = stat[i][0];
|
||||
var stat_count = stat[i][1];
|
||||
for (var i=0, l=stats.length; i < l; i++) {
|
||||
var stat_label = stats[i][0];
|
||||
var stat_count = stats[i][1];
|
||||
%}
|
||||
<li>
|
||||
<a class="stat-link dropdown-item" data-label="{{ stat_label %}" data-field="{{ field %}" href="#" onclick="return false;">
|
||||
<a class="stat-link dropdown-item" data-label="{{ stat_label %}" data-field="_user_tags" href="#" onclick="return false;">
|
||||
<span class="stat-label">{{ __(stat_label) }}</span>
|
||||
<span>{{ stat_count }}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -370,6 +370,10 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
this.columns.push({
|
||||
type: "Tag"
|
||||
});
|
||||
}
|
||||
|
||||
reorder_listview_fields() {
|
||||
|
|
@ -536,7 +540,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
this.render_list();
|
||||
this.on_row_checked();
|
||||
this.render_count();
|
||||
this.render_tags();
|
||||
}
|
||||
|
||||
render_list() {
|
||||
|
|
@ -563,40 +566,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
}
|
||||
}
|
||||
|
||||
render_tags() {
|
||||
const $list_rows = this.$result.find(".list-row-container");
|
||||
|
||||
this.data.forEach((d, i) => {
|
||||
let tag_html = $(`<div class='tag-row'>
|
||||
<div class='list-tag hidden-xs'></div>
|
||||
</div>`).appendTo($list_rows.get(i));
|
||||
|
||||
// add tags
|
||||
let tag_editor = new frappe.ui.TagEditor({
|
||||
parent: tag_html.find(".list-tag"),
|
||||
frm: {
|
||||
doctype: this.doctype,
|
||||
docname: d.name,
|
||||
},
|
||||
list_sidebar: this.list_sidebar,
|
||||
user_tags: d._user_tags,
|
||||
on_change: (user_tags) => {
|
||||
d._user_tags = user_tags;
|
||||
},
|
||||
});
|
||||
|
||||
tag_editor.wrapper.on("click", ".tagit-label", (e) => {
|
||||
const $this = $(e.currentTarget);
|
||||
this.filter_area.add(
|
||||
this.doctype,
|
||||
"_user_tags",
|
||||
"=",
|
||||
$this.text()
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get_header_html() {
|
||||
if (!this.columns) {
|
||||
return;
|
||||
|
|
@ -613,10 +582,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
<span class="level-item">${__(subject_field.label)}</span>
|
||||
`;
|
||||
const $columns = this.columns
|
||||
.map((col) => {
|
||||
.map(col => {
|
||||
let classes = [
|
||||
"list-row-col ellipsis",
|
||||
col.type == "Subject" ? "list-subject level" : "hidden-xs",
|
||||
col.type == "Tag" ? "tag-col hide": "",
|
||||
frappe.model.is_numeric_field(col.df) ? "text-right" : "",
|
||||
].join(" ");
|
||||
|
||||
|
|
@ -701,6 +671,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
`;
|
||||
}
|
||||
|
||||
if (col.type === "Tag") {
|
||||
const tags_display_class = !this.tags_shown ? 'hide' : '';
|
||||
let tags_html = doc._user_tags ? this.get_tags_html(doc._user_tags) : ''
|
||||
return `
|
||||
<div class="list-row-col tag-col ${tags_display_class} hidden-xs ellipsis">
|
||||
${tags_html}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const df = col.df || {};
|
||||
const label = df.label;
|
||||
const fieldname = df.fieldname;
|
||||
|
|
@ -809,6 +789,15 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
`;
|
||||
}
|
||||
|
||||
get_tags_html(user_tags) {
|
||||
let get_tag_html = tag => {
|
||||
if (tag) {
|
||||
return `<div class="tag-pill">${tag}</div>`;
|
||||
}
|
||||
}
|
||||
return user_tags.split(',').map(get_tag_html).join('');
|
||||
}
|
||||
|
||||
get_meta_html(doc) {
|
||||
let html = "";
|
||||
|
||||
|
|
@ -1218,7 +1207,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
}
|
||||
|
||||
setup_tag_event() {
|
||||
this.tags_shown = false;
|
||||
this.list_sidebar.parent.on("click", ".list-tag-preview", () => {
|
||||
this.tags_shown = !this.tags_shown;
|
||||
this.toggle_tags();
|
||||
});
|
||||
}
|
||||
|
|
@ -1331,7 +1322,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
|
|||
}
|
||||
|
||||
toggle_tags() {
|
||||
this.$result.toggleClass("tags-shown");
|
||||
this.$result.find('.tag-col').toggleClass("hide");
|
||||
const preview_label = this.tags_shown ? __("Hide Tags") : __("Show Tags");
|
||||
this.list_sidebar.parent.find(".list-tag-preview").text(preview_label);
|
||||
}
|
||||
|
||||
get_checked_items(only_docnames) {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,17 @@ frappe.ui.FilterGroup = class {
|
|||
constructor(opts) {
|
||||
$.extend(this, opts);
|
||||
this.filters = [];
|
||||
this.make();
|
||||
window.fltr = this;
|
||||
if (!this.filter_button) {
|
||||
this.wrapper = this.parent;
|
||||
this.wrapper.append(this.get_filter_area_template());
|
||||
this.set_filter_events();
|
||||
} else {
|
||||
this.make_popover();
|
||||
}
|
||||
}
|
||||
|
||||
make() {
|
||||
make_popover() {
|
||||
this.init_filter_popover();
|
||||
this.set_popover_events();
|
||||
}
|
||||
|
|
@ -246,19 +252,20 @@ frappe.ui.FilterGroup = class {
|
|||
|
||||
get_filter_area_template() {
|
||||
return $(`
|
||||
<div class="filter-edit-area text-center">
|
||||
<span class="text-muted empty-filters">No filters selected</span>
|
||||
</div>
|
||||
<hr class="divider"></hr>
|
||||
<div class="filter-action-buttons">
|
||||
<div class="text-muted add-filter">
|
||||
${__("+ Add a Filter")}
|
||||
<div class="filter-area">
|
||||
<div class="filter-edit-area text-center">
|
||||
<span class="text-muted empty-filters">No filters selected</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary-dark btn-xs clear-filters">
|
||||
${__("Clear Filters")}
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
<hr class="divider"></hr>
|
||||
<div class="filter-action-buttons">
|
||||
<div class="text-muted add-filter">
|
||||
${__("+ Add a Filter")}
|
||||
</div>
|
||||
<button class="btn btn-secondary-dark btn-xs clear-filters">
|
||||
${__("Clear Filters")}
|
||||
</button>
|
||||
</div>
|
||||
</div>`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,44 +8,43 @@
|
|||
min-width: 500px;
|
||||
min-height: 50px;
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
padding: $padding-xs $padding-md $padding-xs 0;
|
||||
.filter-box {
|
||||
padding: $padding-xs $padding-md $padding-xs 0;
|
||||
|
||||
.form-group {
|
||||
@include media-breakpoint-up(xs) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-filter {
|
||||
cursor: pointer;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
.frappe-control {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group {
|
||||
@include media-breakpoint-up(xs) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.remove-filter {
|
||||
cursor: pointer;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.add-filter {
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
.filter-field {
|
||||
.frappe-control {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
.filter-action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.add-filter {
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
// for sm and above
|
||||
|
|
|
|||
|
|
@ -67,12 +67,12 @@
|
|||
.list-row-container {
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
|
||||
// &:focus {
|
||||
// background-color: $light-yellow;
|
||||
// }
|
||||
// &:focus {
|
||||
// background-color: $light-yellow;
|
||||
// }
|
||||
}
|
||||
|
||||
.list-row {
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
-webkit-transition: color 0.2s;
|
||||
font-size: var(--text-md);
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-50;
|
||||
|
|
@ -97,8 +98,6 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
font-size: var(--text-md);
|
||||
|
||||
.list-row-activity {
|
||||
justify-content: flex-end;
|
||||
// min-width: 120px;
|
||||
|
|
@ -120,7 +119,12 @@
|
|||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-pill {
|
||||
&:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
@import "toast";
|
||||
@import "breadcrumb";
|
||||
@import "indicator";
|
||||
@import "tags";
|
||||
@import "page";
|
||||
@import "avatar";
|
||||
@import "icons";
|
||||
|
|
|
|||
8
frappe/public/scss/tags.scss
Normal file
8
frappe/public/scss/tags.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.tag-pill {
|
||||
background: var(--grey-200);
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
color: var(--grey-700);
|
||||
vertical-align: middle;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue