UI: add card design to the previewers (ankidroid#15893)

* UI: add card design to the previewers * ui: disable previewers' elevation with `safeDisplay` after some feedback in discord * UI: match navbar with previewers' background * ui: change previewers' black theme background
neeldoshii · Mar 15, 2024 · f8379f3 · f8379f3
1 parent 14173d3
commit f8379f3
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 12 deletions.
diff --git a/AnkiDroid/src/main/java/com/ichi2/anki/previewer/PreviewerFragment.kt b/AnkiDroid/src/main/java/com/ichi2/anki/previewer/PreviewerFragment.kt
@@ -24,6 +24,7 @@ import android.view.MenuItem
 import android.view.View
 import android.webkit.WebView
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.appcompat.widget.ThemeUtils
 import androidx.appcompat.widget.Toolbar
 import androidx.core.os.bundleOf
 import androidx.core.view.isVisible
@@ -32,6 +33,7 @@ import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
 import com.google.android.material.appbar.MaterialToolbar
 import com.google.android.material.button.MaterialButton
+import com.google.android.material.card.MaterialCardView
 import com.google.android.material.slider.Slider
 import com.google.android.material.textview.MaterialTextView
 import com.ichi2.anki.DispatchKeyEventListener
@@ -40,6 +42,8 @@ import com.ichi2.anki.R
 import com.ichi2.anki.browser.PreviewerIdsFile
 import com.ichi2.anki.snackbar.BaseSnackbarBuilderProvider
 import com.ichi2.anki.snackbar.SnackbarBuilder
+import com.ichi2.anki.utils.ext.sharedPrefs
+import com.ichi2.anki.utils.navBarNeedsScrim
 import com.ichi2.annotations.NeedsTest
 import com.ichi2.compat.CompatHelper.Companion.getSerializableCompat
 import com.ichi2.utils.performClickIfEnabled
@@ -168,6 +172,18 @@ class PreviewerFragment :
             setOnMenuItemClickListener(this@PreviewerFragment)
             setNavigationOnClickListener { requireActivity().onBackPressedDispatcher.onBackPressed() }
         }
+
+        if (sharedPrefs().getBoolean("safeDisplay", false)) {
+            view.findViewById<MaterialCardView>(R.id.webview_container).elevation = 0F
+        }
+
+        with(requireActivity()) {
+            // use the screen background color if the nav bar doesn't need a scrim when using a
+            // transparent background. e.g. when navigation gestures are enabled
+            if (!navBarNeedsScrim) {
+                window.navigationBarColor = ThemeUtils.getThemeAttrColor(this, R.attr.alternativeBackgroundColor)
+            }
+        }
     }
 
     override fun onMenuItemClick(item: MenuItem): Boolean {

diff --git a/AnkiDroid/src/main/java/com/ichi2/anki/previewer/TemplatePreviewerFragment.kt b/AnkiDroid/src/main/java/com/ichi2/anki/previewer/TemplatePreviewerFragment.kt
@@ -20,17 +20,21 @@ import android.content.Intent
 import android.os.Bundle
 import android.view.View
 import android.webkit.WebView
+import androidx.appcompat.widget.ThemeUtils
 import androidx.core.os.BundleCompat
 import androidx.core.os.bundleOf
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.lifecycleScope
 import com.google.android.material.appbar.MaterialToolbar
 import com.google.android.material.button.MaterialButton
+import com.google.android.material.card.MaterialCardView
 import com.google.android.material.tabs.TabLayout
 import com.google.android.material.tabs.TabLayout.OnTabSelectedListener
 import com.ichi2.anki.R
 import com.ichi2.anki.snackbar.BaseSnackbarBuilderProvider
 import com.ichi2.anki.snackbar.SnackbarBuilder
+import com.ichi2.anki.utils.ext.sharedPrefs
+import com.ichi2.anki.utils.navBarNeedsScrim
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
@@ -91,6 +95,18 @@ class TemplatePreviewerFragment :
                 }
             })
         }
