Add compact wikipedia results view
This commit is contained in:
MM20
parent
5e409985ca
commit
ff53330173
@ -178,6 +178,8 @@ fun ListItem(
|
||||
}
|
||||
},
|
||||
onLongClick = { onShowDetails(true) }),
|
||||
showDetails = showDetails,
|
||||
onBack = { onShowDetails(false) },
|
||||
article = item,
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
package de.mm20.launcher2.ui.launcher.search.wikipedia
|
||||
|
||||
import androidx.compose.animation.AnimatedContent
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.SharedTransitionScope
|
||||
import androidx.compose.animation.core.MutableTransitionState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.animation.expandIn
|
||||
import androidx.compose.animation.shrinkOut
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.aspectRatio
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.rounded.ArrowBack
|
||||
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
|
||||
import androidx.compose.material.icons.rounded.Edit
|
||||
import androidx.compose.material.icons.rounded.Share
|
||||
import androidx.compose.material.icons.rounded.Star
|
||||
@ -25,13 +28,17 @@ import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.geometry.Rect
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
import androidx.compose.ui.text.fromHtml
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.roundToIntRect
|
||||
import coil.compose.AsyncImage
|
||||
import coil.request.ImageRequest
|
||||
import de.mm20.launcher2.search.Article
|
||||
import de.mm20.launcher2.ui.R
|
||||
import de.mm20.launcher2.ui.component.DefaultToolbarAction
|
||||
@ -43,65 +50,152 @@ import de.mm20.launcher2.ui.launcher.search.listItemViewModel
|
||||
import de.mm20.launcher2.ui.launcher.sheets.LocalBottomSheetManager
|
||||
import de.mm20.launcher2.ui.locals.LocalFavoritesEnabled
|
||||
import de.mm20.launcher2.ui.locals.LocalGridSettings
|
||||
import de.mm20.launcher2.ui.utils.htmlToAnnotatedString
|
||||
|
||||
@Composable
|
||||
fun ArticleItem(
|
||||
modifier: Modifier = Modifier,
|
||||
article: Article,
|
||||
showDetails: Boolean = false,
|
||||
onBack: (() -> Unit)? = null
|
||||
) {
|
||||
val context = LocalContext.current
|
||||
|
||||
val viewModel: SearchableItemVM = listItemViewModel(key = "search-${article.key}")
|
||||
val context = LocalContext.current
|
||||
val iconSize = LocalGridSettings.current.iconSize.dp.toPixels()
|
||||
|
||||
LaunchedEffect(article, iconSize) {
|
||||
viewModel.init(article, iconSize.toInt())
|
||||
}
|
||||
|
||||
Column(
|
||||
modifier = modifier
|
||||
SharedTransitionScope {
|
||||
AnimatedContent(
|
||||
showDetails,
|
||||
modifier = it then modifier,
|
||||
) { showDetails ->
|
||||
Column {
|
||||
if (!showDetails) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.padding(16.dp)
|
||||
) {
|
||||
Text(
|
||||
text = article.label,
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
modifier = Modifier.sharedBounds(
|
||||
rememberSharedContentState("title"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
)
|
||||
Text(
|
||||
modifier = Modifier
|
||||
.padding(top = 4.dp)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("subtitle"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
text = stringResource(id = R.string.wikipedia_source),
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
}
|
||||
if (!article.imageUrl.isNullOrEmpty()) {
|
||||
AsyncImage(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.aspectRatio(16f / 9f)
|
||||
.background(MaterialTheme.colorScheme.secondaryContainer),
|
||||
.padding(end = 12.dp, top = 12.dp, bottom = 12.dp)
|
||||
.size(72.dp)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("image"),
|
||||
this@AnimatedContent,
|
||||
resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds
|
||||
)
|
||||
.background(MaterialTheme.colorScheme.secondaryContainer, MaterialTheme.shapes.small)
|
||||
.clip(MaterialTheme.shapes.small),
|
||||
model = article.imageUrl,
|
||||
contentScale = ContentScale.Crop,
|
||||
contentDescription = null
|
||||
)
|
||||
}
|
||||
}
|
||||
Column(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
modifier = Modifier.padding(horizontal = 16.dp),
|
||||
) {
|
||||
Text(
|
||||
modifier = Modifier.padding(bottom = 24.dp)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("summary"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
text = AnnotatedString.fromHtml(article.text),
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
)
|
||||
}
|
||||
} else {
|
||||
AsyncImage(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.aspectRatio(16f / 9f)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("image"),
|
||||
this@AnimatedContent,
|
||||
resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds
|
||||
)
|
||||
.background(MaterialTheme.colorScheme.secondaryContainer),
|
||||
model = ImageRequest.Builder(context).data(article.imageUrl).crossfade(false).build(),
|
||||
contentScale = ContentScale.Crop,
|
||||
contentDescription = null
|
||||
)
|
||||
|
||||
Column(
|
||||
modifier = Modifier.padding(
|
||||
start = 16.dp,
|
||||
end = 16.dp,
|
||||
top = 16.dp,
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = article.label,
|
||||
style = MaterialTheme.typography.titleLarge
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
modifier = Modifier.sharedBounds(
|
||||
rememberSharedContentState("title"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
)
|
||||
val tags by viewModel.tags.collectAsState(emptyList())
|
||||
if (tags.isNotEmpty()) {
|
||||
Text(
|
||||
modifier = Modifier.padding(top = 1.dp, bottom = 4.dp),
|
||||
modifier = Modifier
|
||||
.padding(top = 1.dp, bottom = 4.dp),
|
||||
text = tags.joinToString(separator = " #", prefix = "#"),
|
||||
color = MaterialTheme.colorScheme.secondary,
|
||||
style = MaterialTheme.typography.labelSmall
|
||||
)
|
||||
}
|
||||
Text(
|
||||
modifier = Modifier.padding(top = 4.dp),
|
||||
modifier = Modifier
|
||||
.padding(top = 4.dp)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("subtitle"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
text = stringResource(id = R.string.wikipedia_source),
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
Text(
|
||||
modifier = Modifier.padding(vertical = 8.dp),
|
||||
text = htmlToAnnotatedString(article.text),
|
||||
style = MaterialTheme.typography.bodySmall
|
||||
modifier = Modifier.padding(vertical = 16.dp)
|
||||
.sharedBounds(
|
||||
rememberSharedContentState("summary"),
|
||||
this@AnimatedContent,
|
||||
),
|
||||
text = AnnotatedString.fromHtml(article.text),
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
)
|
||||
}
|
||||
|
||||
val toolbarActions = mutableListOf<ToolbarAction>()
|
||||
|
||||
if (LocalFavoritesEnabled.current) {
|
||||
@ -148,7 +242,7 @@ fun ArticleItem(
|
||||
leftActions = if (onBack != null) listOf(
|
||||
DefaultToolbarAction(
|
||||
stringResource(id = R.string.menu_back),
|
||||
icon = Icons.Rounded.ArrowBack,
|
||||
icon = Icons.AutoMirrored.Rounded.ArrowBack,
|
||||
action = onBack
|
||||
)
|
||||
) else emptyList(),
|
||||
@ -156,6 +250,9 @@ fun ArticleItem(
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ArticleItemGridPopup(
|
||||
@ -180,6 +277,7 @@ fun ArticleItemGridPopup(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(),
|
||||
article = article,
|
||||
showDetails = true,
|
||||
onBack = onDismiss
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user