Merge pull request #20124 from wordpress-mobile/issue/20065-overflow-…

…menu

Add an overflow menu in Notifications

WordPress/src/main/java/org/wordpress/android/ui/notifications/NotificationsListFragment.kt

@@ -3,15 +3,17 @@
 package org.wordpress.android.ui.notifications
 
 import android.Manifest
+import android.annotation.SuppressLint
 import android.app.Activity
 import android.content.Intent
 import android.os.Build
 import android.os.Bundle
 import android.text.TextUtils
+import android.view.LayoutInflater
 import android.view.Menu
 import android.view.MenuInflater
-import android.view.MenuItem
 import android.view.View
+import android.widget.PopupWindow
 import androidx.annotation.StringRes
 import androidx.appcompat.app.AppCompatActivity
 import androidx.core.text.HtmlCompat
@@ -30,6 +32,8 @@ import org.greenrobot.eventbus.EventBus
 import org.wordpress.android.R
 import org.wordpress.android.analytics.AnalyticsTracker
 import org.wordpress.android.analytics.AnalyticsTracker.NOTIFICATIONS_SELECTED_FILTER
+import org.wordpress.android.analytics.AnalyticsTracker.Stat.NOTIFICATIONS_MARK_ALL_READ_TAPPED
+import org.wordpress.android.analytics.AnalyticsTracker.Stat.NOTIFICATION_MENU_TAPPED
 import org.wordpress.android.analytics.AnalyticsTracker.Stat.NOTIFICATION_TAPPED_SEGMENTED_CONTROL
 import org.wordpress.android.databinding.NotificationsListFragmentBinding
 import org.wordpress.android.fluxc.store.AccountStore
@@ -63,6 +67,7 @@ import org.wordpress.android.util.PermissionUtils
 import org.wordpress.android.util.WPPermissionUtils
 import org.wordpress.android.util.WPPermissionUtils.NOTIFICATIONS_PERMISSION_REQUEST_CODE
 import org.wordpress.android.util.WPUrlUtils
+import org.wordpress.android.util.analytics.AnalyticsTrackerWrapper
 import org.wordpress.android.util.extensions.setLiftOnScrollTargetViewIdAndRequestLayout
 import org.wordpress.android.viewmodel.observeEvent
 import javax.inject.Inject
@@ -78,6 +83,9 @@ class NotificationsListFragment : Fragment(R.layout.notifications_list_fragment)
     @Inject
     lateinit var uiHelpers: UiHelpers
 
+    @Inject
+    lateinit var analyticsTrackerWrapper: AnalyticsTrackerWrapper
+
     private val viewModel: NotificationsListViewModel by viewModels()
 
     private var shouldRefreshNotifications = false
@@ -280,8 +288,12 @@ class NotificationsListFragment : Fragment(R.layout.notifications_list_fragment)
 
     @Suppress("OVERRIDE_DEPRECATION")
     override fun onPrepareOptionsMenu(menu: Menu) {
-        val notificationSettings = menu.findItem(R.id.notifications_settings)
-        notificationSettings.isVisible = accountStore.hasAccessToken()
+        val notificationActions = menu.findItem(R.id.notifications_actions)
+        notificationActions.isVisible = accountStore.hasAccessToken()
+        notificationActions.actionView?.setOnClickListener {
+            analyticsTrackerWrapper.track(NOTIFICATION_MENU_TAPPED)
+            showNotificationActionsPopup(it)
+        }
         super.onPrepareOptionsMenu(menu)
     }
 
@@ -291,13 +303,34 @@ class NotificationsListFragment : Fragment(R.layout.notifications_list_fragment)
         super.onCreateOptionsMenu(menu, inflater)
     }
 
