vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: discussions redesign

Browse source
This commit is contained in:
Jannat Patel 2022-02-28 16:14:24 +05:30
parent cdc6bcadb1
commit 487cb39416
8 changed files with 169 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frappe/templates/discussions/button.html
View file

@ -1,9 +1,6 @@
{% if frappe.session.user != "Guest" and
(condition is not defined or (condition is defined and condition )) %}
<span class="btn btn-md btn-default reply">
<span class="btn btn-md btn-secondary-dark reply">
{{ _(cta_title) }}
<!-- Below svg is not a part of the current design. Hence it is commented.
The comment will be removed after all design changes are implemented. -->
<!-- <svg class="icon icon-sm ml-1"><use href="#icon-add" style="stroke: var(--gray-700)"></use></svg> -->
</span>
{% endif %}

28
frappe/templates/discussions/discussions.js
View file

@ -4,8 +4,6 @@ frappe.ready(() => {
add_color_to_avatars();
expand_first_discussion();
$(".search-field").keyup((e) => {
search_topic(e);
});
@ -14,11 +12,11 @@ frappe.ready(() => {
show_new_topic_modal(e);
});
$("#login-from-discussion").click((e) => {
$(".login-from-discussion").click((e) => {
login_from_discussion(e);
});
$(".sidebar-topic").click((e) => {
$(".sidebar-parent").click((e) => {
if ($(e.currentTarget).attr("aria-expanded") == "true") {
e.stopPropagation();
}
@ -50,13 +48,11 @@ frappe.ready(() => {
clear_comment_box();
});
if ($(document).width() <= 550) {
$(document).on("click", ".sidebar-parent", () => {
hide_sidebar();
});
}
$(document).on("click", ".sidebar-parent", () => {
hide_sidebar();
});
$(document).on("click", ".back", (e) => {
$(document).on("click", ".back-button", (e) => {
back_to_sidebar(e);
});
@ -97,8 +93,7 @@ const publish_message = (data) => {
if ($(`.discussion-on-page[data-topic=${topic.name}]`).length) {
post_message_cleanup();
data.template = style_avatar_frame(data.template);
$('<div class="card-divider-dark mb-8"></div>' + data.template)
.insertBefore(`.discussion-on-page[data-topic=${topic.name}] .discussion-form`);
$(data.template).insertBefore(`.discussion-on-page[data-topic=${topic.name}] .discussion-form`);
} else if (!first_topic && !single_thread && document_match_found) {
post_message_cleanup();
@ -141,15 +136,6 @@ const update_reply_count = (topic) => {
$(`[data-target='#t${topic}']`).find(".reply-count").text(reply_count);
};
const expand_first_discussion = () => {
if ($(document).width() > 550) {
$($(".discussions-parent .collapse")[0]).addClass("show");
$($(".discussions-sidebar [data-toggle='collapse']")[0]).attr("aria-expanded", true);
} else {
$("#discussion-group").addClass("hide");
}
};
const search_topic = (e) => {
let input = $(e.currentTarget).val();

37
frappe/templates/discussions/discussions_section.html
View file

@ -9,17 +9,16 @@
<div class="discussions-header">
<span class="discussion-heading">{{ _(title) }}</span>
{% include "frappe/templates/discussions/search.html" %}
{% if topics and not single_thread %}
{% include "frappe/templates/discussions/button.html" %}
{% endif %}
</div>
<div class="card-style thread-card {% if topics | length and not single_thread %} discussions-card {% endif %}
{% if not topics | length %} empty-state {% endif %}">
<div class="">
{% if topics and not single_thread %}
<div class="discussions-sidebar">
{% include "frappe/templates/discussions/search.html" %}
{% for topic in topics %}
{% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name})%}
@ -27,7 +26,7 @@
{% endfor %}
</div>
<div class="mr-2" id="discussion-group">
<div class="mr-2 hide" id="discussion-group">
{% for topic in topics %}
{% include "frappe/templates/discussions/reply_section.html" %}
{% endfor %}
@ -38,19 +37,25 @@
{% include "frappe/templates/discussions/reply_section.html" %}
{% else %}
<div class="no-discussions">
<img class="icon icon-xl" src="/assets/frappe/icons/timeless/message.svg">
<div class="discussion-heading mt-4 mb-0" style="color: inherit;"> {{ empty_state_title }} </div>
<div class="small mb-6"> {{ empty_state_subtitle }} </div>
{% if frappe.session.user == "Guest" %}
<div class="btn btn-default btn-md mt-3" id="login-from-discussion"> {{ _("Login") }} </div>
{% elif condition is defined and not condition %}
<div class="btn btn-default btn-md mt-3" id="login-from-discussion" data-redirect="{{ redirect_to }}">
{{ button_name }}
<div class="empty-state">
<div>
<img class="icon icon-xl" src="/assets/school/icons/comment.svg">
</div>
<div class="empty-state-text">
<div class="empty-state-heading">{{ empty_state_title }}</div>
<div class="course-meta">{{ empty_state_subtitle }}</div>
</div>
<div>
{% if frappe.session.user == "Guest" %}
<div class="btn btn-default btn-md login-from-discussion"> {{ _("Login") }} </div>
{% elif condition is defined and not condition %}
<div class="btn btn-default btn-md login-from-discussion" data-redirect="{{ redirect_to }}">
{{ button_name }}
</div>
{% else %}
{% include "frappe/templates/discussions/button.html" %}
{% endif %}
</div>
{% else %}
{% include "frappe/templates/discussions/button.html" %}
{% endif %}
</div>
{% endif %}
</div>

9
frappe/templates/discussions/reply_card.html
View file

@ -1,14 +1,13 @@
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
<div class="reply-card">
{% set member = frappe.db.get_value("User", reply.owner, ["name", "full_name", "username"], as_dict=True) %}
<div class="d-flex align-items-center small mb-2">
{% if loop.index == 1 or single_thread %}
<div class="reply-header">
{{ avatar(reply.owner) }}
{% endif %}
<a class="button-links {% if loop.index == 1 or single_thread %} ml-2 {% endif %}" {% if get_profile_url %} href="{{ get_profile_url(member.username) }}" {% endif %}>
<a class="button-links topic-author ml-4"
{% if get_profile_url %} href="{{ get_profile_url(member.username) }}" {% endif %}>
{{ member.full_name }}
</a>
<div class="ml-3 frappe-timestamp" data-timestamp="{{ reply.creation }}"> {{ frappe.utils.pretty_date(reply.creation) }} </div>
<div class="ml-2 frappe-timestamp" data-timestamp="{{ reply.creation }}"> {{ frappe.utils.pretty_date(reply.creation) }} </div>
</div>
<div class="reply-text">{{ frappe.utils.md_to_html(reply.reply) }}</div>
</div>

50
frappe/templates/discussions/reply_section.html
View file

@ -5,39 +5,47 @@
{% endif %}
<div class="collapse discussion-on-page" data-parent="#discussion-group"
<div class="collapse discussion-on-page common-card-style" data-parent="#discussion-group"
{% if topic %} id="t{{ topic.name }}" data-topic="{{ topic.name }}" {% endif %}>
{% if not single_thread %}
<div class="btn btn-md btn-default ellipsis back">
{{ _("Back") }}
</div>
{% endif %}
<div class="reply-section-header">
{% if not single_thread %}
<div class="back-button">
<svg class="icon icon-md">
<use class="" href="#icon-left"></use>
</svg>
</div>
{% endif %}
{% if topic and topic.title %}
<div class="discussion-heading p-0">{{ topic.title }}</div>
{% endif %}
{% if topic and topic.title %}
<div class="discussion-heading p-0">{{ topic.title }}</div>
{% endif %}
</div>
{% for reply in replies %}
{% include "frappe/templates/discussions/reply_card.html" %}
{% if loop.index != replies | length %}
<div class="card-divider-dark mb-8"></div>
{% endif %}
{% endfor %}
{% if frappe.session.user == "Guest" or (condition is defined and not condition) %}
<div class="d-flex flex-column align-items-center small">
{{ _("Want to join the discussion?") }}
{% if frappe.session.user == "Guest" %}
<div class="btn btn-default btn-md mt-3 mb-3" id="login-from-discussion">{{ _("Login") }}</div>
{% elif not condition %}
<div class="btn btn-default btn-md mt-3 mb-3" id="login-from-discussion" data-redirect="{{ redirect_to }}">{{ button_name }}
<div class="empty-state">
<div>
<img class="icon icon-xl" src="/assets/school/icons/comment.svg">
</div>
<div class="empty-state-text">
<div class="empty-state-heading">{{ _("Want to discuss?") }}</div>
<div class="course-meta">{{ _("Post it here, our mentors will help you out.") }}</div>
</div>
<div>
{% if frappe.session.user == "Guest" %}
<div class="btn btn-default btn-md login-from-discussion"> {{ _("Login") }} </div>
{% elif condition is defined and not condition %}
<div class="btn btn-default btn-md login-from-discussion" data-redirect="{{ redirect_to }}">
{{ button_name }}
</div>
{% endif %}
</div>
{% endif %}
</div>
{% else %}
{% include "frappe/templates/discussions/comment_box.html" %}
{% endif %}
</div>

11
frappe/templates/discussions/search.html
View file

@ -1,9 +1,2 @@
<div class="form-group">
<div class="control-input-wrapper">
<div class="control-input">
<input type="text" autocomplete="off" class="input-with-feedback form-control search-field"
data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="Search {{ title }}"
spellcheck="false"></input>
</div>
</div>
</div>
<input type="text" autocomplete="off" class="search-field" data-fieldtype="Text"
data-fieldname="feedback_comments" placeholder="Search {{ title }}" spellcheck="false"></input>

29
frappe/templates/discussions/sidebar.html
View file

@ -1,19 +1,24 @@
<div class="sidebar-parent">
<div class="sidebar-topic" data-target="#t{{ topic.name }}" data-toggle="collapse" aria-expanded="false">
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
{% set creator = frappe.db.get_value("User", topic.owner, ["name", "username", "full_name", "user_image"], as_dict=True) %}
<div class="common-card-style sidebar-parent" data-target="#t{{ topic.name }}" data-toggle="collapse" aria-expanded="false">
<div class="mr-4">
{{ avatar(creator, size="avatar-medium") }}
</div>
<div class="flex-grow-1">
<div class="discussion-topic-title">{{ topic.title }}</div>
<div class="sidebar-info">
{% set creator = frappe.get_doc("User", topic.owner) %}
<span class="reply-author ml-0">
{{ creator.full_name }}
</span>
<span class="small d-flex">
<span class="mr-2 d-flex align-items-center">
<div class="sidebar-topic">
<svg class="icon icon-md m-0 mr-2">
<use class="" href="#icon-reply"></use>
</svg>
<div class="topic-author">{{ creator.full_name }}</div>
<div class="ml-2 frappe-timestamp" data-timestamp="{{ topic.creation }}"> {{ frappe.utils.pretty_date(topic.creation) }} </div>
<div class="ml-auto">
<span class="d-flex align-items-center">
<img class="mr-1" src="/assets/frappe/icons/timeless/message.svg">
<span class="reply-count">{{ replies | length }}</span>
</span>
<span> {{ frappe.utils.format_date(topic.creation, "dd MMM YYYY") }} </span>
</span>
</div>
</div>
</div>
<div class="card-divider"></div>
</div>

130
frappe/templates/styles/discussion_style.css
View file

@ -19,7 +19,6 @@
.discussion-on-page .comment-field {
height: 48px;
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
}
.modal .cancel-comment {
@ -36,18 +35,10 @@
cursor: pointer;
}
.no-discussions {
width: 500px;
margin: 0 auto;
text-align: center;
}
.no-discussions .button {
margin: auto;
}
.discussions-header {
margin: 2.5rem 0 1.25rem;
display: flex;
align-items: center;
}
.discussions-header .button {
@ -55,18 +46,18 @@
}
.discussions-parent .search-field {
background-color: #E2E6E9;
background-image: url(/assets/frappe/icons/timeless/search.svg);
background-repeat: no-repeat;
text-indent: 1.5rem;
background-position: 1rem 0.7rem;
height: 36px;
font-size: 12px;
padding: 0.65rem 0.9rem;
background-position: 1rem 0.65rem;
font-size: var(--text-md);
padding: 0.5rem 1rem;
border: 1px solid var(--gray-300);
border-radius: var(--border-radius-md);
margin-right: 0.5rem;
}
.discussions-sidebar {
background-color: #F4F5F6;
padding: 0.75rem;
border-radius: 4px;
}
@ -78,9 +69,8 @@
}
.sidebar-topic {
padding: 0.75rem;
margin: 0.75rem 0;
cursor: pointer;
display: flex;
align-items: center;
}
.sidebar-topic[aria-expanded="true"] {
@ -95,7 +85,7 @@
}
.reply-card {
margin-bottom: 2rem;
margin-bottom: 1.5rem;
}
.discussions-parent .collapsing {
@ -104,16 +94,32 @@
.discussion-topic-title {
color: var(--gray-900);
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: 0.5rem;
}
.discussion-on-page .topic-title {
display: none;
}
.discussion-on-page {
flex-direction: column;
padding: 1.5rem;
}
.discussions-sidebar .sidebar-parent:last-child .card-divider {
display: none;
}
.reply-text {
background: var(--gray-100);
padding: 1rem;
border-radius: var(--border-radius-lg);
font-size: 14px;
color: var(--gray-900);
}
.reply-text h1 {
font-size: 1.3rem;
}
@ -130,6 +136,10 @@
font-size: 1rem;
}
.reply-text p {
margin-bottom: 0;
}
.sidebar-info {
margin-top: 0.5rem;
display: flex;
@ -143,8 +153,7 @@
line-height: 146%;
letter-spacing: -0.0175em;
color: var(--gray-900);
margin-bottom: 1rem;
padding: 0 1rem;
flex-grow: 1;
}
.card-style {
@ -179,17 +188,12 @@
}
}
@media (max-width: 550px) {
.back {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
}
@media (min-width: 550px) {
.back {
display: none;
}
.back-button {
background: var(--gray-100);
border-radius: 50%;
padding: 0.5rem 0.75rem 0.6rem;
width: fit-content;
margin-right: 1rem;
}
.reply-author {
@ -209,14 +213,6 @@
margin-bottom: 1rem;
}
.empty-state {
background: var(--gray-200);
border: 1px dashed var(--gray-400);
box-sizing: border-box;
border-radius: 8px;
padding: 2.5rem;
}
.discussions-parent .btn-default {
color: var(--gray-700);
}
@ -224,3 +220,53 @@
.discussions-header .btn {
float: right;
}
.empty-state {
background: var(--gray-100);
border-radius: var(--border-radius-lg);
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.empty-state-text {
flex: 1;
margin-left: 1.25rem;
}
.empty-state-heading {
font-size: var(--text-xl);
color: var(--gray-900);
font-weight: 600;
}
.sidebar-parent {
display: flex;
align-items: center;
padding: 1.25rem;
margin-bottom: 0.5rem;
cursor: pointer;
}
.topic-author {
color: var(--gray-800);
font-weight: 500;
}
.reply-section-header {
display: flex;
align-items: center;
margin-bottom: 2.5rem;
}
.reply-author {
display: flex;
align-items: center;
}
.reply-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}