From e020ae5f17aea98c686bffa478f8e318d2b43ba8 Mon Sep 17 00:00:00 2001
From: Odweta <code.62rdl@aleeas.com>
Date: Fri, 8 Nov 2024 18:59:25 +0100
Subject: [PATCH] made the sign in layout responsive to the keyboard

---
 mobile/.idea/deploymentTargetSelector.xml     |   3 +
 .../inspectionProfiles/Project_Default.xml    |  10 +
 mobile/app/src/main/AndroidManifest.xml       |   3 +-
 .../src/main/java/com/odweta/solon/Launch.kt  |   1 +
 .../src/main/java/com/odweta/solon/SignIn.kt  | 190 ++++++++++--------
 5 files changed, 117 insertions(+), 90 deletions(-)

diff --git a/mobile/.idea/deploymentTargetSelector.xml b/mobile/.idea/deploymentTargetSelector.xml
index bec964a..481bc23 100644
--- a/mobile/.idea/deploymentTargetSelector.xml
+++ b/mobile/.idea/deploymentTargetSelector.xml
@@ -16,6 +16,9 @@
       <SelectionState runConfigName="DefaultPreview">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
+      <SelectionState runConfigName="Preview">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
     </selectionStates>
   </component>
 </project>
\ No newline at end of file
diff --git a/mobile/.idea/inspectionProfiles/Project_Default.xml b/mobile/.idea/inspectionProfiles/Project_Default.xml
index 005afb3..cde3e19 100644
--- a/mobile/.idea/inspectionProfiles/Project_Default.xml
+++ b/mobile/.idea/inspectionProfiles/Project_Default.xml
@@ -3,15 +3,19 @@
     <option name="myName" value="Project Default" />
     <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
@@ -27,21 +31,27 @@
     </inspection_tool>
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/mobile/app/src/main/AndroidManifest.xml b/mobile/app/src/main/AndroidManifest.xml
index ca28995..3354f27 100644
--- a/mobile/app/src/main/AndroidManifest.xml
+++ b/mobile/app/src/main/AndroidManifest.xml
@@ -20,7 +20,8 @@
             android:name=".MainActivity"
             android:exported="true"
             android:label="@string/app_name"
