DROID-1013 | Settings screen redesigned (#2993)

DROID-1013 Settings | Design | Settings screen redesigned

app/src/main/java/com/anytypeio/anytype/ui/settings/MainSettingFragment.kt

@@ -8,6 +8,7 @@ import android.view.ViewGroup
 import androidx.compose.material.MaterialTheme
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.unit.dp
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
@@ -21,6 +22,8 @@ import com.anytypeio.anytype.presentation.settings.MainSettingsViewModel.Command
 import com.anytypeio.anytype.presentation.settings.MainSettingsViewModel.Event
 import com.anytypeio.anytype.ui.settings.system.SettingsActivity
 import com.anytypeio.anytype.ui_settings.main.MainSettingScreen
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -78,6 +81,15 @@ class MainSettingFragment : BaseBottomSheetComposeFragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+
+        val offsetFromTop = PADDING_TOP
+        (dialog as? BottomSheetDialog)?.behavior?.apply {
+            isFitToContents = false
+            expandedOffset = offsetFromTop
+            state = BottomSheetBehavior.STATE_EXPANDED
+            skipCollapsed = true
+        }
+
         viewLifecycleOwner.lifecycleScope.launch {
             viewLifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
                 vm.commands.collect { command -> processCommands(command) }
@@ -112,4 +124,6 @@ class MainSettingFragment : BaseBottomSheetComposeFragment() {
     override fun releaseDependencies() {
         componentManager().mainSettingsComponent.release()
     }
-}
+}
+
+private const val PADDING_TOP = 54

core-ui/src/main/java/com/anytypeio/anytype/core_ui/foundation/Foundation.kt

@@ -109,6 +109,7 @@ fun Option(
     }
 }
 
+
 @Composable
 fun Arrow() {
     Image(

ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/main/MainSettingScreen.kt

@@ -2,6 +2,8 @@ package com.anytypeio.anytype.ui_settings.main
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -23,44 +25,80 @@ fun MainSettingScreen(
     onAppearanceClicked: () -> Unit,
     showDebugMenu: Boolean
 ) {
-    Column {
-        Box(
-            modifier = Modifier.padding(vertical = 6.dp).align(Alignment.CenterHorizontally)
-        ) {
-            Dragger()
-        }
-        Option(
-            image = R.drawable.ic_account_and_data,
-            text = stringResource(R.string.account_and_data),
-            onClick = onAccountAndDataClicked
-        )
+    Column(Modifier.fillMaxSize()) {
+        Header(Modifier.align(Alignment.CenterHorizontally))
+        Spacer(modifier = Modifier.height(10.dp))
         Divider()
-        Option(
-            image = R.drawable.ic_personalization,
-            text = stringResource(R.string.personalization),
-            onClick = onPersonalizationClicked
+        Spacer(modifier = Modifier.height(26.dp))
+        Settings(
+            onAccountAndDataClicked = onAccountAndDataClicked,
+            onPersonalizationClicked = onPersonalizationClicked,
+            onAppearanceClicked = onAppearanceClicked,
+            onAboutAppClicked = onAboutAppClicked,
+            showDebugMenu = showDebugMenu,
+            onDebugClicked = onDebugClicked
         )
-        Divider()
-        Option(
-            image = R.drawable.ic_appearance,
-            text = stringResource(R.string.appearance),
-            onClick = onAppearanceClicked
-        )
-        Divider()
-        Option(
-            image = R.drawable.ic_about,
-            text = stringResource(R.string.about),
-            onClick = onAboutAppClicked
-        )
-        Divider()
-        if (showDebugMenu) {
-            Option(
-                image = R.drawable.ic_debug,
-                text = stringResource(R.string.debug),
-                onClick = onDebugClicked
-            )
-            Divider()
-        }
         Box(modifier = Modifier.height(16.dp))
     }
+}
+
+@Composable
+private fun Settings(
+    onAccountAndDataClicked: () -> Unit,
+    onPersonalizationClicked: () -> Unit,
+    onAppearanceClicked: () -> Unit,
+    onAboutAppClicked: () -> Unit,
+    showDebugMenu: Boolean,
+    onDebugClicked: () -> Unit
+) {
+    Section(
+        modifier = Modifier.padding(start = 20.dp, bottom = 4.dp),
+        title = "Settings"
+    )
+    Option(
+        image = R.drawable.ic_account_and_data,
+        text = stringResource(R.string.account_and_data),
+        onClick = onAccountAndDataClicked
+    )
+    Divider(paddingStart = 60.dp)
+    Option(
+        image = R.drawable.ic_personalization,
+        text = stringResource(R.string.personalization),
+        onClick = onPersonalizationClicked
+    )
+    Divider(paddingStart = 60.dp)
+    Option(
+        image = R.drawable.ic_appearance,
+        text = stringResource(R.string.appearance),
+        onClick = onAppearanceClicked
+    )
+    Divider(paddingStart = 60.dp)
+    Option(
+        image = R.drawable.ic_about,
+        text = stringResource(R.string.about),
+        onClick = onAboutAppClicked
+    )
+    Divider(paddingStart = 60.dp)
+    if (showDebugMenu) {
+        Option(
+            image = R.drawable.ic_debug,
+            text = stringResource(R.string.debug),
+            onClick = onDebugClicked
+        )
+        Divider(paddingStart = 60.dp)
+    }
+}
+
+@Composable
+private fun Header(modifier: Modifier = Modifier) {
+    Box(modifier = modifier.padding(vertical = 6.dp)) {
+        Dragger()
+    }
+    Box(modifier = modifier.padding(top = 12.dp, bottom = 28.dp)) {
+        SpaceNameBlock()
+    }
+    Box(modifier = modifier) {
+        SpaceImageBlock(Modifier)
+    }
+    NameBlock(name = "Personal")
 }

ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/main/Views.kt

@@ -0,0 +1,61 @@
+package com.anytypeio.anytype.ui_settings.main
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.anytypeio.anytype.ui_settings.R
+
+@Composable
+fun Section(modifier: Modifier = Modifier, title: String) {
+    Text(
+        modifier = modifier,
+        text = title,
+        color = colorResource(id = R.color.text_secondary),
+        fontSize = 13.sp
+    )
+}
+
+@Composable
+fun NameBlock(modifier: Modifier = Modifier, name: String) {
+    Column(modifier = modifier.padding(start = 20.dp)) {
+        Text(
+            text = "Name",
+            color = colorResource(id = R.color.text_secondary),
+            fontSize = 13.sp
+        )
+        Text(
+            text = name,
+            style = MaterialTheme.typography.h2,
+        )
+    }
+}
+
+@Composable
+fun SpaceNameBlock(modifier: Modifier = Modifier) {
+    Text(
+        text = "Space",
+        style = MaterialTheme.typography.h3,
+    )
+}
+
+@Composable
+fun SpaceImageBlock(modifier: Modifier = Modifier) {
+    Image(
+        modifier = modifier
+            .height(96.dp)
+            .width(96.dp)
+            .padding(bottom = 21.dp),
+        painter = painterResource(id = R.drawable.ic_home_widget_space),
+        contentDescription = "space_image"
+    )
+}