From 4f265b23f8f0950da14c12bffcc37eae484b58c8 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 2 Dec 2023 17:03:25 +0100
Subject: [PATCH] feat(ui): Improve settings UI
---
.../SettingsScreen/Tiles/SectionTitle.kt | 53 +++++++++++++++++++
.../alibi/ui/components/atoms/GlobalSwitch.kt | 25 +++++----
.../alibi/ui/screens/SettingsScreen.kt | 24 +++++----
app/src/main/res/values/strings.xml | 2 +
4 files changed, 84 insertions(+), 20 deletions(-)
create mode 100644 app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SectionTitle.kt
diff --git a/app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SectionTitle.kt b/app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SectionTitle.kt
new file mode 100644
index 0000000..7880076
--- /dev/null
+++ b/app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/Tiles/SectionTitle.kt
@@ -0,0 +1,53 @@
+package app.myzel394.alibi.ui.components.SettingsScreen.Tiles
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Divider
+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.unit.dp
+
+@Composable
+fun DividerTitle(
+ modifier: Modifier = Modifier,
+ title: String,
+ description: String,
+) {
+ Column(
+ modifier = modifier,
+ horizontalAlignment = Alignment.CenterHorizontally,
+ verticalArrangement = Arrangement.spacedBy(8.dp),
+ ) {
+ Row(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.spacedBy(8.dp),
+ verticalAlignment = Alignment.CenterVertically,
+ ) {
+ Divider(
+ modifier = Modifier
+ .weight(1f)
+ .align(Alignment.CenterVertically),
+ )
+ Text(
+ title,
+ style = MaterialTheme.typography.headlineSmall,
+ color = MaterialTheme.colorScheme.onSurface,
+ )
+ Divider(
+ modifier = Modifier
+ .weight(1f)
+ .align(Alignment.CenterVertically),
+ )
+ }
+ Text(
+ description,
+ style = MaterialTheme.typography.bodySmall,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
+ )
+ }
+}
\ No newline at end of file
diff --git a/app/src/main/java/app/myzel394/alibi/ui/components/atoms/GlobalSwitch.kt b/app/src/main/java/app/myzel394/alibi/ui/components/atoms/GlobalSwitch.kt
index a4ba923..620090e 100644
--- a/app/src/main/java/app/myzel394/alibi/ui/components/atoms/GlobalSwitch.kt
+++ b/app/src/main/java/app/myzel394/alibi/ui/components/atoms/GlobalSwitch.kt
@@ -1,5 +1,6 @@
package app.myzel394.alibi.ui.components.atoms
+import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
@@ -10,6 +11,7 @@ import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@@ -24,12 +26,21 @@ fun GlobalSwitch(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
) {
+ val backgroundColor by animateColorAsState(
+ targetValue = if (checked) MaterialTheme.colorScheme.secondaryContainer else MaterialTheme.colorScheme.secondaryContainer.copy(
+ alpha = 0.2f
+ ),
+ label = "backgroundColor"
+ )
+
Row(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.clip(MaterialTheme.shapes.extraLarge)
- .background(MaterialTheme.colorScheme.secondary)
+ .background(
+ backgroundColor
+ )
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
@@ -38,18 +49,10 @@ fun GlobalSwitch(
label,
fontSize = 18.sp,
fontWeight = FontWeight.W500,
- color = MaterialTheme.colorScheme.onSecondary,
+ color = MaterialTheme.colorScheme.onSurface,
)
Switch(
- colors = SwitchDefaults.colors(
- uncheckedTrackColor = MaterialTheme.colorScheme.background,
- checkedTrackColor = MaterialTheme.colorScheme.surfaceVariant,
- checkedThumbColor = MaterialTheme.colorScheme.secondary,
- uncheckedBorderColor = Color.Transparent,
- checkedBorderColor = Color.Transparent,
- disabledCheckedBorderColor = Color.Transparent,
- disabledUncheckedBorderColor = Color.Transparent,
- ),
+ colors = SwitchDefaults.colors(),
checked = checked,
onCheckedChange = {
onCheckedChange(it)
diff --git a/app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt b/app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt
index 62a4ed5..400c542 100644
--- a/app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt
+++ b/app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt
@@ -1,11 +1,13 @@
package app.myzel394.alibi.ui.screens
import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
@@ -131,6 +133,11 @@ fun SettingsScreen(
if (!SUPPORTS_DARK_MODE_NATIVELY) {
ThemeSelector()
}
+ MaxDurationTile(settings = settings)
+ IntervalDurationTile(settings = settings)
+ InAppLanguagePicker()
+ DeleteRecordingsImmediatelyTile(settings = settings)
+ CustomNotificationTile(navController = navController, settings = settings)
GlobalSwitch(
label = stringResource(R.string.ui_settings_advancedSettings_label),
checked = settings.showAdvancedSettings,
@@ -142,24 +149,22 @@ fun SettingsScreen(
}
}
)
- MaxDurationTile(settings = settings)
- IntervalDurationTile(settings = settings)
- InAppLanguagePicker()
- DeleteRecordingsImmediatelyTile(settings = settings)
- CustomNotificationTile(navController = navController, settings = settings)
- AboutTile(navController = navController)
AnimatedVisibility(visible = settings.showAdvancedSettings) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(32.dp),
) {
Column {
- Divider(
+ SaveFolderTile(settings = settings)
+
+ DividerTitle(
modifier = Modifier
.fillMaxWidth()
- .padding(horizontal = 16.dp, vertical = 32.dp)
+ .padding(16.dp),
+ title = stringResource(R.string.ui_settings_sections_audio_title),
+ description = stringResource(R.string.ui_settings_sections_audio_description),
)
- SaveFolderTile(settings = settings)
+
AudioRecorderShowAllMicrophonesTile(settings = settings)
AudioRecorderBitrateTile(settings = settings)
AudioRecorderSamplingRateTile(settings = settings)
@@ -176,6 +181,7 @@ fun SettingsScreen(
ImportExport(snackbarHostState = snackbarHostState)
}
}
+ AboutTile(navController = navController)
}
}
}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4062115..d67172c 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -120,4 +120,6 @@
Use private, encrypted storage
Recording has been saved successfully!
Open
+ Audio Recording
+ Only applies to audio recordings
\ No newline at end of file