Update sidebar filter menu on Notifications (#7394)

2020-04-27 09:17:20 -07:00 · 2020-04-27 09:17:20 -07:00 · 9de59c4107
commit 9de59c4107
parent 2d26318cf9
11 changed files with 411 additions and 85 deletions
--- a/app/assets/images/arrow-down-fill.svg
+++ b/app/assets/images/arrow-down-fill.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L6 10H18L12 16Z"/>
+</svg>
--- a/app/assets/images/checkmark.svg
+++ b/app/assets/images/checkmark.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
+</svg>
--- a/app/assets/javascripts/initializers/initNotifications.js
+++ b/app/assets/javascripts/initializers/initNotifications.js
@ -3,6 +3,7 @@ function initNotifications() {
  markNotificationsAsRead();
  initReactions();
  listenForNotificationsBellClick();
+  initFilter();
  initPagination();
  initLoadMoreButton();
 }
@ -127,6 +128,27 @@ function listenForNotificationsBellClick() {
  }, 180);
 }

+function initFilter() {
+  var navFilterMenu = document.getElementsByClassName("notifications-filter__dropdown__menu");
+  var navFilterSelect = document.getElementById("notifications-filter__select");
+
+  for (var i = 0; i < navFilterMenu.length; i++) {
+    document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
+  }
+
+  if (navFilterSelect) {
+    navFilterSelect.onclick = function(){
+      document.getElementById("notifications-filter__menu-overlay").classList.add("showing");
+    }
+  }
+
+  for (var i = 0; i < navFilterMenu.length; i++) {
+    navFilterMenu[i].onclick = function(event){
+      document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
+    }
+  }
+}
+
 function initPagination() {
  // paginators appear after each block of HTML notifications sent by the server
  const paginators = document.getElementsByClassName('notifications-paginator');
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@ -918,51 +918,3 @@
  padding: 48px 24px;
  text-align: center;
 }
-
-// Notifications filtering on mobile.
-.notifications-mobile-filters {
-  @media screen and (min-width: 950px) {
-    display: none;
-  }
-  .organization-name {
-    font-size: 15px;
-    font-weight: bold;
-    border: 0px;
-    display: inline-block;
-    width: 27%;
-    padding: 9px 0px;
-    text-align: center;
-    color: var(--card-color-tertiary);
-    margin: 1%;
-  }
-  .query-filter-button {
-    font-size: 12px;
-    font-weight: bold;
-    background: transparent;
-    border: 0px;
-    display: inline-block;
-    width: 27%;
-    padding: 9px 0px;
-    text-align: left;
-    border-radius: 100px;
-    color: var(--card-color);
-    text-align: center;
-    margin: 1%;
-
-    &:hover {
-      @include themeable(
-        background,
-        theme-container-background-hover,
-        lighten($bold-blue, 38%)
-      );
-    }
-    &.selected {
-      @include themeable(
-        background,
-        theme-container-accent-background,
-        lighten($bold-blue, 8%)
-      );
-      @include themeable(color, theme-color, white);
-    }
-  }
-}
--- a/app/assets/stylesheets/base/reset.scss
+++ b/app/assets/stylesheets/base/reset.scss
@ -91,6 +91,13 @@ button,
  -webkit-appearance: button;
 }

+// Remove default stylings for fieldset
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
 // Remove the inner border and padding in Firefox.
 button::-moz-focus-inner,
 [type='button']::-moz-focus-inner,
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@ -20,6 +20,18 @@ $card-divider: 1px solid var(--body-bg);
    align-items: center;
  }

+  &__subheader {
+    padding: $su-2 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__title {
+      color: var(--base-80);
+      font-weight: $fw-bold;
+    }
+  }
+
  &__title {
    color: var(--card-headline);
    font-weight: $fw-bold;
@ -28,4 +40,16 @@ $card-divider: 1px solid var(--body-bg);
  &__body {
    padding: $su-4;
  }
+
+  &__inner-section {
+    margin-bottom: $su-4;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .crayons-card__section-header {
+      padding-top: 0;
+    }
+  }
 }
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@ -183,7 +183,6 @@
  }
 }

-
 .crayons-color-selector {
  @extend %form-styling;
  padding: calc(0.5em - var(--border-width)) 0.5em;
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@ -140,4 +140,25 @@
      }
    }
  }
