made the sign in layout responsive to the keyboard

This commit is contained in:
Odweta
2024-11-08 18:59:25 +01:00
parent d3197111c3
commit e020ae5f17
5 changed files with 117 additions and 90 deletions
+3
View File
@@ -16,6 +16,9 @@
<SelectionState runConfigName="DefaultPreview"> <SelectionState runConfigName="DefaultPreview">
<option name="selectionMode" value="DROPDOWN" /> <option name="selectionMode" value="DROPDOWN" />
</SelectionState> </SelectionState>
<SelectionState runConfigName="Preview">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
</selectionStates> </selectionStates>
</component> </component>
</project> </project>
+10
View File
@@ -3,15 +3,19 @@
<option name="myName" value="Project Default" /> <option name="myName" value="Project Default" />
<inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true"> <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true"> <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
@@ -27,21 +31,27 @@
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true"> <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true"> <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
<option name="composableFile" value="true" /> <option name="composableFile" value="true" />
<option name="previewFile" value="true" />
</inspection_tool> </inspection_tool>
</profile> </profile>
</component> </component>
+2 -1
View File
@@ -20,7 +20,8 @@
android:name=".MainActivity" android:name=".MainActivity"
android:exported="true" android:exported="true"
android:label="@string/app_name" android:label="@string/app_name"
android:theme="@style/Theme.Solon"> android:theme="@style/Theme.Solon"
android:windowSoftInputMode="adjustResize">
<intent-filter> <intent-filter>
<action android:name="android.intent.action.MAIN" /> <action android:name="android.intent.action.MAIN" />
@@ -119,6 +119,7 @@ fun launchPhase0(ctx: Context, coscope: CoroutineScope) {
} }
private suspend fun launchPhase1(ctx: Context) { private suspend fun launchPhase1(ctx: Context) {
// TODO: CONVERT TO SNACKBARS
val toast: Toast = Toast.makeText( val toast: Toast = Toast.makeText(
ctx, ctx,
"Nelze načíst data, zkuste se připojit k internetu.", "Nelze načíst data, zkuste se připojit k internetu.",
@@ -10,9 +10,7 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
@@ -27,8 +25,6 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue 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.graphics.Color
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
@@ -40,6 +36,15 @@ import com.odweta.solon.ui.theme.PastelYellow
import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import kotlinx.coroutines.launch 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") private var buttonText: MutableState<String> = mutableStateOf("Přihlásit se")
@@ -122,96 +127,103 @@ fun SignInScreen() {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxSize()
.background(Color.Black) .background(Color.Black)
.imePadding(), .imePadding(),
horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center,
verticalArrangement = Arrangement.Center horizontalAlignment = Alignment.CenterHorizontally
) { ) {
// TODO: squishable sign in layout Column(
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 modifier = Modifier
.border(width = 5.dp, color = PastelYellow, shape = RoundedCornerShape( .wrapContentSize(),
roundedCornerDimen)) horizontalAlignment = Alignment.CenterHorizontally
.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( Image(
text = buttonText.value, painter = painterResource(R.drawable.solon_just_yellow),
fontSize = 23.sp 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
)
}
} }
} }
} }