Skip to content

Commit

Permalink
Create tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunkup
sunkup committed Apr 3, 2024
1 parent a77733b commit c7f80f3
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 70 deletions.
260 changes: 192 additions & 68 deletions app/src/main/java/at/bitfire/icsdroid/ui/views/EnterUrlComposable.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,19 @@
package at.bitfire.icsdroid.ui.views

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
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.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
Expand All @@ -24,12 +30,15 @@ import androidx.compose.material.icons.rounded.Warning
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
Expand All @@ -41,7 +50,9 @@ import androidx.compose.ui.unit.dp
import at.bitfire.icsdroid.R
import at.bitfire.icsdroid.ui.ResourceInfo
import at.bitfire.icsdroid.ui.partials.AlertDialog
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun EnterUrlComposable(
requiresAuth: Boolean,
Expand Down Expand Up @@ -93,89 +104,202 @@ fun EnterUrlComposable(
.padding(horizontal = 16.dp)
.verticalScroll(rememberScrollState())
) {
val scope = rememberCoroutineScope()
val state = rememberPagerState(pageCount = { 2 })

TabRow(state.currentPage) {
Tab(state.currentPage == 0, onClick = {
scope.launch { state.scrollToPage(0) }
}) {
Text(
stringResource(R.string.add_calendar_subscribe_url),
modifier = Modifier.padding(8.dp)
)
}
Tab(state.currentPage == 1, onClick = {
scope.launch { state.scrollToPage(1) }
}) {
Text(
stringResource(R.string.add_calendar_subscribe_file),
modifier = Modifier.padding(8.dp)
)
}
}

// Instead of adding vertical padding to column, use spacer so that if content is
// scrolled, it is not spaced
Spacer(modifier = Modifier.height(16.dp))

Text(
text = stringResource(R.string.add_calendar_url_text),
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.fillMaxWidth()
)

TextField(
value = url ?: "",
onValueChange = onUrlChange,
HorizontalPager(
state,
modifier = Modifier
.fillMaxWidth()
.weight(1f),
verticalAlignment = Alignment.Top
) { index ->
Column(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
.padding(end = 16.dp),
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.None,
keyboardType = KeyboardType.Uri,
imeAction = ImeAction.Go
),
keyboardActions = KeyboardActions { onSubmit() },
maxLines = 1,
singleLine = true,
placeholder = { Text(stringResource(R.string.add_calendar_url_sample)) },
isError = urlError != null,
enabled = !isVerifyingUrl
)
AnimatedVisibility(visible = urlError != null) {
Text(
text = urlError ?: "",
color = MaterialTheme.colorScheme.error,
modifier = Modifier.fillMaxWidth(),
style = MaterialTheme.typography.bodySmall
)
.verticalScroll(rememberScrollState())) {
when (index) {
0 -> SubscribeToUrl(
url,
onUrlChange,
onSubmit,
urlError,
isVerifyingUrl,
isInsecure,
supportsAuthentication,
requiresAuth,
username,
password,
onRequiresAuthChange,
onUsernameChange,
onPasswordChange
)

1 -> SubscribeToFile(
url,
onUrlChange,
onSubmit,
urlError,
isVerifyingUrl,
onPickFileRequested
)
}
}
}

Spacer(modifier = Modifier.height(16.dp))
}
}
}

@Composable
private fun ColumnScope.SubscribeToUrl(
url: String?,
onUrlChange: (String) -> Unit,
onSubmit: () -> Unit,
error: String?,
verifying: Boolean,
isInsecure: Boolean,
supportsAuthentication: Boolean,
requiresAuth: Boolean,
username: String?,
password: String?,
onRequiresAuthChange: (Boolean) -> Unit,
onUsernameChange: (String) -> Unit,
onPasswordChange: (String) -> Unit
) {
ResourceInput(
url,
onUrlChange,
verifying,
onSubmit,
error,
labelText = stringResource(R.string.add_calendar_pick_url_label),
description = stringResource(R.string.add_calendar_pick_url_text)
)
AnimatedVisibility(
visible = isInsecure,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Row(Modifier.fillMaxWidth()) {
Icon(imageVector = Icons.Rounded.Warning, contentDescription = null)

Text(
text = stringResource(R.string.add_calendar_pick_file_text),
text = stringResource(R.string.add_calendar_authentication_without_https_warning),
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp)
modifier = Modifier.fillMaxWidth()
)
}
}
AnimatedVisibility(visible = supportsAuthentication) {
LoginCredentialsComposable(
requiresAuth,
username,
password,
onRequiresAuthChange,
onUsernameChange,
onPasswordChange
)
}
}

