DROID-3618 App | Design fixes (#2370)

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

@@ -6,14 +6,12 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -27,9 +25,6 @@ import com.anytypeio.anytype.presentation.sync.SyncStatusWidgetState
 @Composable
 fun TopBarContent(
     uiSyncStatusBadgeState: UiSyncStatusBadgeState,
-    uiEditButtonState: UiEditButton,
-    uiTitleState: UiTitleState,
-    topBarScrollBehavior: TopAppBarScrollBehavior,
     onTypeEvent: (TypeEvent) -> Unit
 ) {
     // Use windowInsetsPadding if running on a recent SDK
@@ -43,14 +38,8 @@ fun TopBarContent(
 
     Column(modifier = modifier) {
         TopToolbar(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(48.dp),
             uiSyncStatusBadgeState = uiSyncStatusBadgeState,
-            uiEditButtonState = uiEditButtonState,
-            uiTitleState = uiTitleState,
-            onTypeEvent = onTypeEvent,
-            topBarScrollBehavior = topBarScrollBehavior
+            onTypeEvent = onTypeEvent
         )
     }
 }

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

@@ -1,5 +1,6 @@
 package com.anytypeio.anytype.feature_object_type.ui.header
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -7,6 +8,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
@@ -20,6 +22,7 @@ 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.presentation.objects.ObjectIcon
+import timber.log.Timber
 
 
 @Composable
@@ -29,18 +32,25 @@ fun IconAndTitleWidget(
     uiTitleState: UiTitleState,
     onTypeEvent: (TypeEvent) -> Unit
 ) {
-    Row(modifier = modifier) {
-        ListWidgetObjectIcon(
-            modifier = Modifier
-                .size(32.dp)
-                .noRippleThrottledClickable {
-                    if (uiIconState.isEditable) {
-                        onTypeEvent.invoke(TypeEvent.OnObjectTypeIconClick)
-                    }
-                },
-            icon = uiIconState.icon,
-            backgroundColor = R.color.amp_transparent
-        )
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier.noRippleThrottledClickable {
+                if (uiIconState.isEditable) {
+                    onTypeEvent.invoke(TypeEvent.OnObjectTypeIconClick)
+                } else {
+                    Timber.d("IconAndTitleWidget: Icon is not editable")
+                }
+            }
+        ) {
+            ListWidgetObjectIcon(
+                modifier = Modifier.size(32.dp),
+                icon = uiIconState.icon,
+                backgroundColor = R.color.amp_transparent
+            )
+        }
         NameField(
             modifier = Modifier
                 .fillMaxWidth()

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

@@ -1,8 +1,8 @@
 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.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -10,26 +10,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.IconButton
-import androidx.compose.material.Text
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.DropdownMenu
-import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.TopAppBarScrollBehavior
-import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 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.multiplayer.P2PStatusUpdate
 import com.anytypeio.anytype.core_models.multiplayer.SpaceSyncAndP2PStatusState
@@ -40,78 +26,47 @@ import com.anytypeio.anytype.core_models.multiplayer.SpaceSyncUpdate
 import com.anytypeio.anytype.core_ui.common.DefaultPreviews
 import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable
 import com.anytypeio.anytype.core_ui.syncstatus.StatusBadge
-import com.anytypeio.anytype.core_ui.views.BodyRegular
-import com.anytypeio.anytype.core_ui.views.PreviewTitle2Regular
 import com.anytypeio.anytype.feature_object_type.R
 import com.anytypeio.anytype.feature_object_type.ui.TypeEvent
-import com.anytypeio.anytype.feature_object_type.ui.UiEditButton
 import com.anytypeio.anytype.feature_object_type.ui.UiSyncStatusBadgeState
-import com.anytypeio.anytype.feature_object_type.ui.UiTitleState
 
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TopToolbar(
-    modifier: Modifier,
-    uiEditButtonState: UiEditButton,
     uiSyncStatusBadgeState: UiSyncStatusBadgeState,
-    topBarScrollBehavior: TopAppBarScrollBehavior,
-    uiTitleState: UiTitleState,
     onTypeEvent: (TypeEvent) -> Unit
 ) {
-    val isIconMenuExpanded = remember {
-        mutableStateOf(false)
-    }
 
-    CenterAlignedTopAppBar(
-        modifier = modifier.fillMaxWidth()
-            .padding(horizontal = 0.dp),
-        expandedHeight = 48.dp,
-        scrollBehavior = topBarScrollBehavior,
-        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-            containerColor = colorResource(id = R.color.background_primary),
-            scrolledContainerColor = colorResource(id = R.color.background_primary),
-            titleContentColor = colorResource(id = R.color.palette_system_red)
-        ),
-        title = {
-            if (topBarScrollBehavior.state.overlappedFraction > 0.7f) {
-                Box(
-                    modifier = Modifier.fillMaxHeight(),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Text(
-                        text = uiTitleState.title,
-                        style = PreviewTitle2Regular,
-                        color = colorResource(R.color.text_primary),
-                        textAlign = TextAlign.Center
-                    )
-                }
-            }
-        },
-        navigationIcon = {
-            Box(
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(48.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .width(56.dp)
+                .fillMaxHeight()
+                .noRippleThrottledClickable {
+                    onTypeEvent(TypeEvent.OnBackClick)
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            Image(
                 modifier = Modifier
-                    .width(56.dp)
-                    .height(48.dp)
-                    .noRippleThrottledClickable {
-                        onTypeEvent(TypeEvent.OnBackClick)
-                    },
-                contentAlignment = Alignment.CenterStart
-            ) {
-                Image(
-                    modifier = Modifier
-                        .padding(start = 12.dp)
-                        .wrapContentSize(),
-                    painter = painterResource(R.drawable.ic_default_top_back),
-                    contentDescription = stringResource(R.string.content_desc_back_button)
-                )
-            }
-        },
-        actions = {
+                    .wrapContentSize(),
+                painter = painterResource(R.drawable.ic_default_top_back),
+                contentDescription = stringResource(R.string.content_desc_back_button)
+            )
+        }
+        Row(
+            modifier = Modifier.align(Alignment.CenterEnd)
+        ) {
             if (uiSyncStatusBadgeState is UiSyncStatusBadgeState.Visible) {
                 Box(
                     modifier = Modifier
-                        .size(48.dp)
+                        .wrapContentSize()
+                        .padding(end = 14.dp)
                         .noRippleThrottledClickable {
                             onTypeEvent(
                                 TypeEvent.OnSyncStatusClick(
@@ -123,65 +78,63 @@ fun TopToolbar(
                     StatusBadge(
                         status = uiSyncStatusBadgeState.status,
                         modifier = Modifier
+                            .size(28.dp)
                             .align(Alignment.Center)
                     )
                 }
             }
-            if (uiEditButtonState is UiEditButton.Visible) {
-                IconButton(
-                    modifier = Modifier
-                        .size(48.dp),
-                    onClick = {
-                        isIconMenuExpanded.value = !isIconMenuExpanded.value
-                    }
-                ) {
-                    Image(
-                        modifier = Modifier.size(24.dp),
-                        painter = painterResource(id = R.drawable.ic_space_list_dots),
-                        contentDescription = "More options"
-                    )
-                    DropdownMenu(
-                        modifier = Modifier
-                            .width(244.dp),
-                        expanded = isIconMenuExpanded.value,
-                        offset = DpOffset(x = 0.dp, y = 0.dp),
-                        onDismissRequest = {
-                            isIconMenuExpanded.value = false
-                        },
-                        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 = {
-                                Text(
-                                    text = stringResource(R.string.object_type_settings_item_remove),
-                                    style = BodyRegular,
-                                    color = colorResource(id = R.color.palette_system_red)
-                                )
-                            },
-                            onClick = {
-                                onTypeEvent(TypeEvent.OnMenuItemDeleteClick)
-                                isIconMenuExpanded.value = false
-                            },
-                        )
-                    }
-                }
-            }
+//            if (uiEditButtonState is UiEditButton.Visible) {
+//                IconButton(
+//                    modifier = Modifier
+//                        .size(48.dp),
+//                    onClick = {
+//                        isIconMenuExpanded.value = !isIconMenuExpanded.value
+//                    }
+//                ) {
+//                    Image(
+//                        modifier = Modifier.size(24.dp),
+//                        painter = painterResource(id = R.drawable.ic_space_list_dots),
+//                        contentDescription = "More options"
+//                    )
+//                    DropdownMenu(
+//                        modifier = Modifier
+//                            .width(244.dp),
+//                        expanded = isIconMenuExpanded.value,
+//                        offset = DpOffset(x = 0.dp, y = 0.dp),
+//                        onDismissRequest = {
+//                            isIconMenuExpanded.value = false
+//                        },
+//                        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 = {
+//                                Text(
+//                                    text = stringResource(R.string.object_type_settings_item_remove),
+//                                    style = BodyRegular,
+//                                    color = colorResource(id = R.color.palette_system_red)
+//                                )
+//                            },
+//                            onClick = {
+//                                onTypeEvent(TypeEvent.OnMenuItemDeleteClick)
+//                                isIconMenuExpanded.value = false
+//                            },
+//                        )
+//                    }
+//                }
+//            }
         }
-    )
+    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 @DefaultPreviews
 fun TopToolbarPreview() {
-    val topAppBarScrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(
-        state = rememberTopAppBarState()
-    )
     val spaceSyncUpdate = SpaceSyncUpdate.Update(
         id = "1",
         status = SpaceSyncStatus.SYNCING,
@@ -190,16 +143,12 @@ fun TopToolbarPreview() {
         syncingObjectsCounter = 2
     )
     TopToolbar(
-        modifier = Modifier.fillMaxWidth(),
         uiSyncStatusBadgeState = UiSyncStatusBadgeState.Visible(
             status = SpaceSyncAndP2PStatusState.Success(
                 spaceSyncUpdate = spaceSyncUpdate,
                 p2PStatusUpdate = P2PStatusUpdate.Initial
             )
         ),
-        uiEditButtonState = UiEditButton.Visible,
         onTypeEvent = {},
-        topBarScrollBehavior = topAppBarScrollBehavior,
-        uiTitleState = UiTitleState(title = "Pages", originalName = "Page", isEditable = true)
     )
 }

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

@@ -10,11 +10,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxHeight
 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.layout.safeDrawing
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.width
@@ -34,6 +36,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -255,16 +258,14 @@ private fun Topbar(
         Box(
             modifier = Modifier
                 .width(56.dp)
-                .height(48.dp)
-                .align(Alignment.CenterStart)
+                .fillMaxHeight()
                 .noRippleThrottledClickable {
                     onBackPressed()
                 },
-            contentAlignment = Alignment.CenterStart
+            contentAlignment = Alignment.Center
         ) {
             Image(
                 modifier = Modifier
-                    .padding(start = 12.dp)
                     .wrapContentSize(),
                 painter = painterResource(R.drawable.ic_default_top_back),
                 contentDescription = stringResource(R.string.content_desc_back_button)
@@ -279,8 +280,9 @@ private fun Topbar(
         )
         Box(
             modifier = Modifier
-                .width(56.dp)
+                .wrapContentSize()
                 .height(48.dp)
+                .padding(end = 12.dp)
                 .align(Alignment.CenterEnd)
                 .noRippleThrottledClickable {
                     onAddIconClicked()
@@ -289,10 +291,10 @@ private fun Topbar(
         ) {
             Image(
                 modifier = Modifier
-                    .padding(start = 12.dp)
-                    .wrapContentSize(),
+                    .size(32.dp),
                 painter = painterResource(R.drawable.ic_default_plus),
-                contentDescription = "Add new type"
+                contentDescription = "Add new type",
+                contentScale = ContentScale.Inside
             )
         }
     }