WikiGames: build bottom sheet popup for final screen

app/src/main/java/org/wikipedia/games/onthisday/OnThisDayGameActivity.kt

@@ -19,22 +19,36 @@ import android.view.animation.AccelerateDecelerateInterpolator
 import android.view.animation.DecelerateInterpolator
 import android.widget.ImageView
 import androidx.activity.viewModels
+import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.animation.doOnEnd
 import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.isInvisible
 import androidx.core.view.isVisible
 import androidx.core.view.updatePadding
+import androidx.core.widget.TextViewCompat
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import org.wikipedia.Constants
+import org.wikipedia.Constants.InvokeSource
 import org.wikipedia.R
+import org.wikipedia.WikipediaApp
 import org.wikipedia.activity.BaseActivity
 import org.wikipedia.databinding.ActivityOnThisDayGameBinding
 import org.wikipedia.dataclient.WikiSite
+import org.wikipedia.dataclient.page.PageSummary
 import org.wikipedia.feed.onthisday.OnThisDay
+import org.wikipedia.history.HistoryEntry
+import org.wikipedia.page.PageActivity
+import org.wikipedia.readinglist.LongPressMenu
+import org.wikipedia.readinglist.ReadingListBehaviorsUtil
+import org.wikipedia.readinglist.database.ReadingListPage
 import org.wikipedia.settings.Prefs
 import org.wikipedia.util.DimenUtil
 import org.wikipedia.util.FeedbackUtil
 import org.wikipedia.util.Resource
 import org.wikipedia.util.ResourceUtil
+import org.wikipedia.util.ShareUtil
+import org.wikipedia.util.StringUtil
 import org.wikipedia.util.UriUtil
 import org.wikipedia.views.ViewUtil
 import java.time.LocalDate
