Merge pull request #262 from PermanentOrg/feature/VSP-1383

Tablet UI for onboarding welcome screen.

app/src/main/java/org/permanent/permanent/ui/PreferencesHelper.kt

@@ -447,9 +447,8 @@ class PreferencesHelper(private val sharedPreferences: SharedPreferences) {
         }
     }
 
-    fun getWindowWidthSizeClass(): WindowWidthSizeClass {
+    fun isTablet(): Boolean {
         val windowWidthSizeString = sharedPreferences.getString(WINDOW_WIDTH_SIZE_CLASS, "")
-        return if (windowWidthSizeString.equals(WindowWidthSizeClass.EXPANDED.toString())) WindowWidthSizeClass.EXPANDED
-        else WindowWidthSizeClass.COMPACT
+        return windowWidthSizeString.equals(WindowWidthSizeClass.EXPANDED.toString())
     }
 }

app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/ArchiveOnboardingScreen.kt

@@ -36,69 +36,69 @@ fun ArchiveOnboardingScreen(
     viewModel: ArchiveOnboardingViewModel
 ) {
     val context = LocalContext.current
-    val horizontalPaddingDp = 32.dp
-    val spacerPaddingDp = 8.dp
     val blue900Color = Color(ContextCompat.getColor(context, R.color.blue900))
     val blueLighterColor = Color(ContextCompat.getColor(context, R.color.blueLighter))
     val pagerState = rememberPagerState(initialPage = 0)
+    val isTablet = viewModel.isTablet()
+
+    val horizontalPaddingDp = if (isTablet) 64.dp else 32.dp
+    val topPaddingDp = if (isTablet) 32.dp else 24.dp
+    val spacerPaddingDp = if (isTablet) 32.dp else 8.dp
+    val progressIndicatorHeight = if (isTablet) 4.dp else 2.dp
 
     Box(
         modifier = Modifier
             .fillMaxSize()
             .background(
                 Brush.verticalGradient(
                     listOf(
-                        blue900Color,
-                        blueLighterColor
+                        blue900Color, blueLighterColor
                     )
                 )
             )
     ) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = horizontalPaddingDp, vertical = 24.dp),
