From 678ac9a78e8ef5744474323296b1d8189230bc43 Mon Sep 17 00:00:00 2001 From: Konstantin Ivanov <54908981+konstantiniiv@users.noreply.github.com> Date: Wed, 30 Apr 2025 10:06:37 +0200 Subject: [PATCH] DROID-3618 App | Design fixes (#2370) --- .../anytype/ui/home/HomeScreenToolbar.kt | 4 +- .../ui/primitives/ObjectTypeFragment.kt | 1 - .../anytype/ui/primitives/WithSetScreen.kt | 4 - .../anytype/ui/sets/ObjectSetFragment.kt | 11 - .../ui/widgets/collection/CollectionScreen.kt | 31 ++- .../widgets/objectIcon/TypeIconView.kt | 4 +- .../res/drawable/ic_home_top_toolbar_back.xml | 12 -- .../layout/layout_object_set_top_toolbar.xml | 29 +-- .../res/layout/widget_object_top_toolbar.xml | 9 +- .../ui/AllContentTopToolbar.kt | 122 ++++++----- .../anytype/feature_chats/ui/Toolbars.kt | 2 +- .../feature_object_type/ui/TypeScreen.kt | 13 +- .../ui/header/HeaderScreen.kt | 34 +-- .../ui/header/TopToolbar.kt | 195 +++++++----------- .../ui/space/SpaceTypesListScreen.kt | 18 +- .../space/ui/SpacePropertiesListScreen.kt | 12 +- .../space/new_settings/NewSettings.kt | 33 +-- 17 files changed, 235 insertions(+), 299 deletions(-) delete mode 100644 core-ui/src/main/res/drawable/ic_home_top_toolbar_back.xml diff --git a/app/src/main/java/com/anytypeio/anytype/ui/home/HomeScreenToolbar.kt b/app/src/main/java/com/anytypeio/anytype/ui/home/HomeScreenToolbar.kt index 0c6d988dec..85a28c10ba 100644 --- a/app/src/main/java/com/anytypeio/anytype/ui/home/HomeScreenToolbar.kt +++ b/app/src/main/java/com/anytypeio/anytype/ui/home/HomeScreenToolbar.kt @@ -46,7 +46,7 @@ fun HomeScreenToolbar( ) { Image( - painter = painterResource(R.drawable.ic_home_top_toolbar_back), + painter = painterResource(R.drawable.ic_default_top_back), contentDescription = "Back button", modifier = Modifier .padding(start = 16.dp) @@ -122,7 +122,7 @@ fun HomeScreenToolbar( contentDescription = "Settings icon", modifier = Modifier .align(Alignment.CenterEnd) - .padding(end = 16.dp) + .padding(end = 17.dp) .noRippleClickable { onSettingsClicked() } diff --git a/app/src/main/java/com/anytypeio/anytype/ui/primitives/ObjectTypeFragment.kt b/app/src/main/java/com/anytypeio/anytype/ui/primitives/ObjectTypeFragment.kt index 1f4e538045..34b2f8c0ec 100644 --- a/app/src/main/java/com/anytypeio/anytype/ui/primitives/ObjectTypeFragment.kt +++ b/app/src/main/java/com/anytypeio/anytype/ui/primitives/ObjectTypeFragment.kt @@ -132,7 +132,6 @@ class ObjectTypeFragment : BaseComposeFragment() { composable(route = OBJ_TYPE_MAIN) { val showPropertiesScreen = vm.showPropertiesScreen.collectAsStateWithLifecycle().value WithSetScreen( - uiEditButtonState = vm.uiEditButtonState.collectAsStateWithLifecycle().value, uiSyncStatusBadgeState = vm.uiSyncStatusBadgeState.collectAsStateWithLifecycle().value, uiIconState = vm.uiIconState.collectAsStateWithLifecycle().value, uiTitleState = vm.uiTitleState.collectAsStateWithLifecycle().value, diff --git a/app/src/main/java/com/anytypeio/anytype/ui/primitives/WithSetScreen.kt b/app/src/main/java/com/anytypeio/anytype/ui/primitives/WithSetScreen.kt index 8862c82d1a..e0efd292e2 100644 --- a/app/src/main/java/com/anytypeio/anytype/ui/primitives/WithSetScreen.kt +++ b/app/src/main/java/com/anytypeio/anytype/ui/primitives/WithSetScreen.kt @@ -52,7 +52,6 @@ import com.anytypeio.anytype.ui.sets.ObjectSetFragment @Composable fun WithSetScreen( //top bar - uiEditButtonState: UiEditButton, uiSyncStatusBadgeState: UiSyncStatusBadgeState, uiSyncStatusState: SyncStatusWidgetState, //header @@ -84,9 +83,6 @@ fun WithSetScreen( topBar = { TopBarContent( uiSyncStatusBadgeState = uiSyncStatusBadgeState, - uiEditButtonState = uiEditButtonState, - uiTitleState = uiTitleState, - topBarScrollBehavior = topAppBarScrollBehavior, onTypeEvent = { typeEvent -> if (typeEvent is TypeEvent.OnBackClick) { objectSetFragment.value?.onCloseCurrentObject() diff --git a/app/src/main/java/com/anytypeio/anytype/ui/sets/ObjectSetFragment.kt b/app/src/main/java/com/anytypeio/anytype/ui/sets/ObjectSetFragment.kt index e4c349b351..e3656d9a8e 100644 --- a/app/src/main/java/com/anytypeio/anytype/ui/sets/ObjectSetFragment.kt +++ b/app/src/main/java/com/anytypeio/anytype/ui/sets/ObjectSetFragment.kt @@ -184,9 +184,6 @@ open class ObjectSetFragment : private val topToolbarThreeDotsIcon: ImageView get() = binding.topToolbar.root.findViewById(R.id.ivThreeDots) - private val topToolbarStatusText: TextView - get() = binding.topToolbar.root.findViewById(R.id.tvStatus) - private val addNewButton: TextView get() = binding.dataViewHeader.addNewButton @@ -1046,7 +1043,6 @@ open class ObjectSetFragment : setBackgroundResource(R.drawable.rect_object_menu_button_default) } if (binding.root.currentState == R.id.start) { - topToolbarStatusText.setTextColor(Color.WHITE) topToolbarThreeDotsIcon.apply { imageTintList = ColorStateList.valueOf(Color.WHITE) } @@ -1057,7 +1053,6 @@ open class ObjectSetFragment : topToolbarThreeDotsButton.background = null topToolbarThreeDotsIcon.imageTintList = null topToolbarStatusContainer.background = null - topToolbarStatusText.setTextColor(requireContext().getColor(R.color.default_status_text_color)) } private fun observeCommands(command: ObjectSetCommand) { @@ -1327,7 +1322,6 @@ open class ObjectSetFragment : override fun onTransitionCompleted(motionLayout: MotionLayout?, id: Int) { if (id == R.id.start) { title.pauseTextWatchers { title.enableEditMode() } - topToolbarStatusText.animate().alpha(1f).setDuration(DEFAULT_ANIM_DURATION).start() topToolbarTitle.animate().alpha(0f).setDuration(DEFAULT_ANIM_DURATION).start() topToolbarThreeDotsButton.apply { if (background != null) { @@ -1340,13 +1334,11 @@ open class ObjectSetFragment : topToolbarStatusContainer.apply { if (background != null) { background?.alpha = DRAWABLE_ALPHA_FULL - topToolbarStatusText.setTextColor(Color.WHITE) } } } if (id == R.id.end) { title.pauseTextWatchers { title.enableReadMode() } - topToolbarStatusText.animate().alpha(0f).setDuration(DEFAULT_ANIM_DURATION).start() topToolbarTitle.animate().alpha(1f).setDuration(DEFAULT_ANIM_DURATION).start() binding.topToolbar.root.findViewById(R.id.ivThreeDots).apply { imageTintList = null @@ -1356,9 +1348,6 @@ open class ObjectSetFragment : } topToolbarStatusContainer.apply { background?.alpha = DRAWABLE_ALPHA_ZERO - topToolbarStatusText.setTextColor( - context.getColor(R.color.default_status_text_color) - ) } } } diff --git a/app/src/main/java/com/anytypeio/anytype/ui/widgets/collection/CollectionScreen.kt b/app/src/main/java/com/anytypeio/anytype/ui/widgets/collection/CollectionScreen.kt index 4c936c9fe5..3e06e13be3 100644 --- a/app/src/main/java/com/anytypeio/anytype/ui/widgets/collection/CollectionScreen.kt +++ b/app/src/main/java/com/anytypeio/anytype/ui/widgets/collection/CollectionScreen.kt @@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.absolutePadding +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -37,6 +38,7 @@ import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState @@ -85,6 +87,7 @@ import com.anytypeio.anytype.R import com.anytypeio.anytype.core_ui.common.keyboardAsState import com.anytypeio.anytype.core_ui.foundation.components.BottomNavigationMenu import com.anytypeio.anytype.core_ui.foundation.noRippleClickable +import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable import com.anytypeio.anytype.core_ui.views.Caption1Regular import com.anytypeio.anytype.core_ui.views.PreviewTitle2Medium import com.anytypeio.anytype.core_ui.views.Relations3 @@ -172,19 +175,27 @@ fun TopBar( ) { Box( modifier = Modifier - .padding(16.dp, 0.dp) .fillMaxWidth() .height(48.dp) ) { - Image( - painter = painterResource(R.drawable.ic_default_top_back), - contentDescription = stringResource(R.string.content_desc_back_button), + Box( modifier = Modifier - .align(Alignment.CenterStart) - .noRippleClickable { vm.onPrevClicked() } - ) + .width(56.dp) + .fillMaxHeight() + .noRippleThrottledClickable { + vm.onPrevClicked() + }, + 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.align(Alignment.Center), + modifier = Modifier + .align(Alignment.Center), text = uiState.collectionName, style = Title1, color = colorResource(id = R.color.text_primary) @@ -194,7 +205,7 @@ fun TopBar( modifier = Modifier .align(CenterEnd) .noRippleClickable { vm.onActionClicked() } - .padding(start = 16.dp, top = 12.dp, bottom = 12.dp), + .padding(start = 16.dp, top = 12.dp, bottom = 12.dp, end = 16.dp), text = uiState.actionName, style = UXBody, color = colorResource(id = R.color.glyph_active) @@ -396,7 +407,7 @@ fun SearchBar( AndroidView( modifier = Modifier - .padding(16.dp, 6.dp) + .padding(horizontal = 16.dp, vertical = 10.dp) .fillMaxWidth(), factory = { context -> val view = LayoutInflater.from(context) diff --git a/core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/objectIcon/TypeIconView.kt b/core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/objectIcon/TypeIconView.kt index 9e6cd4823c..0442dc4a9c 100644 --- a/core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/objectIcon/TypeIconView.kt +++ b/core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/objectIcon/TypeIconView.kt @@ -67,8 +67,10 @@ fun TypeIconView( val emoji = Emojifier.safeUri(icon.unicode) if (emoji != Emojifier.Config.EMPTY_URI) { EmojiIconView( + modifier = modifier, icon = ObjectIcon.Basic.Emoji(unicode = icon.unicode), - backgroundSize = backgroundSize + backgroundSize = backgroundSize, + iconWithoutBackgroundMaxSize = 120.dp, ) } else { val (imageVector, tint) = getDefaultIconAndTint(icon) diff --git a/core-ui/src/main/res/drawable/ic_home_top_toolbar_back.xml b/core-ui/src/main/res/drawable/ic_home_top_toolbar_back.xml deleted file mode 100644 index 7f9738fb90..0000000000 --- a/core-ui/src/main/res/drawable/ic_home_top_toolbar_back.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/core-ui/src/main/res/layout/layout_object_set_top_toolbar.xml b/core-ui/src/main/res/layout/layout_object_set_top_toolbar.xml index d73be876e0..3858ebf97a 100644 --- a/core-ui/src/main/res/layout/layout_object_set_top_toolbar.xml +++ b/core-ui/src/main/res/layout/layout_object_set_top_toolbar.xml @@ -8,10 +8,9 @@ + android:layout_width="56dp" + android:layout_height="48dp" + android:layout_gravity="center_vertical"> - - + android:layout_marginEnd="14dp"> + android:layout_width="56dp" + android:layout_height="48dp" + android:layout_gravity="center_vertical"> + android:layout_marginEnd="14dp"> Unit, onBackClick: () -> Unit ) { - var isMenuExpanded by remember { mutableStateOf(false) } - - CenterAlignedTopAppBar( - modifier = Modifier.fillMaxWidth(), - expandedHeight = 48.dp, - title = { AllContentTitle(state = titleState) }, - navigationIcon = { + Box( + modifier = Modifier + .fillMaxWidth() + .height(48.dp) + ) { + Box( + modifier = Modifier + .width(56.dp) + .fillMaxHeight() + .noRippleThrottledClickable { + onBackClick() + }, + contentAlignment = Alignment.Center + ) { Image( - modifier = Modifier - .padding(start = 16.dp) - .noRippleClickable { - onBackClick() - } - , + modifier = Modifier.wrapContentSize(), painter = painterResource(R.drawable.ic_default_top_back), contentDescription = stringResource(R.string.content_desc_back_button) ) - }, - actions = { - AllContentMenuButton( - onClick = { isMenuExpanded = true } - ) - if (uiMenuState is UiMenuState.Visible) { - DropdownMenu( - modifier = Modifier.width(252.dp), - expanded = isMenuExpanded, - onDismissRequest = { isMenuExpanded = false }, - shape = RoundedCornerShape(size = 16.dp), - containerColor = colorResource(id = R.color.background_primary), - shadowElevation = 5.dp, - border = BorderStroke( - width = 0.5.dp, - color = colorResource(id = R.color.background_secondary) - ) - ) { - AllContentMenu( - uiMenuState = uiMenuState, - onModeClick = onModeClick, - onSortClick = onSortClick, - onBinClick = onBinClick - ) - } - } - }, - colors = TopAppBarDefaults.centerAlignedTopAppBarColors( - containerColor = colorResource(id = R.color.background_primary) - ), - ) + } + + AllContentTitle( + modifier = Modifier + .wrapContentSize() + .align(Alignment.Center), + state = titleState + ) + + AllContentMenuButton( + modifier = Modifier.align(Alignment.CenterEnd), + onModeClick = onModeClick, + onSortClick = onSortClick, + onBinClick = onBinClick, + uiMenuState = uiMenuState, + ) + } } @DefaultPreviews @@ -150,11 +136,11 @@ private fun AllContentTopBarContainerPreview() { //region AllContentTitle @Composable -fun AllContentTitle(state: UiTitleState) { +fun AllContentTitle(modifier: Modifier, state: UiTitleState) { when (state) { UiTitleState.AllContent -> { Text( - modifier = Modifier + modifier = modifier .wrapContentSize(), text = stringResource(id = R.string.all_content_title_all_content), style = Title1, @@ -164,7 +150,7 @@ fun AllContentTitle(state: UiTitleState) { UiTitleState.OnlyUnlinked -> { Text( - modifier = Modifier + modifier = modifier .wrapContentSize(), text = stringResource(id = R.string.all_content_title_only_unlinked), style = Title1, @@ -177,16 +163,46 @@ fun AllContentTitle(state: UiTitleState) { //region AllContentMenuButton @Composable -fun AllContentMenuButton(onClick: () -> Unit) { +fun AllContentMenuButton( + modifier: Modifier, + uiMenuState: UiMenuState, + onModeClick: (AllContentMenuMode) -> Unit, + onSortClick: (ObjectsListSort) -> Unit, + onBinClick: () -> Unit, +) { + + var isMenuExpanded by remember { mutableStateOf(false) } + Image( - modifier = Modifier + modifier = modifier .padding(end = 12.dp) .size(32.dp) - .bouncingClickable { onClick() }, + .bouncingClickable { isMenuExpanded = true }, painter = painterResource(id = R.drawable.ic_space_list_dots), contentDescription = "Menu icon", contentScale = ContentScale.Inside ) + if (uiMenuState is UiMenuState.Visible) { + DropdownMenu( + modifier = Modifier.width(252.dp), + expanded = isMenuExpanded, + onDismissRequest = { isMenuExpanded = false }, + shape = RoundedCornerShape(size = 16.dp), + containerColor = colorResource(id = R.color.background_primary), + shadowElevation = 5.dp, + border = BorderStroke( + width = 0.5.dp, + color = colorResource(id = R.color.background_secondary) + ) + ) { + AllContentMenu( + uiMenuState = uiMenuState, + onModeClick = onModeClick, + onSortClick = onSortClick, + onBinClick = onBinClick + ) + } + } } //endregion diff --git a/feature-chats/src/main/java/com/anytypeio/anytype/feature_chats/ui/Toolbars.kt b/feature-chats/src/main/java/com/anytypeio/anytype/feature_chats/ui/Toolbars.kt index 54b859920b..09f8115e87 100644 --- a/feature-chats/src/main/java/com/anytypeio/anytype/feature_chats/ui/Toolbars.kt +++ b/feature-chats/src/main/java/com/anytypeio/anytype/feature_chats/ui/Toolbars.kt @@ -59,7 +59,7 @@ fun ChatTopToolbar( ) { Image( modifier = Modifier.align(Alignment.Center), - painter = painterResource(R.drawable.ic_home_top_toolbar_back), + painter = painterResource(R.drawable.ic_default_top_back), contentDescription = stringResource(R.string.content_desc_back_button) ) } diff --git a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/TypeScreen.kt b/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/TypeScreen.kt index c6f98c95a5..d8d76afca9 100644 --- a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/TypeScreen.kt +++ b/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 ) } } diff --git a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/HeaderScreen.kt b/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/HeaderScreen.kt index c94879dd19..7296317fa2 100644 --- a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/HeaderScreen.kt +++ b/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() diff --git a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/TopToolbar.kt b/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/TopToolbar.kt index 978c587d54..1580155ab1 100644 --- a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/header/TopToolbar.kt +++ b/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) ) } \ No newline at end of file diff --git a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/space/SpaceTypesListScreen.kt b/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/space/SpaceTypesListScreen.kt index ce561f9295..284c0d8330 100644 --- a/feature-object-type/src/main/java/com/anytypeio/anytype/feature_object_type/ui/space/SpaceTypesListScreen.kt +++ b/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 ) } } diff --git a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/space/ui/SpacePropertiesListScreen.kt b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/space/ui/SpacePropertiesListScreen.kt index 142863fca8..b4142da88b 100644 --- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/space/ui/SpacePropertiesListScreen.kt +++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/space/ui/SpacePropertiesListScreen.kt @@ -274,11 +274,10 @@ private fun Topbar( .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) @@ -293,8 +292,9 @@ private fun Topbar( ) Box( modifier = Modifier - .width(56.dp) + .wrapContentSize() .height(48.dp) + .padding(end = 12.dp) .align(Alignment.CenterEnd) .noRippleThrottledClickable { onAddIconClicked() @@ -303,10 +303,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 property", + contentScale = ContentScale.Inside ) } } diff --git 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 index 4b6388c897..8cba220e81 100644 --- 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 @@ -7,14 +7,16 @@ import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box 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.navigationBars import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBars +import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.shape.RoundedCornerShape @@ -31,22 +33,19 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -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 +import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable import com.anytypeio.anytype.core_ui.views.PreviewTitle1Medium -import com.anytypeio.anytype.core_utils.ext.toast import com.anytypeio.anytype.core_utils.insets.EDGE_TO_EDGE_MIN_SDK import com.anytypeio.anytype.presentation.spaces.UiEvent import com.anytypeio.anytype.presentation.spaces.UiSpaceSettingsItem import com.anytypeio.anytype.presentation.spaces.UiSpaceSettingsState import com.anytypeio.anytype.ui_settings.R -import timber.log.Timber @Composable fun SpaceSettingsContainer( @@ -89,18 +88,22 @@ fun NewSpaceSettingsScreen( .fillMaxWidth() .height(48.dp) ) { - Image( - painter = painterResource(R.drawable.ic_home_top_toolbar_back), - contentDescription = "Back button", - contentScale = ContentScale.Inside, + Box( modifier = Modifier - .padding(start = 4.dp) - .size(48.dp) - .align(Alignment.CenterStart) - .noRippleClickable { + .width(56.dp) + .fillMaxHeight() + .noRippleThrottledClickable { uiEvent(UiEvent.OnBackPressed) - } - ) + }, + contentAlignment = Alignment.Center + ) { + Image( + modifier = Modifier + .wrapContentSize(), + painter = painterResource(R.drawable.ic_default_top_back), + contentDescription = stringResource(R.string.content_desc_back_button) + ) + } } }, content = { paddingValues ->