Skip to content

Commit

Permalink
Merge pull request #14614 from shariquerik/new-feedback-comment
Browse files Browse the repository at this point in the history 
refactor: New Feedback & Comment Design for Blog Post
  • Loading branch information
@rmehta
rmehta committed Nov 16, 2021
2 parents 3a36447 + ed28022 commit f4eff6f
Show file tree
Hide file tree
Showing 14 changed files with 415 additions and 324 deletions.
27 changes: 23 additions & 4 deletions frappe/core/doctype/comment/test_comment.py
View file
Expand Up @@ -5,6 +5,15 @@
import unittest

class TestComment(unittest.TestCase):
def tearDown(self):
frappe.form_dict.comment = None
frappe.form_dict.comment_email = None
frappe.form_dict.comment_by = None
frappe.form_dict.reference_doctype = None
frappe.form_dict.reference_name = None
frappe.form_dict.route = None
frappe.local.request_ip = None

def test_comment_creation(self):
test_doc = frappe.get_doc(dict(doctype = 'ToDo', description = 'test'))
test_doc.insert()
Expand Down Expand Up @@ -33,8 +42,16 @@ def test_public_comment(self):
frappe.db.delete("Comment", {"reference_doctype": "Blog Post"})

from frappe.templates.includes.comments.comments import add_comment
add_comment('Good comment with 10 chars', 'test@test.com', 'Good Tester',
'Blog Post', test_blog.name, test_blog.route)

frappe.form_dict.comment = 'Good comment with 10 chars'
frappe.form_dict.comment_email = 'test@test.com'
frappe.form_dict.comment_by = 'Good Tester'
frappe.form_dict.reference_doctype = 'Blog Post'
frappe.form_dict.reference_name = test_blog.name
frappe.form_dict.route = test_blog.route
frappe.local.request_ip = '127.0.0.1'

add_comment()

