From 0006ad2867be09c27a733f46c9bb56e225276918 Mon Sep 17 00:00:00 2001 From: prssanna Date: Wed, 24 Feb 2021 16:35:41 +0530 Subject: [PATCH 1/4] fix: enable link preview --- frappe/public/js/frappe/desk.js | 2 +- frappe/public/js/frappe/ui/link_preview.js | 51 ++++++++++++---------- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/frappe/public/js/frappe/desk.js b/frappe/public/js/frappe/desk.js index 3912373bde..e033ae4c5b 100644 --- a/frappe/public/js/frappe/desk.js +++ b/frappe/public/js/frappe/desk.js @@ -128,7 +128,7 @@ frappe.Application = Class.extend({ } // REDESIGN-TODO: Fix preview popovers - //this.link_preview = new frappe.ui.LinkPreview(); + this.link_preview = new frappe.ui.LinkPreview(); if (!frappe.boot.developer_mode) { setInterval(function() { diff --git a/frappe/public/js/frappe/ui/link_preview.js b/frappe/public/js/frappe/ui/link_preview.js index 141ca1408e..357ebbf671 100644 --- a/frappe/public/js/frappe/ui/link_preview.js +++ b/frappe/public/js/frappe/ui/link_preview.js @@ -22,7 +22,6 @@ frappe.ui.LinkPreview = class { } }); this.handle_popover_hide(); - } identify_doc() { @@ -122,7 +121,7 @@ frappe.ui.LinkPreview = class { } }); - $(window).on('hashchange', () => { + frappe.router.on('change', () => { this.clear_all_popovers(); }); } @@ -142,18 +141,22 @@ frappe.ui.LinkPreview = class { let popover_content = this.get_popover_html(preview_data); this.element.popover({ container: 'body', + template: ` +
+
+
+
+
+ `, html: true, + sanitizeFn: (content) => content, content: popover_content, trigger: 'manual', - placement: 'top auto', - animation: false, + placement: 'top', }); - const $popover = this.element.data('bs.popover').tip(); - - $popover.addClass('link-preview-popover'); + const $popover = $(this.element.data('bs.popover').tip); $popover.toggleClass('control-field-popover', this.is_link); - this.popovers_list.push(this.element.data('bs.popover')); } @@ -171,16 +174,17 @@ frappe.ui.LinkPreview = class { let id_html = ''; let content_html = ''; - if (preview_data.preview_image) { - let image_url = encodeURI(preview_data.preview_image); - image_html = ` -
- -
- `; - } + let image_url = preview_data.preview_image; + let avatar_html = frappe.get_avatar( + "avatar-large", + preview_data.preview_title, + image_url + ); + image_html = `
+ ${avatar_html} +
`; - if (preview_data.preview_title != preview_data.name) { + if (preview_data.preview_title !== preview_data.name) { id_html = `${preview_data.name}`; } @@ -190,8 +194,8 @@ frappe.ui.LinkPreview = class { let label = key; content_html += `
-
${__(label)}
-
${value}
+
${__(label)}
+
${value}
`; } @@ -199,12 +203,11 @@ frappe.ui.LinkPreview = class { content_html = `
${content_html}
`; let popover_content =` -
${image_html} +
-
- ${__(preview_data.preview_title)} - ${__(this.doctype)} ${id_html} -
+ ${image_html} +
${__(preview_data.preview_title)}
+
${id_html}
From 4c910ab8db1b231d71ed3ce5c04cb43f09a23434 Mon Sep 17 00:00:00 2001 From: prssanna Date: Wed, 24 Feb 2021 16:36:08 +0530 Subject: [PATCH 2/4] fix: refactor link preview popover style --- frappe/public/scss/desk/global.scss | 1 + frappe/public/scss/desk/link_preview.scss | 82 ++++++++++++++++------- frappe/public/scss/desk/variables.scss | 2 +- 3 files changed, 59 insertions(+), 26 deletions(-) diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss index 7c1ddde68e..e89c8aeb9e 100644 --- a/frappe/public/scss/desk/global.scss +++ b/frappe/public/scss/desk/global.scss @@ -280,6 +280,7 @@ select.input-xs { /* popover */ .popover { background-color: var(--popover-bg); + border: 0; } .bold { diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss index af14c4d8ef..dc7cf726f2 100644 --- a/frappe/public/scss/desk/link_preview.scss +++ b/frappe/public/scss/desk/link_preview.scss @@ -1,48 +1,80 @@ .link-preview-popover { - border-radius: 0; max-width: 100%; + .popover-content { - padding: 0; + padding: 15px 25px; + .preview-popover-header { - padding: var(--padding-md); .preview-header { - display: inline-block; - vertical-align: top; + @include flex(flex, null, center, column); } .preview-image { - width: 70px; - height: 70px; - object-fit: cover; - margin-right: var(--margin-sm); + margin-bottom: var(--margin-sm); + // object-fit: cover; + // border-radius: var(--border-radius-sm); + + .avatar { + width: 52px; + height: 52px; + } + } + + img:after { + content: url("data:image/svg+xml;utf8,"); + } + + img[alt]:after { + height: 52px; + @include flex(); + position: absolute; + z-index: 1; + top: -15px; + left: 0px; + width: 100%; + background-color: var(--bg-color); border-radius: var(--border-radius); } .preview-name { - display: block; + // display: block; + font-size: var(--text-base); + font-weight: 500; } - .preview-title { - display: block; + .preview-title:not(:empty) { + margin-top: var(--margin-xs); + font-size: var(--text-md); } } - hr { - margin: 0; - } + .popover-body { + padding: 0; - .preview-table { - padding: var(--padding-md); - padding-bottom: var(--padding-xs); - max-width: 330px; - min-width: 200px; - overflow-wrap: break-word; + .preview-table { + padding-bottom: var(--padding-xs); + max-width: 330px; + min-width: 200px; + overflow-wrap: break-word; - .preview-field { - padding-bottom: var(--padding-sm); - .preview-label { - padding-bottom: 4px; + .preview-field { + + .preview-label { + padding-bottom: 4px; + } + + .preview-value { + font-weight: 500; + } + + .ql-snow .ql-editor { + min-height: 0; + } + + &:not(:last-child) { + margin-bottom: var(--margin-md); + } } } } diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss index 26af534c6f..4f43f22b9d 100644 --- a/frappe/public/scss/desk/variables.scss +++ b/frappe/public/scss/desk/variables.scss @@ -98,7 +98,7 @@ $mark-padding: 0; $enable-shadows: true; $popover-border-radius: var(--border-radius); $popover-bg: var(--popover-bg); -$popover-box-shadow: var(--shadow-md); +$popover-box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1); $popover-body-padding-x: var(--padding-md); $popover-body-padding-y: var(--padding-md); $popover-border-color: var(--dark-border-color); From 14c4638f29392b6977a37ccfbd60fd18a5ec03f7 Mon Sep 17 00:00:00 2001 From: prssanna Date: Wed, 24 Feb 2021 16:36:50 +0530 Subject: [PATCH 3/4] fix: get_avatar function for images --- frappe/public/js/frappe/utils/common.js | 27 ++++++++++++------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js index cd3f35d830..8fec3b2611 100644 --- a/frappe/public/js/frappe/utils/common.js +++ b/frappe/public/js/frappe/utils/common.js @@ -20,27 +20,25 @@ frappe.avatar = function (user, css_class, title, image_url=null, remove_color=f title = user_info.fullname; } - return frappe.get_avatar( - user, css_class, title, image_url || user_info.image, remove_color, filterable - ); -}; - -frappe.get_avatar = function(user, css_class, title, image_url=null, remove_color, filterable) { let data_attr = ''; - - if (!css_class) { - css_class = "avatar-small"; - } - if (filterable) { css_class += " filterable"; data_attr = `data-filter="_assign,like,%${user}%"`; } + return frappe.get_avatar( + css_class, title, image_url || user_info.image, remove_color, data_attr + ); +}; + +frappe.get_avatar = function(css_class, title, image_url=null, remove_color, data_attributes) { + if (!css_class) { + css_class = "avatar-small"; + } + if (image_url) { const image = (window.cordova && image_url.indexOf('http') === -1) ? frappe.base_url + image_url : image_url; - - return ` + return ` `; @@ -55,7 +53,8 @@ frappe.get_avatar = function(user, css_class, title, image_url=null, remove_colo if (css_class === 'avatar-small' || css_class == 'avatar-xs') { abbr = abbr.substr(0, 1); } - return ` + + return `
${abbr} From 73e6b9bfc2fdcde62a96bff1f16634020a3796ad Mon Sep 17 00:00:00 2001 From: prssanna Date: Wed, 24 Feb 2021 17:07:19 +0530 Subject: [PATCH 4/4] fix: cleanup code --- frappe/public/js/frappe/ui/link_preview.js | 68 +++++++++++++--------- frappe/public/scss/desk/link_preview.scss | 57 ++++++------------ 2 files changed, 58 insertions(+), 67 deletions(-) diff --git a/frappe/public/js/frappe/ui/link_preview.js b/frappe/public/js/frappe/ui/link_preview.js index 357ebbf671..328cd23716 100644 --- a/frappe/public/js/frappe/ui/link_preview.js +++ b/frappe/public/js/frappe/ui/link_preview.js @@ -170,24 +170,49 @@ frappe.ui.LinkPreview = class { this.href = this.href.replace(new RegExp(' ', 'g'), '%20'); } - let image_html = ''; + let popover_content =` +
+
+ ${this.get_image_html(preview_data)} +
+ ${__(preview_data.preview_title)} +
+
${this.get_id_html(preview_data)}
+
+
+
+
+ ${this.get_content_html(preview_data)} +
+ `; + + return popover_content; + } + + get_id_html(preview_data) { let id_html = ''; - let content_html = ''; - - let image_url = preview_data.preview_image; - let avatar_html = frappe.get_avatar( - "avatar-large", - preview_data.preview_title, - image_url - ); - image_html = `
- ${avatar_html} -
`; - if (preview_data.preview_title !== preview_data.name) { id_html = `${preview_data.name}`; } + return id_html; + } + + get_image_html(preview_data) { + let avatar_html = frappe.get_avatar( + "avatar-medium", + preview_data.preview_title, + preview_data.preview_image + ); + + return `
+ ${avatar_html} +
`; + } + + get_content_html(preview_data) { + let content_html = ''; + Object.keys(preview_data).forEach(key => { if (!['preview_image', 'preview_title', 'name'].includes(key)) { let value = frappe.ellipsis(preview_data[key], 280); @@ -200,23 +225,8 @@ frappe.ui.LinkPreview = class { `; } }); - content_html = `
${content_html}
`; - let popover_content =` -
-
- ${image_html} -
${__(preview_data.preview_title)}
-
${id_html}
-
-
-
-
- ${content_html} -
- `; - - return popover_content; + return `
${content_html}
`; } }; diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss index dc7cf726f2..b2dd3ec425 100644 --- a/frappe/public/scss/desk/link_preview.scss +++ b/frappe/public/scss/desk/link_preview.scss @@ -2,56 +2,37 @@ max-width: 100%; .popover-content { - padding: 15px 25px; + padding: var(--padding-md) 25px; - .preview-popover-header { + .preview-header { + @include flex(flex, null, center, column); + } - .preview-header { - @include flex(flex, null, center, column); - } + .preview-image { + margin-bottom: var(--margin-sm); - .preview-image { - margin-bottom: var(--margin-sm); - // object-fit: cover; - // border-radius: var(--border-radius-sm); + .avatar { + width: 52px; + height: 52px; - .avatar { - width: 52px; - height: 52px; + .standard-image { + font-size: var(--text-lg); } } + } - img:after { - content: url("data:image/svg+xml;utf8,"); - } + .preview-name { + font-size: var(--text-base); + font-weight: 500; + } - img[alt]:after { - height: 52px; - @include flex(); - position: absolute; - z-index: 1; - top: -15px; - left: 0px; - width: 100%; - background-color: var(--bg-color); - border-radius: var(--border-radius); - } - - .preview-name { - // display: block; - font-size: var(--text-base); - font-weight: 500; - } - - .preview-title:not(:empty) { - margin-top: var(--margin-xs); - font-size: var(--text-md); - } + .preview-title:not(:empty) { + margin-top: var(--margin-xs); + font-size: var(--text-md); } .popover-body { padding: 0; - .preview-table { padding-bottom: var(--padding-xs); max-width: 330px;