DROID-3375 New settings | Fix| UX fixes and improvements (#2200)

2025-06-08 05:47:05 +09:00 · 2025-03-27 20:05:07 +01:00 · 2025-03-27 20:05:07 +01:00 · 8abc29f526
commit 8abc29f526
parent 5a7a58e0f9
13 changed files with 470 additions and 96 deletions
--- a/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/Icon.kt
+++ b/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/Icon.kt
@ -75,18 +75,20 @@ fun NewSpaceIcon(
                }
            }
        )
-        Text(
-            modifier = Modifier
-                .padding(top = 8.dp)
-                .noRippleThrottledClickable {
-                    if (isEditEnabled) {
-                        isSpaceIconMenuExpanded.value = !isSpaceIconMenuExpanded.value
-                    }
-                },
-            text = stringResource(R.string.space_settings_icon_title),
-            style = Caption1Medium,
-            color = colorResource(R.color.text_secondary)
-        )
+        if (isEditEnabled) {
+            Text(
+                modifier = Modifier
+                    .padding(top = 8.dp)
+                    .noRippleThrottledClickable {
+                        if (isEditEnabled) {
+                            isSpaceIconMenuExpanded.value = !isSpaceIconMenuExpanded.value
+                        }
+                    },
+                text = stringResource(R.string.space_settings_icon_title),
+                style = Caption1Medium,
+                color = colorResource(R.color.text_secondary)
+            )
+        }
        MaterialTheme(
            shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(10.dp))
        ) {
--- a/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/Items.kt
+++ b/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/Items.kt
@ -30,6 +30,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
@ -37,9 +39,11 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@ -62,6 +66,7 @@ import com.anytypeio.anytype.presentation.spaces.UiEvent
 import com.anytypeio.anytype.presentation.spaces.UiSpaceSettingsItem
 import com.anytypeio.anytype.ui_settings.R
 import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.debounce
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.dropWhile
@ -243,6 +248,7 @@ fun RemoteStorageItem(
    BaseButton(
        modifier = modifier,
        title = stringResource(id = R.string.remote_storage),
+        icon = R.drawable.ic_remote_storage_24
    )
 }

@ -444,12 +450,23 @@ fun NewSettingsTextField(
    placeholderText: String,
    isEditEnabled: Boolean
 ) {
+
+    val focusRequester = remember { FocusRequester() }
+
+    val textFieldValue = TextFieldValue(
+        text = value,
+        selection = TextRange(value.length)
+    )
    BasicTextField(
-        value = value,
+        value = textFieldValue,
        modifier = Modifier
            .padding(top = 4.dp)
-            .fillMaxWidth(),
-        onValueChange = onValueChange,
+            .fillMaxWidth()
+            .focusRequester(focusRequester)
+        ,
+        onValueChange = { update ->
+            onValueChange(update.text)
+        },
        enabled = isEditEnabled,
        readOnly = !isEditEnabled,
        textStyle = textStyle,
@ -495,6 +512,12 @@ fun NewSettingsTextField(
            )
        }
    )
+
+    LaunchedEffect(Unit) {
+        // Focusing with delay, awaiting the expansion of the bottom sheet
+        delay(300)
+        focusRequester.requestFocus()
+    }
 }

@Composable
--- a/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/NewSettings.kt
+++ b/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/NewSettings.kt
@ -22,6 +22,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@ -34,6 +35,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.anytypeio.anytype.core_ui.foundation.Dragger
 import com.anytypeio.anytype.core_ui.foundation.noRippleClickable
@ -229,7 +231,21 @@ fun NewSpaceSettingsScreen(
                                )
                            }
                        }
