mobile/android/focus-android/app/src/main/java/org/mozilla/focus/searchwidget/PromoteSearchWidgetDialogCompose.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.searchwidget
   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.fillMaxWidth
  12 import androidx.compose.foundation.layout.padding
  13 import androidx.compose.foundation.layout.size
  14 import androidx.compose.foundation.layout.wrapContentHeight
  15 import androidx.compose.foundation.layout.wrapContentSize
  16 import androidx.compose.foundation.shape.CircleShape
  17 import androidx.compose.foundation.shape.RoundedCornerShape
  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.runtime.MutableState
  25 import androidx.compose.runtime.mutableStateOf
  26 import androidx.compose.runtime.remember
  27 import androidx.compose.ui.Alignment
  28 import androidx.compose.ui.Modifier
  29 import androidx.compose.ui.draw.clip
  30 import androidx.compose.ui.platform.LocalContext
  31 import androidx.compose.ui.res.colorResource
  32 import androidx.compose.ui.res.painterResource
  33 import androidx.compose.ui.res.stringResource
  34 import androidx.compose.ui.text.AnnotatedString
  35 import androidx.compose.ui.text.style.TextAlign
  36 import androidx.compose.ui.tooling.preview.Preview
  37 import androidx.compose.ui.unit.dp
  38 import androidx.compose.ui.window.Dialog
  39 import androidx.compose.ui.window.DialogProperties
  40 import androidx.constraintlayout.compose.ConstraintLayout
  41 import mozilla.components.ui.colors.PhotonColors
  42 import org.mozilla.focus.R
  43 import org.mozilla.focus.ui.theme.FocusTheme
  44 import org.mozilla.focus.ui.theme.focusColors
  45 import org.mozilla.focus.ui.theme.focusTypography
  46
  47 @Composable
  48 @Preview
  49 private fun PromoteSearchWidgetDialogComposePreview() {
  50     FocusTheme {
  51         PromoteSearchWidgetDialogCompose({}, {})
  52     }
  53 }
  54
  55 @Suppress("LongMethod")
  56 @Composable
  57 fun PromoteSearchWidgetDialogCompose(
  58     onAddSearchWidgetButtonClick: () -> Unit,
  59     onDismiss: () -> Unit,
  60 ) {
  61     val openDialog = remember { mutableStateOf(true) }
  62     if (openDialog.value) {
  63         Dialog(
  64             onDismissRequest = {
  65                 onDismiss()
  66             },
  67             DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = false),
  68         ) {
  69             Column(
  70                 modifier = Modifier
  71                     .clip(RoundedCornerShape(20.dp)),
  72             ) {
  73                 ConstraintLayout(
  74                     modifier = Modifier
  75                         .wrapContentSize()
  76                         .background(
  77                             colorResource(id = R.color.promote_search_widget_dialog_background),
  78                         ),
  79                 ) {
  80                     val (closeButton, content) = createRefs()
  81                     Column(
  82                         modifier = Modifier
  83                             .fillMaxWidth()
  84                             .wrapContentHeight()
  85                             .padding(top = 8.dp, end = 16.dp)
  86                             .constrainAs(closeButton) {
  87                                 top.linkTo(parent.top)
  88                                 start.linkTo(parent.start)
  89                                 end.linkTo(parent.end)
  90                             },
  91                         verticalArrangement = Arrangement.Center,
  92                         horizontalAlignment = Alignment.End,
  93                     ) {
  94                         CloseButton(openDialog, onDismiss)
  95                     }
  96                     Column(
  97                         modifier = Modifier.constrainAs(content) {
  98                             top.linkTo(closeButton.bottom)
  99                             start.linkTo(parent.start)
 100                             end.linkTo(parent.end)
 101                         },
 102                         verticalArrangement = Arrangement.Center,
 103                         horizontalAlignment = Alignment.CenterHorizontally,
 104                     ) {
 105                         Text(
 106                             text = stringResource(
 107                                 id = R.string.promote_search_widget_dialog_title,
 108                             ),
 109                             modifier = Modifier
 110                                 .padding(16.dp),
 111                             color = focusColors.dialogTextColor,
 112                             textAlign = TextAlign.Center,
 113                             style = focusTypography.dialogTitle,
 114                         )
 115                         Text(
 116                             text = stringResource(
 117                                 id = R.string.promote_search_widget_dialog_subtitle,
 118                                 LocalContext.current.getString(R.string.onboarding_short_app_name),
 119                             ),
 120                             modifier = Modifier
 121                                 .padding(top = 16.dp, start = 16.dp, end = 16.dp),
 122                             color = focusColors.dialogTextColor,
 123                             textAlign = TextAlign.Center,
 124                             style = focusTypography.dialogContent,
 125                         )
 126                         Image(
 127                             painter = painterResource(R.drawable.focus_search_widget_promote_dialog),
 128                             contentDescription = LocalContext.current.getString(
 129                                 R.string.promote_search_widget_dialog_picture_content_description,
 130                             ),
 131                             modifier = Modifier
 132                                 .fillMaxWidth()
 133                                 .padding(start = 10.dp, end = 10.dp)
 134                                 .background(
 135                                     colorResource(id = R.color.promote_search_widget_dialog_background),
 136                                 ),
 137                         )
 138                         ComponentAddWidgetButton({ onAddSearchWidgetButtonClick() }, { onDismiss() }, openDialog)
 139                     }
 140                 }
 141             }
 142         }
 143     }
 144 }
 145
 146 @Composable
 147 private fun ComponentAddWidgetButton(
 148     onAddSearchWidgetButtonClick: () -> Unit,
 149     onDismiss: () -> Unit,
 150     openState: MutableState<Boolean>,
 151 ) {
 152     Button(
 153         onClick = {
 154             openState.value = false
 155             onAddSearchWidgetButtonClick()
 156             onDismiss()
 157         },
 158         modifier = Modifier
 159             .fillMaxWidth()
 160             .padding(24.dp),
 161         shape = RoundedCornerShape(8.dp),
 162         colors = ButtonDefaults.textButtonColors(
 163             backgroundColor = colorResource(R.color.promote_search_widget_dialog_add_widget_button_background),
 164         ),
 165     ) {
 166         Text(
 167             text = AnnotatedString(
 168                 LocalContext.current.resources.getString(
 169                     R.string.promote_search_widget_button_text,
 170                 ),
 171             ),
 172             color = PhotonColors.White,
 173         )
 174     }
 175 }
 176
 177 @Composable
 178 private fun CloseButton(
 179     openState: MutableState<Boolean>,
 180     onDismiss: () -> Unit,
 181 ) {
 182     IconButton(
 183         onClick = {
 184             onDismiss()
 185             openState.value = false
 186         },
 187         modifier = Modifier
 188             .background(
 189                 colorResource(id = R.color.promote_search_widget_dialog_close_button_background),
 190                 shape = CircleShape,
 191             )
 192             .size(48.dp)
 193             .padding(10.dp),
 194     ) {
 195         Icon(
 196             painter = painterResource(R.drawable.mozac_ic_cross_24),
 197             contentDescription = stringResource(id = R.string.promote_search_widget_dialog_content_description),
 198             tint = focusColors.closeIcon,
 199         )
 200     }
 201 }