diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_close_24.xml b/composeApp/src/commonMain/composeResources/drawable/ic_close_24.xml new file mode 100644 index 0000000..6f2b5b1 --- /dev/null +++ b/composeApp/src/commonMain/composeResources/drawable/ic_close_24.xml @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/MainContent.kt b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/MainContent.kt index 69622e9..e850ea9 100644 --- a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/MainContent.kt +++ b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/MainContent.kt @@ -2,7 +2,6 @@ package org.michaelbel.mobiledevemoji -import androidx.compose.animation.AnimatedVisibility import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row @@ -36,7 +35,7 @@ import org.michaelbel.mobiledevemoji.data.Emoji import org.michaelbel.mobiledevemoji.data.EmojiResponse import org.michaelbel.mobiledevemoji.svg.svgPainter import org.michaelbel.mobiledevemoji.ui.EmojiIcon -import org.michaelbel.mobiledevemoji.ui.IconPreviewBox +import org.michaelbel.mobiledevemoji.ui.IconPreviewDialog import org.michaelbel.mobiledevemoji.ui.topbar.FigmaIcon import org.michaelbel.mobiledevemoji.ui.topbar.TelegramIcon @@ -108,15 +107,23 @@ fun MainContent() { } } - AnimatedVisibility( + /*AnimatedVisibility( visible = emojiPreviewVisible != null ) { IconPreviewBox( emoji = emojiList.find { it.emojiResponse.id == emojiPreviewVisible } ?: Emoji.Empty, - modifier = Modifier.padding(start = 64.dp), + modifier = Modifier.padding(start = 32.dp), onClick = { emojiPreviewVisible = null } ) - } + }*/ + } + + if (emojiPreviewVisible != null) { + IconPreviewDialog( + emoji = emojiList.find { it.emojiResponse.id == emojiPreviewVisible } ?: Emoji.Empty, + modifier = Modifier, + onDismissRequest = { emojiPreviewVisible = null } + ) } } } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/data/ProjectData.kt b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/data/ProjectData.kt index 0047f9c..590024d 100644 --- a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/data/ProjectData.kt +++ b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/data/ProjectData.kt @@ -1,6 +1,7 @@ package org.michaelbel.mobiledevemoji.data import mobiledevemoji.composeapp.generated.resources.Res +import mobiledevemoji.composeapp.generated.resources.ic_close_24 import mobiledevemoji.composeapp.generated.resources.ic_figma_24 import mobiledevemoji.composeapp.generated.resources.ic_telegram_24 @@ -10,4 +11,5 @@ const val TELEGRAM_URL = "https://t.me/foundout" const val FIGMA_URL = "https://www.figma.com/community/file/1385339470177359146" val TelegramIconRes = Res.drawable.ic_telegram_24 -val FigmaIconRes = Res.drawable.ic_figma_24 \ No newline at end of file +val FigmaIconRes = Res.drawable.ic_figma_24 +val CloseIconRes = Res.drawable.ic_close_24 \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ktx/ModifierKtx.kt b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ktx/ModifierKtx.kt new file mode 100644 index 0000000..e173c55 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ktx/ModifierKtx.kt @@ -0,0 +1,19 @@ +@file:Suppress("unused") + +package org.michaelbel.mobiledevemoji.ktx + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.composed + +fun Modifier.clickableWithoutRipple( + block: () -> Unit +): Modifier = composed { + clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null, + onClick = { block() } + ) +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewBox.kt b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewBox.kt deleted file mode 100644 index e92d994..0000000 --- a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewBox.kt +++ /dev/null @@ -1,55 +0,0 @@ -package org.michaelbel.mobiledevemoji.ui - -import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Text -import androidx.compose.material3.MaterialTheme -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.dp -import org.michaelbel.mobiledevemoji.data.Emoji - -@Composable -fun IconPreviewBox( - emoji: Emoji, - onClick: () -> Unit, - modifier: Modifier -) { - Column( - modifier = modifier - .width(332.dp) - .fillMaxHeight(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - Box( - modifier = Modifier - .clip(RoundedCornerShape(72.dp)) - .size(300.dp) - .clickable { onClick() } - ) { - SvgIcon( - painter = emoji.painter, - modifier = Modifier.size(300.dp) - ) - } - - Text( - text = emoji.emojiResponse.name, - modifier = Modifier.padding(top = 16.dp), - textAlign = TextAlign.Center, - color = MaterialTheme.colorScheme.onBackground, - style = MaterialTheme.typography.headlineMedium - ) - } -} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewDialog.kt b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewDialog.kt new file mode 100644 index 0000000..62c349c --- /dev/null +++ b/composeApp/src/commonMain/kotlin/org/michaelbel/mobiledevemoji/ui/IconPreviewDialog.kt @@ -0,0 +1,112 @@ +@file:OptIn(ExperimentalMaterial3Api::class) + +package org.michaelbel.mobiledevemoji.ui + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Icon +import androidx.compose.material.IconButton +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.ModalBottomSheet +import androidx.compose.material3.SheetValue +import androidx.compose.material3.Text +import androidx.compose.material3.rememberModalBottomSheetState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import kotlinx.coroutines.launch +import org.jetbrains.compose.resources.painterResource +import org.michaelbel.mobiledevemoji.data.CloseIconRes +import org.michaelbel.mobiledevemoji.data.Emoji + +@Composable +fun IconPreviewDialog( + emoji: Emoji, + onDismissRequest: () -> Unit, + modifier: Modifier +) { + val sheetState = rememberModalBottomSheetState( + skipPartiallyExpanded = true, + confirmValueChange = { sheetValue -> + if (sheetValue == SheetValue.Hidden) { + onDismissRequest() + } + true + } + ) + val scope = rememberCoroutineScope() + + fun hide() { + scope.launch { sheetState.hide() } + } + + ModalBottomSheet( + onDismissRequest = onDismissRequest, + sheetState = sheetState, + containerColor = MaterialTheme.colorScheme.surface + ) { + Box( + modifier = modifier + .fillMaxWidth() + .wrapContentHeight() + ) { + Column( + modifier = modifier + .fillMaxWidth() + .wrapContentHeight(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Box( + modifier = Modifier + .padding(top = 24.dp) + .shadow( + elevation = 8.dp, + shape = RoundedCornerShape(72.dp) + ) + .clip(RoundedCornerShape(72.dp)) + .size(300.dp) + ) { + SvgIcon( + painter = emoji.painter, + modifier = Modifier.size(300.dp) + ) + } + + Text( + text = emoji.emojiResponse.name, + modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 48.dp), + textAlign = TextAlign.Center, + color = MaterialTheme.colorScheme.onBackground, + style = MaterialTheme.typography.headlineMedium + ) + } + + IconButton( + onClick = ::hide, + modifier = Modifier + .padding(end = 8.dp) + .align(Alignment.TopEnd) + ) { + Icon( + painter = painterResource(CloseIconRes), + contentDescription = null, + tint = Color.Unspecified + ) + } + } + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/resources/icons.json b/composeApp/src/commonMain/resources/icons.json index f13a103..4e42075 100644 --- a/composeApp/src/commonMain/resources/icons.json +++ b/composeApp/src/commonMain/resources/icons.json @@ -85,7 +85,7 @@ }, { "id": "google-dart", - "name": "Dart", + "name": "Dart (Programming Language)", "pack": 1, "position": 15 }, @@ -631,7 +631,7 @@ }, { "id": "meta-threads", - "name": "Threads (social network)", + "name": "Threads (Social Network)", "pack": 1, "position": 106 },