-            verticalArrangement = Arrangement.Top
+                .padding(
+                    start = horizontalPaddingDp, end = horizontalPaddingDp, top = topPaddingDp
+                ), verticalArrangement = Arrangement.Top
         ) {
             Image(
                 painter = painterResource(id = R.drawable.img_logo),
-                contentDescription = "Next",
+                contentDescription = "Logo",
                 modifier = Modifier.size(40.dp)
             )
 
             Box(
-                modifier = Modifier.padding(top = 24.dp)
+                modifier = Modifier.padding(top = topPaddingDp)
             ) {
                 Row(horizontalArrangement = Arrangement.spacedBy(spacerPaddingDp)) {
                     OnboardingProgressIndicator(
-                        horizontalPaddingDp, spacerPaddingDp, 100
+                        progressIndicatorHeight, horizontalPaddingDp, spacerPaddingDp, 100
                     )
 
                     OnboardingProgressIndicator(
-                        horizontalPaddingDp, spacerPaddingDp, 0
+                        progressIndicatorHeight, horizontalPaddingDp, spacerPaddingDp, 0
                     )
 
                     OnboardingProgressIndicator(
-                        horizontalPaddingDp, spacerPaddingDp, 0
+                        progressIndicatorHeight, horizontalPaddingDp, spacerPaddingDp, 0
                     )
                 }
             }
 
             HorizontalPager(pageCount = 2, state = pagerState, userScrollEnabled = false) { page ->
-                if (page == 0) WelcomePage(
-                    horizontalPaddingDp,
-                    pagerState,
-                    viewModel.getAccountName().value
-                )
-                else TypeSelectionPage(horizontalPaddingDp)
+                if (page == 0) WelcomePage(isTablet, pagerState, viewModel.getAccountName().value)
+                else TypeSelectionPage()
             }
         }
     }
 }
 
 @Composable
 fun OnboardingProgressIndicator(
-    horizontalPaddingDp: Dp, spacerPaddingDp: Dp, percent: Int
+    height: Dp, horizontalPaddingDp: Dp, spacerPaddingDp: Dp, percent: Int
 ) {
     val context = LocalContext.current
     val whiteSuperTransparentColor =
@@ -112,7 +112,7 @@ fun OnboardingProgressIndicator(
     CustomProgressIndicator(
         Modifier
             .clip(shape = RoundedCornerShape(3.dp))
-            .height(2.dp),
+            .height(height),
         (screenWidthDp - horizontalPaddingDp - horizontalPaddingDp - spacerPaddingDp - spacerPaddingDp) / 3,
         whiteSuperTransparentColor,
         Brush.horizontalGradient(

app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/TypeSelectionPage.kt

@@ -12,22 +12,21 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.core.content.ContextCompat
 import org.permanent.permanent.R
 
 @Composable
-fun TypeSelectionPage(horizontalPaddingDp: Dp) {
+fun TypeSelectionPage() {
     val context = LocalContext.current
     val whiteColor = Color(ContextCompat.getColor(context, R.color.white))
     val regularFont = FontFamily(Font(R.font.open_sans_regular_ttf))
 
     Column(
         modifier = Modifier
             .fillMaxHeight()
-            .padding(vertical = horizontalPaddingDp),
+            .padding(vertical = 32.dp),
         verticalArrangement = Arrangement.spacedBy(24.dp)
     ) {
         Text(

app/src/main/java/org/permanent/permanent/ui/archiveOnboarding/compose/WelcomePage.kt

@@ -3,15 +3,21 @@
 package org.permanent.permanent.ui.archiveOnboarding.compose
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
@@ -21,18 +27,18 @@ import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.core.content.ContextCompat
+import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import org.permanent.permanent.R
 import org.permanent.permanent.ui.composeComponents.ButtonStyle
 import org.permanent.permanent.ui.composeComponents.TextAndIconButton
 
 @Composable
 fun WelcomePage(
-    horizontalPaddingDp: Dp,
+    isTablet: Boolean,
     pagerState: PagerState,
     accountName: String?
 ) {
@@ -41,19 +47,106 @@ fun WelcomePage(
     val whiteColor = Color(ContextCompat.getColor(context, R.color.white))
     val regularFont = FontFamily(Font(R.font.open_sans_regular_ttf))
 
+    if (isTablet) {
+        TabletBody(accountName, whiteColor, regularFont, coroutineScope, pagerState)
+    } else {
+        PhoneBody(accountName, whiteColor, regularFont, coroutineScope, pagerState)
+    }
+}
+
+@Composable
+private fun TabletBody(
+    accountName: String?,
+    whiteColor: Color,
+    regularFont: FontFamily,
+    coroutineScope: CoroutineScope,
+    pagerState: PagerState
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 64.dp),
+        horizontalArrangement = Arrangement.spacedBy(64.dp),
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f)
+        ) {
+            accountName?.let {
+                val welcomeTitleText = stringResource(id = R.string.welcome_to_permanent_title, it)
+                val start = welcomeTitleText.indexOf(it)
+                val spanStyles = listOf(
+                    AnnotatedString.Range(
+                        SpanStyle(fontWeight = FontWeight.Bold),
+                        start = start,
+                        end = start + it.length
+                    )
+                )
+
+                Text(
+                    text = AnnotatedString(text = welcomeTitleText, spanStyles = spanStyles),
+                    fontSize = 56.sp,
+                    lineHeight = 72.sp,
+                    color = whiteColor,
+                    fontFamily = regularFont
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
+            horizontalAlignment = Alignment.End
+        ) {
+            Text(
+                text = stringResource(id = R.string.welcome_to_permanent_description),
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                color = whiteColor,
+                fontFamily = regularFont
+            )
+
+            Spacer(modifier = Modifier.weight(1.0f))
+
+            Box(
+                modifier = Modifier
+                    .width(168.dp)
+            ) {
+                TextAndIconButton(
+                    ButtonStyle.LIGHT,
+                    text = stringResource(id = R.string.get_started),
+                    showButtonEnabled = true
+                ) {
+                    coroutineScope.launch {
+                        pagerState.animateScrollToPage(1)
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun PhoneBody(
+    accountName: String?,
+    whiteColor: Color,
+    regularFont: FontFamily,
+    coroutineScope: CoroutineScope,
+    pagerState: PagerState
+) {
     Column(
         modifier = Modifier
             .fillMaxHeight()
-            .padding(vertical = horizontalPaddingDp)
+            .padding(vertical = 32.dp)
     ) {
         accountName?.let {
             val welcomeTitleText = stringResource(id = R.string.welcome_to_permanent_title, it)
             val start = welcomeTitleText.indexOf(it)
             val spanStyles = listOf(
                 AnnotatedString.Range(
-                    SpanStyle(fontWeight = FontWeight.Bold),
-                    start = start,
-                    end = start + it.length
+                    SpanStyle(fontWeight = FontWeight.Bold), start = start, end = start + it.length
                 )
             )
 

app/src/main/java/org/permanent/permanent/viewmodels/ArchiveOnboardingViewModel.kt

@@ -39,6 +39,7 @@ class ArchiveOnboardingViewModel(application: Application) :
     private val showMessage = SingleLiveEvent<String>()
     private val showError = SingleLiveEvent<String>()
     private var accountName = MutableLiveData("")
+    private var isTablet = false
     private val isArchiveSelected = MutableLiveData(false)
     private val selectedArchiveType = MutableLiveData<ArchiveType>()
     private val selectedArchiveTypeTitle = MutableLiveData<String>()
@@ -61,6 +62,7 @@ class ArchiveOnboardingViewModel(application: Application) :
 
     init {
         accountName.value = prefsHelper.getAccountName()
+        isTablet = prefsHelper.isTablet()
         getPendingArchives()
     }
 
@@ -296,6 +298,7 @@ class ArchiveOnboardingViewModel(application: Application) :
     fun getShowMessage(): LiveData<String> = showMessage
     fun getShowError(): LiveData<String> = showError
     fun getAccountName() = accountName
+    fun isTablet() = isTablet
     fun getCurrentPage(): MutableLiveData<OnboardingPage> = currentPage
     fun getIsArchiveSelected(): MutableLiveData<Boolean> = isArchiveSelected
     fun getSelectedArchiveType(): MutableLiveData<ArchiveType> = selectedArchiveType