From 487cb39416d8662d42e9755eacce3696d5d154df Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 28 Feb 2022 16:14:24 +0530 Subject: [PATCH 01/13] feat: discussions redesign --- frappe/templates/discussions/button.html | 5 +- frappe/templates/discussions/discussions.js | 28 +--- .../discussions/discussions_section.html | 37 ++--- frappe/templates/discussions/reply_card.html | 9 +- .../templates/discussions/reply_section.html | 50 ++++--- frappe/templates/discussions/search.html | 11 +- frappe/templates/discussions/sidebar.html | 29 ++-- frappe/templates/styles/discussion_style.css | 130 ++++++++++++------ 8 files changed, 169 insertions(+), 130 deletions(-) diff --git a/frappe/templates/discussions/button.html b/frappe/templates/discussions/button.html index 8e61d2412f..746227aa0b 100644 --- a/frappe/templates/discussions/button.html +++ b/frappe/templates/discussions/button.html @@ -1,9 +1,6 @@ {% if frappe.session.user != "Guest" and (condition is not defined or (condition is defined and condition )) %} - + {{ _(cta_title) }} - - {% endif %} diff --git a/frappe/templates/discussions/discussions.js b/frappe/templates/discussions/discussions.js index 19c0f89a49..f1fc568acf 100644 --- a/frappe/templates/discussions/discussions.js +++ b/frappe/templates/discussions/discussions.js @@ -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); - $('
' + 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(); diff --git a/frappe/templates/discussions/discussions_section.html b/frappe/templates/discussions/discussions_section.html index 07c229595b..e8572cc802 100644 --- a/frappe/templates/discussions/discussions_section.html +++ b/frappe/templates/discussions/discussions_section.html @@ -9,17 +9,16 @@
{{ _(title) }} + {% include "frappe/templates/discussions/search.html" %} {% if topics and not single_thread %} {% include "frappe/templates/discussions/button.html" %} {% endif %}
-
+
{% if topics and not single_thread %}
- {% 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 %}
-
+
{% for topic in topics %} {% include "frappe/templates/discussions/reply_section.html" %} {% endfor %} @@ -38,19 +37,25 @@ {% include "frappe/templates/discussions/reply_section.html" %} {% else %} -
- -
{{ empty_state_title }}
-
{{ empty_state_subtitle }}
- {% if frappe.session.user == "Guest" %} -
{{ _("Login") }}
- {% elif condition is defined and not condition %} -
- {{ button_name }} +
+
+ +
+
+
{{ empty_state_title }}
+
{{ empty_state_subtitle }}
+
+
+ {% if frappe.session.user == "Guest" %} + + {% elif condition is defined and not condition %} + + {% else %} + {% include "frappe/templates/discussions/button.html" %} + {% endif %}
- {% else %} - {% include "frappe/templates/discussions/button.html" %} - {% endif %}
{% endif %}
diff --git a/frappe/templates/discussions/reply_card.html b/frappe/templates/discussions/reply_card.html index 5ff5261472..8fd1ad597e 100644 --- a/frappe/templates/discussions/reply_card.html +++ b/frappe/templates/discussions/reply_card.html @@ -1,14 +1,13 @@ {% from "frappe/templates/includes/avatar_macro.html" import avatar %}
{% set member = frappe.db.get_value("User", reply.owner, ["name", "full_name", "username"], as_dict=True) %} -
- {% if loop.index == 1 or single_thread %} +
{{ avatar(reply.owner) }} - {% endif %} - + {{ member.full_name }} -
{{ frappe.utils.pretty_date(reply.creation) }}
+
{{ frappe.utils.pretty_date(reply.creation) }}
{{ frappe.utils.md_to_html(reply.reply) }}
diff --git a/frappe/templates/discussions/reply_section.html b/frappe/templates/discussions/reply_section.html index b269883ba0..7e424c5bc6 100644 --- a/frappe/templates/discussions/reply_section.html +++ b/frappe/templates/discussions/reply_section.html @@ -5,39 +5,47 @@ {% endif %} -
- {% if not single_thread %} -
- {{ _("Back") }} -
- {% endif %} +
+ {% if not single_thread %} +
+ + + +
+ {% endif %} - {% if topic and topic.title %} -
{{ topic.title }}
- {% endif %} + {% if topic and topic.title %} +
{{ topic.title }}
+ {% endif %} +
{% for reply in replies %} {% include "frappe/templates/discussions/reply_card.html" %} - - {% if loop.index != replies | length %} -
- {% endif %} {% endfor %} {% if frappe.session.user == "Guest" or (condition is defined and not condition) %} -
- {{ _("Want to join the discussion?") }} - {% if frappe.session.user == "Guest" %} -
{{ _("Login") }}
- {% elif not condition %} -
{{ button_name }} +
+
+ +
+
+
{{ _("Want to discuss?") }}
+
{{ _("Post it here, our mentors will help you out.") }}
+
+
+ {% if frappe.session.user == "Guest" %} + + {% elif condition is defined and not condition %} + + {% endif %}
- {% endif %}
{% else %} {% include "frappe/templates/discussions/comment_box.html" %} {% endif %} -
diff --git a/frappe/templates/discussions/search.html b/frappe/templates/discussions/search.html index 800f2962fd..371c5dce9c 100644 --- a/frappe/templates/discussions/search.html +++ b/frappe/templates/discussions/search.html @@ -1,9 +1,2 @@ -
-
-
- -
-
-
+ diff --git a/frappe/templates/discussions/sidebar.html b/frappe/templates/discussions/sidebar.html index 14d38c86a5..b4da8c3332 100644 --- a/frappe/templates/discussions/sidebar.html +++ b/frappe/templates/discussions/sidebar.html @@ -1,19 +1,24 @@ -
-