mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/TranslationsDialogBottomSheet.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.fenix.translations
   6
   7 import androidx.compose.foundation.background
   8 import androidx.compose.foundation.layout.Arrangement
   9 import androidx.compose.foundation.layout.Column
  10 import androidx.compose.foundation.layout.Row
  11 import androidx.compose.foundation.layout.Spacer
  12 import androidx.compose.foundation.layout.fillMaxWidth
  13 import androidx.compose.foundation.layout.height
  14 import androidx.compose.foundation.layout.padding
  15 import androidx.compose.foundation.layout.size
  16 import androidx.compose.foundation.layout.width
  17 import androidx.compose.foundation.shape.RoundedCornerShape
  18 import androidx.compose.material.Divider
  19 import androidx.compose.material.Icon
  20 import androidx.compose.material.IconButton
  21 import androidx.compose.material.Text
  22 import androidx.compose.runtime.Composable
  23 import androidx.compose.ui.Alignment
  24 import androidx.compose.ui.Modifier
  25 import androidx.compose.ui.graphics.Color
  26 import androidx.compose.ui.res.painterResource
  27 import androidx.compose.ui.res.stringResource
  28 import androidx.compose.ui.unit.dp
  29 import org.mozilla.fenix.R
  30 import org.mozilla.fenix.compose.annotation.LightDarkPreview
  31 import org.mozilla.fenix.compose.button.PrimaryButton
  32 import org.mozilla.fenix.compose.button.SecondaryButton
  33 import org.mozilla.fenix.theme.FirefoxTheme
  34
  35 /**
  36  * Firefox Translations bottom sheet dialog.
  37  */
  38 @Composable
  39 fun TranslationsDialogBottomSheet() {
  40     Column(
  41         modifier = Modifier
  42             .background(
  43                 color = FirefoxTheme.colors.layer2,
  44                 shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
  45             )
  46             .padding(16.dp),
  47     ) {
  48         TranslationsDialogHeader()
  49
  50         Spacer(modifier = Modifier.height(14.dp))
  51
  52         Column {
  53             TranslationsDropdown(
  54                 header = stringResource(id = R.string.translations_bottom_sheet_translate_from),
  55             )
  56
  57             Spacer(modifier = Modifier.height(16.dp))
  58
  59             TranslationsDropdown(
  60                 header = stringResource(id = R.string.translations_bottom_sheet_translate_to),
  61             )
  62
  63             Spacer(modifier = Modifier.height(16.dp))
  64
  65             TranslationsDialogActionButtons()
  66         }
  67     }
  68 }
  69
  70 @Composable
  71 private fun TranslationsDialogHeader() {
  72     Row(
  73         verticalAlignment = Alignment.CenterVertically,
  74     ) {
  75         Text(
  76             text = stringResource(id = R.string.translations_bottom_sheet_title),
  77             modifier = Modifier.weight(1f),
  78             color = FirefoxTheme.colors.textPrimary,
  79             style = FirefoxTheme.typography.headline7,
  80         )
  81
  82         Spacer(modifier = Modifier.width(4.dp))
  83
  84         IconButton(
  85             onClick = {},
  86             modifier = Modifier.size(24.dp),
  87         ) {
  88             Icon(
  89                 painter = painterResource(id = R.drawable.mozac_ic_settings_24),
  90                 contentDescription = null,
  91                 tint = FirefoxTheme.colors.iconPrimary,
  92             )
  93         }
  94     }
  95 }
  96
  97 @Composable
  98 private fun TranslationsDropdown(
  99     header: String,
 100 ) {
 101     Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
 102         Text(
 103             text = header,
 104             color = FirefoxTheme.colors.textPrimary,
 105             style = FirefoxTheme.typography.caption,
 106         )
 107
 108         Row {
 109             Text(
 110                 text = "English",
 111                 modifier = Modifier.weight(1f),
 112                 color = FirefoxTheme.colors.textPrimary,
 113                 style = FirefoxTheme.typography.subtitle1,
 114             )
 115
 116             Spacer(modifier = Modifier.width(10.dp))
 117
 118             Icon(
 119                 painter = painterResource(id = R.drawable.mozac_ic_dropdown_arrow),
 120                 contentDescription = null,
 121                 tint = FirefoxTheme.colors.iconPrimary,
 122             )
 123         }
 124
 125         Divider(color = FirefoxTheme.colors.formDefault)
 126     }
 127 }
 128
 129 @Composable
 130 private fun TranslationsDialogActionButtons() {
 131     Row(
 132         modifier = Modifier.fillMaxWidth(),
 133         horizontalArrangement = Arrangement.End,
 134         verticalAlignment = Alignment.CenterVertically,
 135     ) {
 136         SecondaryButton(
 137             text = stringResource(id = R.string.translations_bottom_sheet_negative_button),
 138             modifier = Modifier,
 139             backgroundColor = Color.Transparent,
 140         ) {}
 141
 142         Spacer(modifier = Modifier.width(10.dp))
 143
 144         PrimaryButton(
 145             text = stringResource(id = R.string.translations_bottom_sheet_positive_button),
 146             modifier = Modifier,
 147         ) {}
 148     }
 149 }
 150
 151 @Composable
 152 @LightDarkPreview
 153 private fun TranslationsDialogBottomSheetPreview() {
 154     FirefoxTheme {
 155         TranslationsDialogBottomSheet()
 156     }
 157 }