mobile/android/focus-android/app/src/main/java/org/mozilla/focus/fragment/onboarding/OnboardingSecondScreenCompose.kt

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 package org.mozilla.focus.fragment.onboarding
   6
   7 import androidx.compose.foundation.Image
   8 import androidx.compose.foundation.background
   9 import androidx.compose.foundation.layout.Arrangement
  10 import androidx.compose.foundation.layout.Column
  11 import androidx.compose.foundation.layout.fillMaxSize
  12 import androidx.compose.foundation.layout.fillMaxWidth
  13 import androidx.compose.foundation.layout.padding
  14 import androidx.compose.foundation.layout.size
  15 import androidx.compose.foundation.rememberScrollState
  16 import androidx.compose.foundation.shape.CircleShape
  17 import androidx.compose.foundation.verticalScroll
  18 import androidx.compose.material.Button
  19 import androidx.compose.material.ButtonDefaults
  20 import androidx.compose.material.Icon
  21 import androidx.compose.material.IconButton
  22 import androidx.compose.material.Text
  23 import androidx.compose.runtime.Composable
  24 import androidx.compose.ui.Alignment
  25 import androidx.compose.ui.Modifier
  26 import androidx.compose.ui.geometry.Offset
  27 import androidx.compose.ui.graphics.Brush
  28 import androidx.compose.ui.platform.LocalContext
  29 import androidx.compose.ui.res.colorResource
  30 import androidx.compose.ui.res.painterResource
  31 import androidx.compose.ui.res.stringResource
  32 import androidx.compose.ui.text.AnnotatedString
  33 import androidx.compose.ui.text.style.TextAlign
  34 import androidx.compose.ui.tooling.preview.Preview
  35 import androidx.compose.ui.unit.dp
  36 import mozilla.components.ui.colors.PhotonColors
  37 import org.mozilla.focus.R
  38 import org.mozilla.focus.ui.theme.FocusTheme
  39 import org.mozilla.focus.ui.theme.focusColors
  40 import org.mozilla.focus.ui.theme.focusTypography
  41
  42 @Composable
  43 @Preview
  44 private fun OnBoardingSecondScreenComposePreview() {
  45     FocusTheme {
  46         OnBoardingSecondScreenCompose({}, {}, {})
  47     }
  48 }
  49
  50 /**
  51  * Displays the second onBoarding screen
  52  *
  53  * @param setAsDefaultBrowser Will be called when the user clicks on SetDefaultBrowser button.
  54  * @param skipScreen Will be called when the user clicks on Skip button.
  55  * @param onCloseButtonClick The lambda to be invoked when close button icon is pressed.
  56  */
  57 @Composable
  58 @Suppress("LongMethod")
  59 fun OnBoardingSecondScreenCompose(
  60     setAsDefaultBrowser: () -> Unit,
  61     skipScreen: () -> Unit,
  62     onCloseButtonClick: () -> Unit,
  63 ) {
  64     Column(
  65         modifier = Modifier
  66             .fillMaxSize()
  67             .background(
  68                 brush = Brush.linearGradient(
  69                     colors = listOf(
  70                         colorResource(R.color.home_screen_modal_gradient_one),
  71                         colorResource(R.color.home_screen_modal_gradient_two),
  72                         colorResource(R.color.home_screen_modal_gradient_three),
  73                         colorResource(R.color.home_screen_modal_gradient_four),
  74                         colorResource(R.color.home_screen_modal_gradient_five),
  75                         colorResource(R.color.home_screen_modal_gradient_six),
  76                     ),
  77                     end = Offset(0f, Float.POSITIVE_INFINITY),
  78                     start = Offset(Float.POSITIVE_INFINITY, 0f),
  79                 ),
  80             ),
  81     ) {
  82         Column(
  83             modifier = Modifier
  84                 .fillMaxWidth()
  85                 .padding(top = 60.dp, end = 20.dp),
  86             horizontalAlignment = Alignment.End,
  87         ) {
  88             CloseButton(onCloseButtonClick)
  89         }
  90         Column(
  91             modifier = Modifier
  92                 .fillMaxSize()
  93                 .verticalScroll(rememberScrollState()),
  94             verticalArrangement = Arrangement.Center,
  95             horizontalAlignment = Alignment.CenterHorizontally,
  96         ) {
  97             Image(
  98                 painter = painterResource(R.drawable.onboarding_second_screen_icon),
  99                 contentDescription = LocalContext.current.getString(R.string.app_name),
 100                 modifier = Modifier
 101                     .size(200.dp, 300.dp),
 102             )
 103             Text(
 104                 text = stringResource(
 105                     R.string.onboarding_second_screen_title,
 106                     stringResource(R.string.onboarding_short_app_name),
 107                 ),
 108                 modifier = Modifier
 109                     .padding(top = 32.dp, start = 16.dp, end = 16.dp),
 110                 textAlign = TextAlign.Center,
 111                 style = focusTypography.onboardingTitle,
 112             )
 113             Text(
 114                 text = stringResource(
 115                     R.string.onboarding_second_screen_subtitle_one,
 116                 ),
 117                 modifier = Modifier
 118                     .padding(top = 16.dp, start = 16.dp, end = 16.dp),
 119                 textAlign = TextAlign.Center,
 120                 style = focusTypography.onboardingSubtitle,
 121             )
 122             Text(
 123                 text = stringResource(
 124                     R.string.onboarding_second_screen_subtitle_two,
 125                     stringResource(R.string.onboarding_short_app_name),
 126                 ),
 127                 modifier = Modifier
 128                     .padding(top = 16.dp, start = 16.dp, end = 16.dp),
 129                 textAlign = TextAlign.Center,
 130                 style = focusTypography.onboardingSubtitle,
 131             )
 132             ComponentOnBoardingSecondScreenButtons(setAsDefaultBrowser, skipScreen)
 133         }
 134     }
 135 }
 136
 137 @Composable
 138 private fun CloseButton(onCloseButtonClick: () -> Unit) {
 139     IconButton(
 140         modifier = Modifier
 141             .size(48.dp)
 142             .background(
 143                 colorResource(id = R.color.onboardingCloseButtonColor),
 144                 shape = CircleShape,
 145             ),
 146         onClick = onCloseButtonClick,
 147     ) {
 148         Icon(
 149             painter = painterResource(R.drawable.mozac_ic_cross_24),
 150             contentDescription = stringResource(R.string.onboarding_close_button_content_description),
 151             tint = focusColors.closeIcon,
 152         )
 153     }
 154 }
 155
 156 @Composable
 157 private fun ComponentOnBoardingSecondScreenButtons(setAsDefaultBrowser: () -> Unit, skipScreen: () -> Unit) {
 158     Button(
 159         onClick = setAsDefaultBrowser,
 160         modifier = Modifier
 161             .padding(top = 33.dp, start = 16.dp, end = 16.dp)
 162             .fillMaxWidth(),
 163         colors = ButtonDefaults.textButtonColors(
 164             backgroundColor = colorResource(R.color.onboardingButtonOneColor),
 165         ),
 166     ) {
 167         Text(
 168             text = AnnotatedString(
 169                 LocalContext.current.resources.getString(
 170                     R.string.onboarding_second_screen_default_browser_button_text,
 171                 ),
 172             ),
 173             color = PhotonColors.White,
 174         )
 175     }
 176     Button(
 177         onClick = skipScreen,
 178         modifier = Modifier
 179             .padding(top = 8.dp, start = 16.dp, end = 16.dp)
 180             .fillMaxWidth(),
 181         colors = ButtonDefaults.textButtonColors(
 182             backgroundColor = colorResource(R.color.onboardingButtonTwoColor),
 183         ),
 184     ) {
 185         Text(
 186             text = AnnotatedString(
 187                 LocalContext.current.resources.getString(
 188                     R.string.onboarding_second_screen_skip_button_text,
 189                 ),
 190             ),
 191             color = PhotonColors.Black,
 192         )
 193     }
 194 }