-
+                        is UiSpaceSettingsItem.InviteMembers -> {
+                            item {
+                                BaseButton(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .animateItem()
+                                        .clip(RoundedCornerShape(16.dp))
+                                        .clickable {
+                                            uiEvent(UiEvent.OnInviteClicked)
+                                        },
+                                    title = stringResource(id = R.string.space_settings_invite_members),
+                                    icon = R.drawable.ic_space_settings_invite_members
+                                )
+                            }
+                        }
                        UiSpaceSettingsItem.ObjectTypes -> {
                            item {
                                ObjectTypesItem(
@ -335,6 +351,8 @@ fun NewSpaceSettingsScreen(

    if (showEditDescription) {
        ModalBottomSheet(
+            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+            modifier = Modifier.padding(top = 48.dp),
            containerColor = colorResource(R.color.background_secondary),
            onDismissRequest = {
                showEditDescription = false
@ -357,6 +375,8 @@ fun NewSpaceSettingsScreen(
    }
    if (showEditTitle) {
        ModalBottomSheet(
+            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+            modifier = Modifier.padding(top = 48.dp),
            containerColor = colorResource(R.color.background_secondary),
            onDismissRequest = {
                showEditTitle = false
--- a/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/ViewerSpaceSettings.kt
+++ b/feature-ui-settings/src/main/java/com/anytypeio/anytype/ui_settings/space/new_settings/ViewerSpaceSettings.kt
@ -0,0 +1,202 @@
+package com.anytypeio.anytype.ui_settings.space.new_settings
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.DropdownMenu
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import com.anytypeio.anytype.core_models.SystemColor
+import com.anytypeio.anytype.core_models.primitives.SpaceId
+import com.anytypeio.anytype.core_ui.common.DefaultPreviews
+import com.anytypeio.anytype.core_ui.foundation.Dragger
+import com.anytypeio.anytype.core_ui.views.BodyCalloutRegular
+import com.anytypeio.anytype.core_ui.views.HeadlineHeading
+import com.anytypeio.anytype.presentation.spaces.SpaceIconView
+import com.anytypeio.anytype.presentation.spaces.SpaceTechInfo
+import com.anytypeio.anytype.presentation.spaces.UiEvent
+import com.anytypeio.anytype.ui_settings.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ViewerSpaceSettings(
+    title: String,
+    description: String,
+    icon: SpaceIconView,
+    info: SpaceTechInfo,
+    uiEvent: (UiEvent) -> Unit,
+) {
+
+    val isTheeDotsMenuExpanded = remember { mutableStateOf(true) }
+    var showTechInfo by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Dragger(
+            modifier = Modifier
+                .align(Alignment.CenterHorizontally)
+                .padding(vertical = 6.dp)
+        )
+        Box(
+            modifier = Modifier
+                .height(48.dp)
+                .width(56.dp)
+                .align(Alignment.End)
+                .clickable {
+                    isTheeDotsMenuExpanded.value = true
+                }
+        ) {
+            Image(
+                modifier = Modifier.align(Alignment.Center),
+                painter = painterResource(R.drawable.ic_more_32),
+                contentDescription = "Three dots button"
+            )
+        }
+        NewSpaceIcon(
+            modifier = Modifier.fillMaxWidth(),
+            icon = icon,
+            isEditEnabled = false,
+            uiEvent = uiEvent
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = title.ifEmpty { stringResource(R.string.untitled) },
+            style = HeadlineHeading,
+            color = colorResource(R.color.text_primary),
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center
+        )
+        if (description.isNotEmpty()) {
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = description,
+                modifier = Modifier.padding(horizontal = 16.dp).fillMaxWidth(),
+                style = BodyCalloutRegular,
+                color = colorResource(R.color.text_primary),
+            )
+        }
+        Spacer(modifier = Modifier.height(12.dp))
+        MultiplayerButtons(
+            modifier = Modifier
+                .padding(horizontal = 16.dp),
+            uiEvent = uiEvent
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+    }
+
+    MaterialTheme(
+        shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(10.dp))
+    ) {
+        DropdownMenu(
+            modifier = Modifier
+                .background(
+                    shape = RoundedCornerShape(10.dp),
+                    color = colorResource(id = R.color.background_secondary)
+                ),
+            expanded = isTheeDotsMenuExpanded.value,
+            offset = DpOffset(x = 0.dp, y = 6.dp),
+            onDismissRequest = {
+                isTheeDotsMenuExpanded.value = false
+            }
+        ) {
+            DropdownMenuItem(
+                onClick = {
+                    uiEvent(UiEvent.IconMenu.OnRemoveIconClicked)
+                    isTheeDotsMenuExpanded.value = false
+                },
+            ) {
+                Text(
+                    text = stringResource(R.string.tech_info),
+                    style = BodyCalloutRegular,
+                    color = colorResource(id = R.color.text_primary)
+                )
+            }
+            DropdownMenuItem(
+                onClick = {
+                    isTheeDotsMenuExpanded.value = false
+                    uiEvent(UiEvent.OnLeaveSpaceClicked)
+                },
+            ) {
+                Text(
+                    text = stringResource(R.string.multiplayer_leave_space),
+                    style = BodyCalloutRegular,
+                    color = colorResource(id = R.color.palette_system_red)
+                )
+            }
+        }
+    }
+
+    if (showTechInfo) {
+        ModalBottomSheet(
+            containerColor = colorResource(R.color.background_secondary),
+            onDismissRequest = { showTechInfo = false },
+            dragHandle = null,
+            content = { SpaceInfoScreen(spaceTechInfo = info) }
+        )
+    }
+}
+
+@DefaultPreviews
+@Composable
+fun ViewerSpaceSettingsWithDescriptionPreview() {
+    ViewerSpaceSettings(
+        title = "Susan Sontag",
+        description = stringResource(R.string.default_text_placeholder),
+        uiEvent = {},
+        icon = SpaceIconView.Placeholder(
+            name = "Susan",
+            color = SystemColor.SKY
+        ),
+        info = SpaceTechInfo(
+            spaceId = SpaceId("space-id"),
+            createdBy = "Thomas",
+            creationDateInMillis = null,
+            networkId = "random network id"
+        )
+    )
+}
+
+@DefaultPreviews
+@Composable
+fun ViewerSpaceSettingsWithoutDescriptionPreview() {
+    ViewerSpaceSettings(
+        title = "Susan Sontag",
+        description = "",
+        uiEvent = {},
+        icon = SpaceIconView.Placeholder(
+            name = "Susan",
+            color = SystemColor.SKY
+        ),
+        info = SpaceTechInfo(
+            spaceId = SpaceId("space-id"),
+            createdBy = "Thomas",
+            creationDateInMillis = null,
+            networkId = "random network id"
+        )
+    )
+}