DROID-3500 Primitives | Ui fixes (#2199)

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/fields/UiEvent.kt

@@ -1,12 +1,13 @@
 package com.anytypeio.anytype.feature_object_type.fields
 
 import com.anytypeio.anytype.core_models.Id
-import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesEvent
 
 sealed class FieldEvent {
 
     data object OnEditPropertyScreenDismiss : FieldEvent()
 
+    data object OnBackClick : FieldEvent()
+
     data class OnFieldItemClick(val item: UiFieldsListItem) : FieldEvent()
 
     sealed class FieldItemMenu : FieldEvent() {

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/fields/ui/ListScreen.kt

@@ -36,7 +36,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
@@ -69,6 +71,7 @@ import com.anytypeio.anytype.feature_object_type.fields.UiFieldsListItem
 import com.anytypeio.anytype.feature_object_type.fields.UiFieldsListItem.Section
 import com.anytypeio.anytype.feature_object_type.fields.UiFieldsListState
 import com.anytypeio.anytype.feature_object_type.fields.UiLocalsFieldsInfoState
+import com.anytypeio.anytype.feature_object_type.ui.TypeEvent
 import com.anytypeio.anytype.feature_object_type.ui.UiIconState
 import com.anytypeio.anytype.feature_object_type.ui.UiTitleState
 import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesEvent
@@ -119,18 +122,20 @@ fun FieldsMainScreen(
         modifier = Modifier
             .nestedScroll(rememberNestedScrollInteropConnection())
             .background(
-                color = colorResource(id = R.color.widget_background),
-                shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
+                color = colorResource(id = R.color.background_primary)
             )
             .fillMaxSize(),
         containerColor = colorResource(id = R.color.transparent_black),
-        contentColor = colorResource(id = R.color.widget_background),
+        contentColor = colorResource(id = R.color.background_primary),
         topBar = {
             TopBar(
                 modifier = Modifier.fillMaxWidth(),
                 uiTitleState = uiTitleState,
                 uiIconState = uiIconState,
-                withDragger = withDragger
+                withDragger = withDragger,
+                onBackClick = {
+                    fieldEvent(OnBackClick)
+                }
             )
         },
         content = { paddingValues ->
@@ -281,6 +286,7 @@ private fun TopBar(
     withDragger: Boolean = true,
     uiTitleState: UiTitleState,
     uiIconState: UiIconState,
+    onBackClick: () -> Unit = {}
 ) {
     val modifier = if (Build.VERSION.SDK_INT >= EDGE_TO_EDGE_MIN_SDK) {
         modifier.windowInsetsPadding(WindowInsets.statusBars)
@@ -290,8 +296,7 @@ private fun TopBar(
     Column(
         modifier = modifier
             .background(
-                color = colorResource(id = R.color.widget_background),
-                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
+                color = colorResource(id = R.color.background_primary),
             )
     ) {
         if (withDragger) {
@@ -306,6 +311,25 @@ private fun TopBar(
                 .fillMaxWidth()
                 .height(48.dp)
         ) {
+            if (!withDragger) {
+                Box(
+                    modifier = Modifier
+                        .width(56.dp)
+                        .height(48.dp)
+                        .align(Alignment.CenterStart)
+                        .noRippleThrottledClickable {
+                            onBackClick()
+                        },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Image(
+                        modifier = Modifier.wrapContentSize(),
+                        painter = painterResource(R.drawable.ic_default_top_back),
+                        contentDescription = stringResource(R.string.content_desc_back_button)
+                    )
+                }
+            }
+
             Text(
                 modifier = Modifier
                     .wrapContentSize()
@@ -526,6 +550,8 @@ private fun LazyItemScope.FieldItemDraggable(
 ) {
     val isMenuExpanded = remember { mutableStateOf(false) }
 
+    val haptic = LocalHapticFeedback.current
+
     ReorderableItem(
         state = reorderingState,
         key = item.id,
@@ -554,6 +580,7 @@ private fun LazyItemScope.FieldItemDraggable(
                             fieldEvent(OnFieldItemClick(item = item))
                         },
                         onLongClick = {
+                            haptic.performHapticFeedback(HapticFeedbackType.LongPress)
                             // show your menu, only if NOT dragging
                             if (item.isPossibleToUnlinkFromType) {
                                 isMenuExpanded.value = true

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/UiState.kt

@@ -31,6 +31,8 @@ sealed class ObjectTypeCommand {
 
     data object OpenFieldsScreen : ObjectTypeCommand()
 
+    data object CloseFieldsScreen : ObjectTypeCommand()
+
     data class OpenEditTypePropertiesScreen(val typeId: Id, val space: Id) : ObjectTypeCommand()
 }
 

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/HeaderScreen.kt

@@ -16,6 +16,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -27,6 +28,7 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.dp
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.common.DefaultPreviews
@@ -62,7 +64,8 @@ fun IconAndTitleWidget(
             modifier = Modifier
                 .fillMaxWidth()
                 .wrapContentHeight(),
-            uiTitleState = uiTitleState,
+            initialName = uiTitleState.title,
+            enabled = uiTitleState.isEditable,
             onTypeEvent = onTypeEvent,
         )
     }
@@ -71,28 +74,35 @@ fun IconAndTitleWidget(
 @Composable
 fun NameField(
     modifier: Modifier,
-    uiTitleState: UiTitleState,
+    initialName: String,
+    enabled: Boolean,
     onTypeEvent: (TypeEvent) -> Unit
 ) {
-    var innerValue by remember(uiTitleState.title) { mutableStateOf(uiTitleState.title) }
+
+    var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(
+            TextFieldValue(initialName)
+        )
+    }
+
     val focusManager = LocalFocusManager.current
 
     val focusRequester = remember { FocusRequester() }
     val keyboardController = LocalSoftwareKeyboardController.current
 
     BasicTextField(
-        value = innerValue,
-        onValueChange = {
-            innerValue = it
+        value = textFieldValue,
+        onValueChange = { newValue ->
+            textFieldValue = newValue
             onTypeEvent.invoke(
                 TypeEvent.OnObjectTypeTitleUpdate(
-                    title = innerValue
+                    title = textFieldValue.text
                 )
             )
         },
         textStyle = HeadlineTitle.copy(color = colorResource(id = R.color.text_primary)),
         singleLine = false,
-        enabled = uiTitleState.isEditable,
+        enabled = enabled,
         cursorBrush = SolidColor(colorResource(id = R.color.text_primary)),
         modifier = modifier
             .padding(start = 12.dp, end = 20.dp)
@@ -105,7 +115,7 @@ fun NameField(
             focusManager.clearFocus()
             onTypeEvent.invoke(
                 TypeEvent.OnObjectTypeTitleUpdate(
-                    title = innerValue
+                    title = textFieldValue.text
                 )
             )
         },
@@ -116,7 +126,7 @@ fun NameField(
                     .height(32.dp),
                 contentAlignment = Alignment.CenterStart
             ) {
-                if (innerValue.isEmpty()) {
+                if (textFieldValue.text.isEmpty()) {
                     Text(
                         modifier = Modifier.wrapContentSize(),
                         text = stringResource(id = R.string.untitled),

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/TopToolbar.kt

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.header
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -145,6 +146,10 @@ fun TopToolbar(
                         },
                         shape = RoundedCornerShape(10.dp),
                         containerColor = colorResource(id = R.color.background_secondary),
+                        border = BorderStroke(
+                            width = 0.5.dp,
+                            color = colorResource(id = R.color.background_secondary)
+                        )
                     ) {
                         DropdownMenuItem(
                             text = {

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/icons/ChangeIconScreen.kt

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.icons
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.combinedClickable
@@ -237,6 +238,10 @@ private fun IconPreviews(
         shape = RoundedCornerShape(size = 20.dp),
         containerColor = colorResource(id = R.color.background_primary),
         shadowElevation = 5.dp,
+        border = BorderStroke(
+            width = 0.5.dp,
+            color = colorResource(id = R.color.background_secondary)
+        )
     ) {
         Row(
             modifier = Modifier.fillMaxWidth(),

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/objects/ObjectsHeaderScreen.kt

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.objects
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -103,7 +104,11 @@ fun ObjectsHeader(
                     onDismissRequest = { isMenuExpanded = false },
                     shape = RoundedCornerShape(size = 16.dp),
                     containerColor = colorResource(id = R.color.background_primary),
-                    shadowElevation = 5.dp
+                    shadowElevation = 5.dp,
+                    border = BorderStroke(
+                        width = 0.5.dp,
+                        color = colorResource(id = R.color.background_secondary)
+                    )
                 ) {
                     when (val item = uiObjectsMenuState.objSetItem) {
                         UiMenuSetItem.CreateSet -> {

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/templates/TemplatesList.kt

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.templates
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.border
 import androidx.compose.foundation.combinedClickable
@@ -107,6 +108,10 @@ fun TemplatesList(
                         offset = DpOffset(
                             x = 20.dp,
                             y = (-300).dp
+                        ),
+                        border = BorderStroke(
+                            width = 0.5.dp,
+                            color = colorResource(id = R.color.background_secondary)
                         )
                     ) {
                         if (!item.isDefault) {

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/templates/TemplatesModalList.kt

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.templates
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
@@ -203,6 +204,10 @@ private fun LazyItemScope.ItemContent(
             shape = RoundedCornerShape(size = 10.dp),
             containerColor = colorResource(id = R.color.background_primary),
             shadowElevation = 5.dp,
+            border = BorderStroke(
+                width = 0.5.dp,
+                color = colorResource(id = R.color.background_secondary)
+            )
         ) {
             if (!item.isDefault) {
                 DropdownMenuItem(

feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/viewmodel/ObjectTypeViewModel.kt

@@ -32,6 +32,7 @@ import com.anytypeio.anytype.feature_object_type.fields.UiFieldsListItem
 import com.anytypeio.anytype.feature_object_type.fields.UiFieldsListState
 import com.anytypeio.anytype.feature_object_type.fields.UiLocalsFieldsInfoState
 import com.anytypeio.anytype.feature_object_type.ui.ObjectTypeCommand
+import com.anytypeio.anytype.feature_object_type.ui.ObjectTypeCommand.*
 import com.anytypeio.anytype.feature_object_type.ui.ObjectTypeVmParams
 import com.anytypeio.anytype.feature_object_type.ui.TypeEvent
 import com.anytypeio.anytype.feature_object_type.ui.UiDeleteAlertState
@@ -456,6 +457,7 @@ class ObjectTypeViewModel(
             }
 
             is TypeEvent.OnObjectTypeTitleUpdate -> {
+                uiTitleState.value = uiTitleState.value.copy(title = event.title)
                 updateTitle(event.title)
             }
 
@@ -698,7 +700,7 @@ class ObjectTypeViewModel(
             FieldEvent.Section.OnAddToSidebarIconClick -> {
                 viewModelScope.launch {
                     commands.emit(
-                        ObjectTypeCommand.OpenEditTypePropertiesScreen(
+                        OpenEditTypePropertiesScreen(
                             typeId = vmParams.objectId,
                             space = vmParams.spaceId.id,
                         )
@@ -747,6 +749,11 @@ class ObjectTypeViewModel(
             }
 
             is FieldEvent.EditProperty -> proceedWithEditPropertyEvent(event)
+            FieldEvent.OnBackClick -> {
+                viewModelScope.launch {
+                    commands.emit(ObjectTypeCommand.CloseFieldsScreen)
+                }
+            }
         }
     }