From 420a3c6458de25266582ff2163f64530cea9f67e Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 13:31:32 +0530 Subject: [PATCH 1/7] fix: video modal --- frappe/public/js/frappe/utils/help.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/frappe/public/js/frappe/utils/help.js b/frappe/public/js/frappe/utils/help.js index ec6f7c8158..a8ac9a21a1 100644 --- a/frappe/public/js/frappe/utils/help.js +++ b/frappe/public/js/frappe/utils/help.js @@ -5,27 +5,24 @@ frappe.provide("frappe.help"); frappe.help.youtube_id = {}; -frappe.help.has_help = function(doctype) { +frappe.help.has_help = function (doctype) { return frappe.help.youtube_id[doctype]; } -frappe.help.show = function(doctype) { - if(frappe.help.youtube_id[doctype]) { +frappe.help.show = function (doctype) { + if (frappe.help.youtube_id[doctype]) { frappe.help.show_video(frappe.help.youtube_id[doctype]); } } -frappe.help.show_video = function(youtube_id, title) { +frappe.help.show_video = function (youtube_id, title) { if (frappe.utils.is_url(youtube_id)) { const expression = '(?:youtube.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu.be/)([^"&?\\s]{11})'; youtube_id = youtube_id.match(expression)[1]; } - if($("body").width() > 768) { - var size = [670, 377]; - } else { - var size = [560, 315]; - } + var size = [530, 300]; + var dialog = frappe.msgprint({ message: `` + (frappe.help_feedback_link || ""), + // (frappe.help_feedback_link || "") + let dialog = new frappe.ui.Dialog({ title: title || __("Help"), - wide: true }); + let video = $(`
`); + video.appendTo(dialog.body); + + dialog.show(); dialog.$wrapper.addClass("video-modal"); + + let plyr = new frappe.Plyr(video[0], { + hideControls: true, + resetOnEnd: true, + }); + + dialog.onhide = () => { + plyr.destroy(); + }; } $("body").on("click", "a.help-link", function () { From e5cf13f2f0a7b9959e74668077f6f43ba3568b92 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 14:46:16 +0530 Subject: [PATCH 3/7] chore: add comment icon --- frappe/public/icons/timeless/symbol-defs.svg | 3 +++ frappe/public/js/frappe/form/sidebar/form_sidebar.js | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frappe/public/icons/timeless/symbol-defs.svg b/frappe/public/icons/timeless/symbol-defs.svg index ed5d2943ee..1bb030aaf1 100644 --- a/frappe/public/icons/timeless/symbol-defs.svg +++ b/frappe/public/icons/timeless/symbol-defs.svg @@ -657,4 +657,7 @@ + + + diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js index 1cbb69a7ab..7693ac38b8 100644 --- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js +++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js @@ -139,8 +139,11 @@ frappe.ui.form.Sidebar = class { return; } + let tags_parent = this.sidebar.find(".form-tags") + this.frm.tags = new frappe.ui.TagEditor({ - parent: this.sidebar.find(".form-tags"), + parent: tags_parent, + add_button: tags_parent.find(".add-tags-btn"), frm: this.frm, on_change: function(user_tags) { this.frm.tags && this.frm.tags.refresh(user_tags); From c3e85e3809fa559229f08cff807b1d1e0e68d776 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 14:46:35 +0530 Subject: [PATCH 4/7] feat: update styling for form sidebar --- .../frappe/form/templates/form_sidebar.html | 81 +++++++++++++------ frappe/public/js/frappe/ui/tag_editor.js | 59 +++++++------- frappe/public/js/frappe/ui/tags.js | 13 ++- frappe/public/scss/desk/sidebar.scss | 13 ++- 4 files changed, 106 insertions(+), 60 deletions(-) diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html index a027bc7797..c1c66ba0d6 100644 --- a/frappe/public/js/frappe/form/templates/form_sidebar.html +++ b/frappe/public/js/frappe/form/templates/form_sidebar.html @@ -84,28 +84,55 @@ +
    +
  • + + {%= __("Tags") %} +
    • +
  • +
    + + {%= __("Add a tag") %} + + + + +
    +
    • +
  • {%= __("Reviews") %}
    • -
  • - +
  • +
    + + {%= __("Add a Review") %} + + + + +
    • +
  • {%= __("Shared With") %}
    • -
  • - - +
    • +
-
    -
  • - - {%= __("Tags") %} -
    • -
-
    -
  • - + +
      +
    • +
      + + · + + + + + 32 + +
      +
    +
    • diff --git a/frappe/public/js/frappe/ui/tag_editor.js b/frappe/public/js/frappe/ui/tag_editor.js index 5fa0b57dd1..5be8b6e04c 100644 --- a/frappe/public/js/frappe/ui/tag_editor.js +++ b/frappe/public/js/frappe/ui/tag_editor.js @@ -1,5 +1,5 @@ -frappe.ui.TagEditor = Class.extend({ - init: function(opts) { +frappe.ui.TagEditor = class TagEditor { + constructor(opts) { /* docs: Arguments @@ -8,7 +8,7 @@ frappe.ui.TagEditor = Class.extend({ - doctype - docname */ - $.extend(this, opts); + Object.assign(this, opts); this.setup_tags(); @@ -17,8 +17,9 @@ frappe.ui.TagEditor = Class.extend({ } this.initialized = true; this.refresh(this.user_tags); - }, - setup_tags: function() { + } + + setup_tags() { var me = this; // hidden form, does not have parent @@ -31,13 +32,13 @@ frappe.ui.TagEditor = Class.extend({ this.tags = new frappe.ui.Tags({ parent: this.wrapper, - placeholder: __("Add a tag ..."), + add_button: this.add_button, onTagAdd: (tag) => { - if(me.initialized && !me.refreshing) { + if (me.initialized && !me.refreshing) { return frappe.call({ method: "frappe.desk.doctype.tag.tag.add_tag", args: me.get_args(tag), - callback: function(r) { + callback: function (r) { var user_tags = me.user_tags ? me.user_tags.split(",") : []; user_tags.push(tag) me.user_tags = user_tags.join(","); @@ -48,11 +49,11 @@ frappe.ui.TagEditor = Class.extend({ } }, onTagRemove: (tag) => { - if(!me.refreshing) { + if (!me.refreshing) { return frappe.call({ method: "frappe.desk.doctype.tag.tag.remove_tag", args: me.get_args(tag), - callback: function(r) { + callback: function (r) { var user_tags = me.user_tags.split(","); user_tags.splice(user_tags.indexOf(tag), 1); me.user_tags = user_tags.join(","); @@ -65,8 +66,9 @@ frappe.ui.TagEditor = Class.extend({ }); this.setup_awesomplete(); this.setup_complete = true; - }, - setup_awesomplete: function() { + } + + setup_awesomplete() { var me = this; var $input = this.wrapper.find("input.tags-input"); var input = $input.get(0); @@ -75,55 +77,56 @@ frappe.ui.TagEditor = Class.extend({ maxItems: 99, list: [] }); - $input.on("awesomplete-open", function(e){ + $input.on("awesomplete-open", function (e) { $input.attr('state', 'open'); }); - $input.on("awesomplete-close", function(e){ + $input.on("awesomplete-close", function (e) { $input.attr('state', 'closed'); }); - $input.on("input", function(e) { + $input.on("input", function (e) { var value = e.target.value; frappe.call({ method: "frappe.desk.doctype.tag.tag.get_tags", - args:{ + args: { doctype: me.frm.doctype, txt: value.toLowerCase(), }, - callback: function(r) { + callback: function (r) { me.awesomplete.list = r.message; } }); }); - $input.on("focus", function(e) { - if($input.attr('state') != 'open') { + $input.on("focus", function (e) { + if ($input.attr('state') != 'open') { $input.trigger("input"); } }); - }, - get_args: function(tag) { + } + + get_args(tag) { return { tag: tag, dt: this.frm.doctype, dn: this.frm.docname, } - }, - refresh: function(user_tags) { + } + + refresh(user_tags) { var me = this; if (!this.initialized || !this.setup_complete || this.refreshing) return; me.refreshing = true; try { me.tags.clearTags(); - if(user_tags) { + if (user_tags) { me.user_tags = user_tags; me.tags.addTags(user_tags.split(',')); } - } catch(e) { + } catch (e) { me.refreshing = false; // wtf bug - setTimeout( function() { me.refresh(); }, 100); + setTimeout(function () { me.refresh(); }, 100); } me.refreshing = false; - } -}) +} diff --git a/frappe/public/js/frappe/ui/tags.js b/frappe/public/js/frappe/ui/tags.js index c7c0d6c4bb..0d7db45897 100644 --- a/frappe/public/js/frappe/ui/tags.js +++ b/frappe/public/js/frappe/ui/tags.js @@ -3,7 +3,7 @@ frappe.ui.Tags = class { constructor({ - parent, placeholder, tagsList, + parent, tagsList, add_button, onTagAdd, onTagRemove, onTagClick, @@ -11,21 +11,20 @@ frappe.ui.Tags = class { }) { this.tagsList = tagsList || []; this.onTagAdd = onTagAdd; + this.add_button = add_button this.onTagRemove = onTagRemove; this.onTagClick = onTagClick; this.onChange = onChange; - this.setup(parent, placeholder); + this.setup(parent); } - setup(parent, placeholder) { + setup(parent) { this.$ul = parent; this.$input = $(``); this.$inputWrapper = this.get_list_element(this.$input); - this.$placeholder = this.get_list_element($(`${placeholder}`)); this.$inputWrapper.appendTo(this.$ul); - this.$placeholder.appendTo(this.$ul); this.deactivate(); this.bind(); @@ -49,7 +48,7 @@ frappe.ui.Tags = class { this.deactivate(); }); - this.$placeholder.on('click', () => { + this.add_button.on('click', () => { this.activate(); this.$input.focus(); // focus only when clicked }); @@ -60,13 +59,11 @@ frappe.ui.Tags = class { } activate() { - this.$placeholder.hide(); this.$inputWrapper.show(); } deactivate() { this.$inputWrapper.hide(); - this.$placeholder.show(); } addTag(label) { diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 0bd0060d2a..50fa422051 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -118,6 +118,17 @@ body[data-route^="Module"] .main-menu { margin-left: -4px; } + .form-sidebar-stats { + li:first-child { + @include flex(flex, space-between, center, null); + + .form-follow { + text-transform: uppercase; + font-size: var(--text-xs, 11px); + } + } + } + .sidebar-image-section { cursor: pointer; @@ -420,7 +431,7 @@ button.data-pill { color: var(--text-color); justify-content: space-between; align-items: center; - max-width: 100%; + width: 100%; } .add-attachment-btn, From 0049c0b697c7ee74affe017f07ee73cc5dbfc19d Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 15:13:20 +0530 Subject: [PATCH 5/7] chore: revert form_sidebar changes --- .../frappe/form/templates/form_sidebar.html | 81 ++++++------------- 1 file changed, 23 insertions(+), 58 deletions(-) diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html index c1c66ba0d6..a027bc7797 100644 --- a/frappe/public/js/frappe/form/templates/form_sidebar.html +++ b/frappe/public/js/frappe/form/templates/form_sidebar.html @@ -84,55 +84,28 @@
    -
      -
    • - - {%= __("Tags") %} -
      • -
    • -
      - - {%= __("Add a tag") %} - - - - -
      -
      • -
    • {%= __("Reviews") %}
      • -
    • -
      - - {%= __("Add a Review") %} - - - - -
      +
    • +
      • -
    • {%= __("Shared With") %}
      • -
    • + +
      • -
    +
      +
    • + + {%= __("Tags") %} +
      • +
    - -
      -
    • -
      - - · - - - - - 32 - -
      - +
        +
      • +
      -
      • From 8e0141ace4d0f6fdfdf462b9d603e103b80d09dd Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 15:15:35 +0530 Subject: [PATCH 6/7] feat: add form sidebar stats --- .../frappe/form/templates/form_sidebar.html | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html index a027bc7797..43813eb830 100644 --- a/frappe/public/js/frappe/form/templates/form_sidebar.html +++ b/frappe/public/js/frappe/form/templates/form_sidebar.html @@ -133,7 +133,30 @@
        -
          +
            +
          • +
            + + · + + + + + 32 + +
            + +
            • +
          +
          +
          • From 485fe01e21f833baf7e13b813267208714e548c5 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 2 Dec 2020 15:20:49 +0530 Subject: [PATCH 7/7] chore: revert sidebar tag changes --- frappe/public/js/frappe/ui/tag_editor.js | 59 +++++++++++------------- frappe/public/js/frappe/ui/tags.js | 13 ++++-- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/frappe/public/js/frappe/ui/tag_editor.js b/frappe/public/js/frappe/ui/tag_editor.js index 5be8b6e04c..5fa0b57dd1 100644 --- a/frappe/public/js/frappe/ui/tag_editor.js +++ b/frappe/public/js/frappe/ui/tag_editor.js @@ -1,5 +1,5 @@ -frappe.ui.TagEditor = class TagEditor { - constructor(opts) { +frappe.ui.TagEditor = Class.extend({ + init: function(opts) { /* docs: Arguments @@ -8,7 +8,7 @@ frappe.ui.TagEditor = class TagEditor { - doctype - docname */ - Object.assign(this, opts); + $.extend(this, opts); this.setup_tags(); @@ -17,9 +17,8 @@ frappe.ui.TagEditor = class TagEditor { } this.initialized = true; this.refresh(this.user_tags); - } - - setup_tags() { + }, + setup_tags: function() { var me = this; // hidden form, does not have parent @@ -32,13 +31,13 @@ frappe.ui.TagEditor = class TagEditor { this.tags = new frappe.ui.Tags({ parent: this.wrapper, - add_button: this.add_button, + placeholder: __("Add a tag ..."), onTagAdd: (tag) => { - if (me.initialized && !me.refreshing) { + if(me.initialized && !me.refreshing) { return frappe.call({ method: "frappe.desk.doctype.tag.tag.add_tag", args: me.get_args(tag), - callback: function (r) { + callback: function(r) { var user_tags = me.user_tags ? me.user_tags.split(",") : []; user_tags.push(tag) me.user_tags = user_tags.join(","); @@ -49,11 +48,11 @@ frappe.ui.TagEditor = class TagEditor { } }, onTagRemove: (tag) => { - if (!me.refreshing) { + if(!me.refreshing) { return frappe.call({ method: "frappe.desk.doctype.tag.tag.remove_tag", args: me.get_args(tag), - callback: function (r) { + callback: function(r) { var user_tags = me.user_tags.split(","); user_tags.splice(user_tags.indexOf(tag), 1); me.user_tags = user_tags.join(","); @@ -66,9 +65,8 @@ frappe.ui.TagEditor = class TagEditor { }); this.setup_awesomplete(); this.setup_complete = true; - } - - setup_awesomplete() { + }, + setup_awesomplete: function() { var me = this; var $input = this.wrapper.find("input.tags-input"); var input = $input.get(0); @@ -77,56 +75,55 @@ frappe.ui.TagEditor = class TagEditor { maxItems: 99, list: [] }); - $input.on("awesomplete-open", function (e) { + $input.on("awesomplete-open", function(e){ $input.attr('state', 'open'); }); - $input.on("awesomplete-close", function (e) { + $input.on("awesomplete-close", function(e){ $input.attr('state', 'closed'); }); - $input.on("input", function (e) { + $input.on("input", function(e) { var value = e.target.value; frappe.call({ method: "frappe.desk.doctype.tag.tag.get_tags", - args: { + args:{ doctype: me.frm.doctype, txt: value.toLowerCase(), }, - callback: function (r) { + callback: function(r) { me.awesomplete.list = r.message; } }); }); - $input.on("focus", function (e) { - if ($input.attr('state') != 'open') { + $input.on("focus", function(e) { + if($input.attr('state') != 'open') { $input.trigger("input"); } }); - } - - get_args(tag) { + }, + get_args: function(tag) { return { tag: tag, dt: this.frm.doctype, dn: this.frm.docname, } - } - - refresh(user_tags) { + }, + refresh: function(user_tags) { var me = this; if (!this.initialized || !this.setup_complete || this.refreshing) return; me.refreshing = true; try { me.tags.clearTags(); - if (user_tags) { + if(user_tags) { me.user_tags = user_tags; me.tags.addTags(user_tags.split(',')); } - } catch (e) { + } catch(e) { me.refreshing = false; // wtf bug - setTimeout(function () { me.refresh(); }, 100); + setTimeout( function() { me.refresh(); }, 100); } me.refreshing = false; + } -} +}) diff --git a/frappe/public/js/frappe/ui/tags.js b/frappe/public/js/frappe/ui/tags.js index 0d7db45897..c7c0d6c4bb 100644 --- a/frappe/public/js/frappe/ui/tags.js +++ b/frappe/public/js/frappe/ui/tags.js @@ -3,7 +3,7 @@ frappe.ui.Tags = class { constructor({ - parent, tagsList, add_button, + parent, placeholder, tagsList, onTagAdd, onTagRemove, onTagClick, @@ -11,20 +11,21 @@ frappe.ui.Tags = class { }) { this.tagsList = tagsList || []; this.onTagAdd = onTagAdd; - this.add_button = add_button this.onTagRemove = onTagRemove; this.onTagClick = onTagClick; this.onChange = onChange; - this.setup(parent); + this.setup(parent, placeholder); } - setup(parent) { + setup(parent, placeholder) { this.$ul = parent; this.$input = $(``); this.$inputWrapper = this.get_list_element(this.$input); + this.$placeholder = this.get_list_element($(`${placeholder}`)); this.$inputWrapper.appendTo(this.$ul); + this.$placeholder.appendTo(this.$ul); this.deactivate(); this.bind(); @@ -48,7 +49,7 @@ frappe.ui.Tags = class { this.deactivate(); }); - this.add_button.on('click', () => { + this.$placeholder.on('click', () => { this.activate(); this.$input.focus(); // focus only when clicked }); @@ -59,11 +60,13 @@ frappe.ui.Tags = class { } activate() { + this.$placeholder.hide(); this.$inputWrapper.show(); } deactivate() { this.$inputWrapper.hide(); + this.$placeholder.show(); } addTag(label) {