FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Deduplicate navigation dropdowns; Restore notification dropdown to mobile

This commit is contained in:
Karina Kwiatek 2022-07-17 20:53:53 +02:00 committed by Karina Kwiatek
parent 159ce5c2ae
commit 5bd186bbe2
9 changed files with 63 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/styles/components/_mobile-nav.scss
View File

@ -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);
}
}

19
app/views/navigation/_desktop.haml
View File

@ -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"

5
app/views/navigation/_main.haml
View File

@ -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' }

11
app/views/navigation/_mobile.haml
View File

@ -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) }

16
app/views/navigation/dropdown/_notifications.haml Normal file
View File

@ -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")

2
app/views/navigation/mobile/_profile.haml → app/views/navigation/dropdown/_profile.haml
View File

@ -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

26
app/views/navigation/main/_notifications.haml
View File

@ -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")

54
app/views/navigation/main/_profile.haml
View File

@ -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")

2
config/locales/views.en.yml
View File

@ -103,7 +103,7 @@ en:
until: "Until %{until}"
expired: "Expired at %{until}"
navigation:
main:
dropdown:
notifications:
none: :notifications.index.none
all: "Show all notifications"