TextButton(
onClick = onPickFileRequested,
modifier = Modifier.padding(vertical = 15.dp),
enabled = !isVerifyingUrl
) {
Text(stringResource(R.string.add_calendar_pick_file))
}

AnimatedVisibility(
visible = isInsecure,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Row(Modifier.fillMaxWidth()) {
Icon(imageVector = Icons.Rounded.Warning, contentDescription = null)
@Composable
private fun ColumnScope.SubscribeToFile(
uri: String?,
onUriChange: (String) -> Unit,
onSubmit: () -> Unit,
error: String?,
verifying: Boolean,
onPickFileRequested: () -> Unit
) {
ResourceInput(
uri,
onUriChange,
verifying,
onSubmit,
error,
stringResource(R.string.add_calendar_pick_file),
stringResource(R.string.add_calendar_pick_file_text),
onPickFileRequested
)
}

Text(
text = stringResource(R.string.add_calendar_authentication_without_https_warning),
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.fillMaxWidth()
)
@Composable
private fun ColumnScope.ResourceInput(
uri: String?,
onUriChange: (String) -> Unit,
verifying: Boolean,
onSubmit: () -> Unit,
error: String?,
labelText: String,
description: String,
onClick: () -> Unit = {}
) {
Text(
text = description,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.fillMaxWidth()
)
TextField(
value = uri ?: "",
onValueChange = onUriChange,
modifier = Modifier
.fillMaxWidth()
.padding(end = 16.dp),
enabled = !verifying,
readOnly = true,
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.None,
keyboardType = KeyboardType.Uri,
imeAction = ImeAction.Go
),
keyboardActions = KeyboardActions { onSubmit() },
maxLines = 1,
singleLine = true,
placeholder = { Text(labelText) },
isError = error != null,
interactionSource = remember { MutableInteractionSource() }.also { interactionSource ->
LaunchedEffect(interactionSource) {
interactionSource.interactions.collect {
if (it is PressInteraction.Release)
onClick()
}
}

AnimatedVisibility(visible = supportsAuthentication) {
LoginCredentialsComposable(
requiresAuth,
username,
password,
onRequiresAuthChange,
onUsernameChange,
onPasswordChange
)
}

Spacer(modifier = Modifier.height(16.dp))
}
)
AnimatedVisibility(visible = error != null) {
Text(
text = error ?: "",
color = MaterialTheme.colorScheme.error,
modifier = Modifier.fillMaxWidth(),
style = MaterialTheme.typography.bodySmall
)
}
}

Expand Down
8 changes: 6 additions & 2 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@

<!-- AddCalendarActivity -->
<string name="activity_add_calendar">Subscribe to calendar</string>
<string name="add_calendar_subscribe_url">Subscribe to URL</string>
<string name="add_calendar_subscribe_file">Subscribe to file</string>
<string name="add_calendar_need_valid_uri">Valid URI required</string>
<string name="add_calendar_authentication_title">Authentication</string>
<string name="add_calendar_authentication_without_https_warning">Third parties can easily intercept your credentials. Use HTTPS for secure authentication.</string>
Expand All @@ -66,9 +68,11 @@
<string name="add_calendar_title">Title &amp; Color</string>
<string name="add_calendar_title_hint">Calendar name</string>
<string name="add_calendar_pick_color">Pick color</string>
<string name="add_calendar_url_text">Enter a Webcal address:</string>
<string name="add_calendar_pick_url_label">Webcal address</string>
<string name="add_calendar_pick_url_text">Enter a Webcal address.</string>
<string name="add_calendar_pick_file_label">File path</string>
<string name="add_calendar_pick_file_text">Select a file from local storage.</string>
<string name="add_calendar_url_sample" translatable="false">https://example.com/webcal.ics</string>
<string name="add_calendar_pick_file_text">Alternatively, select a file from local storage.</string>
<string name="add_calendar_pick_file">Pick file</string>
<string name="add_calendar_user_name">User name</string>
<string name="add_calendar_validating">Validating calendar resource…</string>
Expand Down

0 comments on commit c7f80f3

Please sign in to comment.