From 5bd186bbe287ff719347c0cd85ff0ca5a9d5c21e Mon Sep 17 00:00:00 2001 From: Karina Kwiatek Date: Sun, 17 Jul 2022 20:53:53 +0200 Subject: [PATCH] Deduplicate navigation dropdowns; Restore notification dropdown to mobile --- .../styles/components/_mobile-nav.scss | 24 ++++++--- app/views/navigation/_desktop.haml | 19 ++++++- app/views/navigation/_main.haml | 5 +- app/views/navigation/_mobile.haml | 11 ++-- .../navigation/dropdown/_notifications.haml | 16 ++++++ .../{mobile => dropdown}/_profile.haml | 2 +- app/views/navigation/main/_notifications.haml | 26 --------- app/views/navigation/main/_profile.haml | 54 ------------------- config/locales/views.en.yml | 2 +- 9 files changed, 63 insertions(+), 96 deletions(-) create mode 100644 app/views/navigation/dropdown/_notifications.haml rename app/views/navigation/{mobile => dropdown}/_profile.haml (96%) delete mode 100644 app/views/navigation/main/_notifications.haml delete mode 100644 app/views/navigation/main/_profile.haml diff --git a/app/javascript/styles/components/_mobile-nav.scss b/app/javascript/styles/components/_mobile-nav.scss index e95b65c3..720cc712 100644 --- a/app/javascript/styles/components/_mobile-nav.scss +++ b/app/javascript/styles/components/_mobile-nav.scss @@ -27,10 +27,22 @@ } } -#rs-mobile-nav-profile { - position: fixed; - bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})"); - right: unquote("calc(env(safe-area-inset-right) + 15px)"); - left: unset; - top: unset; +@include media-breakpoint-down("md") { + .notification-dropdown, + .profile-dropdown { + bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})"); + position: fixed; + top: unset; + } + + .profile-dropdown { + left: unset; + right: unquote("calc(env(safe-area-inset-right) + 15px)"); + } + + .notification-dropdown { + left: unquote("calc(env(safe-area-inset-left) + 8px)"); + right: unquote("calc(env(safe-area-inset-right) + 8px)"); + width: calc(100vw - 16px); + } } diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml index d0801d13..2ca31623 100644 --- a/app/views/navigation/_desktop.haml +++ b/app/views/navigation/_desktop.haml @@ -13,8 +13,23 @@ %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } } %i.fa.fa-list.hidden-xs %span.d-none.d-sm-inline.d-md-none= t('views.actions.list') - = render 'navigation/main/notifications' + = nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'd-block d-sm-none' + %li.nav-item.dropdown.d-none.d-sm-block + %a.nav-link.dropdown-toggle{ href: '#', data: { toggle: :dropdown } } + - if notification_count.nil? + %i.fa.fa-bell-o + - else + %i.fa.fa-bell + %span.sr-only= t('views.navigation.notifications') + %span.badge= notification_count + = render 'navigation/dropdown/notifications', notifications: notifications, size: "desktop" %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') } %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } } %i.fa.fa-pencil-square-o - = render 'navigation/main/profile' + %li.nav-item.dropdown.profile--image-dropdown + %a.nav-link.dropdown-toggle.p-sm-0{ href: "#", data: { toggle: :dropdown } } + %img.avatar-md.d-none.d-sm-inline{ src: current_user.profile_picture.url(:small) } + %span.d-inline.d-sm-none + = current_user.screen_name + %b.caret + = render 'navigation/dropdown/profile', size: "desktop" diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml index be7eb74c..5238c0f7 100644 --- a/app/views/navigation/_main.haml +++ b/app/views/navigation/_main.haml @@ -1,5 +1,6 @@ -= render 'navigation/desktop' -= render 'navigation/mobile' +- notifications = Notification.for(current_user).where(new: true).limit(4) += render 'navigation/desktop', notifications: notifications += render 'navigation/mobile', notifications: notifications = render 'modal/ask' %button.btn.btn-primary.btn-fab.d-block.d-lg-none{ data: { target: '#modal-ask-followers', toggle: :modal }, type: 'button' } diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml index 3d238658..2c049a76 100644 --- a/app/views/navigation/_mobile.haml +++ b/app/views/navigation/_mobile.haml @@ -1,4 +1,5 @@ -= render 'navigation/mobile/profile' += render 'navigation/dropdown/profile', size: "mobile" += render 'navigation/dropdown/notifications', notifications: notifications, size: "mobile" - notifications_icon = notification_count.nil? ? 'bell-o' : 'bell' %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block.d-print-none#rs-mobile-nav{ role: :navigation } .container{ class: ios_web_app? ? 'ios-web-app' : '' } @@ -9,9 +10,11 @@ icon: 'inbox', icon_only: true - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod? = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass', icon_only: true - = nav_entry t('views.navigation.notifications'), '/notifications', - badge: notification_count, badge_color: 'primary', badge_pill: true, - icon: notifications_icon, icon_only: true + %li.nav-item + %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-notifications' }, aria: { controls: 'rs-mobile-nav-notifications', expanded: 'false' } } + %i.fa{ class: "fa-#{notifications_icon}" } + %span.sr-only= t('views.navigation.notifications') + %span.badge= notification_count %li.nav-item.profile--image-dropdown %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } } %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) } diff --git a/app/views/navigation/dropdown/_notifications.haml b/app/views/navigation/dropdown/_notifications.haml new file mode 100644 index 00000000..633f2a51 --- /dev/null +++ b/app/views/navigation/dropdown/_notifications.haml @@ -0,0 +1,16 @@ +.dropdown-menu.dropdown-menu-right.notification-dropdown{ id: "rs-#{size}-nav-notifications" } + - if notifications.count.zero? + .dropdown-item.text-center.p-2 + %i.fa.fa-bell-o.notification__bell-icon + %p= t(".none") + %a.dropdown-item.text-center{ href: notifications_path('all') } + %i.fa.fa-fw.fa-chevron-right + = t(".all") + - else + - notifications.each do |notification| + .dropdown-item + = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification + + %a.dropdown-item.text-center{ href: notifications_path } + %i.fa.fa-fw.fa-chevron-right + = t(".new") diff --git a/app/views/navigation/mobile/_profile.haml b/app/views/navigation/dropdown/_profile.haml similarity index 96% rename from app/views/navigation/mobile/_profile.haml rename to app/views/navigation/dropdown/_profile.haml index dcb9bf73..1a17383c 100644 --- a/app/views/navigation/mobile/_profile.haml +++ b/app/views/navigation/dropdown/_profile.haml @@ -1,4 +1,4 @@ -.dropdown-menu#rs-mobile-nav-profile +.dropdown-menu.profile-dropdown{ id: "rs-#{size}-nav-profile" } %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) } %i.fa.fa-fw.fa-user diff --git a/app/views/navigation/main/_notifications.haml b/app/views/navigation/main/_notifications.haml deleted file mode 100644 index 41a18b79..00000000 --- a/app/views/navigation/main/_notifications.haml +++ /dev/null @@ -1,26 +0,0 @@ -= nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'd-block d-sm-none' -- notifications = Notification.for(current_user).where(new: true).limit(4) -%li.nav-item.dropdown.d-none.d-sm-block - %a.nav-link.dropdown-toggle{ href: '#', data: { toggle: :dropdown } } - - if notification_count.nil? - %i.fa.fa-bell-o - - else - %i.fa.fa-bell - %span.sr-only= t('views.navigation.notifications') - %span.badge= notification_count - .dropdown-menu.dropdown-menu-right.notification-dropdown - - if notifications.count.zero? - .dropdown-item.text-center.p-2 - %i.fa.fa-bell-o.notification__bell-icon - %p= t(".none") - %a.dropdown-item.text-center{ href: notifications_path('all') } - %i.fa.fa-fw.fa-chevron-right - = t(".all") - - else - - notifications.each do |notification| - .dropdown-item - = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification - - %a.dropdown-item.text-center{ href: notifications_path } - %i.fa.fa-fw.fa-chevron-right - = t(".new") diff --git a/app/views/navigation/main/_profile.haml b/app/views/navigation/main/_profile.haml deleted file mode 100644 index 296a83e4..00000000 --- a/app/views/navigation/main/_profile.haml +++ /dev/null @@ -1,54 +0,0 @@ -%li.nav-item.dropdown.profile--image-dropdown - %a.nav-link.dropdown-toggle.p-sm-0{ href: "#", data: { toggle: :dropdown } } - %img.avatar-md.d-none.d-sm-inline{ src: current_user.profile_picture.url(:small) } - %span.d-inline.d-sm-none - = current_user.screen_name - %b.caret - .dropdown-menu - %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name - %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) } - %i.fa.fa-fw.fa-user - = t("views.navigation.show") - %a.dropdown-item{ href: edit_user_registration_path } - %i.fa.fa-fw.fa-cog - = t("views.navigation.settings") - .dropdown-divider - - if current_user.has_role?(:administrator) - %a.dropdown-item{ href: rails_admin_path } - %i.fa.fa-fw.fa-cogs - = t("views.navigation.admin") - %a.dropdown-item{ href: sidekiq_web_path } - %i.fa.fa-fw.fa-bar-chart - = t("views.navigation.sidekiq") - %a.dropdown-item{ href: pghero_path } - %i.fa.fa-fw.fa-database - Database Monitor - %a.dropdown-item{ href: announcement_index_path } - %i.fa.fa-fw.fa-info - Announcements - .dropdown-divider - - if current_user.mod? - - if moderation_view? - = link_to moderation_toggle_unmask_path, method: :post, class: "dropdown-item" do - %i.fa.fa-toggle-on - Disable Moderation View - - else - = link_to moderation_toggle_unmask_path, method: :post, class: "dropdown-item" do - %i.fa.fa-toggle-off - Enable Moderation View - %a.dropdown-item{ href: moderation_path } - %i.fa.fa-fw.fa-gavel - = t("views.navigation.moderation") - .dropdown-divider - - if APP_CONFIG["canny"] - %h6.dropdown-header.d-none.d-sm-block Feedback - %a.dropdown-item{ href: feedback_bugs_path } - %i.fa.fa-fw.fa-bug - Bugs - %a.dropdown-item{ href: feedback_features_path } - %i.fa.fa-fw.fa-flask - Feature Requests - .dropdown-divider - = button_to destroy_user_session_path, method: "delete", class: "dropdown-item" do - %i.fa.fa-fw.fa-sign-out - = t("views.sessions.destroy") diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index 1902d8e2..2917a828 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -103,7 +103,7 @@ en: until: "Until %{until}" expired: "Expired at %{until}" navigation: - main: + dropdown: notifications: none: :notifications.index.none all: "Show all notifications"