From c20ca9d937b997ffdebd65f5bc344874a19a160d Mon Sep 17 00:00:00 2001 From: sarah541 Date: Thu, 23 Mar 2023 13:06:23 -0400 Subject: [PATCH] Bug 1821778 - Add card for fullscreen research surface --- .../experiments/ResearchSurfaceDialogFragment.kt | 116 +++++++++++++++++++ .../experiments/view/ResearchSurfaceSurvey.kt | 125 +++++++++++++++++++++ .../app/src/main/res/navigation/nav_graph.xml | 17 +++ .../fenix/app/src/main/res/values/strings.xml | 6 +- .../fenix/app/src/main/res/values/styles.xml | 4 + 5 files changed, 265 insertions(+), 3 deletions(-) create mode 100644 mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/ResearchSurfaceDialogFragment.kt create mode 100644 mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/view/ResearchSurfaceSurvey.kt diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/ResearchSurfaceDialogFragment.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/ResearchSurfaceDialogFragment.kt new file mode 100644 index 000000000000..4408e768d9e2 --- /dev/null +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/ResearchSurfaceDialogFragment.kt @@ -0,0 +1,116 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +package org.mozilla.fenix.experiments + +import android.annotation.SuppressLint +import android.content.pm.ActivityInfo +import android.os.Bundle +import android.view.LayoutInflater +import android.view.View +import android.view.ViewGroup +import androidx.compose.ui.platform.ComposeView +import androidx.compose.ui.platform.ViewCompositionStrategy +import androidx.fragment.app.DialogFragment +import androidx.navigation.fragment.navArgs +import org.mozilla.fenix.R +import org.mozilla.fenix.experiments.view.ResearchSurfaceSurvey +import org.mozilla.fenix.theme.FirefoxTheme + +/** + * Dialog displaying the fullscreen research surface message. + */ + +class ResearchSurfaceDialogFragment : DialogFragment() { + private val args by navArgs() + private lateinit var bundleArgs: Bundle + + /** + * A callback to trigger the 'Take Survey' button of the dialog. + */ + var onAccept: () -> Unit = {} + + /** + * A callback to trigger the 'No Thanks' button of the dialog. + */ + var onDismiss: () -> Unit = {} + + @SuppressLint("SourceLockedOrientationActivity") + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setStyle(STYLE_NO_TITLE, R.style.ResearchSurfaceDialogStyle) + + bundleArgs = args.toBundle() + } + + override fun onDestroy() { + super.onDestroy() + activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED + } + + override fun onCreateView( + inflater: LayoutInflater, + container: ViewGroup?, + savedInstanceState: Bundle?, + ): View = ComposeView(requireContext()).apply { + setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) + + val messageText = bundleArgs.getString(KEY_MESSAGE_TEXT) + ?: getString(R.string.nimbus_survey_message_text) + val acceptButtonText = bundleArgs.getString(KEY_ACCEPT_BUTTON_TEXT) + ?: getString(R.string.preferences_take_survey) + val dismissButtonText = bundleArgs.getString(KEY_DISMISS_BUTTON_TEXT) + ?: getString(R.string.preferences_not_take_survey) + + setContent { + FirefoxTheme { + ResearchSurfaceSurvey( + messageText = messageText, + onAcceptButtonText = acceptButtonText, + onDismissButtonText = dismissButtonText, + onDismiss = { + onDismiss() + dismiss() + }, + onAccept = { + onAccept() + dismiss() + }, + ) + } + } + } + + companion object { + /** + * A builder method for creating a [ResearchSurfaceDialogFragment] + */ + fun newInstance( + keyMessageText: String?, + keyAcceptButtonText: String?, + keyDismissButtonText: String?, + ): ResearchSurfaceDialogFragment { + val fragment = ResearchSurfaceDialogFragment() + val arguments = fragment.arguments ?: Bundle() + + with(arguments) { + putString(KEY_MESSAGE_TEXT, keyMessageText) + + putString(KEY_ACCEPT_BUTTON_TEXT, keyAcceptButtonText) + + putString(KEY_DISMISS_BUTTON_TEXT, keyDismissButtonText) + } + + fragment.arguments = arguments + fragment.isCancelable = false + + return fragment + } + + private const val KEY_MESSAGE_TEXT = "KEY_MESSAGE_TEXT" + private const val KEY_ACCEPT_BUTTON_TEXT = "KEY_ACCEPT_BUTTON_TEXT" + private const val KEY_DISMISS_BUTTON_TEXT = "KEY_DISMISS_BUTTON_TEXT" + const val FRAGMENT_TAG = "MOZAC_RESEARCH_SURFACE_DIALOG_FRAGMENT" + } +} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/view/ResearchSurfaceSurvey.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/view/ResearchSurfaceSurvey.kt new file mode 100644 index 000000000000..bd8b678eaf0e --- /dev/null +++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/experiments/view/ResearchSurfaceSurvey.kt @@ -0,0 +1,125 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +package org.mozilla.fenix.experiments.view + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.navigationBarsPadding +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.statusBarsPadding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import org.mozilla.fenix.R +import org.mozilla.fenix.compose.annotation.LightDarkPreview +import org.mozilla.fenix.compose.button.PrimaryButton +import org.mozilla.fenix.compose.button.SecondaryButton +import org.mozilla.fenix.theme.FirefoxTheme + +/** + * The ratio of the content height to screen height. This was determined from the designs in figma + * taking the top and bottom padding to be 10% of screen height. + */ +private const val FULLSCREEN_HEIGHT = 0.8f + +/** + * The ratio of the button width to screen width. This was determined from the designs in figma + * taking the horizontal button paddings to be 5% of the screen width. + */ +private const val BUTTON_WIDTH = 0.9f + +/** + * A full screen for displaying a research surface. + * + * @param messageText The research surface message text to be displayed. + * @param onAcceptButtonText A positive button text of the fullscreen message. + * @param onDismissButtonText A negative button text of the fullscreen message. + * @param onDismiss Invoked when the user clicks on the "No Thanks" button. + * @param onAccept Invoked when the user clicks on the "Take Survey" button + */ +@Composable +fun ResearchSurfaceSurvey( + messageText: String, + onAcceptButtonText: String, + onDismissButtonText: String, + onDismiss: () -> Unit, + onAccept: () -> Unit, +) { + Box( + modifier = Modifier + .fillMaxSize() + .statusBarsPadding() + .navigationBarsPadding(), + ) { + Column( + modifier = Modifier + .fillMaxHeight(FULLSCREEN_HEIGHT) + .align(Alignment.Center) + .verticalScroll(rememberScrollState()), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceBetween, + ) { + Spacer(Modifier) + Column( + modifier = Modifier.padding(horizontal = 16.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Image( + painter = painterResource(R.drawable.ic_firefox), + contentDescription = null, + ) + Spacer(modifier = Modifier.height(16.dp)) + Text( + text = messageText, + color = FirefoxTheme.colors.textPrimary, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline6, + ) + } + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.fillMaxWidth(BUTTON_WIDTH), + ) { + PrimaryButton( + text = onAcceptButtonText, + onClick = onAccept, + ) + Spacer(modifier = Modifier.height(8.dp)) + SecondaryButton( + text = onDismissButtonText, + onClick = onDismiss, + ) + } + } + } +} + +@Composable +@LightDarkPreview +private fun SurveyPreview() { + FirefoxTheme { + ResearchSurfaceSurvey( + messageText = stringResource(id = R.string.nimbus_survey_message_text), + onAcceptButtonText = stringResource(id = R.string.preferences_take_survey), + onDismissButtonText = stringResource(id = R.string.preferences_not_take_survey), + onDismiss = {}, + onAccept = {}, + ) + } +} diff --git a/mobile/android/fenix/app/src/main/res/navigation/nav_graph.xml b/mobile/android/fenix/app/src/main/res/navigation/nav_graph.xml index a62fa08f8898..f8926d91b377 100644 --- a/mobile/android/fenix/app/src/main/res/navigation/nav_graph.xml +++ b/mobile/android/fenix/app/src/main/res/navigation/nav_graph.xml @@ -201,6 +201,23 @@ android:name="org.mozilla.fenix.onboarding.HomeOnboardingDialogFragment" /> + + + + + + diff --git a/mobile/android/fenix/app/src/main/res/values/strings.xml b/mobile/android/fenix/app/src/main/res/values/strings.xml index 45fb811ad96c..caa368b34734 100644 --- a/mobile/android/fenix/app/src/main/res/values/strings.xml +++ b/mobile/android/fenix/app/src/main/res/values/strings.xml @@ -1229,11 +1229,11 @@ - Please help make Firefox better by taking a short survey. + Please help make Firefox better by taking a short survey. - Take Survey + Take Survey - No Thanks + No Thanks diff --git a/mobile/android/fenix/app/src/main/res/values/styles.xml b/mobile/android/fenix/app/src/main/res/values/styles.xml index dd651bb53725..45d7267984ff 100644 --- a/mobile/android/fenix/app/src/main/res/values/styles.xml +++ b/mobile/android/fenix/app/src/main/res/values/styles.xml @@ -567,6 +567,10 @@