@@ -45,12 +59,14 @@ import java.time.format.FormatStyle
 import java.util.Locale
 
 class OnThisDayGameActivity : BaseActivity() {
+
     private lateinit var binding: ActivityOnThisDayGameBinding
     private val viewModel: OnThisDayGameViewModel by viewModels()
 
     private val goNextAnimatorSet = AnimatorSet()
     private val cardAnimatorSet = AnimatorSet()
     private lateinit var mediaPlayer: MediaPlayer
+    private var bottomSheetBehavior: BottomSheetBehavior<CoordinatorLayout>? = null
 
     @SuppressLint("SourceLockedOrientationActivity")
     public override fun onCreate(savedInstanceState: Bundle?) {
@@ -61,7 +77,7 @@ class OnThisDayGameActivity : BaseActivity() {
         setContentView(binding.root)
         setSupportActionBar(binding.toolbar)
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
-        title = getString(R.string.on_this_day_game_title)
+        title = ""
         mediaPlayer = MediaPlayer.create(this, R.raw.sound_logo)
 
         binding.errorView.retryClickListener = View.OnClickListener {
@@ -105,9 +121,6 @@ class OnThisDayGameActivity : BaseActivity() {
             params.rightMargin = newStatusBarInsets.right + newNavBarInsets.right
             params.bottomMargin = newStatusBarInsets.bottom + newNavBarInsets.bottom
 
-            params = binding.dateText.layoutParams as ViewGroup.MarginLayoutParams
-            params.topMargin = DimenUtil.roundedDpToPx(20f) + newStatusBarInsets.top + newNavBarInsets.top
-
             windowInsets
         }
 
@@ -179,6 +192,10 @@ class OnThisDayGameActivity : BaseActivity() {
     }
 
     override fun onBackPressed() {
+        if (bottomSheetBehavior?.state == BottomSheetBehavior.STATE_EXPANDED) {
+            bottomSheetBehavior?.state = BottomSheetBehavior.STATE_COLLAPSED
+            return
+        }
         super.onBackPressed()
         finish()
     }
@@ -381,6 +398,87 @@ class OnThisDayGameActivity : BaseActivity() {
         }, 500)
     }
 
+    fun openArticleBottomSheet(pageSummary: PageSummary, callback: BottomSheetBehavior.BottomSheetCallback) {
+        bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheetCoordinatorLayout).apply {
+            state = BottomSheetBehavior.STATE_EXPANDED
+        }
+        bottomSheetBehavior?.addBottomSheetCallback(callback)
+
+        val dialogBinding = binding.articleDialogContainer
+        dialogBinding.articleTitle.text = StringUtil.fromHtml(pageSummary.displayTitle)
+        dialogBinding.closeButton.setOnClickListener {
+            bottomSheetBehavior?.state = BottomSheetBehavior.STATE_COLLAPSED
+        }
+        dialogBinding.articleDescription.text = StringUtil.fromHtml(pageSummary.description)
+
+        if (pageSummary.thumbnailUrl.isNullOrEmpty()) {
+            dialogBinding.articleThumbnail.isInvisible = true
+            dialogBinding.articleSummaryContainer.isInvisible = false
+            dialogBinding.articleSummary.text = StringUtil.fromHtml(pageSummary.extractHtml)
+        } else {
+            dialogBinding.articleThumbnail.isInvisible = false
+            dialogBinding.articleSummaryContainer.isInvisible = true
+            ViewUtil.loadImage(
+                dialogBinding.articleThumbnail,
+                pageSummary.thumbnailUrl,
+                placeholderId = R.mipmap.launcher
+            )
+        }
+
+        val event = viewModel.getEventByPageTitle(pageSummary.apiTitle)
+        dialogBinding.relatedEventInfo.text = StringUtil.fromHtml(event.text)
+
+        val isCorrect = viewModel.getQuestionCorrectByPageTitle(pageSummary.apiTitle)
+        val answerIcon = if (isCorrect) R.drawable.check_circle_24px else R.drawable.ic_cancel_24px
+        val answerIconTintList = if (isCorrect) ResourceUtil.getThemedColorStateList(this, R.attr.success_color) else ResourceUtil.getThemedColorStateList(this, R.attr.destructive_color)
+        val answerText = if (isCorrect) R.string.on_this_day_game_article_answer_correct_stats_message else R.string.on_this_day_game_article_answer_incorrect_stats_message
+        dialogBinding.answerStatus.setCompoundDrawablesRelativeWithIntrinsicBounds(answerIcon, 0, 0, 0)
+        TextViewCompat.setCompoundDrawableTintList(dialogBinding.answerStatus, answerIconTintList)
+        dialogBinding.answerStatus.text = getString(answerText)
+
+        val isSaved = viewModel.savedPages.contains(pageSummary)
+        val bookmarkResource = if (isSaved) R.drawable.ic_bookmark_white_24dp else R.drawable.ic_bookmark_border_white_24dp
+        dialogBinding.saveButton.setImageResource(bookmarkResource)
+        dialogBinding.saveButton.setOnClickListener {
+            onBookmarkIconClick(dialogBinding.saveButton, pageSummary)
+        }
+        dialogBinding.shareButton.setOnClickListener {
+            ShareUtil.shareText(this, pageSummary.getPageTitle(WikipediaApp.instance.wikiSite))
+        }
+        dialogBinding.readArticleButton.setOnClickListener {
+            val entry = HistoryEntry(pageSummary.getPageTitle(WikipediaApp.instance.wikiSite), HistoryEntry.SOURCE_ON_THIS_DAY_GAME)
+            startActivity(PageActivity.newIntentForNewTab(this, entry, entry.title))
+        }
+    }
+
+    private fun onBookmarkIconClick(view: ImageView, pageSummary: PageSummary) {
+        val pageTitle = pageSummary.getPageTitle(WikipediaApp.instance.wikiSite)
+        val isSaved = viewModel.savedPages.contains(pageSummary)
+        if (isSaved) {
+            LongPressMenu(view, existsInAnyList = false, callback = object : LongPressMenu.Callback {
+                override fun onAddRequest(entry: HistoryEntry, addToDefault: Boolean) {
+                    ReadingListBehaviorsUtil.addToDefaultList(this@OnThisDayGameActivity, pageTitle, addToDefault, InvokeSource.ON_THIS_DAY_GAME_ACTIVITY)
+                }
+
+                override fun onMoveRequest(page: ReadingListPage?, entry: HistoryEntry) {
+                    page?.let {
+                        ReadingListBehaviorsUtil.moveToList(this@OnThisDayGameActivity, page.listId, pageTitle, InvokeSource.ON_THIS_DAY_GAME_ACTIVITY)
+                    }
+                }
+
+                override fun onRemoveRequest() {
+                    super.onRemoveRequest()
+                    viewModel.savedPages.remove(pageSummary)
+                    view.setImageResource(R.drawable.ic_bookmark_border_white_24dp)
+                }
+            }).show(HistoryEntry(pageTitle, HistoryEntry.SOURCE_ON_THIS_DAY_GAME))
+        } else {
+            ReadingListBehaviorsUtil.addToDefaultList(this@OnThisDayGameActivity, pageTitle, true, InvokeSource.ON_THIS_DAY_GAME_ACTIVITY)
+            viewModel.savedPages.add(pageSummary)
+            view.setImageResource(R.drawable.ic_bookmark_white_24dp)
+        }
+    }
+
     fun animateQuestions() {
         binding.questionCard1.alpha = 0f
         binding.questionCard2.alpha = 0f

app/src/main/java/org/wikipedia/games/onthisday/OnThisDayGameFinalFragment.kt

@@ -14,6 +14,7 @@ import androidx.fragment.app.activityViewModels
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import androidx.recyclerview.widget.StaggeredGridLayoutManager
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import org.wikipedia.Constants
 import org.wikipedia.Constants.InvokeSource
 import org.wikipedia.R
@@ -140,26 +141,27 @@ class OnThisDayGameFinalFragment : Fragment() {
         RecyclerView.ViewHolder(binding.root), View.OnClickListener {
 
         private lateinit var page: PageSummary
+        private var position: Int = 0
 
         init {
             itemView.setOnClickListener(this)
         }
 
         fun bindItem(page: PageSummary, position: Int) {
             this.page = page
+            this.position = position
             binding.listItemTitle.text = StringUtil.fromHtml(page.displayTitle)
             binding.listItemDescription.text = StringUtil.fromHtml(page.description)
             binding.listItemDescription.isVisible = !page.description.isNullOrEmpty()
             binding.listItemShare.setOnClickListener {
                 ShareUtil.shareText(requireActivity(), page.getPageTitle(WikipediaApp.instance.wikiSite))
             }
+            val isSaved = updateBookmark()
             binding.listItemBookmark.isVisible = true
-            val isSaved = viewModel.savedPages.contains(page)
             binding.listItemBookmark.setOnClickListener {
                 onBookmarkIconClick(it, page, position, isSaved)
             }
-            val bookmarkResource = if (isSaved) R.drawable.ic_bookmark_white_24dp else R.drawable.ic_bookmark_border_white_24dp
-            binding.listItemBookmark.setImageResource(bookmarkResource)
+
             page.thumbnailUrl?.let {
                 binding.listItemThumbnail.isVisible = true
                 ViewUtil.loadImage(binding.listItemThumbnail, it, roundedCorners = true)
@@ -168,8 +170,23 @@ class OnThisDayGameFinalFragment : Fragment() {
             }
         }
 
+        private fun updateBookmark(): Boolean {
+            val isSaved = viewModel.savedPages.contains(page)
+            val bookmarkResource = if (isSaved) R.drawable.ic_bookmark_white_24dp else R.drawable.ic_bookmark_border_white_24dp
+            binding.listItemBookmark.setImageResource(bookmarkResource)
+            return isSaved
+        }
+
         override fun onClick(v: View) {
-            // TODO: implement this (bottom sheet).
+            (requireActivity() as OnThisDayGameActivity).openArticleBottomSheet(page, object : BottomSheetBehavior.BottomSheetCallback() {
+                override fun onStateChanged(bottomSheet: View, newState: Int) {
+                    if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
+                        updateBookmark()
+                    }
+                }
+
+                override fun onSlide(bottomSheet: View, slideOffset: Float) {}
+            })
         }
     }
 

app/src/main/res/layout/activity_on_this_day_game.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
@@ -17,46 +17,38 @@
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             android:background="?attr/progressive_color"
-            app:titleTextColor="?attr/paper_color"
             app:navigationIcon="@drawable/ic_close_black_24dp"
             app:navigationIconTint="?attr/paper_color"
             app:navigationContentDescription="@string/table_close"
             app:contentInsetStart="0dp"
             app:contentInsetEnd="0dp">
 
-            <FrameLayout
-                android:layout_width="match_parent"
-                android:layout_height="match_parent">
-
-                <TextView
-                    android:id="@+id/progressText"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_vertical|end"
-                    style="@style/P"
-                    android:text="@string/on_this_day_game_progress"
-                    android:layout_marginEnd="16dp"
-                    android:textColor="?attr/paper_color"/>
+            <TextView
+                android:id="@+id/progressText"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical|end"
+                style="@style/P"
+                android:text="@string/on_this_day_game_progress"
+                android:layout_marginEnd="16dp"
+                android:textColor="?attr/paper_color"/>
 
-            </FrameLayout>
+            <TextView
+                android:id="@+id/dateText"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:background="@drawable/game_date_background_neutral"
+                android:textColor="?attr/primary_color"
+                android:paddingHorizontal="8dp"
+                android:paddingTop="2dp"
+                android:paddingBottom="3dp"
+                tools:text="Lorem ipsum"/>
 
         </com.google.android.material.appbar.MaterialToolbar>
 
     </com.google.android.material.appbar.AppBarLayout>
 
-    <TextView
-        android:id="@+id/dateText"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_horizontal"
-        android:background="@drawable/game_date_background_neutral"
-        android:textColor="?attr/primary_color"
-        android:layout_marginTop="20dp"
-        android:paddingHorizontal="8dp"
-        android:paddingTop="2dp"
-        android:paddingBottom="3dp"
-        tools:text="Lorem ipsum"/>
-
     <ProgressBar
         android:id="@+id/progressBar"
         android:layout_width="wrap_content"
@@ -310,4 +302,20 @@
         android:layout_height="match_parent"
         android:layout_marginTop="?attr/actionBarSize"/>
 
-</FrameLayout>
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/bottomSheetCoordinatorLayout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:clipChildren="false"
+        android:clipToPadding="false"
+        app:behavior_hideable="false"
+        app:behavior_peekHeight="0dp"
+        app:layout_behavior="@string/bottom_sheet_behavior">
+
+        <include
+            android:id="@+id/articleDialogContainer"
+            layout="@layout/dialog_on_this_day_game_article" />
+
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>