Lemmy/Raccoon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add button to reveal images in timelines (#106)

Browse Source
This commit is contained in:
akesi seli 2024-11-15 08:51:41 +01:00 committed by GitHub
parent 92d88934aa
commit 4a8e1ce7b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 78 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt
View File

@ -4,19 +4,37 @@ import androidx.compose.animation.core.InfiniteRepeatableSpec
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
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.draw.clip
import androidx.compose.ui.graphics.FilterQuality
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.livefast.eattrash.raccoonforlemmy.core.appearance.theme.Spacing
import com.livefast.eattrash.raccoonforlemmy.core.commonui.components.CustomImage
import com.livefast.eattrash.raccoonforlemmy.core.l10n.messages.LocalStrings
import com.livefast.eattrash.raccoonforlemmy.core.utils.compose.onClick
@ -32,22 +50,38 @@ fun PostCardImage(
blurred: Boolean = false,
onImageClick: ((String) -> Unit)? = null,
onDoubleClick: (() -> Unit)? = null,
onLongClick: (() -> Unit)? = null,
) {
if (imageUrl.isNotEmpty()) {
if (imageUrl.isEmpty()) {
return
}
var revealing by remember { mutableStateOf(!blurred) }
Box(
modifier =
modifier
.fillMaxWidth()
.heightIn(min = minHeight, max = maxHeight)
.onClick(
onDoubleClick = onDoubleClick ?: {},
),
) {
CustomImage(
modifier =
modifier.fillMaxWidth()
.heightIn(min = minHeight, max = maxHeight)
.onClick(
onClick = { onImageClick?.invoke(imageUrl) },
onDoubleClick = onDoubleClick ?: {},
onLongClick = onLongClick ?: {},
Modifier
.fillMaxSize()
.then(
if (onImageClick != null) {
Modifier.clickable {
onImageClick(imageUrl)
}
} else {
Modifier
},
),
url = imageUrl,
quality = FilterQuality.Low,
autoload = autoLoadImages,
blurred = blurred,
blurred = !revealing,
loadButtonContent = loadButtonContent,
contentScale = ContentScale.FillWidth,
onFailure = {
@ -80,5 +114,40 @@ fun PostCardImage(
)
},
)
Row(
modifier =
Modifier.align(Alignment.BottomEnd).padding(
bottom = Spacing.xxs,
end = Spacing.xs,
),
) {
val iconModifier =
Modifier
.border(
width = Dp.Hairline,
color = MaterialTheme.colorScheme.onBackground,
shape = CircleShape,
).padding(2.5.dp)
.clip(CircleShape)
if (blurred) {
IconButton(
onClick = {
revealing = !revealing
},
) {
Icon(
modifier = iconModifier,
imageVector =
if (revealing) {
Icons.Default.VisibilityOff
} else {
Icons.Default.Visibility
},
contentDescription = null,
tint = MaterialTheme.colorScheme.onBackground,
)
}
}
}
}
}