Merge pull request #14916 from pateljannat/discussions-better-empty-s…

…tate style: Discussions better empty state
frappe · Nov 12, 2021 · 1e33f38 · 1e33f38
2 parents 64a1cc4 + 88ddb7d
commit 1e33f38
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 77 deletions.
diff --git a/frappe/public/icons/timeless/message.svg b/frappe/public/icons/timeless/message.svg
diff --git a/frappe/templates/discussions/button.html b/frappe/templates/discussions/button.html
@@ -1,7 +1,9 @@
 {% if frappe.session.user != "Guest" and
 (condition is not defined or (condition is defined and condition )) %}
-<span class="button is-secondary reply">
+<span class="btn btn-md btn-default reply">
 	{{ _(cta_title) }}
-	<svg class="icon icon-sm ml-1"><use href="#icon-add" style="stroke: var(--gray-700)"></use></svg>
+	<!-- 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 %}
diff --git a/frappe/templates/discussions/comment_box.html b/frappe/templates/discussions/comment_box.html
@@ -28,7 +28,7 @@
 		</div>
 
 		<a class="dark-links cancel-comment hide"> {{ _("Cancel") }} </a>
-		<div class="button is-default submit-discussion pull-right mb-1">
+		<div class="btn btn-md btn-default submit-discussion pull-right mb-1">
 			{{ _("Post") }}
 		</div>
 	</div>

diff --git a/frappe/templates/discussions/discussions_section.html b/frappe/templates/discussions/discussions_section.html
@@ -8,16 +8,16 @@
 	{% include "frappe/templates/discussions/topic_modal.html" %}
 
 	<div class="discussions-header">
-		<span class="course-home-headings">{{ _(title) }}</span>
+		<span class="discussion-heading">{{ _(title) }}</span>
 		{% if topics and not single_thread %}
 		{% include "frappe/templates/discussions/button.html" %}
 		{% endif %}
 	</div>
 
-	<div class="common-card-style thread-card {% if topics | length and not single_thread %} discussions-card {% endif %} ">
+	<div class="card-style thread-card {% if topics | length and not single_thread %} discussions-card {% endif %}
+		{% if not topics | length %} empty-state {% endif %}">
 		{% if topics and not single_thread %}
 
-
 		<div class="discussions-sidebar">
 			{% include "frappe/templates/discussions/search.html" %}
 
@@ -38,24 +38,23 @@
 		{% include "frappe/templates/discussions/reply_section.html" %}
 
 		{% else %}
-		<div class="no-discussions" id="no-discussions">
-			<div class="font-weight-bold">No {{ title }}</div>
-			<div class="small mt-3 mb-3">There are no {{ title | lower }} for this {{ doctype | lower }}, why don't you start
-				one! </div>
+		<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="button is-primary mt-3" id="login-from-discussion"> {{ _("Log In") }} </div>
+			<div class="btn btn-default btn-md mt-3" id="login-from-discussion"> {{ _("Login") }} </div>
 			{% elif condition is defined and not condition %}
-			<a class="button is-primary mt-3" id="login-from-discussion" href="" data-redirect="{{ redirect_to }}">
+			<div class="btn btn-default btn-md mt-3" id="login-from-discussion" data-redirect="{{ redirect_to }}">
 				{{ button_name }}
-			</a>
+			</div>
 			{% else %}
 			{% include "frappe/templates/discussions/button.html" %}
 			{% endif %}
 		</div>
+		{% endif %}
 	</div>
 </div>
-{% endif %}
-</div>
 
 {% block script %}
 	<script> {% include "frappe/templates/discussions/discussions.js" %} </script>

diff --git a/frappe/templates/discussions/reply_section.html b/frappe/templates/discussions/reply_section.html
@@ -9,13 +9,13 @@
 	{% if topic %} id="t{{ topic.name }}" data-topic="{{ topic.name }}" {% endif %}>
 
 	{% if not single_thread %}
-	<div class="button is-default back">
+	<div class="btn btn-md btn-default ellipsis back">
 		{{ _("Back") }}
 	</div>
 	{% endif %}
 
 	{% if topic and topic.title %}
-	<div class="course-home-headings p-0">{{ topic.title }}</div>
+	<div class="discussion-heading p-0">{{ topic.title }}</div>
 	{% endif %}
 
 	{% for reply in replies %}
@@ -30,9 +30,9 @@
 	<div class="d-flex flex-column align-items-center small">
 		{{ _("Want to join the discussion?") }}
 		{% if frappe.session.user == "Guest" %}
