Add a popup for the notification actions

wordpress-mobile · Feb 5, 2024 · 0c319da · 0c319da
1 parent 8ce1152
commit 0c319da
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 16 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/notifications/NotificationsListFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/notifications/NotificationsListFragment.kt
@@ -8,10 +8,11 @@ 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
@@ -280,8 +281,11 @@ 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 {
+            showNotificationActionsPopup(it)
+        }
         super.onPrepareOptionsMenu(menu)
     }
 
@@ -291,13 +295,32 @@ 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
+     */
+    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, false).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() {
+        // TODO("not yet implemented")
     }
 
     companion object {

diff --git a/WordPress/src/main/res/layout/notification_action_menu.xml b/WordPress/src/main/res/layout/notification_action_menu.xml
@@ -0,0 +1,13 @@
+<?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:padding="@dimen/notifications_item_action_padding"
+        android:src="@drawable/more_vertical" />
+</FrameLayout>
+
diff --git a/WordPress/src/main/res/layout/notification_actions.xml b/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>
+
diff --git a/WordPress/src/main/res/menu/notifications_list_menu.xml b/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>
diff --git a/WordPress/src/main/res/values/dimens.xml b/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>

diff --git a/WordPress/src/main/res/values/strings.xml b/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>