-    @Suppress("OVERRIDE_DEPRECATION")
-    override fun onOptionsItemSelected(item: MenuItem): Boolean {
-        if (item.itemId == R.id.notifications_settings) {
-            ActivityLauncher.viewNotificationsSettings(activity)
-            return true
-        }
-        return super.onOptionsItemSelected(item)
+    /**
+     * For displaying the popup of notifications settings
+     */
+    @SuppressLint("InflateParams")
+    private fun showNotificationActionsPopup(anchorView: View) {
+        val popupWindow = PopupWindow(requireContext(), null, R.style.WordPress)
+        popupWindow.isOutsideTouchable = true
+        popupWindow.elevation = resources.getDimension(R.dimen.popup_over_toolbar_elevation)
+        popupWindow.contentView = LayoutInflater.from(requireContext())
+            .inflate(R.layout.notification_actions, null).apply {
+                findViewById<View>(R.id.text_mark_all_as_read).setOnClickListener {
+                    markAllAsRead()
+                    popupWindow.dismiss()
+                }
+                findViewById<View>(R.id.text_settings).setOnClickListener {
+                    ActivityLauncher.viewNotificationsSettings(activity)
+                    popupWindow.dismiss()
+                }
+            }
+        popupWindow.showAsDropDown(anchorView)
+    }
+
+    /**
+     * For marking the status of every notification as read
+     */
+    private fun markAllAsRead() {
+        analyticsTrackerWrapper.track(NOTIFICATIONS_MARK_ALL_READ_TAPPED)
+        // TODO("not yet implemented")
     }
 
     companion object {

WordPress/src/main/res/layout/notification_action_menu.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content">
+
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:background="?attr/selectableItemBackground"
+        android:contentDescription="@string/more"
+        android:padding="@dimen/notifications_item_action_padding"
+        android:src="@drawable/more_vertical" />
+</FrameLayout>
+

WordPress/src/main/res/layout/notification_actions.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:cardBackgroundColor="?colorSurface"
+    app:cardCornerRadius="@dimen/notifications_popup_radius">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content">
+
+        <TextView
+            android:id="@+id/text_mark_all_as_read"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:drawablePadding="@dimen/notifications_item_action_padding"
+            android:paddingEnd="@dimen/notifications_item_action_padding_end"
+            android:paddingStart="@dimen/notifications_item_action_padding"
+            android:paddingVertical="@dimen/notifications_item_action_padding"
+            android:text="@string/notifications_action_mark_all_as_read"
+            android:textColor="?wpColorOnSurfaceHigh"
+            android:textSize="@dimen/text_sz_large"
+            app:drawableStartCompat="@drawable/ic_check_24px"
+            app:drawableTint="?wpColorOnSurfaceHigh"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/text_settings"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:drawablePadding="@dimen/notifications_item_action_padding"
+            android:paddingEnd="@dimen/notifications_item_action_padding_end"
+            android:paddingStart="@dimen/notifications_item_action_padding"
+            android:paddingVertical="@dimen/notifications_item_action_padding"
+            android:text="@string/notification_settings"
+            android:textColor="?wpColorOnSurfaceHigh"
+            android:textSize="@dimen/text_sz_large"
+            app:drawableStartCompat="@drawable/ic_cog_white_24dp"
+            app:drawableTint="?wpColorOnSurfaceHigh"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/divider" />
+
+        <View
+            android:id="@+id/divider"
+            android:layout_width="0dp"
+            android:layout_height="1px"
+            android:background="@color/grey_300"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/text_mark_all_as_read" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.cardview.widget.CardView>
+

WordPress/src/main/res/menu/notifications_list_menu.xml

@@ -1,11 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
-      xmlns:app="http://schemas.android.com/apk/res-auto">
-
+    xmlns:app="http://schemas.android.com/apk/res-auto">
     <item
-        android:id="@+id/notifications_settings"
-        android:icon="@drawable/ic_cog_white_24dp"
-        android:title="@string/notification_settings"
+        android:id="@+id/notifications_actions"
+        android:title="@string/more"
+        app:actionLayout="@layout/notification_action_menu"
         app:showAsAction="always"/>
-
 </menu>

WordPress/src/main/res/values/dimens.xml

@@ -283,8 +283,10 @@
     <dimen name="notifications_item_vertical_padding">12dp</dimen>
     <dimen name="notifications_item_horizontal_padding">18dp</dimen>
     <dimen name="notifications_item_action_padding">12dp</dimen>
+    <dimen name="notifications_item_action_padding_end">28dp</dimen>
     <dimen name="notifications_header_margin_top_position_0">16dp</dimen>
     <dimen name="notifications_header_margin_top_position_n">4dp</dimen>
+    <dimen name="notifications_popup_radius">4dp</dimen>
 
     <dimen name="progress_bar_height">3dp</dimen>
     <dimen name="activity_progress_bar_height">5dp</dimen>

WordPress/src/main/res/values/strings.xml

@@ -1578,6 +1578,8 @@
     <string name="notifications_tab_dialog_main_off_title">To see notifications on notifications tab for this site, turn Notifications for this site on.</string>
     <string name="notifications_tab_dialog_main_off_message">Turning Notifications for this site off will disable notifications display on notifications tab for this site. You can fine-tune which kind of notification you see after turning Notifications for this site on.</string>
 
+    <string name="notifications_action_mark_all_as_read">Mark all as read</string>
+
     <string name="main_switch_default_title_on">On</string>
     <string name="main_switch_default_title_off">Off</string>
 

libs/analytics/src/main/java/org/wordpress/android/analytics/AnalyticsTracker.java

@@ -1104,7 +1104,9 @@ public enum Stat {
         SITE_MONITORING_SCREEN_SHOWN,
         OPENED_SITE_MONITORING,
         SITE_MONITORING_TAB_SHOWN,
-        SITE_MONITORING_TAB_LOADING_ERROR
+        SITE_MONITORING_TAB_LOADING_ERROR,
+        NOTIFICATION_MENU_TAPPED,
+        NOTIFICATIONS_MARK_ALL_READ_TAPPED
     }
 
     private static final List<Tracker> TRACKERS = new ArrayList<>();

libs/analytics/src/main/java/org/wordpress/android/analytics/AnalyticsTrackerNosara.java

@@ -2703,6 +2703,10 @@ public static String getEventNameForStat(AnalyticsTracker.Stat stat) {
                 return "site_monitoring_tab_shown";
             case SITE_MONITORING_TAB_LOADING_ERROR:
                 return "site_monitoring_tab_loading_error";
+            case NOTIFICATION_MENU_TAPPED:
+                return "notification_menu_tapped";
+            case NOTIFICATIONS_MARK_ALL_READ_TAPPED:
+                return "notifications_mark_all_read_tapped";
         }
         return null;
     }