self.assertEqual(frappe.get_all('Comment', fields = ['*'], filters = dict(
reference_doctype = test_blog.doctype,
Expand All @@ -43,8 +60,10 @@ def test_public_comment(self):

frappe.db.delete("Comment", {"reference_doctype": "Blog Post"})

add_comment('pleez vizits my site http://mysite.com', 'test@test.com', 'bad commentor',
'Blog Post', test_blog.name, test_blog.route)
frappe.form_dict.comment = 'pleez vizits my site http://mysite.com'
frappe.form_dict.comment_by = 'bad commentor'

add_comment()

self.assertEqual(len(frappe.get_all('Comment', fields = ['*'], filters = dict(
reference_doctype = test_blog.doctype,
Expand Down
32 changes: 9 additions & 23 deletions frappe/core/doctype/feedback/feedback.json
View file
Expand Up @@ -8,34 +8,14 @@
"reference_doctype",
"reference_name",
"column_break_3",
"rating",
"ip_address",
"section_break_6",
"feedback"
"like",
"ip_address"
],
"fields": [
{
"fieldname": "column_break_3",
"fieldtype": "Column Break"
},
{
"fieldname": "rating",
"fieldtype": "Float",
"in_list_view": 1,
"label": "Rating",
"precision": "1",
"reqd": 1
},
{
"fieldname": "section_break_6",
"fieldtype": "Section Break"
},
{
"fieldname": "feedback",
"fieldtype": "Small Text",
"label": "Feedback",
"reqd": 1
},
{
"fieldname": "reference_doctype",
"fieldtype": "Select",
Expand All @@ -57,11 +37,17 @@
"hidden": 1,
"label": "IP Address",
"read_only": 1
},
{
"default": "0",
"fieldname": "like",
"fieldtype": "Check",
"label": "Like"
}
],
"index_web_pages_for_search": 1,
"links": [],
"modified": "2021-06-23 12:45:42.045696",
"modified": "2021-11-10 20:53:21.255593",
"modified_by": "Administrator",
"module": "Core",
"name": "Feedback",
Expand Down
20 changes: 9 additions & 11 deletions frappe/core/doctype/feedback/test_feedback.py
View file
Expand Up @@ -8,8 +8,7 @@ class TestFeedback(unittest.TestCase):
def tearDown(self):
frappe.form_dict.reference_doctype = None
frappe.form_dict.reference_name = None
frappe.form_dict.rating = None
frappe.form_dict.feedback = None
frappe.form_dict.like = None
frappe.local.request_ip = None

def test_feedback_creation_updation(self):
Expand All @@ -18,23 +17,22 @@ def test_feedback_creation_updation(self):

frappe.db.delete("Feedback", {"reference_doctype": "Blog Post"})

from frappe.templates.includes.feedback.feedback import add_feedback, update_feedback
from frappe.templates.includes.feedback.feedback import give_feedback

frappe.form_dict.reference_doctype = 'Blog Post'
frappe.form_dict.reference_name = test_blog.name
frappe.form_dict.rating = 5
frappe.form_dict.feedback = 'New feedback'
frappe.form_dict.like = True
frappe.local.request_ip = '127.0.0.1'

feedback = add_feedback()
feedback = give_feedback()

self.assertEqual(feedback.feedback, 'New feedback')
self.assertEqual(feedback.rating, 5)
self.assertEqual(feedback.like, True)

updated_feedback = update_feedback('Blog Post', test_blog.name, 6, 'Updated feedback')
frappe.form_dict.like = False

self.assertEqual(updated_feedback.feedback, 'Updated feedback')
self.assertEqual(updated_feedback.rating, 6)
updated_feedback = give_feedback()

self.assertEqual(updated_feedback.like, False)

frappe.db.delete("Feedback", {"reference_doctype": "Blog Post"})

Expand Down
125 changes: 125 additions & 0 deletions frappe/public/scss/website/blog.scss
View file
@@ -1,3 +1,8 @@
:root {
--comment-timeline-bottom: 60px;
--comment-timeline-top: 8px;
}

.blog-list {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -96,4 +101,124 @@
margin-top: 3rem;
}
}


.feedback-item svg {
vertical-align: sub;
}

.blog-feedback {
display: flex;

.like-icon {
cursor: pointer;

&.gray use {
fill: var(--gray-600);
stroke: none;
}
}
}

.add-comment-button {
margin-left: 35px;
}

.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
top: 8px;
left: 22px;
background-color: var(--fg-color);
border: 1px solid var(--dark-border-color);

&:before {
content: ' ';
background: var(--gray-600);
position: absolute;
top: 5px;
left: 5px;
border-radius: 50%;
height: 4px;
width: 4px;
}
}

.blog-comments {
.comment-form-wrapper {
display: none;
}

.add-comment-section {
.login-required {
padding: var(--padding-sm);
border-radius: var(--border-radius-sm);
box-shadow: var(--card-shadow);
}

.new-comment {
display: flex;
padding: var(--padding-lg);
box-shadow: var(--card-shadow);
border-radius: var(--border-radius-md);

.new-comment-fields {
flex: 1;

.form-label {
font-weight: var(--text-bold);
}

.comment-text-area textarea {
resize: none;
}

@media (min-width: 576px) {
.comment-by {
padding-right: 0px !important;
padding-bottom: 0px !important;
}
}
}
}
}


#comment-list {
position: relative;
padding-left: var(--padding-xl);

&:before {
content: " ";
position: absolute;
top: var(--comment-timeline-top);
bottom: var(--comment-timeline-bottom);
border-left: 1px solid var(--dark-border-color);
}

.comment-row {
position: relative;

.comment-avatar {
position: absolute;
top: 10px;
left: -17px;
}

.comment-content {
box-shadow: var(--card-shadow);
border-radius: var(--border-radius-md);
padding: var(--padding-md);
margin-left: 35px;
flex: 1;

.content p{
margin-bottom: 0px;
}
}
}
}
}
}
6 changes: 3 additions & 3 deletions frappe/templates/includes/avatar_macro.html
View file
@@ -1,6 +1,6 @@
{% macro avatar(user_id=None, css_style=None) %}
{% macro avatar(user_id=None, css_style=None, size="avatar-small") %}
{% set user_info = frappe.utils.get_user_info_for_avatar(user_id) %}
<span class="avatar avatar-small" title="{{ user_info.name }}" style="{{ css_style or '' }}">
<span class="avatar {{ size }}" title="{{ user_info.name }}" style="{{ css_style or '' }}">
{% if user_info.image %}
<img
class="avatar-frame standard-image"
Expand All @@ -11,7 +11,7 @@
<span
class="avatar-frame standard-image"
title="{{ user_info.name }}">
{{ frappe.utils.get_abbr(user_info.name) }}
{{ frappe.utils.get_abbr(user_info.name).upper() }}
</span>
{% endif %}
</span>
Expand Down
30 changes: 13 additions & 17 deletions frappe/templates/includes/comments/comment.html
View file
@@ -1,18 +1,14 @@
{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}

<div class="comment-row media">
{{ square_image_with_fallback(src=frappe.get_gravatar(comment.comment_email or comment.sender), size='extra-small', alt=comment.sender_full_name, class='align-self-start mr-4') }}
<div class="media-body">
<div class="d-flex justify-content-between align-items-start">
<span class="font-weight-bold text-muted">
{{ comment.sender_full_name or comment.comment_by }}
</span>
<span class="text-muted small">
{{ comment.creation | global_date_format }}
</span>
</div>
<div class="text-muted">
{{ comment.content | markdown }}
</div>
</div>
</div>
<div class="comment-row media my-5">
<div class="comment-avatar">
{{ avatar(user_id=(comment.comment_email or comment.sender), size='avatar-medium') }}
</div>
<div class="comment-content">
<div class="head mb-2">
<span class="title font-weight-bold mr-2">{{ comment.sender_full_name or comment.comment_by }}</span>
<span class="time small text-muted">{{ frappe.utils.pretty_date(comment.creation) }}</span>
</div>
<div class="content">{{ comment.content | markdown }}</div>
</div>
</div>

0 comments on commit f4eff6f

Please sign in to comment.