Merge pull request #1962 from codidact/0valt/1599/inbox-community-names

Show community logo & name for inbox notifications

Author: Oaphi

app/assets/stylesheets/application.scss

@@ -43,14 +43,6 @@ a {
   overflow-wrap: break-word;
 }
 
-a.header--site-name {
-  display: flex !important;
-}
-.header .header--item.is-complex:not(.is-mobile-menu) {
-  align-items: center !important;
-  display: flex !important;
-}
-
 @media all and (max-width: 73.5em) {
   .grid {
     margin-left: 0;
@@ -88,18 +80,6 @@ a.header--site-name {
   font-size: 14px;
 }
 
-header {
-  &.header {
-    z-index: 5;
-    position: relative;
-    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
-  }
-  &.header.sticky {
-    position: sticky;
-    top: 0;
-  }
-}
-
 .notice a.has-font-size-larger {
   font-size: 19px;
 }
@@ -156,10 +136,6 @@ hr {
   overflow-y: scroll;
 }
 
-.header--container {
-  align-items: center !important;
-}
-
 img {
   align-self: flex-start;
 }
@@ -242,20 +218,10 @@ table.is-with-hover tr:hover td {
   background-color: #eee
 }
 
-/* The default header size (2.5rem) is too huge for small headers. */
-.header.is-small .header--brand .header--site-name {
-  font-size: 2rem;
-}
-
 .notice {
   z-index: 9999;
 }
 
-/* Fix header images being stretched - https://meta.codidact.com/posts/278377 */
-img.header--item-image {
-  object-fit: contain;
-}
-
 .widget--header-link {
   margin: 0 0 0 0.5em;
 }

app/assets/stylesheets/header.scss

@@ -0,0 +1,38 @@
+@import 'variables';
+
+a.header--site-name:any-link {
+  display: flex;
+}
+
+.header .header--item.is-complex:not(.is-mobile-menu) {
+  align-items: center !important;
+  display: flex !important;
+}
+
+
+header {
+  &.header {
+    z-index: 5;
+    position: relative;
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  &.header.sticky {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.header--container {
+  align-items: center !important;
+}
+
+/* The default header size (2.5rem) is too huge for small headers. */
+.header.is-small .header--brand .header--site-name {
+  font-size: 2rem;
+}
+
+/* Fix header images being stretched - https://meta.codidact.com/posts/278377 */
+img.header--item-image {
+  object-fit: contain;
+}

app/assets/stylesheets/notifications.scss

@@ -34,6 +34,10 @@
     }
   }
 
+  .notification--icon {
+    max-height: 1em;
+  }
+
   .notification--timestamp {
     line-break: strict;
   }

app/assets/stylesheets/utilities.scss

@@ -263,13 +263,15 @@ div:hover > .copy-button {
   }
 }
 
-.__mobile-only {
+.__mobile-only,
+a.__mobile-only:any-link {
   @media screen and (min-width: $screen-sm) {
     display: none;
   }
 }
 
-.__desktop-only {
+.__desktop-only,
+a.__desktop-only:any-link {
   @media screen and (max-width: $screen-sm) {
     display: none;
   }

app/views/notifications/_notification.html.erb

@@ -5,10 +5,21 @@
       notification : Notification to render
 "%>
 
+<%
+  mobile_logo_path = SiteSetting['MobileLogoPath', community: notification.community]
+  full_logo_path = SiteSetting['SiteLogoPath', community: notification.community]
+  logo_path = mobile_logo_path.presence || full_logo_path
+%>
+
 <div class="notification">
   <div class="notification-content">
     <div class="form-caption">
-      <%= notification.rendered_timestamp %>
+      <% if logo_path.present? %>
+        <img class="notification--icon"
+             src="<%= logo_path %>"
+             alt="<% notification.community_name %> logo" />
+      <% end %>
+      <%= notification.community_name %> &middot; <%= notification.rendered_timestamp %>
     </div>
     <a href="<%= notification.link %>"><%= render_pings_text(notification.content) %></a>
   </div>