From 123e86ace1bb403f8365e0bc2d7587ddf9986fb7 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Mon, 27 Jul 2020 09:35:07 +0530 Subject: [PATCH 1/4] fix: EP review style --- .../public/js/frappe/form/sidebar/review.js | 4 +- frappe/public/scss/sidebar.scss | 37 +++++++++---------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/frappe/public/js/frappe/form/sidebar/review.js b/frappe/public/js/frappe/form/sidebar/review.js index dd991778d3..292db75393 100644 --- a/frappe/public/js/frappe/form/sidebar/review.js +++ b/frappe/public/js/frappe/form/sidebar/review.js @@ -143,7 +143,9 @@ frappe.ui.form.Review = class Review { review_logs.forEach(log => { let review_pill = $(`
  • - ${log.points > 0 ? '+': ''}${log.points} +
    + ${Math.abs(log.points)} +
    • `); review_pill.insertBefore(this.add_review_button_wrapper); diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss index 638030675b..eb8311ff4f 100644 --- a/frappe/public/scss/sidebar.scss +++ b/frappe/public/scss/sidebar.scss @@ -424,20 +424,18 @@ body[data-route^="Module"] .main-menu { } .form-reviews { - // REDESIGN-TODO: Refactor .review { - display: inline-block; + display: inline-flex; font-weight: 500; + width: 28px; + height: 28px; border-radius: 50%; - margin-bottom: var(--margin-sm); - margin-right: var(--margin-sm); + vertical-align: middle; + justify-content: center; font-size: var(--text-xs); - height: 34px; - width: 34px; - text-align: center; - cursor: pointer; - padding: var(--padding-xs); - padding-top: 8px; + align-items: center; + margin-bottom: var(--margin-xs); + margin-right: var(--margin-xs); &.appreciation { background-color: var(--dark-green-100); color: var(--dark-green-600); @@ -450,15 +448,16 @@ body[data-route^="Module"] .main-menu { li:last-child { display: inline-block; } - .add-review-btn { - height: 28px; - width: 28px; - border-radius: var(--border-radius); - border: 1px dashed var(--gray-300); - background: var(--gray-50); - text-align: center; - padding: 3px; - } +} + +.add-review-btn, .share-doc-btn { + height: 28px; + width: 28px; + border-radius: var(--border-radius); + border: 1px dashed var(--gray-300); + background: var(--gray-50); + text-align: center; + padding: 3px; } .review-popover { From 069304a281d660a678ef2c8d6e0748a518cb0784 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Mon, 27 Jul 2020 09:40:03 +0530 Subject: [PATCH 2/4] fix: Update avatar group style --- frappe/public/js/frappe/utils/common.js | 13 ++++++------- frappe/public/scss/avatar.scss | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js index 02330e4fc3..1928f6d444 100644 --- a/frappe/public/js/frappe/utils/common.js +++ b/frappe/public/js/frappe/utils/common.js @@ -45,22 +45,21 @@ frappe.avatar = function (user, css_class, title, image_url = null) { } }; -frappe.avatar_group = function(users, limit=4, css_class="avatar avatar-small") { +frappe.avatar_group = function(users, limit=4, css_class="avatar avatar-small", align='right') { let extra_count = users.length - limit; - let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join('') + let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join(''); if (extra_count > 0) { - return `
    + html = `
    +${extra_count}
    ${html} -
    `; - } else { - return `
    ${html}
    `; + `; } -} + return `
    ${html}
    `; +}; frappe.ui.scroll = function(element, animate, additional_offset) { var header_offset = $(".navbar").height() + $(".page-head").height(); diff --git a/frappe/public/scss/avatar.scss b/frappe/public/scss/avatar.scss index 3412081613..8544891787 100644 --- a/frappe/public/scss/avatar.scss +++ b/frappe/public/scss/avatar.scss @@ -84,7 +84,7 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--blue-50) !important; + background-color: var(--blue-50); color: var(--blue-500); font-weight: normal; } @@ -93,18 +93,30 @@ display: flex; align-items: center; flex-direction: row-reverse; + &.right { + justify-content: flex-start; + } + &.left { + justify-content: flex-end; + } .avatar { position: relative; .avatar-frame { - border: 2px solid $white; + border: 1px solid $white; } &:hover { z-index: 1; } } + .avatar-extra-count { + font-size: var(--text-md); + font-weight: 500; + color: $white; + background-color: var(--blue-500); + } .avatar+.avatar { margin-right: -0.3rem; From 6ac785d25609c615ae27ed1a7d75888881544e4d Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Mon, 27 Jul 2020 09:41:04 +0530 Subject: [PATCH 3/4] refactor: Use avatar_group for shared users --- frappe/public/js/frappe/form/sidebar/share.js | 46 +++++-------------- 1 file changed, 12 insertions(+), 34 deletions(-) diff --git a/frappe/public/js/frappe/form/sidebar/share.js b/frappe/public/js/frappe/form/sidebar/share.js index 79d6d28945..a0f1991570 100644 --- a/frappe/public/js/frappe/form/sidebar/share.js +++ b/frappe/public/js/frappe/form/sidebar/share.js @@ -11,44 +11,22 @@ frappe.ui.form.Share = Class.extend({ this.render_sidebar(); }, render_sidebar: function() { - var me = this; this.parent.empty(); + const shared = this.shared || this.frm.get_docinfo().shared; + const shared_users = shared.filter(Boolean).map(s => s.user); - var shared = this.shared || this.frm.get_docinfo().shared; - shared = shared.filter(function(d) { return d }); - var users = []; - for (var i=0, l=shared.length; i < l; i++) { - var s = shared[i]; - - if (s.everyone) { - users.push({ - icon: "octicon octicon-megaphone text-muted", - avatar_class: "avatar-empty share-doc-btn shared-with-everyone", - title: __("Shared with everyone") - }); - } else { - var user_info = frappe.user_info(s.user); - users.push({ - image: user_info.image, - fullname: user_info.fullname, - abbr: user_info.abbr, - color: user_info.color, - title: __("Shared with {0}", [user_info.fullname]) - }); - } + // REDESIGN-TODO: handle "shared with everyone" + this.parent.append(frappe.avatar_group(shared_users, 5, null, 'left')); + if (!this.frm.doc.is_new()) { + this.parent.append(` + + `); } - if (!me.frm.doc.__islocal) { - users.push({ - icon: "octicon octicon-plus text-muted", - avatar_class: "avatar-empty share-doc-btn", - title: __("Share") - }); - } - - this.parent.append(frappe.render_template("users_in_sidebar", {"users": users})); - this.parent.find(".avatar").on("click", function() { - me.frm.share_doc(); + this.parent.find(".avatar").on("click", () => { + this.frm.share_doc(); }); }, show: function() { From 65e33f0bdc59d3d45c53aef3c390e17d958adcc2 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Mon, 27 Jul 2020 09:44:44 +0530 Subject: [PATCH 4/4] fix: Use frm.is_new --- frappe/public/js/frappe/form/sidebar/share.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/js/frappe/form/sidebar/share.js b/frappe/public/js/frappe/form/sidebar/share.js index a0f1991570..ec37d42730 100644 --- a/frappe/public/js/frappe/form/sidebar/share.js +++ b/frappe/public/js/frappe/form/sidebar/share.js @@ -17,7 +17,7 @@ frappe.ui.form.Share = Class.extend({ // REDESIGN-TODO: handle "shared with everyone" this.parent.append(frappe.avatar_group(shared_users, 5, null, 'left')); - if (!this.frm.doc.is_new()) { + if (!this.frm.is_new()) { this.parent.append(`