From c03a3bcc03598937763d27ad2374526b691fa0d9 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Wed, 28 Sep 2022 16:38:51 +0200 Subject: [PATCH] Tweak UI --- .../ui/components/themed/NavigationRail.kt | 94 +++++++++++++------ .../vimusic/ui/components/themed/Scaffold.kt | 2 - .../ui/screens/search/LocalSongSearch.kt | 10 +- .../vimusic/ui/screens/search/OnlineSearch.kt | 10 +- .../vimusic/ui/styling/Dimensions.kt | 1 + 5 files changed, 75 insertions(+), 42 deletions(-) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/NavigationRail.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/NavigationRail.kt index eb46bbf..0b89cf8 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/NavigationRail.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/NavigationRail.kt @@ -1,5 +1,6 @@ package it.vfsfitvnm.vimusic.ui.components.themed +import android.content.res.Configuration import androidx.compose.animation.animateColor import androidx.compose.animation.core.animateFloat import androidx.compose.animation.core.updateTransition @@ -29,8 +30,10 @@ import androidx.compose.ui.draw.rotate import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.layout.layout +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp +import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues import it.vfsfitvnm.vimusic.ui.styling.Dimensions import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance import it.vfsfitvnm.vimusic.utils.semiBold @@ -45,22 +48,33 @@ fun NavigationRail( modifier: Modifier = Modifier ) { val (colorPalette, typography) = LocalAppearance.current + val configuration = LocalConfiguration.current + + val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier + .padding(LocalPlayerAwarePaddingValues.current) + .verticalScroll(rememberScrollState()) ) { Box( contentAlignment = Alignment.TopCenter, modifier = Modifier - .size(width = Dimensions.navigationRailWidth, height = Dimensions.headerHeight) + .size( + width = if (isLandscape) Dimensions.navigationRailWidthLandscape else Dimensions.navigationRailWidth, + height = Dimensions.headerHeight + ) ) { Image( painter = painterResource(topIconButtonId), contentDescription = null, colorFilter = ColorFilter.tint(colorPalette.textSecondary), modifier = Modifier - .offset(x = Dimensions.navigationRailIconOffset, y = 48.dp) + .offset( + x = if (isLandscape) 0.dp else Dimensions.navigationRailIconOffset, + y = 48.dp + ) .clip(CircleShape) .clickable(onClick = onTopIconButtonClick) .padding(all = 12.dp) @@ -68,10 +82,7 @@ fun NavigationRail( ) } - Column( - modifier = modifier - .verticalScroll(rememberScrollState()) - ) { + Column(horizontalAlignment = Alignment.CenterHorizontally) { val transition = updateTransition(targetState = tabIndex, label = null) content { index, text, icon -> @@ -83,52 +94,73 @@ fun NavigationRail( if (it == index) colorPalette.text else colorPalette.textDisabled } - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier - .clip(RoundedCornerShape(24.dp)) - .clickable( - indication = rememberRipple(bounded = true), - interactionSource = remember { MutableInteractionSource() }, - onClick = { onTabIndexChanged(index) } - ) - .padding(horizontal = 8.dp) - ) { + val iconContent: @Composable () -> Unit = { Image( painter = painterResource(icon), contentDescription = null, colorFilter = ColorFilter.tint(colorPalette.text), modifier = Modifier - .vertical() + .vertical(enabled = !isLandscape) .graphicsLayer { alpha = dothAlpha translationX = (1f - dothAlpha) * -48.dp.toPx() - rotationZ = -90f + rotationZ = if (isLandscape) 0f else -90f } .size(Dimensions.navigationRailIconOffset * 2) ) + } + val textContent: @Composable () -> Unit = { BasicText( text = text, style = typography.xs.semiBold.copy(color = textColor), modifier = Modifier - .vertical() - .rotate(-90f) + .vertical(enabled = !isLandscape) + .rotate(if (isLandscape) 0f else -90f) .padding(horizontal = 16.dp) ) } + + val contentModifier = Modifier + .clip(RoundedCornerShape(24.dp)) + .clickable( + indication = rememberRipple(bounded = true), + interactionSource = remember { MutableInteractionSource() }, + onClick = { onTabIndexChanged(index) } + ) + + if (isLandscape) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = contentModifier + .padding(vertical = 8.dp) + ) { + iconContent() + textContent() + } + } else { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = contentModifier + .padding(horizontal = 8.dp) + ) { + iconContent() + textContent() + } + } } } } } -private fun Modifier.vertical() = - layout { measurable, constraints -> - val placeable = measurable.measure(constraints) - layout(placeable.height, placeable.width) { - placeable.place( - x = -(placeable.width / 2 - placeable.height / 2), - y = -(placeable.height / 2 - placeable.width / 2) - ) - } - } +private fun Modifier.vertical(enabled: Boolean = true) = + if (enabled) + layout { measurable, constraints -> + val placeable = measurable.measure(constraints) + layout(placeable.height, placeable.width) { + placeable.place( + x = -(placeable.width / 2 - placeable.height / 2), + y = -(placeable.height / 2 - placeable.width / 2) + ) + } + } else this diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/Scaffold.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/Scaffold.kt index 29b46ea..362fa1c 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/Scaffold.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/Scaffold.kt @@ -60,8 +60,6 @@ fun Scaffold( onTopIconButtonClick = onTopIconButtonClick, tabIndex = tabIndex, onTabIndexChanged = onTabChanged, - modifier = Modifier - .padding(LocalPlayerAwarePaddingValues.current), content = tabColumnContent ) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/LocalSongSearch.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/LocalSongSearch.kt index 9405e33..7fc4180 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/LocalSongSearch.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/LocalSongSearch.kt @@ -62,10 +62,12 @@ fun LocalSongSearch( stateSaver = DetailedSongListSaver, key1 = textFieldValue.text ) { - Database - .search("%${textFieldValue.text}%") - .flowOn(Dispatchers.IO) - .collect { value = it } + if (textFieldValue.text.length > 1) { + Database + .search("%${textFieldValue.text}%") + .flowOn(Dispatchers.IO) + .collect { value = it } + } } val thumbnailSize = Dimensions.thumbnails.song.px diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/OnlineSearch.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/OnlineSearch.kt index 274b2be..0e51d18 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/OnlineSearch.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/search/OnlineSearch.kt @@ -111,11 +111,6 @@ fun OnlineSearch( FocusRequester() } - LaunchedEffect(Unit) { - delay(300) - focusRequester.requestFocus() - } - LazyColumn( contentPadding = LocalPlayerAwarePaddingValues.current, modifier = Modifier @@ -334,4 +329,9 @@ fun OnlineSearch( } } } + + LaunchedEffect(Unit) { + delay(300) + focusRequester.requestFocus() + } } diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/styling/Dimensions.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/styling/Dimensions.kt index 7f34514..0cee656 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/styling/Dimensions.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/styling/Dimensions.kt @@ -11,6 +11,7 @@ object Dimensions { val itemsVerticalPadding = 8.dp val navigationRailWidth = 64.dp + val navigationRailWidthLandscape = 128.dp val navigationRailIconOffset = 6.dp val headerHeight = 128.dp