-		<div class="button is-primary mt-3 mb-3" id="login-from-discussion">{{ _("Log In") }}</div>
+		<div class="btn btn-default btn-md mt-3 mb-3" id="login-from-discussion">{{ _("Login") }}</div>
 		{% elif not condition %}
-		<div class="button is-primary mt-3 mb-3" id="login-from-discussion" data-redirect="{{ redirect_to }}">{{ button_name }}
+		<div class="btn btn-default btn-md mt-3 mb-3" id="login-from-discussion" data-redirect="{{ redirect_to }}">{{ button_name }}
 		</div>
 		{% endif %}
 	</div>

diff --git a/frappe/templates/discussions/sidebar.html b/frappe/templates/discussions/sidebar.html
@@ -3,12 +3,12 @@
 		<div class="discussion-topic-title">{{ topic.title }}</div>
 		<div class="sidebar-info">
 			{% set creator = frappe.get_doc("User", topic.owner) %}
-			<span class="course-instructor ml-0">
+			<span class="reply-author ml-0">
 				{{ creator.full_name }}
 			</span>
-			<span class="small">
-				<span class="mr-2">
-					<img src="/assets/frappe/icons/timeless/message.svg">
+			<span class="small d-flex">
+				<span class="mr-2 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>

diff --git a/frappe/templates/styles/discussion_style.css b/frappe/templates/styles/discussion_style.css
@@ -37,7 +37,7 @@
 }
 
 .no-discussions {
-	width: 250px;
+	width: 500px;
 	margin: 0 auto;
 	text-align: center;
 }
@@ -103,7 +103,7 @@
 }
 
 .discussion-topic-title {
-	color: var(--text-color);
+	color: var(--gray-900);
 }
 
 .discussion-on-page .topic-title {
@@ -137,65 +137,24 @@
 	align-items: center;
 }
 
-.course-home-headings {
+.discussion-heading {
 	font-weight: 600;
 	font-size: 22px;
 	line-height: 146%;
 	letter-spacing: -0.0175em;
-	color: #192734;
+	color: var(--gray-900);
 	margin-bottom: 1rem;
 	padding: 0 1rem;
 }
 
-.common-card-style {
+.card-style {
 	display: flex;
-	background: #FFFFFF;
+	background: white;
 	border-radius: 8px;
 	position: relative;
-	border: 1px solid #EEF0F2;
-	box-shadow: 0 0px 4px 2px #19273405;
-}
-
-.button {
-	box-shadow: var(--btn-shadow);
-	border-radius: 4px;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: fit-content;
-	padding: 8px 12px 8px;
-	font-size: 12px;
-	line-height: 135%;
-	letter-spacing: -0.011em;
-	border: none;
-}
-
-.is-primary {
-	background: var(--primary-color);
-	color: #FFFFFF;
-}
-
-.is-primary:hover {
-	text-decoration: none;
-	color: #FFFFFF;
-}
-
-.is-secondary {
-	background: #FFFFFF;
-}
-
-.is-secondary:hover {
-	text-decoration: none;
-	color: inherit;
-}
-
-.is-default {
-	background: #F4F5F6;
-	color: #1F272E;
+	border: 1px solid var(--gray-200);
 }
 
-
 .discussions-card {
 	display: grid;
 	grid-gap: 2rem;
@@ -233,19 +192,35 @@
 	}
 }
 
-.course-instructor {
+.reply-author {
 	margin: 0px 8px;
 	font-size: 12px;
 	line-height: 135%;
-	color: var(--text-color);
+	color: var(--gray-900);
 }
 
 .card-divider {
-	border: 1px solid var(--gray-200);
+	border-top: 1px solid var(--gray-200);
 	margin-bottom: 1rem;
 }
 
 .card-divider-dark {
-	border: 1px solid var(--gray-300);
+	border-top: 1px solid var(--gray-300);
 	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);
+}
+
+.discussions-header .btn {
+	float: right;
+}
diff --git a/frappe/website/web_template/discussions/discussions.html b/frappe/website/web_template/discussions/discussions.html
@@ -1,3 +1,6 @@
 {% set doctype = "Web Page" %}
+{% set empty_state_title = _("No {0}").format(title) %}
+{% set empty_state_subtitle = _("There are no {0} for this {1}, why don't you start one!").format(title | lower , doctype | lower) %}
+
 {% include "frappe/templates/discussions/discussions_section.html" %}