From ba603a73aefc7d83d65798a242056fbabe982644 Mon Sep 17 00:00:00 2001 From: Saifuddin Date: Fri, 29 Nov 2024 11:53:30 +0530 Subject: [PATCH 1/7] Created reusable card components --- .../ui/common/components/ClickableItemComp.kt | 79 ++++++++++++++ .../ui/common/components/ItemCardContainer.kt | 75 +++++++++++++ .../common/components/SwitchableItemComp.kt | 102 ++++++++++++++++++ .../main/java/be/scri/ui/model/ScribeItem.kt | 41 +++++++ .../java/be/scri/ui/model/ScribeItemList.kt | 8 ++ .../scri/ui/screens/LanguageSettingsScreen.kt | 2 + .../java/be/scri/ui/screens/SettingsScreen.kt | 91 ++++++++-------- 7 files changed, 353 insertions(+), 45 deletions(-) create mode 100644 app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt create mode 100644 app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt create mode 100644 app/src/main/java/be/scri/ui/common/components/SwitchableItemComp.kt create mode 100644 app/src/main/java/be/scri/ui/model/ScribeItem.kt create mode 100644 app/src/main/java/be/scri/ui/model/ScribeItemList.kt create mode 100644 app/src/main/java/be/scri/ui/screens/LanguageSettingsScreen.kt diff --git a/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt b/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt new file mode 100644 index 00000000..aa92588c --- /dev/null +++ b/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt @@ -0,0 +1,79 @@ +package be.scri.ui.common.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.colorResource +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import be.scri.R + +@Composable +fun ClickableItemComp( + title: String, + desc: String, + onClick: () -> Unit, + modifier: Modifier = Modifier +) { + Column( + modifier = modifier + .fillMaxWidth() + .padding( + horizontal = 12.dp, + vertical = 10.dp + ) + .clip(RoundedCornerShape(12.dp)) + .clickable(onClick = onClick), + ) { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = title, + modifier = Modifier.weight(1f), + fontSize = 16.sp, + color = colorResource(R.color.app_text_color), + style = MaterialTheme.typography.bodyMedium, + ) + Icon( + painter = painterResource(R.drawable.right_arrow), + modifier = Modifier + .padding(start = 6.dp) + .size(14.dp), + contentDescription = "Right Arrow", + ) + } + Text( + text = desc, + fontSize = 12.sp, + color = Color.Gray, + style = MaterialTheme.typography.bodySmall, + modifier = Modifier.padding(top = 4.dp), + ) + } +} + +@PreviewLightDark +@Composable +private fun ClickableItemPreview() { + ClickableItemComp( + title = "Title", + desc = "Description", + onClick = {} + ) +} diff --git a/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt b/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt new file mode 100644 index 00000000..cdbb15fd --- /dev/null +++ b/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt @@ -0,0 +1,75 @@ +package be.scri.ui.common.components + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.unit.dp +import be.scri.ui.model.ScribeItem +import be.scri.ui.model.ScribeItemList + +@Composable +fun ItemsCardContainer( + cardItemsList: ScribeItemList, + modifier: Modifier = Modifier +) { + Surface( + modifier = modifier, + shape = RoundedCornerShape(12.dp), + color = MaterialTheme.colorScheme.surface + ) { + Column( + modifier = Modifier + .padding(vertical = 4.dp, horizontal = 4.dp) + ) { + cardItemsList.items.forEach { item -> + when(item) { + is ScribeItem.ClickableItem -> { + ClickableItemComp( + item.title, + item.desc, + item.action + ) + } + + is ScribeItem.SwitchItem -> { + SwitchableItemComp( + item.title, + item.desc, + item.state, + item.onToggle + ) + } + + is ScribeItem.CustomItem -> { + + } + + is ScribeItem.ExternalLinkItem -> { + + } + } + } + } + } +} + +@PreviewLightDark +@Composable +private fun ItemsCardContainerPreview() { + val cardItemsList = ScribeItemList( + listOf( + ScribeItem.ClickableItem( + "", + "", + action = {} + ) + ) + ) + + ItemsCardContainer(cardItemsList) +} diff --git a/app/src/main/java/be/scri/ui/common/components/SwitchableItemComp.kt b/app/src/main/java/be/scri/ui/common/components/SwitchableItemComp.kt new file mode 100644 index 00000000..4ecf4e06 --- /dev/null +++ b/app/src/main/java/be/scri/ui/common/components/SwitchableItemComp.kt @@ -0,0 +1,102 @@ +package be.scri.ui.common.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Switch +import androidx.compose.material3.SwitchDefaults +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.colorResource +import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import be.scri.R + +@Composable +fun SwitchableItemComp( + title: String, + desc: String, + isChecked: Boolean, + onCheckedChange: (Boolean) -> Unit, + modifier: Modifier = Modifier +) { + val checkedThumbColor = colorResource(R.color.switch_thumb_selector_color_true) + val uncheckedThumbColor = colorResource(R.color.switch_thumb_selector_color_false) + val checkedTrackColor = colorResource(R.color.switch_selector_color) + val uncheckedTrackColor = colorResource(R.color.switch_selector_color_false) + + Column( + modifier = modifier + .padding(horizontal = 12.dp, vertical = 10.dp), + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = title, + modifier = Modifier.weight(1f), + fontSize = 16.sp, + color = colorResource(R.color.app_text_color), + style = MaterialTheme.typography.bodyMedium, + ) + Switch( + interactionSource = null, + checked = isChecked, + onCheckedChange = onCheckedChange, + modifier = Modifier + .width(51.dp) + .height(31.dp), + thumbContent = { + Box( + modifier = Modifier + .size(27.dp) + .background( + if (isChecked) { + colorResource(R.color.switch_thumb_selector_color_true) + } else { + colorResource(R.color.switch_thumb_selector_color_false) + }, + shape = CircleShape, + ), + ) + }, + colors = SwitchDefaults.colors( + checkedThumbColor = checkedThumbColor, + uncheckedThumbColor = uncheckedThumbColor, + checkedTrackColor = checkedTrackColor, + uncheckedTrackColor = uncheckedTrackColor, + uncheckedBorderColor = Color.Transparent, + ), + ) + } + Text( + text = desc, + fontSize = 12.sp, + color = Color.Gray, + style = MaterialTheme.typography.bodySmall, + modifier = Modifier.padding(top = 4.dp), + ) + } +} + +@PreviewLightDark +@Composable +private fun SwitchableItemPreview() { + SwitchableItemComp( + title = "Title", + desc = "Description", + isChecked = true, + onCheckedChange = {}, + ) +} diff --git a/app/src/main/java/be/scri/ui/model/ScribeItem.kt b/app/src/main/java/be/scri/ui/model/ScribeItem.kt new file mode 100644 index 00000000..08c86856 --- /dev/null +++ b/app/src/main/java/be/scri/ui/model/ScribeItem.kt @@ -0,0 +1,41 @@ +package be.scri.ui.model + +sealed class ScribeItem( + open val title: String, + open val desc: String, +) { + + data class ClickableItem( + override val title: String, + override val desc: String, + val action: () -> Unit + ) : ScribeItem(title, desc) + + data class SwitchItem( + override val title: String, + override val desc: String, + val state: Boolean, + val onToggle: (Boolean) -> Unit + ) : ScribeItem(title, desc) + + data class ExternalLinkItem( + override val title: String, + override val desc: String, + val url: String, + val onClick: (String) -> Unit + ) : ScribeItem(title, desc) + + data class CustomItem( + override val title: String, + override val desc: String, + val customAction: (Any?) -> Unit + ) : ScribeItem(title, desc) +} + + +enum class ItemType { + CLICKABLE_ITEM, + SWITCH_ITEM, + EXTERNAL_LINK_ITEM, + CUSTOM_ITEM +} diff --git a/app/src/main/java/be/scri/ui/model/ScribeItemList.kt b/app/src/main/java/be/scri/ui/model/ScribeItemList.kt new file mode 100644 index 00000000..69ae2e9b --- /dev/null +++ b/app/src/main/java/be/scri/ui/model/ScribeItemList.kt @@ -0,0 +1,8 @@ +package be.scri.ui.model + +import androidx.compose.runtime.Immutable + +@Immutable +data class ScribeItemList( + val items: List +) diff --git a/app/src/main/java/be/scri/ui/screens/LanguageSettingsScreen.kt b/app/src/main/java/be/scri/ui/screens/LanguageSettingsScreen.kt new file mode 100644 index 00000000..e15cdd99 --- /dev/null +++ b/app/src/main/java/be/scri/ui/screens/LanguageSettingsScreen.kt @@ -0,0 +1,2 @@ +package be.scri.ui.screens + diff --git a/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt b/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt index 566ed32e..6e9b018f 100644 --- a/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt +++ b/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt @@ -48,6 +48,9 @@ import androidx.lifecycle.compose.LocalLifecycleOwner import be.scri.R import be.scri.fragments.LanguageSettingsFragment import be.scri.helpers.PreferencesHelper +import be.scri.ui.common.components.ItemsCardContainer +import be.scri.ui.model.ScribeItem +import be.scri.ui.model.ScribeItemList @Composable fun SettingsScreen( @@ -93,6 +96,41 @@ fun SettingsScreen( ) } + val appSettingsItemList = listOf( + ScribeItem.ClickableItem( + title = stringResource(R.string.app_settings_menu_app_language), + desc = stringResource(R.string.app_settings_menu_app_language_description), + action = onLanguageSelect, + ), + ScribeItem.SwitchItem( + title = stringResource(R.string.app_settings_menu_app_color_mode), + desc = stringResource(R.string.app_settings_menu_app_color_mode_description), + state = isUserDarkMode, + onToggle = { isUserDarkMode1 -> + onDarkModeChange(isUserDarkMode1) + }, + ), + ScribeItem.SwitchItem( + title = stringResource(R.string.app_settings_keyboard_keypress_vibration), + desc = stringResource(R.string.app_settings_keyboard_keypress_vibration_description), + state = vibrateOnKeypress.value, + onToggle = { shouldVibrateOnKeypress -> + vibrateOnKeypress.value = shouldVibrateOnKeypress + PreferencesHelper.setVibrateOnKeypress(context, shouldVibrateOnKeypress) + } + ), + ScribeItem.SwitchItem( + title = stringResource(R.string.app_settings_keyboard_functionality_popup_on_keypress), + desc = stringResource(R.string.app_settings_keyboard_functionality_popup_on_keypress_description), + state = popupOnKeypress.value, + onToggle = { shouldPopUpOnKeypress -> + popupOnKeypress.value = shouldPopUpOnKeypress + PreferencesHelper.setShowPopupOnKeypress(context, shouldPopUpOnKeypress) + } + ) + ) + + LazyColumn( modifier = modifier @@ -116,51 +154,14 @@ fun SettingsScreen( } item { - Column( - modifier = - Modifier - .padding(12.dp) - .clip(RoundedCornerShape(8.dp)) - .background(colorResource(R.color.card_view_color)), - ) { - SettingItem( - title = stringResource(id = R.string.app_settings_menu_app_language), - description = stringResource(id = R.string.app_settings_menu_app_language_description), - onClick = onLanguageSelect, - ) - - SwitchSettingItem( - title = stringResource(id = R.string.app_settings_menu_app_color_mode), - description = stringResource(id = R.string.app_settings_menu_app_color_mode_description), - isChecked = isUserDarkMode, - onCheckedChange = { isDarkMode -> - onDarkModeChange(isDarkMode) - }, - ) - - SwitchSettingItem( - title = stringResource(id = R.string.app_settings_keyboard_keypress_vibration), - description = stringResource(id = R.string.app_settings_keyboard_keypress_vibration_description), - isChecked = vibrateOnKeypress.value, - onCheckedChange = { shouldVibrateOnKeypress -> - vibrateOnKeypress.value = shouldVibrateOnKeypress - PreferencesHelper.setVibrateOnKeypress(context, shouldVibrateOnKeypress) - }, - ) - - SwitchSettingItem( - title = stringResource(id = R.string.app_settings_keyboard_functionality_popup_on_keypress), - description = - stringResource( - id = R.string.app_settings_keyboard_functionality_popup_on_keypress_description, - ), - isChecked = popupOnKeypress.value, - onCheckedChange = { shouldPopUpOnKeypress -> - popupOnKeypress.value = shouldPopUpOnKeypress - PreferencesHelper.setShowPopupOnKeypress(context, shouldPopUpOnKeypress) - }, - ) - } + ItemsCardContainer( + cardItemsList = ScribeItemList( + items = appSettingsItemList + ), + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 12.dp), + ) } item { From 52d6434101ce485717cdde3c164495dee0b246c9 Mon Sep 17 00:00:00 2001 From: Saifuddin Date: Fri, 29 Nov 2024 12:49:55 +0530 Subject: [PATCH 2/7] Refactored SettingsScreen to use reusable components --- .../ui/common/components/ClickableItemComp.kt | 21 +- .../ui/common/components/ItemCardContainer.kt | 37 ++- .../components/ItemCardContainerWithTitle.kt | 46 ++++ .../main/java/be/scri/ui/model/ScribeItem.kt | 4 +- .../java/be/scri/ui/screens/SettingsScreen.kt | 235 ++---------------- 5 files changed, 109 insertions(+), 234 deletions(-) create mode 100644 app/src/main/java/be/scri/ui/common/components/ItemCardContainerWithTitle.kt diff --git a/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt b/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt index aa92588c..ea814122 100644 --- a/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt +++ b/app/src/main/java/be/scri/ui/common/components/ClickableItemComp.kt @@ -25,9 +25,9 @@ import be.scri.R @Composable fun ClickableItemComp( title: String, - desc: String, onClick: () -> Unit, - modifier: Modifier = Modifier + modifier: Modifier = Modifier, + desc: String? = null ) { Column( modifier = modifier @@ -58,13 +58,16 @@ fun ClickableItemComp( contentDescription = "Right Arrow", ) } - Text( - text = desc, - fontSize = 12.sp, - color = Color.Gray, - style = MaterialTheme.typography.bodySmall, - modifier = Modifier.padding(top = 4.dp), - ) + + if(!desc.isNullOrEmpty()) { + Text( + text = desc, + fontSize = 12.sp, + color = Color.Gray, + style = MaterialTheme.typography.bodySmall, + modifier = Modifier.padding(top = 4.dp), + ) + } } } diff --git a/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt b/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt index cdbb15fd..bc24348e 100644 --- a/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt +++ b/app/src/main/java/be/scri/ui/common/components/ItemCardContainer.kt @@ -3,10 +3,12 @@ package be.scri.ui.common.components import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import be.scri.ui.model.ScribeItem @@ -15,6 +17,7 @@ import be.scri.ui.model.ScribeItemList @Composable fun ItemsCardContainer( cardItemsList: ScribeItemList, + isDivider: Boolean, modifier: Modifier = Modifier ) { Surface( @@ -30,18 +33,18 @@ fun ItemsCardContainer( when(item) { is ScribeItem.ClickableItem -> { ClickableItemComp( - item.title, - item.desc, - item.action + title = item.title, + desc = item.desc, + onClick = item.action ) } is ScribeItem.SwitchItem -> { SwitchableItemComp( - item.title, - item.desc, - item.state, - item.onToggle + title = item.title, + desc = item.desc, + isChecked = item.state, + onCheckedChange = item.onToggle ) } @@ -53,6 +56,21 @@ fun ItemsCardContainer( } } + + if( + isDivider + && + cardItemsList.items.indexOf(item) != cardItemsList.items.lastIndex + ) { + HorizontalDivider( + color = Color.Gray.copy(alpha = 0.25f), + thickness = 1.dp, + modifier = Modifier.padding( + vertical = 8.dp, + horizontal = 12.dp + ) + ) + } } } } @@ -71,5 +89,8 @@ private fun ItemsCardContainerPreview() { ) ) - ItemsCardContainer(cardItemsList) + ItemsCardContainer( + cardItemsList, + true + ) } diff --git a/app/src/main/java/be/scri/ui/common/components/ItemCardContainerWithTitle.kt b/app/src/main/java/be/scri/ui/common/components/ItemCardContainerWithTitle.kt new file mode 100644 index 00000000..48b09716 --- /dev/null +++ b/app/src/main/java/be/scri/ui/common/components/ItemCardContainerWithTitle.kt @@ -0,0 +1,46 @@ +package be.scri.ui.common.components + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.colorResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import be.scri.R +import be.scri.ui.model.ScribeItemList + +@Composable +fun ItemCardContainerWithTitle( + title: String, + cardItemsList: ScribeItemList, + modifier: Modifier = Modifier, + isDivider: Boolean = false +) { + Column( + modifier = modifier + ) { + Text( + text = title, + color = colorResource(R.color.app_text_color), + fontWeight = FontWeight.Bold, + fontSize = 18.sp, + modifier = Modifier.padding( + start = 16.dp, + top = 16.dp, + bottom = 10.dp, + ), + ) + + ItemsCardContainer( + cardItemsList = cardItemsList, + isDivider = isDivider, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 12.dp), + ) + } +} diff --git a/app/src/main/java/be/scri/ui/model/ScribeItem.kt b/app/src/main/java/be/scri/ui/model/ScribeItem.kt index 08c86856..8547a33d 100644 --- a/app/src/main/java/be/scri/ui/model/ScribeItem.kt +++ b/app/src/main/java/be/scri/ui/model/ScribeItem.kt @@ -2,12 +2,12 @@ package be.scri.ui.model sealed class ScribeItem( open val title: String, - open val desc: String, + open val desc: String?, ) { data class ClickableItem( override val title: String, - override val desc: String, + override val desc: String? = null, val action: () -> Unit ) : ScribeItem(title, desc) diff --git a/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt b/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt index 6e9b018f..df2e9d4b 100644 --- a/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt +++ b/app/src/main/java/be/scri/ui/screens/SettingsScreen.kt @@ -48,6 +48,7 @@ import androidx.lifecycle.compose.LocalLifecycleOwner import be.scri.R import be.scri.fragments.LanguageSettingsFragment import be.scri.helpers.PreferencesHelper +import be.scri.ui.common.components.ItemCardContainerWithTitle import be.scri.ui.common.components.ItemsCardContainer import be.scri.ui.model.ScribeItem import be.scri.ui.model.ScribeItemList @@ -130,76 +131,40 @@ fun SettingsScreen( ) ) + val installedKeyboardList = getKeyboardLanguages(context).map { language -> + ScribeItem.ClickableItem( + title = getLocalizedLanguageName(context, language), + desc = null, + action = { + context.navigateToFragment(language) + }, + ) + } LazyColumn( modifier = modifier .background(MaterialTheme.colorScheme.background) .fillMaxWidth() - .padding(bottom = 40.dp), + .padding(bottom = 60.dp), ) { item { - Text( - text = stringResource(R.string.app_settings_menu_title), - color = colorResource(R.color.app_text_color), - fontWeight = FontWeight.Bold, - fontSize = 18.sp, - modifier = - Modifier.padding( - start = 16.dp, - top = 16.dp, - bottom = 8.dp, - ), - ) - } + ItemCardContainerWithTitle( + title = stringResource(R.string.app_settings_menu_title), + cardItemsList = ScribeItemList(appSettingsItemList), - item { - ItemsCardContainer( - cardItemsList = ScribeItemList( - items = appSettingsItemList - ), - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 12.dp), ) } item { if (isKeyboardInstalled) { - Text( - text = stringResource(id = R.string.app_settings_keyboard_title), - modifier = - Modifier - .fillMaxWidth() - .padding( - top = 8.dp, - start = 8.dp, - end = 8.dp, - bottom = 8.dp, - ), - color = MaterialTheme.colorScheme.onSurface, - fontSize = 18.sp, - fontWeight = FontWeight.Bold, + ItemCardContainerWithTitle( + title = stringResource(R.string.app_settings_keyboard_title), + cardItemsList = ScribeItemList(installedKeyboardList), + isDivider = true, + modifier = Modifier + .padding(top = 8.dp) ) - - Surface( - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 12.dp), - shape = RoundedCornerShape(8.dp), - color = MaterialTheme.colorScheme.surface, - ) { - Column { - languages.forEachIndexed { index, language -> - LanguageItem( - language = getLocalizedLanguageName(context, language), - onClick = { context.navigateToFragment(language) }, - isLastElement = index == languages.size - 1, - ) - } - } - } } else { InstallKeyboardButton(onInstallKeyboard) } @@ -232,166 +197,6 @@ private fun InstallKeyboardButton(onClick: () -> Unit) { } } -@Composable -private fun SettingItem( - title: String, - description: String, - onClick: () -> Unit, -) { - Column( - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 12.dp, vertical = 10.dp) - .clip(RoundedCornerShape(12.dp)) - .clickable(onClick = onClick), - ) { - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - text = title, - modifier = Modifier.weight(1f), - fontSize = 16.sp, - color = colorResource(R.color.app_text_color), - style = MaterialTheme.typography.bodyMedium, - ) - Image( - painter = painterResource(R.drawable.right_arrow), - modifier = - Modifier - .padding(start = 6.dp) - .size(14.dp), - contentDescription = "Right Arrow", - ) - } - Text( - text = description, - fontSize = 12.sp, - color = Color.Gray, - style = MaterialTheme.typography.bodySmall, - modifier = Modifier.padding(top = 4.dp), - ) - } -} - -@Composable -private fun SwitchSettingItem( - title: String, - description: String, - isChecked: Boolean, - onCheckedChange: (Boolean) -> Unit, -) { - val checkedThumbColor = colorResource(R.color.switch_thumb_selector_color_true) - val uncheckedThumbColor = colorResource(R.color.switch_thumb_selector_color_false) - val checkedTrackColor = colorResource(R.color.switch_selector_color) - val uncheckedTrackColor = colorResource(R.color.switch_selector_color_false) - - Column( - modifier = Modifier.padding(horizontal = 12.dp, vertical = 10.dp), - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - text = title, - modifier = Modifier.weight(1f), - fontSize = 16.sp, - color = colorResource(R.color.app_text_color), - style = MaterialTheme.typography.bodyMedium, - ) - Switch( - interactionSource = null, - checked = isChecked, - onCheckedChange = onCheckedChange, - modifier = - Modifier - .width(51.dp) - .height(31.dp), - thumbContent = { - Box( - modifier = - Modifier - .size(27.dp) - .background( - if (isChecked) { - colorResource(R.color.switch_thumb_selector_color_true) - } else { - colorResource(R.color.switch_thumb_selector_color_false) - }, - shape = CircleShape, - ), - ) - }, - colors = - SwitchDefaults.colors( - checkedThumbColor = checkedThumbColor, - uncheckedThumbColor = uncheckedThumbColor, - checkedTrackColor = checkedTrackColor, - uncheckedTrackColor = uncheckedTrackColor, - uncheckedBorderColor = Color.Transparent, - ), - ) - } - Text( - text = description, - fontSize = 12.sp, - color = Color.Gray, - style = MaterialTheme.typography.bodySmall, - modifier = Modifier.padding(top = 4.dp), - ) - } -} - -@Composable -private fun LanguageItem( - language: String, - onClick: (String) -> Unit, - isLastElement: Boolean = false, -) { - Column( - modifier = - Modifier - .fillMaxWidth() - .clickable(onClick = { onClick(language) }) - .padding(bottom = 15.dp), - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.padding(top = 10.dp, start = 10.dp, end = 10.dp), - ) { - Text( - text = language, - modifier = Modifier.weight(1f), - fontSize = 16.sp, - color = colorResource(R.color.app_text_color), - style = MaterialTheme.typography.bodyMedium, - ) - - Image( - painter = painterResource(R.drawable.right_arrow), - modifier = - Modifier - .padding(start = 8.dp) - .size(16.dp), - contentDescription = "Right Arrow", - ) - } - if (!isLastElement) { - Spacer(modifier = Modifier.height(8.dp)) - HorizontalDivider( - color = Color.Gray.copy(alpha = 0.2f), - thickness = 1.dp, - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 10.dp) - .padding(top = 8.dp), - ) - } - } -} private fun getLocalizedLanguageName( context: Context, From 04ac912319cd4cede4d2d8170e64dc1ce9547a5d Mon Sep 17 00:00:00 2001 From: Saifuddin Date: Fri, 29 Nov 2024 13:54:56 +0530 Subject: [PATCH 3/7] LanguageSettingsScreeen implementation --- .../fragments/LanguageSettingsFragment.kt | 46 ++-- .../ui/common/components/ItemCardContainer.kt | 4 +- .../components/ItemCardContainerWithTitle.kt | 2 +- .../scri/ui/{model => models}/ScribeItem.kt | 2 +- .../ui/{model => models}/ScribeItemList.kt | 2 +- .../scri/ui/screens/LanguageSettingsScreen.kt | 219 ++++++++++++++++++ .../java/be/scri/ui/screens/SettingsScreen.kt | 23 +- 7 files changed, 249 insertions(+), 49 deletions(-) rename app/src/main/java/be/scri/ui/{model => models}/ScribeItem.kt (97%) rename app/src/main/java/be/scri/ui/{model => models}/ScribeItemList.kt (81%) diff --git a/app/src/main/java/be/scri/fragments/LanguageSettingsFragment.kt b/app/src/main/java/be/scri/fragments/LanguageSettingsFragment.kt index d2c427f2..4deddeac 100644 --- a/app/src/main/java/be/scri/fragments/LanguageSettingsFragment.kt +++ b/app/src/main/java/be/scri/fragments/LanguageSettingsFragment.kt @@ -23,29 +23,29 @@ class LanguageSettingsFragment : Fragment() { private var _binding: FragmentLanguageSettingsBinding? = null val binding get() = _binding!! - override fun onCreate(savedInstanceState: Bundle?) { - super.onCreate(savedInstanceState) - val viewpager = requireActivity().findViewById(R.id.view_pager) - val mainActivity = requireActivity() as MainActivity - mainActivity.setActionBarButtonFunction( - ACTION_BAR_BUTTON_INDEX, - R.string.app_settings_title, - ) - val callback = - requireActivity().onBackPressedDispatcher.addCallback(this) { - viewpager.setCurrentItem(ACTION_BAR_BUTTON_INDEX, true) - (requireActivity() as MainActivity).supportActionBar?.setDisplayHomeAsUpEnabled(false) - (requireActivity() as MainActivity).setActionBarVisibility(false) - } - (requireActivity() as MainActivity).setActionBarVisibility(true) - (requireActivity() as MainActivity) - .supportActionBar - ?.customView - ?.findViewById