+
+        if (sharedPrefs().getBoolean("safeDisplay", false)) {
+            view.findViewById<MaterialCardView>(R.id.webview_container).elevation = 0F
+        }
+
+        with(requireActivity()) {
+            // use the screen background color if the nav bar doesn't need a scrim when using a
+            // transparent background. e.g. when navigation gestures are enabled
+            if (!navBarNeedsScrim) {
+                window.navigationBarColor = ThemeUtils.getThemeAttrColor(this, R.attr.alternativeBackgroundColor)
+            }
+        }
     }
 
     companion object {

diff --git a/AnkiDroid/src/main/java/com/ichi2/anki/utils/Resources.kt b/AnkiDroid/src/main/java/com/ichi2/anki/utils/Resources.kt
@@ -15,10 +15,14 @@
  */
 package com.ichi2.anki.utils
 
+import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.Resources
 import androidx.annotation.PluralsRes
 import androidx.annotation.StringRes
+import androidx.fragment.app.FragmentActivity
+import com.ichi2.anki.CrashReportService
+import com.ichi2.annotations.NeedsTest
 
 /**
  * @param resId must be a [StringRes] or a [PluralsRes]
@@ -37,3 +41,25 @@ fun Resources.getFormattedStringOrPlurals(resId: Int, quantity: Int): String {
 fun Context.getFormattedStringOrPlurals(resId: Int, quantity: Int): String {
     return resources.getFormattedStringOrPlurals(resId, quantity)
 }
+
+@SuppressLint("DiscouragedApi") // Resources.getIdentifier: Use of this function is discouraged
+// because resource reflection makes it harder to perform build optimizations and compile-time
+// verification of code. It is much more efficient to retrieve resources by identifier
+// (e.g. `R.foo.bar`) than by name (e.g. `getIdentifier("bar", "foo", null)`)
+private fun Context.getSystemBoolean(resName: String, fallback: Boolean): Boolean {
+    return try {
+        val id = Resources.getSystem().getIdentifier(resName, "bool", "android")
+        if (id != 0) {
+            createPackageContext("android", 0).resources.getBoolean(id)
+        } else {
+            fallback
+        }
+    } catch (e: Exception) {
+        CrashReportService.sendExceptionReport(e, "Context::getSystemBoolean")
+        fallback
+    }
+}
+
+@NeedsTest("true if the navbar is transparent and needs a scrim, false if not")
+val FragmentActivity.navBarNeedsScrim: Boolean
+    get() = getSystemBoolean("config_navBarNeedsScrim", true)
diff --git a/AnkiDroid/src/main/java/com/ichi2/anki/utils/ext/Fragment.kt b/AnkiDroid/src/main/java/com/ichi2/anki/utils/ext/Fragment.kt
@@ -0,0 +1,24 @@
+/*
+ *  Copyright (c) 2024 Brayan Oliveira <brayandso.dev@gmail.com>
+ *
+ *  This program is free software; you can redistribute it and/or modify it under
+ *  the terms of the GNU General Public License as published by the Free Software
+ *  Foundation; either version 3 of the License, or (at your option) any later
+ *  version.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY
+ *  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ *  PARTICULAR PURPOSE. See the GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License along with
+ *  this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.ichi2.anki.utils.ext
+
+import android.content.SharedPreferences
+import androidx.fragment.app.Fragment
+import com.ichi2.anki.preferences.sharedPrefs
+
+fun Fragment.sharedPrefs(): SharedPreferences {
+    return requireContext().sharedPrefs()
+}
diff --git a/AnkiDroid/src/main/res/layout/previewer.xml b/AnkiDroid/src/main/res/layout/previewer.xml
@@ -5,6 +5,8 @@
     android:id="@+id/root_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:fitsSystemWindows="true"
+    android:background="?attr/alternativeBackgroundColor"
     tools:context=".previewer.PreviewerFragment">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -25,26 +27,36 @@
                 app:navigationContentDescription="@string/abc_action_bar_up_description"
                 app:navigationIcon="?attr/homeAsUpIndicator"
                 app:menu="@menu/previewer"
+                android:background="?attr/alternativeBackgroundColor"
                 />
 
         </com.google.android.material.appbar.AppBarLayout>
 
-        <WebView
-            android:id="@+id/webview"
+        <com.google.android.material.card.MaterialCardView
+            android:id="@+id/webview_container"
             android:layout_width="match_parent"
+            android:layout_marginHorizontal="8dp"
             android:layout_height="0dp"
-            android:background="@color/transparent"
             app:layout_constraintTop_toBottomOf="@id/appbar"
             app:layout_constraintBottom_toTopOf="@id/slider"
-            />
+            style="@style/CardView.PreviewerStyle"
+            >
+
+            <WebView
+                android:id="@+id/webview"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                />
+
+        </com.google.android.material.card.MaterialCardView>
 
         <com.google.android.material.slider.Slider
             android:id="@+id/slider"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/webview"
+            app:layout_constraintTop_toBottomOf="@id/webview_container"
 
             android:valueFrom="1"
             android:stepSize="1"

diff --git a/AnkiDroid/src/main/res/layout/template_previewer.xml b/AnkiDroid/src/main/res/layout/template_previewer.xml
@@ -5,11 +5,14 @@
     android:id="@+id/root_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:fitsSystemWindows="true"
+    android:background="?attr/alternativeBackgroundColor"
     tools:context=".previewer.TemplatePreviewerFragment">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        >
 
         <com.google.android.material.appbar.AppBarLayout
             android:id="@+id/appbar"
@@ -23,7 +26,8 @@
                 android:layout_height="wrap_content"
                 app:layout_constraintTop_toTopOf="parent"
                 app:navigationContentDescription="@string/abc_action_bar_up_description"
-                app:navigationIcon="?attr/homeAsUpIndicator">
+                app:navigationIcon="?attr/homeAsUpIndicator"
+                android:background="?attr/alternativeBackgroundColor">
 
                 <com.google.android.material.tabs.TabLayout
                     android:id="@+id/tab_layout"
@@ -37,14 +41,23 @@
 
         </com.google.android.material.appbar.AppBarLayout>
 
-        <WebView
-            android:id="@+id/webview"
+        <com.google.android.material.card.MaterialCardView
+            android:id="@+id/webview_container"
             android:layout_width="match_parent"
+            android:layout_marginHorizontal="8dp"
             android:layout_height="0dp"
-            android:background="@color/transparent"
             app:layout_constraintTop_toBottomOf="@id/appbar"
             app:layout_constraintBottom_toTopOf="@id/show_answer"
-            />
+            style="@style/CardView.PreviewerStyle"
+            >
+
+            <WebView
+                android:id="@+id/webview"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                />
+
+        </com.google.android.material.card.MaterialCardView>
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/show_answer"
@@ -54,7 +67,7 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/webview"
+            app:layout_constraintTop_toBottomOf="@id/webview_container"
             android:text="@string/show_answer"/>
 
     </androidx.constraintlayout.widget.ConstraintLayout>

diff --git a/AnkiDroid/src/main/res/values/attrs.xml b/AnkiDroid/src/main/res/values/attrs.xml
@@ -116,6 +116,7 @@
     <!-- Reviewer other colors -->
     <attr name="topBarColor" format="color"/>
     <attr name="maxTimerColor" format="color"/>
+    <attr name="alternativeBackgroundColor" format="color"/>
     <!-- Browser colors -->
     <attr name="suspendedColor" format="color"/>
     <attr name="selectedColor" format="color"/>

diff --git a/AnkiDroid/src/main/res/values/styles.xml b/AnkiDroid/src/main/res/values/styles.xml
@@ -209,4 +209,8 @@
         <item name="buttonTint">@color/material_blue_500</item>
     </style>
 
+    <style name="CardView.PreviewerStyle" parent="Widget.Material3.CardView.Elevated">
+        <item name="android:elevation">0.8dp</item>
+    </style>
+
 </resources>
diff --git a/AnkiDroid/src/main/res/values/theme_black.xml b/AnkiDroid/src/main/res/values/theme_black.xml
@@ -47,6 +47,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/material_green_400</item>
         <item name="easyButtonTextColor">@color/material_blue_700</item>
+        <item name="alternativeBackgroundColor">#101010</item>
         <!-- Reviewer button drawables -->
         <item name="againButtonRef">@drawable/footer_button_all_black</item>
         <item name="hardButtonRef">@drawable/footer_button_all_black</item>

diff --git a/AnkiDroid/src/main/res/values/theme_dark.xml b/AnkiDroid/src/main/res/values/theme_dark.xml
@@ -69,6 +69,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/white</item>
         <item name="easyButtonTextColor">@color/white</item>
+        <item name="alternativeBackgroundColor">#2a2a2a</item>
         <!-- Reviewer button drawables -->
         <item name="showAnswerColor">@color/material_blue_grey_800</item>
         <item name="againButtonRef">@drawable/footer_button_again_dark</item>

diff --git a/AnkiDroid/src/main/res/values/theme_light.xml b/AnkiDroid/src/main/res/values/theme_light.xml
@@ -61,6 +61,7 @@
         <item name="hardButtonTextColor">@color/white</item>
         <item name="goodButtonTextColor">@color/white</item>
         <item name="easyButtonTextColor">@color/white</item>
+        <item name="alternativeBackgroundColor">#f4f5f9</item>
         <!-- Reviewer button drawables -->
         <item name="showAnswerColor">@color/material_blue_grey_700</item>
         <item name="againButtonRef">@drawable/footer_button_again</item>