-            android:theme="@style/Theme.Solon">
+            android:theme="@style/Theme.Solon"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
diff --git a/mobile/app/src/main/java/com/odweta/solon/Launch.kt b/mobile/app/src/main/java/com/odweta/solon/Launch.kt
index 810520a..dcfc4d2 100644
--- a/mobile/app/src/main/java/com/odweta/solon/Launch.kt
+++ b/mobile/app/src/main/java/com/odweta/solon/Launch.kt
@@ -119,6 +119,7 @@ fun launchPhase0(ctx: Context, coscope: CoroutineScope) {
 }
 
 private suspend fun launchPhase1(ctx: Context) {
+    // TODO: CONVERT TO SNACKBARS
     val toast: Toast = Toast.makeText(
         ctx,
         "Nelze načíst data, zkuste se připojit k internetu.",
diff --git a/mobile/app/src/main/java/com/odweta/solon/SignIn.kt b/mobile/app/src/main/java/com/odweta/solon/SignIn.kt
index fc47b3e..4741353 100644
--- a/mobile/app/src/main/java/com/odweta/solon/SignIn.kt
+++ b/mobile/app/src/main/java/com/odweta/solon/SignIn.kt
@@ -10,9 +10,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -27,8 +25,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -40,6 +36,15 @@ import com.odweta.solon.ui.theme.PastelYellow
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import androidx.compose.foundation.layout.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.ime
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.tooling.preview.Preview
 
 private var buttonText: MutableState<String> = mutableStateOf("Přihlásit se")
 
@@ -122,96 +127,103 @@ fun SignInScreen() {
 
     Column(
         modifier = Modifier
-            .fillMaxWidth()
+            .fillMaxSize()
             .background(Color.Black)
             .imePadding(),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        // TODO: squishable sign in layout
-
-        Image(
-            painter = painterResource(R.drawable.solon_just_yellow),
-            contentDescription = "Solon logo",
-            modifier = Modifier.size(200.dp)
-        )
-
-        TextField(
-            value = usernameText,
-            onValueChange = { input -> usernameText = input },
+        Column(
             modifier = Modifier
-                .border(width = 5.dp, color = PastelYellow, shape = RoundedCornerShape(
-                    roundedCornerDimen))
-                .width(230.dp),
-            colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.White,               // White text
-                unfocusedTextColor = Color.White,             // White text when not focused
-                focusedContainerColor = Color.Black,          // Black background when focused
-                unfocusedContainerColor = Color.Black,        // Black background when not focused
-                cursorColor = PastelYellow,                   // Yellow cursor
-                focusedIndicatorColor = Color.Black,         // Yellow border when focused
-                unfocusedIndicatorColor = Color.Black        // Yellow border when not focused
-            ),
-        )
-
-        Spacer(modifier = Modifier.height(20.dp))
-
-        TextField(
-            value = passwordText,
-            onValueChange = { input -> passwordText = input },
-            visualTransformation = visualTransformation,
-            modifier = Modifier
-                .width(230.dp)
-                .border(
-                    width = 5.dp,
-                    color = PastelYellow,
-                    shape = RoundedCornerShape(
-                        roundedCornerDimen
-                    )
-                ),
-            colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.White,               // White text
-                unfocusedTextColor = Color.White,             // White text when not focused
-                focusedContainerColor = Color.Black,          // Black background when focused
-                unfocusedContainerColor = Color.Black,        // Black background when not focused
-                cursorColor = PastelYellow,                   // Yellow cursor
-                focusedIndicatorColor = Color.Black,         // Yellow border when focused
-                unfocusedIndicatorColor = Color.Black        // Yellow border when not focused
-            ),
-            trailingIcon = {
-                // Toggle button for showing/hiding password
-                IconButton(onClick = { isPasswordVisible = !isPasswordVisible }) {
-                    Icon(
-                        imageVector = if (isPasswordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff,
-                        contentDescription = if (isPasswordVisible) "Hide password" else "Show password",
-                        tint = Color.Gray // You can customize the icon color
-                    )
-                }
-            }
-        )
-
-        Spacer(modifier = Modifier.height(20.dp))
-
-        Button(
-            onClick = {
-                signInButtonCallback(ctx, coscope, buttonText.value, usernameText, passwordText)
-            },
-            colors = ButtonDefaults.buttonColors(
-                contentColor = Color.White,
-                containerColor = Color.Black
-            ),
-            modifier = Modifier
-                .border(
-                    width = 5.dp,
-                    shape = RoundedCornerShape(roundedCornerDimen),
-                    color = PastelYellow
-                )
-                .width(230.dp)
+                .wrapContentSize(),
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Text(
-                text = buttonText.value,
-                fontSize = 23.sp
+            Image(
+                painter = painterResource(R.drawable.solon_just_yellow),
+                contentDescription = "Solon logo",
+                modifier = Modifier.size(200.dp)
             )
+
+            TextField(
+                value = usernameText,
+                onValueChange = { input -> usernameText = input },
+                modifier = Modifier
+                    .border(
+                        width = 5.dp, color = PastelYellow, shape = RoundedCornerShape(
+                            roundedCornerDimen
+                        )
+                    )
+                    .width(230.dp),
+                colors = TextFieldDefaults.colors(
+                    focusedTextColor = Color.White,               // White text
+                    unfocusedTextColor = Color.White,             // White text when not focused
+                    focusedContainerColor = Color.Black,          // Black background when focused
+                    unfocusedContainerColor = Color.Black,        // Black background when not focused
+                    cursorColor = PastelYellow,                   // Yellow cursor
+                    focusedIndicatorColor = Color.Black,         // Yellow border when focused
+                    unfocusedIndicatorColor = Color.Black        // Yellow border when not focused
+                ),
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            TextField(
+                value = passwordText,
+                onValueChange = { input -> passwordText = input },
+                visualTransformation = visualTransformation,
+                modifier = Modifier
+                    .width(230.dp)
+                    .border(
+                        width = 5.dp,
+                        color = PastelYellow,
+                        shape = RoundedCornerShape(
+                            roundedCornerDimen
+                        )
+                    ),
+                colors = TextFieldDefaults.colors(
+                    focusedTextColor = Color.White,               // White text
+                    unfocusedTextColor = Color.White,             // White text when not focused
+                    focusedContainerColor = Color.Black,          // Black background when focused
+                    unfocusedContainerColor = Color.Black,        // Black background when not focused
+                    cursorColor = PastelYellow,                   // Yellow cursor
+                    focusedIndicatorColor = Color.Black,         // Yellow border when focused
+                    unfocusedIndicatorColor = Color.Black        // Yellow border when not focused
+                ),
+                trailingIcon = {
+                    // Toggle button for showing/hiding password
+                    IconButton(onClick = { isPasswordVisible = !isPasswordVisible }) {
+                        Icon(
+                            imageVector = if (isPasswordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff,
+                            contentDescription = if (isPasswordVisible) "Hide password" else "Show password",
+                            tint = Color.Gray // You can customize the icon color
+                        )
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            Button(
+                onClick = {
+                    signInButtonCallback(ctx, coscope, buttonText.value, usernameText, passwordText)
+                },
+                colors = ButtonDefaults.buttonColors(
+                    contentColor = Color.White,
+                    containerColor = Color.Black
+                ),
+                modifier = Modifier
+                    .border(
+                        width = 5.dp,
+                        shape = RoundedCornerShape(roundedCornerDimen),
+                        color = PastelYellow
+                    )
+                    .width(230.dp)
+            ) {
+                Text(
+                    text = buttonText.value,
+                    fontSize = 23.sp
+                )
+            }
         }
     }
-}
\ No newline at end of file
+}