+
+  &--item {
+    padding: $su-3;
+    text-align: center;
+    width: 100%;
+
+    &--current {
+      border-bottom: 4px solid var(--accent-brand);
+
+      .crayons-tabs__label {
+        color: var(--link-color);
+        font-size: $fs-base;
+        font-weight: $fw-bold;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--base-10);
+    }
+  }
 }
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@ -1,9 +1,12 @@
@import 'variables';
@import 'mixins';
@import 'functions';
+@import 'config/import';

 .notifications-index {
  .home {
+    overflow: initial;
+
    .articles-list {
      .signup-cue {
        padding: 30px 25px;
@ -428,3 +431,167 @@
    @include load-more;
  }
 }
+
+
+// Notifications filtering on mobile.
+.notifications-filter__tabs {
+  display: none;
+
+  // @media screen and (min-width: 950px) {
+  //   display: none;
+  // }
+
+  &.showing {
+    display: flex;
+  }
+  background:  var(--base-inverted);
+}
+
+.notifications-filter__list {
+  li {
+    margin-bottom: $su-1;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &--item {
+    align-items: center;
+    border-radius: $br-default;
+    box-sizing: border-box;
+    color: var(--card-color);
+    display: inline-flex;
+    font-weight: $fw-medium;
+    justify-content: space-between;
+    padding: $su-2;
+    width: 100%;
+
+    &:hover {
+      background: var(--base-10);
+    }
+
+    &.selected {
+      background: var(--base-10);
+
+      .notifications-filter__icon {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.notifications-filter__dropdown {
+  display: none;
+
+  @media screen and (max-width: 950px) {
+    display: block;
+  }
+
+  &__menu-overlay {
+    display: none;
+
+    &.showing {
+      display: flex;
+    }
+
+    &:before {
+      content: "";
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      background: rgba(0,0,0,0.5);
+      z-index: 499;
+    }
+  }
+
+  &__header {
+    padding: $su-3 $su-4;
+  }
+
+  &__title {
+    font-weight: $fw-bold;
+  }
+
+  &__menu {
+    display: flex;
+    background: var(--base-inverted);
+    flex-direction: column;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    right: 0;
+    z-index: 500;
+  }
+
+  &__select {
+    appearance: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    padding: $su-4;
+    justify-content: center;
+    font-weight: $fw-bold;
+    width: 100%;
+    font-family: $ff-default;
+
+    &:hover
+    &:active,
+    {
+      background-color: var(--base-10);
+    }
+  }
+
+  &__icon {
+    visibility: hidden;
+  }
+
+  &__option {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: $su-3 $su-4;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: var(--base-10);
+    }
+
+    &.selected {
+    }
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+  }
+
+  &__label--title {
+    font-weight: $fw-medium;
+    font-size: $fs-base;
+  }
+
+  &__label--subtitle {
+    color: var(--base-60);
+    font-size: $fs-s;
+  }
+}
+
+.notifications-filter__list,
+.notifications-filter__dropdown {
+  .notifications-filter__icon {
+    visibility: hidden;
+  }
+
+  .selected {
+    .notifications-filter__icon {
+      visibility: visible;
+    }
+  }
+}
--- a/app/assets/stylesheets/widgets.scss
+++ b/app/assets/stylesheets/widgets.scss
@ -418,6 +418,13 @@
  }
 }

+.query-filter-button {
+  box-sizing: border-box;
+  display: inline-block;
+  padding: $su-2 0;
+  width: 100%;
+}
+
 // Sidebar sponsors
 .sidebar-sponsor {
  color: var(--card-color-tertiary);
@ -434,7 +441,7 @@
  color: $black;
  display: block;
  position: relative;
-  @media screen and (min-width: 950px) {
+  @media screen and (min-width: $breakpoint-m) {
    .sidebar-nav-link-follow {
      display: none;
    }
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@ -20,46 +20,167 @@
 <% if user_signed_in? %>
  <div class="home" id="notifications-container">
    <div class="side-bar">
-      <div class="widget fixed-widget">
-        <header>
-          <h4>notifications</h4>
+      <div class="crayons-card">
+        <header class="crayons-card__header">
+          <h3 class="crayons-card__title">Filter</h3>
        </header>
-        <div class="widget-body">
-          <a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
-          <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">COMMENTS</a>
-          <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">POSTS</a>
+        <div class="crayons-card__body widget-body">
+          <section class="crayons-card__inner-section">
+            <% if @organizations.present? %>
+              <header class="crayons-card__subheader">
+                <h4 class="crayons-card__subheader__title">
+                  @<%= @user.username %>
+                </h4>
+              </header>
+            <% end %>
+            <ul class="notifications-filter__list">
+              <li>
+                <a class="notifications-filter__list--item <%= "selected" if params[:filter].blank? %>" href="/notifications">
+                  All
+                  <div class="notifications-filter__icon">
+                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
+                  Comments
+                  <div class="notifications-filter__icon">
+                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                  </div>
+                </a>
+              </li>
+              <li>
+              </li>
+                <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
+                  Posts
+                  <div class="notifications-filter__icon">
+                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </section>
+          <section class="crayons-card__inner-section">
+            <% if @organizations.present? %>
+              <% @organizations.each do |org| %>
+                <header class="crayons-card__subheader">
+                  <h4 class="crayons-card__subheader__title">
+                    @<%= org.slug %>
+                  </h4>
+                </header>
+                <ul class="notifications-filter__list">
+                  <li>
+                    <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
+                      All
+                      <div class="notifications-filter__icon">
+                        <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
+                      Comments
+                      <div class="notifications-filter__icon">
+                        <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              <% end %>
+            <% end %>
+          </section>
        </div>
-        <% if @organizations.present? %>
-          <% @organizations.each do |org| %>
-            <hr>
-            <header>
-              <h4><%= org.name %></h4>
-            </header>
-            <div class="widget-body">
-              <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">ALL</a>
-              <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">COMMENTS</a>
-            </div>
-          <% end %>
-        <% end %>
      </div>
    </div>
    <div class="articles-list" id="articles-list">
-      <div class="notifications-mobile-filters">
-        <a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
-        <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">COMMENTS</a>
-        <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">POSTS</a>
-      </div>
-      <% if @organizations.present? %>
-        <% @organizations.each do |org| %>
-          <div class="notifications-mobile-filters">
-            <hr>
-            <span class="organization-name">@<%= org.slug %>:</span>
-            <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">ALL</a>
-            <a class="query-filter-button <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">COMMENTS</a>
-          </div>
-        <% end %>
-      <% end %>

+      <section class="notifications-filter__dropdown">
+        <% if @organizations.present? %>
+          <% @organizations.each do |org| %>
+            <div aria-label="notifications-filter-menu">
+              <button type="button" id="notifications-filter__select" class="notifications-filter__dropdown__select">
+                <% if params[:org_id].blank? %>
+                  @<%= @user.username %>
+                <% else %>
+                  @<%= org.slug %>
+                <% end %>
+                <%= inline_svg_tag("arrow-down-fill.svg", aria: true, class: "crayons-icon", title: "Arrow Down") %>
+              </button>
+            </div>
+
+            <div class="notifications-filter__dropdown__menu-overlay" id="notifications-filter__menu-overlay">
+              <nav class="notifications-filter__dropdown__menu" aria-label="notifications-filter-menu">
+                <header class="notifications-filter__dropdown__header">
+                  <h3 class="notifications-filter__dropdown__title">
+                    Filter
+                  </h3>
+                </header>
+                <a href="/notifications" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].blank? %>">
+                  <div class="notifications-filter__dropdown__label">
+                    <span class="notifications-filter__dropdown__label--title">
+                      <%= @user.name %>
+                    </span>
+                    <span class="notifications-filter__dropdown__label--subtitle">
+                      @<%= @user.username %> · Personal
+                    </span>
+                  </div>
+                  <div class="notifications-filter__icon">
+                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                  </div>
+                </a>
+                <a href="/notifications/org/<%= org.id %>" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].to_i == org.id %>">
+                  <div class="notifications-filter__dropdown__label">
+                    <span class="notifications-filter__dropdown__label--title">
+                      <%= org.name %>
+                    </span>
+                    <span class="notifications-filter__dropdown__label--subtitle">
+                      @<%= org.slug %> · Organization
+                    </span>
+                  </div>
+                  <div class="notifications-filter__icon">
+                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
+                  </div>
+                </a>
+              </nav>
+            </div>
+          <% end %>
+        <% end %>
+
+        <div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].blank? %>">
+          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].blank? %>" href="/notifications">
+            <span class="crayons-tabs__label">
+              All
+            </span>
+          </a>
+          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
+            <span class="crayons-tabs__label">
+              Comments
+            </span>
+          </a>
+          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
+            <span class="crayons-tabs__label">
+              Posts
+            </span>
+          </a>
+        </div>
+        <% if @organizations.present? %>
+          <% @organizations.each do |org| %>
+            <div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].to_i == org.id %>">
+              <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
+                <span class="crayons-tabs__label">
+                  All
+                </span>
+              </a>
+              <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
+                <span class="crayons-tabs__label">
+                  Comments
+                </span>
+              </a>
+            </div>
+          <% end %>
+        <% end %>
+      </section>
      <%= render "notifications_list", params: params %>
    </div>

@ -67,7 +188,7 @@
        won't be shown the "load more" button %>
    <% if @notifications.size >= @initial_page_size %>
      <div class="load-more-wrapper">
-        <button id="load-more-button" type="button">
+        <button id="load-more-button" type="button" class="crayons-btn crayons-btn--secondary">
          Load More
        </button>
      </div>