diff --git a/frappe/public/js/frappe/list/list_sidebar.html b/frappe/public/js/frappe/list/list_sidebar.html index a197d4a342..48a114ba1d 100644 --- a/frappe/public/js/frappe/list/list_sidebar.html +++ b/frappe/public/js/frappe/list/list_sidebar.html @@ -58,6 +58,8 @@
+
+
  • diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index 7b3cb44acb..d3c3ae0149 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -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 $('
    • '); - } }; diff --git a/frappe/public/js/frappe/list/list_sidebar_stat.html b/frappe/public/js/frappe/list/list_sidebar_stat.html index dd5b728af6..140202b5f3 100644 --- a/frappe/public/js/frappe/list/list_sidebar_stat.html +++ b/frappe/public/js/frappe/list/list_sidebar_stat.html @@ -1,13 +1,13 @@ -{% if(!stat.length) { %} +{% if (!stats.length) { %}
  • {{ __("No records tagged.") }}
    • {% } 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]; %}
  • - + {{ __(stat_label) }} {{ stat_count }} diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index c86e85f332..57c17caa02 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/frappe/public/js/frappe/list/list_view.js @@ -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 = $(`
    - -
    `).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 { ${__(subject_field.label)} `; 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 ` + + `; + } + 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 `
    ${tag}
    `; + } + } + 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) { diff --git a/frappe/public/js/frappe/ui/filters/filter_list.js b/frappe/public/js/frappe/ui/filters/filter_list.js index c924411798..60253b2697 100644 --- a/frappe/public/js/frappe/ui/filters/filter_list.js +++ b/frappe/public/js/frappe/ui/filters/filter_list.js @@ -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 $(` -
    - No filters selected -
    -
    -
    -
    - ${__("+ Add a Filter")} +
    +
    + No filters selected
    - -
    - ` +
    +
    +
    + ${__("+ Add a Filter")} +
    + +
    +
    ` ); } diff --git a/frappe/public/scss/filters.scss b/frappe/public/scss/filters.scss index 324888780c..fe884bfc62 100644 --- a/frappe/public/scss/filters.scss +++ b/frappe/public/scss/filters.scss @@ -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 diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss index f5264773bf..f679f350d2 100644 --- a/frappe/public/scss/list.scss +++ b/frappe/public/scss/list.scss @@ -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; + } } } diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss index 1cd5f4db27..1c569199b6 100644 --- a/frappe/public/scss/main.scss +++ b/frappe/public/scss/main.scss @@ -9,6 +9,7 @@ @import "toast"; @import "breadcrumb"; @import "indicator"; +@import "tags"; @import "page"; @import "avatar"; @import "icons"; diff --git a/frappe/public/scss/tags.scss b/frappe/public/scss/tags.scss new file mode 100644 index 0000000000..f161a95cd3 --- /dev/null +++ b/frappe/public/scss/tags.scss @@ -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; +} \ No newline at end of file