From 4dd9fe86aa97bde77d41625affd7075e8b621fea Mon Sep 17 00:00:00 2001
From: jonasgaudian <43753916+jonasgaudian@users.noreply.github.com>
Date: Tue, 17 Feb 2026 11:27:23 +0100
Subject: [PATCH] refactor `More` menu and replace `AppDropDownMenu` with
`ModalBottomSheet` in `LibraryScreen
---
.../view/composable/AppDropdownMenu.kt | 49 ++++++++++++++++
.../view/composable/BottomNavigationBar.kt | 43 ++++++++++----
.../translator/view/library/LibraryScreen.kt | 56 +++++++++++--------
.../view/settings/MainSettingsScreen.kt | 2 +-
app/src/main/res/values-de-rDE/strings.xml | 1 -
5 files changed, 114 insertions(+), 37 deletions(-)
diff --git a/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt b/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt
index 90500c0..da0eead 100644
--- a/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt
@@ -25,6 +25,7 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DropdownMenu
@@ -550,7 +551,55 @@ fun AppDropdownMenu(
// =========================================
// LEGACY COMPONENTS (UPDATED TO USE UNIFIED STYLES)
// =========================================
+@Composable
+fun BottomSheetMenuItem(
+ icon: ImageVector,
+ title: String,
+ subtitle: String,
+ onClick: () -> Unit
+) {
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .clickable { onClick() }
+ .padding(horizontal = 24.dp, vertical = 16.dp),
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ // Circular Icon Background
+ Surface(
+ shape = CircleShape,
+ color = MaterialTheme.colorScheme.surfaceVariant,
+ modifier = Modifier.size(52.dp)
+ ) {
+ Box(contentAlignment = Alignment.Center) {
+ Icon(
+ imageVector = icon,
+ contentDescription = null,
+ tint = MaterialTheme.colorScheme.onSurfaceVariant,
+ modifier = Modifier.size(28.dp)
+ )
+ }
+ }
+ Spacer(modifier = Modifier.width(16.dp))
+
+ // Title and Subtitle Column
+ Column(modifier = Modifier.weight(1f)) {
+ Text(
+ text = title,
+ style = MaterialTheme.typography.titleMedium,
+ fontWeight = FontWeight.Bold,
+ color = MaterialTheme.colorScheme.onSurface
+ )
+ Spacer(modifier = Modifier.height(2.dp))
+ Text(
+ text = subtitle,
+ style = MaterialTheme.typography.bodyMedium,
+ color = MaterialTheme.colorScheme.onSurfaceVariant
+ )
+ }
+ }
+}
@Composable
fun LargeDropdownMenuItem(
text: String,
diff --git a/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt b/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt
index f634357..2a4b5ae 100644
--- a/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt
@@ -28,13 +28,13 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
@@ -326,10 +326,11 @@ private fun MoreBottomSheetContent(
Text(
text = stringResource(R.string.label_more),
style = MaterialTheme.typography.titleLarge,
+ fontWeight = FontWeight.Bold, // Added bold to match the new style
modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
)
- HorizontalDivider()
+ // Removed HorizontalDivider() for a cleaner look
moreItems.forEach { screen ->
MoreMenuItem(
@@ -340,31 +341,49 @@ private fun MoreBottomSheetContent(
}
}
+
+
@Composable
-private fun MoreMenuItem(
+fun MoreMenuItem(
screen: Screen,
onClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
- .clickable(onClick = onClick)
+ .clickable { onClick() }
.padding(horizontal = 24.dp, vertical = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
- Icon(
- imageVector = screen.selectedIcon,
- contentDescription = null,
- tint = MaterialTheme.colorScheme.primary
- )
+ // Circular Icon Background
+ Surface(
+ shape = CircleShape,
+ color = MaterialTheme.colorScheme.surfaceVariant,
+ modifier = Modifier.size(52.dp)
+ ) {
+ Box(contentAlignment = Alignment.Center) {
+ // Adjust this depending on whether your Screen uses ImageVector or Drawable Res
+ Icon(
+ imageVector = screen.selectedIcon,
+ contentDescription = null,
+ tint = MaterialTheme.colorScheme.onSurfaceVariant,
+ modifier = Modifier.size(28.dp)
+ )
+ }
+ }
+
Spacer(modifier = Modifier.width(16.dp))
+
+ // Title
Text(
- text = stringResource(screen.title),
- style = MaterialTheme.typography.bodyLarge
+ text = stringResource(id = screen.title), // Adjust to your actual string property
+ style = MaterialTheme.typography.titleMedium,
+ fontWeight = FontWeight.Bold,
+ color = MaterialTheme.colorScheme.onSurface,
+ modifier = Modifier.weight(1f)
)
}
}
-
@ThemePreviews
@Composable
fun BottomNavigationBarPreview() {
diff --git a/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt b/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt
index ba6166e..1dc516f 100644
--- a/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt
@@ -26,6 +26,9 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.Folder
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.Button
import androidx.compose.material3.FilterChip
@@ -60,10 +63,9 @@ import androidx.navigation.NavHostController
import eu.gaudian.translator.R
import eu.gaudian.translator.model.VocabularyStage
import eu.gaudian.translator.utils.findActivity
-import eu.gaudian.translator.view.composable.AppDropDownMenu
import eu.gaudian.translator.view.composable.AppIcons
import eu.gaudian.translator.view.composable.AppSwitch
-import eu.gaudian.translator.view.composable.LargeDropdownMenuItem
+import eu.gaudian.translator.view.composable.BottomSheetMenuItem
import eu.gaudian.translator.view.composable.MultipleLanguageDropdown
import eu.gaudian.translator.view.dialogs.AddCategoryDialog
import eu.gaudian.translator.view.dialogs.CategorySelectionDialog
@@ -329,28 +331,36 @@ fun LibraryScreen(
}
if (showAddMenu) {
- AppDropDownMenu(
- expanded = showAddMenu,
- onDismissRequest = { showAddMenu = false }
+ ModalBottomSheet(
+ onDismissRequest = { showAddMenu = false },
+ sheetState = sheetState,
+ containerColor = MaterialTheme.colorScheme.surface,
) {
- LargeDropdownMenuItem(
- text = stringResource(R.string.label_add_vocabulary),
- selected = false,
- enabled = true,
- onClick = {
- showAddMenu = false
- navController.navigate("new_word")
- }
- )
- LargeDropdownMenuItem(
- text = stringResource(R.string.label_add_category),
- selected = false,
- enabled = true,
- onClick = {
- showAddMenu = false
- showAddCategoryDialog = true
- }
- )
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(bottom = 32.dp) // Extra padding for system navigation bar
+ ) {
+ BottomSheetMenuItem(
+ icon = Icons.Rounded.Add, // Or any custom vector icon you prefer
+ title = stringResource(R.string.label_add_vocabulary),
+ subtitle = "Füge ein neues Wort zu deiner Liste hinzu", // Suggest adding this to strings.xml
+ onClick = {
+ showAddMenu = false
+ navController.navigate("new_word")
+ }
+ )
+
+ BottomSheetMenuItem(
+ icon = Icons.Rounded.Folder,
+ title = stringResource(R.string.label_add_category),
+ subtitle = "Organisiere deine Vokabeln in Gruppen", // Suggest adding this to strings.xml
+ onClick = {
+ showAddMenu = false
+ showAddCategoryDialog = true
+ }
+ )
+ }
}
}
diff --git a/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt b/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
index 989f406..7c01da1 100644
--- a/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
@@ -105,7 +105,7 @@ fun MainSettingsScreen(
}
item {
AppCard(
- modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
+ modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
) {
Column {
settings.forEachIndexed { index, setting ->
diff --git a/app/src/main/res/values-de-rDE/strings.xml b/app/src/main/res/values-de-rDE/strings.xml
index 8966f6a..1882d06 100644
--- a/app/src/main/res/values-de-rDE/strings.xml
+++ b/app/src/main/res/values-de-rDE/strings.xml
@@ -631,7 +631,6 @@
Keine
Keine Daten verfügbar
Flexionen
- Weniger
Übersetzungen
Beispiele anzeigen
Silbentrennung