From 9de59c410720dfc04d594ff5510f4c80c742aed2 Mon Sep 17 00:00:00 2001 From: Lisa Sy Date: Mon, 27 Apr 2020 09:17:20 -0700 Subject: [PATCH] Update sidebar filter menu on Notifications (#7394) --- app/assets/images/arrow-down-fill.svg | 3 + app/assets/images/checkmark.svg | 3 + .../initializers/initNotifications.js | 22 ++ app/assets/stylesheets/articles.scss | 48 ----- app/assets/stylesheets/base/reset.scss | 7 + app/assets/stylesheets/components/cards.scss | 24 +++ app/assets/stylesheets/components/forms.scss | 1 - .../stylesheets/components/navigation.scss | 21 ++ app/assets/stylesheets/notifications.scss | 167 +++++++++++++++ app/assets/stylesheets/widgets.scss | 9 +- app/views/notifications/index.html.erb | 191 ++++++++++++++---- 11 files changed, 411 insertions(+), 85 deletions(-) create mode 100644 app/assets/images/arrow-down-fill.svg create mode 100644 app/assets/images/checkmark.svg diff --git a/app/assets/images/arrow-down-fill.svg b/app/assets/images/arrow-down-fill.svg new file mode 100644 index 000000000..f37511b0a --- /dev/null +++ b/app/assets/images/arrow-down-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/checkmark.svg b/app/assets/images/checkmark.svg new file mode 100644 index 000000000..5992dbf77 --- /dev/null +++ b/app/assets/images/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/javascripts/initializers/initNotifications.js b/app/assets/javascripts/initializers/initNotifications.js index 57f66a088..0c4da187c 100644 --- 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'); diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index 465681240..fda346902 100644 --- 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); - } - } -} diff --git a/app/assets/stylesheets/base/reset.scss b/app/assets/stylesheets/base/reset.scss index 6cbbcca8b..b16b03441 100644 --- 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, diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss index f8d970c2b..b5914e89d 100644 --- 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; + } + } } diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss index 0c13180b3..2af33b036 100644 --- 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; diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 5bca581fa..ba976e369 100644 --- 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); + } + } } diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index 3ee54f126..18ed83715 100644 --- 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; + } + } +} diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss index b9c3aa297..668f217b2 100644 --- 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; } diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb index c4daa7d62..9fd891959 100644 --- a/app/views/notifications/index.html.erb +++ b/app/views/notifications/index.html.erb @@ -20,46 +20,167 @@ <% if user_signed_in? %>
-
-
-

notifications

+
+
+

Filter

-
- " href="/notifications">ALL - " href="/notifications/comments">COMMENTS - " href="/notifications/posts">POSTS +
+
+ <% if @organizations.present? %> +
+

+ @<%= @user.username %> +

+
+ <% end %> + +
+
+ <% if @organizations.present? %> + <% @organizations.each do |org| %> +
+

+ @<%= org.slug %> +

+
+ + <% end %> + <% end %> +
- <% if @organizations.present? %> - <% @organizations.each do |org| %> -
-
-

<%= org.name %>

-
-
- " href="/notifications/org/<%= org.id %>">ALL - " href="/notifications/comments/<%= org.id %>">COMMENTS -
- <% end %> - <% end %>
-
- " href="/notifications">ALL - " href="/notifications/comments">COMMENTS - " href="/notifications/posts">POSTS -
- <% if @organizations.present? %> - <% @organizations.each do |org| %> -
-
- @<%= org.slug %>: - " href="/notifications/org/<%= org.id %>">ALL - " href="/notifications/comments/<%= org.id %>">COMMENTS -
- <% end %> - <% end %> +
+ <% if @organizations.present? %> + <% @organizations.each do |org| %> +
+ +
+ +
+ +
+ <% end %> + <% end %> + +
"> + " href="/notifications"> + + All + + + " href="/notifications/comments"> + + Comments + + + " href="/notifications/posts"> + + Posts + + +
+ <% if @organizations.present? %> + <% @organizations.each do |org| %> +
"> + " href="/notifications/org/<%= org.id %>"> + + All + + + " href="/notifications/comments/<%= org.id %>"> + + Comments + + +
+ <% end %> + <% end %> +
<%= render "notifications_list", params: params %>
@@ -67,7 +188,7 @@ won't be shown the "load more" button %> <% if @notifications.size >= @initial_page_size %>
-