From e24543a29851e09c9048d586b1a373b9d1f93154 Mon Sep 17 00:00:00 2001
From: Arnau Mora <arnyminerz@proton.me>
Date: Wed, 28 Feb 2024 17:35:14 +0100
Subject: [PATCH] Rewrite `WelcomeFragment` to Compose (#582)

* Migrated to Jetpack Compose

Signed-off-by: Arnau Mora Gras <arnyminerz@proton.me>

* Simplify layout, remove animations

---------

Signed-off-by: Arnau Mora Gras <arnyminerz@proton.me>
Co-authored-by: Ricki Hirner <hirner@bitfire.at>
---
 .../davdroid/ui/intro/WelcomeFragment.kt      | 159 ++++++++++++++----
 .../main/res/layout-land/intro_welcome.xml    |  71 --------
 app/src/main/res/layout/intro_welcome.xml     |  67 --------
 3 files changed, 130 insertions(+), 167 deletions(-)
 delete mode 100644 app/src/main/res/layout-land/intro_welcome.xml
 delete mode 100644 app/src/main/res/layout/intro_welcome.xml

diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomeFragment.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomeFragment.kt
index 59492c89..f6a5f725 100644
--- a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomeFragment.kt
+++ b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomeFragment.kt
@@ -5,12 +5,38 @@
 package at.bitfire.davdroid.ui.intro
 
 import android.content.Context
+import android.content.res.Configuration
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.fragment.app.Fragment
-import at.bitfire.davdroid.databinding.IntroWelcomeBinding
+import at.bitfire.davdroid.R
 import dagger.Binds
 import dagger.Module
 import dagger.hilt.InstallIn
@@ -20,39 +46,114 @@ import javax.inject.Inject
 
 class WelcomeFragment: Fragment() {
 
-    private var _binding: IntroWelcomeBinding? = null
-    private val binding get() = _binding!!
-
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
-        _binding = IntroWelcomeBinding.inflate(inflater, container, false)
-
-        if (true /* ose build */) {
-            binding.logo.apply {
-                alpha = 0f
-                animate()
-                    .alpha(1f)
-                    .setDuration(300)
-            }
-            binding.yourDataYourChoice.apply {
-                translationX = -1000f
-                animate()
-                    .translationX(0f)
-                    .setDuration(300)
-            }
-            binding.takeControl.apply {
-                translationX = 1000f
-                animate()
-                    .translationX(0f)
-                    .setDuration(300)
+        return ComposeView(requireContext()).apply {
+            setContent {
+                if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE)
+                    ContentLandscape()
+                else
+                    ContentPortrait()
             }
         }
-
-        return binding.root
     }
 
-    override fun onDestroyView() {
-        super.onDestroyView()
-        _binding = null
+    @Preview(showSystemUi = true)
+    @Composable
+    private fun ContentPortrait() {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = colorResource(R.color.primaryDarkColor)),
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_launcher_foreground),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 48.dp)
+                    .weight(2f)
+            )
+
+            Text(
+                text = stringResource(R.string.intro_slogan1),
+                color = Color.White,
+                style = MaterialTheme.typography.subtitle1.copy(fontSize = 34.sp),
+                lineHeight = 38.sp,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .padding(horizontal = 16.dp)
+            )
+
+            Text(
+                text = stringResource(R.string.intro_slogan2),
+                color = Color.White,
+                style = MaterialTheme.typography.h5.copy(fontSize = 48.sp),
+                lineHeight = 52.sp,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .padding(horizontal = 32.dp)
+                    .padding(
+                        bottom = dimensionResource(
+                            com.github.appintro.R.dimen.appintro2_bottombar_height
+                        )
+                    )
+            )
+        }
+    }
+
+    @Preview(
+        showSystemUi = true,
+        device = "spec:width=411dp,height=891dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape"
+    )
+    @Composable
+    private fun ContentLandscape() {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = colorResource(R.color.primaryDarkColor))
+                .padding(
+                    bottom = dimensionResource(
+                        com.github.appintro.R.dimen.appintro2_bottombar_height
+                    )
+                ),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_launcher_foreground),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .weight(1f)
+            )
+
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 32.dp)
+                    .weight(2f)
+            ) {
+                Text(
+                    text = stringResource(R.string.intro_slogan1),
+                    color = Color.White,
+                    style = MaterialTheme.typography.subtitle1.copy(fontSize = 34.sp),
+                    lineHeight = 38.sp,
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier.fillMaxWidth()
+                )
+
+                Text(
+                    text = stringResource(R.string.intro_slogan2),
+                    color = Color.White,
+                    style = MaterialTheme.typography.h5.copy(fontSize = 48.sp),
+                    lineHeight = 52.sp,
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
     }
 
 
diff --git a/app/src/main/res/layout-land/intro_welcome.xml b/app/src/main/res/layout-land/intro_welcome.xml
deleted file mode 100644
index 16bc0ef1..00000000
--- a/app/src/main/res/layout-land/intro_welcome.xml
+++ /dev/null
@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
-    <data>
-        <import type="android.view.View" />
-    </data>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:paddingBottom="@dimen/appintro2_bottombar_height"
-        android:orientation="vertical"
-        android:gravity="center"
-        android:background="@color/primaryDarkColor">
-
-        <androidx.appcompat.widget.AppCompatImageView
-            android:id="@+id/logoBackground"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toStartOf="@id/yourDataYourChoice"
-            app:srcCompat="@drawable/intro_logo_background" />
-        <androidx.appcompat.widget.AppCompatImageView
-            android:id="@+id/logo"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            app:layout_constraintTop_toTopOf="@id/logoBackground"
-            app:layout_constraintBottom_toBottomOf="@id/logoBackground"
-            app:layout_constraintStart_toStartOf="@id/logoBackground"
-            app:layout_constraintEnd_toEndOf="@id/logoBackground"
-            android:scaleX="1.8"
-            android:scaleY="1.8"
-            app:srcCompat="@drawable/ic_launcher_foreground" />
-
-        <TextView
-            android:id="@+id/yourDataYourChoice"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            app:layout_constraintTop_toTopOf="@id/logoBackground"
-            app:layout_constraintBottom_toTopOf="@id/takeControl"
-            app:layout_constraintStart_toEndOf="@id/logoBackground"
-            app:layout_constraintEnd_toEndOf="parent"
-            android:layout_marginVertical="12dp"
-            android:gravity="center"
-            android:paddingEnd="24dp"
-            style="@style/TextAppearance.MaterialComponents.Subtitle1"
-            app:autoSizeTextType="uniform"
-            app:autoSizeMaxTextSize="34sp"
-            android:textColor="@android:color/white"
-            android:text="@string/intro_slogan1"/>
-
-        <TextView
-            android:id="@+id/takeControl"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            app:layout_constraintTop_toBottomOf="@id/yourDataYourChoice"
-            app:layout_constraintBottom_toBottomOf="@id/logoBackground"
-            app:layout_constraintStart_toEndOf="@id/logoBackground"
-            app:layout_constraintEnd_toEndOf="parent"
-            android:gravity="center"
-            android:paddingEnd="24dp"
-            style="@style/TextAppearance.MaterialComponents.Headline5"
-            app:autoSizeTextType="uniform"
-            app:autoSizeMaxTextSize="48sp"
-            android:textColor="@android:color/white"
-            android:text="@string/intro_slogan2"/>
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>
diff --git a/app/src/main/res/layout/intro_welcome.xml b/app/src/main/res/layout/intro_welcome.xml
deleted file mode 100644
index adc3c427..00000000
--- a/app/src/main/res/layout/intro_welcome.xml
+++ /dev/null
@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
-    <data>
-        <import type="android.view.View" />
-    </data>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:paddingBottom="@dimen/appintro2_bottombar_height"
-        android:orientation="vertical"
-        android:gravity="center"
-        android:background="@color/primaryDarkColor">
-
-        <androidx.appcompat.widget.AppCompatImageView
-            android:id="@+id/logo"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:layout_marginTop="48dp"
-            app:layout_constraintBottom_toTopOf="@id/yourDataYourChoice"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintVertical_weight="2"
-            app:srcCompat="@drawable/ic_launcher_foreground" />
-
-        <TextView
-            android:id="@+id/yourDataYourChoice"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            app:layout_constraintVertical_weight="1"
-            app:layout_constraintTop_toBottomOf="@id/logo"
-            app:layout_constraintBottom_toTopOf="@+id/takeControl"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            android:gravity="center_horizontal|bottom"
-            app:autoSizeTextType="uniform"
-            app:autoSizeMaxTextSize="34sp"
-            android:paddingStart="32dp"
-            android:paddingEnd="32dp"
-            android:maxLines="1"
-            style="@style/TextAppearance.MaterialComponents.Subtitle1"
-            android:textColor="@android:color/white"
-            android:text="@string/intro_slogan1"/>
-
-        <TextView
-            android:id="@+id/takeControl"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            app:layout_constraintVertical_weight="1"
-            app:layout_constraintTop_toBottomOf="@id/yourDataYourChoice"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            android:paddingStart="32dp"
-            android:paddingEnd="32dp"
-            android:gravity="center_horizontal"
-            app:autoSizeTextType="uniform"
-            app:autoSizeMaxTextSize="48sp"
-            android:maxLines="1"
-            style="@style/TextAppearance.MaterialComponents.Headline5"
-            android:textColor="@android:color/white"
-            android:text="@string/intro_slogan2"/>
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>