Skip to content

Onboarding animation fix #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShiftHackZ merged 5 commits into from
Nov 23, 2024
Merged

Onboarding animation fix #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c87c4a
Updated onboarding animation & refactored some composables
ComicSAS Oct 27, 2024
a190eda
Resolved PR comments & refactored some ui elements
ComicSAS Nov 3, 2024
fb990cc
Resolved rebase conflicts & updated onboarding animation + donate scr…
ComicSAS Nov 17, 2024
0bb0a24
Updated onboarding animation
ComicSAS Nov 17, 2024
6e05ced
Updated onboarding animation
ComicSAS Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 40 additions & 15 deletions ...ation/src/main/java/com/shifthackz/aisdv1/presentation/modal/embedding/EmbeddingScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package com.shifthackz.aisdv1.presentation.modal.embedding

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
Expand Down Expand Up @@ -34,7 +32,10 @@ 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.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
Expand All @@ -45,13 +46,13 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.shifthackz.aisdv1.core.extensions.shimmer
import com.shifthackz.android.core.mvi.MviComponent
import com.shifthackz.aisdv1.domain.entity.ServerSource
import com.shifthackz.aisdv1.presentation.modal.extras.ExtrasEffect
import com.shifthackz.aisdv1.presentation.model.ErrorState
import com.shifthackz.aisdv1.presentation.widget.error.ErrorComposable
import com.shifthackz.aisdv1.presentation.widget.source.getName
import com.shifthackz.aisdv1.presentation.widget.toolbar.ModalDialogToolbar
import com.shifthackz.android.core.mvi.MviComponent
import org.koin.androidx.compose.koinViewModel
import com.shifthackz.aisdv1.core.localization.R as LocalizationR
import com.shifthackz.aisdv1.presentation.R as PresentationR
Expand Down Expand Up @@ -144,22 +145,33 @@ private fun ScreenContent(
if (!state.loading && state.embeddings.isNotEmpty()) {
Row(
modifier = modifier
.padding(horizontal = 12.dp)
.fillMaxWidth()
.height(intrinsicSize = IntrinsicSize.Max)
.clip(RoundedCornerShape(16.dp))
.background(color = bgColor)
.onSizeChanged {
if (it.height > dividerHeight) dividerHeight = it.height
},
}
.drawBehind {
drawRoundRect(
color = bgColor,
cornerRadius = CornerRadius(16.dp.toPx())
)
}
.padding(horizontal = 12.dp),
) {
val selectorBgColor =
if (state.selector) MaterialTheme.colorScheme.primary else Color.Transparent
Box(
modifier = Modifier
.fillMaxWidth()
.height(with(LocalDensity.current) { dividerHeight.toDp() })
.weight(1f)
.clip(RoundedCornerShape(16.dp))
.background(color = if (state.selector) MaterialTheme.colorScheme.primary else Color.Transparent)
.drawBehind {
drawRoundRect(
color = selectorBgColor,
cornerRadius = CornerRadius(16.dp.toPx())
)
}
.clickable { processIntent(EmbeddingIntent.ChangeSelector(true)) },
contentAlignment = Alignment.Center,
) {
Expand All @@ -175,7 +187,12 @@ private fun ScreenContent(
.fillMaxWidth()
.weight(1f)
.clip(RoundedCornerShape(16.dp))
.background(color = if (!state.selector) MaterialTheme.colorScheme.primary else Color.Transparent)
.drawBehind {
drawRoundRect(
color = selectorBgColor,
cornerRadius = CornerRadius(16.dp.toPx())
)
}
.clickable { processIntent(EmbeddingIntent.ChangeSelector(false)) },
contentAlignment = Alignment.Center,
) {
Expand Down Expand Up @@ -272,17 +289,25 @@ private fun EmbeddingItemComposable(
onItemToggle: (EmbeddingItemUi) -> Unit,
) {
val isApplied = (selector && item.isInPrompt) || (!selector && item.isInNegativePrompt)
val bgColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
val borderColor = MaterialTheme.colorScheme.primary
Row(
modifier = Modifier
.padding(horizontal = 12.dp, vertical = 6.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(16.dp))
.background(color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
.border(
width = 2.dp,
color = if (isApplied) MaterialTheme.colorScheme.primary else Color.Transparent,
shape = RoundedCornerShape(16.dp),
)
.drawBehind {
drawRoundRect(
color = bgColor,
cornerRadius = CornerRadius(16.dp.toPx()),
)
if (!isApplied) return@drawBehind
drawRoundRect(
color = borderColor,
style = Stroke(2.dp.toPx()),
cornerRadius = CornerRadius(16.dp.toPx()),
)
}
.clickable { onItemToggle(item) }
.padding(vertical = 8.dp, horizontal = 12.dp),
verticalAlignment = Alignment.CenterVertically,
Expand Down
33 changes: 21 additions & 12 deletions presentation/src/main/java/com/shifthackz/aisdv1/presentation/modal/extras/ExtrasScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package com.shifthackz.aisdv1.presentation.modal.extras

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
Expand Down Expand Up @@ -33,7 +31,9 @@ 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.graphics.Color
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
Expand All @@ -42,13 +42,13 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.shifthackz.aisdv1.core.extensions.shimmer
import com.shifthackz.android.core.mvi.MviComponent
import com.shifthackz.aisdv1.domain.entity.ServerSource
import com.shifthackz.aisdv1.presentation.model.ErrorState
import com.shifthackz.aisdv1.presentation.model.ExtraType
import com.shifthackz.aisdv1.presentation.widget.error.ErrorComposable
import com.shifthackz.aisdv1.presentation.widget.source.getName
import com.shifthackz.aisdv1.presentation.widget.toolbar.ModalDialogToolbar
import com.shifthackz.android.core.mvi.MviComponent
import org.koin.androidx.compose.koinViewModel
import com.shifthackz.aisdv1.core.localization.R as LocalizationR

Expand Down Expand Up @@ -174,8 +174,8 @@ private fun ScreenContent(
) { index ->
ExtrasItemComposable(
item = state.loras[index],
onLoraSelected = {
processIntent(ExtrasIntent.ToggleItem(it))
onLoraSelected = { item ->
processIntent(ExtrasIntent.ToggleItem(item))
},
)
}
Expand Down Expand Up @@ -204,6 +204,7 @@ private fun ExtrasEmptyState(type: ExtraType, source: ServerSource) {
ServerSource.SWARM_UI -> "../Models/Lora"
else -> ""
}

ExtraType.HyperNet -> when (source) {
ServerSource.AUTOMATIC1111 -> "../models/hypernetworks"
ServerSource.SWARM_UI -> ""
Expand Down Expand Up @@ -234,16 +235,24 @@ private fun ExtrasItemComposable(
item: ExtraItemUi,
onLoraSelected: (ExtraItemUi) -> Unit,
) {
val bgColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
val borderColor = MaterialTheme.colorScheme.primary
Row(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(16.dp))
.background(color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f))
.border(
width = 2.dp,
color = if (item.isApplied) MaterialTheme.colorScheme.primary else Color.Transparent,
shape = RoundedCornerShape(16.dp),
)
.drawBehind {
drawRoundRect(
color = bgColor,
cornerRadius = CornerRadius(16.dp.toPx()),
)
if (!item.isApplied) return@drawBehind
drawRoundRect(
color = borderColor,
style = Stroke(2.dp.toPx()),
cornerRadius = CornerRadius(16.dp.toPx()),
)
}
.clickable { onLoraSelected(item) }
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
Expand Down
30 changes: 22 additions & 8 deletions presentation/src/main/java/com/shifthackz/aisdv1/presentation/screen/donate/DonateScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ package com.shifthackz.aisdv1.presentation.screen.donate
import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
Expand Down Expand Up @@ -37,6 +36,8 @@ 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.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
Expand All @@ -48,9 +49,9 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.shifthackz.aisdv1.core.common.extensions.openUrl
import com.shifthackz.android.core.mvi.MviComponent
import com.shifthackz.aisdv1.domain.entity.Supporter
import com.shifthackz.aisdv1.presentation.widget.item.SupporterItem
import com.shifthackz.android.core.mvi.MviComponent
import org.koin.androidx.compose.koinViewModel
import java.util.Date
import com.shifthackz.aisdv1.core.localization.R as LocalizationR
Expand Down Expand Up @@ -104,12 +105,18 @@ private fun DonateScreenContent(
topStart = 24.dp,
topEnd = 24.dp,
)
val bottomBgColor = MaterialTheme.colorScheme.surface
Column(
modifier = Modifier
.navigationBarsPadding()
.fillMaxWidth()
.background(MaterialTheme.colorScheme.surface, shape)
.clip(shape)
.drawBehind {
drawRoundRect(
color = bottomBgColor,
cornerRadius = CornerRadius(24.dp.toPx()),
)
}
.padding(horizontal = 16.dp)
) {
Row(
Expand Down Expand Up @@ -200,12 +207,19 @@ private fun DonateScreenContent(
MaterialTheme.colorScheme.surfaceTint.copy(alpha = 0.8f)
SupporterItem(
modifier = Modifier
.padding(horizontal = 12.dp)
.padding(top = if (index == 0) 8.dp else 4.dp)
.padding(bottom = 4.dp)
.fillMaxWidth()
.background(bgColor, shape)
.clip(shape),
.padding(
top = if (index == 0) 8.dp else 4.dp,
bottom = 4.dp,
)
.padding(horizontal = 12.dp)
.clip(shape)
.drawBehind {
drawRoundRect(
color = bgColor,
cornerRadius = CornerRadius(12.dp.toPx()),
)
},
supporter = supporter,
)
}
Expand Down
16 changes: 9 additions & 7 deletions ...on/src/main/java/com/shifthackz/aisdv1/presentation/screen/onboarding/OnBoardingScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package com.shifthackz.aisdv1.presentation.screen.onboarding

import androidx.activity.compose.BackHandler
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
Expand All @@ -16,7 +15,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
Expand All @@ -36,14 +34,15 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.unit.dp
import com.shifthackz.android.core.mvi.MviComponent
import com.shifthackz.aisdv1.presentation.model.LaunchSource
import com.shifthackz.aisdv1.presentation.screen.onboarding.page.FormPageContent
import com.shifthackz.aisdv1.presentation.screen.onboarding.page.LocalDiffusionPageContent
import com.shifthackz.aisdv1.presentation.screen.onboarding.page.LookAndFeelPageContent
import com.shifthackz.aisdv1.presentation.screen.onboarding.page.ProviderPageContent
import com.shifthackz.android.core.mvi.MviComponent
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

Expand Down Expand Up @@ -78,6 +77,7 @@ private fun OnBoardingScreenContent(

fun scrollToPage(page: Int) {
if (scrollAnimationJob != null) return
if (pagerState.isScrollInProgress) return
scrollAnimationJob = scope.launch {
pagerState.animateScrollToPage(
page = page,
Expand All @@ -86,7 +86,7 @@ private fun OnBoardingScreenContent(
}.apply { invokeOnCompletion { scrollAnimationJob = null } }
}

BackHandler(pagerState.currentPage > 0) {
BackHandler(pagerState.currentPage > 0 || pagerState.isScrollInProgress) {
scrollToPage(pagerState.currentPage - 1)
}

Expand Down Expand Up @@ -127,7 +127,7 @@ private fun OnBoardingScreenContent(
onClick = {
if (pagerState.currentPage > 0) {
scrollToPage(pagerState.currentPage - 1)
} else if (pagerState.currentPage == 0 && launchSource == LaunchSource.SETTINGS) {
} else if (pagerState.currentPage == 0 && launchSource == LaunchSource.SETTINGS && !pagerState.isScrollInProgress) {
processIntent(OnBoardingIntent.Navigate)
}
},
Expand All @@ -151,7 +151,9 @@ private fun OnBoardingScreenContent(
Box(
modifier = Modifier
.size(8.dp)
.background(color, CircleShape)
.drawBehind {
drawCircle(color = color)
}
)
}
}
Expand All @@ -161,7 +163,7 @@ private fun OnBoardingScreenContent(
shape = RoundedCornerShape(12.dp),
contentPadding = PaddingValues(0.dp),
onClick = {
if (pagerState.currentPage == OnBoardingPage.entries.size - 1) {
if (pagerState.currentPage == OnBoardingPage.entries.size - 1 && !pagerState.isScrollInProgress) {
processIntent(OnBoardingIntent.Navigate)
} else {
scrollToPage(pagerState.currentPage + 1)
Expand Down
Loading