Refactor: Introduce SquareButton and SquareElevatedButton components for consistent button styling
This commit adds two new composable functions, SquareButton and SquareElevatedButton, to standardize button styling across the application. The new components encapsulate the button shape and styling, promoting code reuse and cleaner UI implementation. - Created SquareButton for standard button functionality with customizable onClick and content. - Created SquareElevatedButton for elevated button functionality with similar customization options. - Replaced instances of Button and ElevatedButton in various screens with the new SquareButton and SquareElevatedButton components for consistency and improved maintainability.
This commit is contained in:
parent
bc27106d30
commit
bf6546725f
|
|
@ -0,0 +1,51 @@
|
|||
package chat.revolt.composables.generic
|
||||
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ElevatedButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun SquareButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SquareElevatedButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
ElevatedButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,6 @@ import androidx.compose.foundation.lazy.rememberLazyListState
|
|||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
|
||||
import androidx.compose.material3.FloatingActionButton
|
||||
|
|
@ -70,8 +69,8 @@ import androidx.compose.ui.res.stringResource
|
|||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import chat.revolt.R
|
||||
import chat.revolt.api.RevoltAPI
|
||||
|
|
@ -90,6 +89,7 @@ import chat.revolt.api.settings.SyncedSettings
|
|||
import chat.revolt.composables.generic.GroupIcon
|
||||
import chat.revolt.composables.generic.IconPlaceholder
|
||||
import chat.revolt.composables.generic.RemoteImage
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
import chat.revolt.composables.generic.UserAvatar
|
||||
import chat.revolt.composables.generic.presenceFromStatus
|
||||
import chat.revolt.composables.screens.chat.ChannelIcon
|
||||
|
|
@ -738,16 +738,10 @@ private fun ColumnScope.DirectMessagesChannelListRenderer(
|
|||
textAlign = TextAlign.Center
|
||||
)
|
||||
Spacer(Modifier.height(16.dp))
|
||||
Button(
|
||||
SquareButton(
|
||||
onClick = {
|
||||
onDestinationChanged(ChatRouterDestination.Friends)
|
||||
},
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.new_conversation))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@ import androidx.compose.foundation.layout.padding
|
|||
import androidx.compose.foundation.layout.safeDrawingPadding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
|
|
@ -37,6 +35,7 @@ import androidx.navigation.NavController
|
|||
import chat.revolt.R
|
||||
import chat.revolt.api.ApplicationPlatform
|
||||
import chat.revolt.api.RevoltAPI
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
|
||||
@Composable
|
||||
fun ChoosePlatformScreen(navController: NavController) {
|
||||
|
|
@ -191,7 +190,7 @@ fun ChoosePlatformScreen(navController: NavController) {
|
|||
.fillMaxWidth()
|
||||
.padding(vertical = 8.dp)
|
||||
)
|
||||
Button(
|
||||
SquareButton(
|
||||
onClick = {
|
||||
if(apiUrlValue.value.isNotEmpty()){
|
||||
when(apiUrlValue.value){
|
||||
|
|
@ -201,7 +200,7 @@ fun ChoosePlatformScreen(navController: NavController) {
|
|||
ApplicationPlatform.REVOLT.baseUrl -> RevoltAPI.setPlatform(
|
||||
ApplicationPlatform.REVOLT
|
||||
)
|
||||
else -> return@Button
|
||||
else -> return@SquareButton
|
||||
}
|
||||
}
|
||||
navController.navigate("login/greeting")
|
||||
|
|
@ -210,12 +209,6 @@ fun ChoosePlatformScreen(navController: NavController) {
|
|||
.padding(top = 32.dp, bottom = 16.dp)
|
||||
.fillMaxWidth()
|
||||
.testTag("confirm_platform_button"),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.confirm))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
|||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.safeDrawingPadding
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ElevatedButton
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
|
|
@ -36,12 +33,14 @@ import androidx.compose.ui.res.painterResource
|
|||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
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.compose.ui.tooling.preview.Preview
|
||||
import androidx.navigation.NavController
|
||||
import chat.revolt.R
|
||||
import androidx.navigation.compose.rememberNavController
|
||||
import chat.revolt.R
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
import chat.revolt.composables.generic.SquareElevatedButton
|
||||
|
||||
@OptIn(ExperimentalFoundationApi::class)
|
||||
@Composable
|
||||
|
|
@ -129,34 +128,22 @@ fun LoginGreetingScreen(navController: NavController) {
|
|||
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
Button(
|
||||
SquareButton(
|
||||
onClick = { navController.navigate("login/login") },
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag("view_login_page_button"),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.login))
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(5.dp))
|
||||
|
||||
ElevatedButton(
|
||||
SquareElevatedButton(
|
||||
onClick = { navController.navigate("register/details") },
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag("view_signup_page_button"),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.signup))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@ import androidx.compose.foundation.layout.height
|
|||
import androidx.compose.foundation.layout.imePadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.foundation.text.input.TextObfuscationMode
|
||||
import androidx.compose.foundation.text.input.rememberTextFieldState
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
|
|
@ -58,6 +56,7 @@ import chat.revolt.api.routes.account.EmailPasswordAssessment
|
|||
import chat.revolt.api.routes.account.negotiateAuthentication
|
||||
import chat.revolt.api.routes.onboard.needsOnboarding
|
||||
import chat.revolt.composables.generic.FormTextField
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
import chat.revolt.composables.generic.Weblink
|
||||
import chat.revolt.persistence.KVStorage
|
||||
import chat.revolt.ui.theme.FragmentMono
|
||||
|
|
@ -337,19 +336,13 @@ fun LoginScreen(navController: NavController, viewModel: LoginViewModel = hiltVi
|
|||
)
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
Button(
|
||||
SquareButton(
|
||||
onClick = {
|
||||
viewModel.doLogin()
|
||||
},
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag("confirm_platform_button"),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.login))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.imeNestedScroll
|
|||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.safeDrawingPadding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
|
|
@ -35,6 +34,7 @@ import chat.revolt.R
|
|||
import chat.revolt.api.routes.onboard.OnboardingCompletionBody
|
||||
import chat.revolt.api.routes.onboard.completeOnboarding
|
||||
import chat.revolt.composables.generic.FormTextField
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
import chat.revolt.persistence.KVStorage
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
|
|
@ -168,7 +168,7 @@ fun OnboardingScreen(navController: NavController, onOnboardingComplete: () -> U
|
|||
label = stringResource(R.string.onboarding_username)
|
||||
)
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
Button(
|
||||
SquareButton(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
onClick = {
|
||||
coroutineScope.launch {
|
||||
|
|
@ -176,12 +176,6 @@ fun OnboardingScreen(navController: NavController, onOnboardingComplete: () -> U
|
|||
}
|
||||
},
|
||||
enabled = username.value.isNotBlank(),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = androidx.compose.foundation.shape.CornerSize(8.dp),
|
||||
topEnd = androidx.compose.foundation.shape.CornerSize(8.dp),
|
||||
bottomStart = androidx.compose.foundation.shape.CornerSize(8.dp),
|
||||
bottomEnd = androidx.compose.foundation.shape.CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.complete_registration))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ import androidx.compose.foundation.layout.height
|
|||
import androidx.compose.foundation.layout.imePadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
|
|
@ -52,6 +50,7 @@ import chat.revolt.api.routes.account.RegistrationBody
|
|||
import chat.revolt.api.routes.account.register
|
||||
import chat.revolt.api.routes.misc.getRootRoute
|
||||
import chat.revolt.composables.generic.FormTextField
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
import com.hcaptcha.sdk.HCaptcha
|
||||
import com.hcaptcha.sdk.HCaptchaConfig
|
||||
import com.hcaptcha.sdk.HCaptchaSize
|
||||
|
|
@ -240,7 +239,7 @@ fun RegisterDetailsScreen(
|
|||
|
||||
val context = LocalContext.current
|
||||
|
||||
Button(
|
||||
SquareButton(
|
||||
onClick = {
|
||||
viewModel.initCaptcha(context) {
|
||||
viewModel.doRegistration(navController)
|
||||
|
|
@ -249,12 +248,6 @@ fun RegisterDetailsScreen(
|
|||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag("setup_continue_button"),
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.continue_))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import android.content.Intent
|
|||
import androidx.activity.compose.rememberLauncherForActivityResult
|
||||
import androidx.activity.result.contract.ActivityResultContracts
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
|
|
@ -13,9 +12,6 @@ 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.layout.safeDrawingPadding
|
||||
import androidx.compose.foundation.shape.CornerSize
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
|
|
@ -31,12 +27,13 @@ import androidx.compose.ui.res.painterResource
|
|||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
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.compose.ui.tooling.preview.Preview
|
||||
import androidx.navigation.compose.rememberNavController
|
||||
import androidx.navigation.NavController
|
||||
import androidx.navigation.compose.rememberNavController
|
||||
import chat.revolt.R
|
||||
import chat.revolt.composables.generic.SquareButton
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
|
|
@ -119,7 +116,7 @@ fun RegisterVerifyScreen(navController: NavController, email: String) {
|
|||
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
Button(
|
||||
SquareButton(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(),
|
||||
onClick = {
|
||||
|
|
@ -127,12 +124,6 @@ fun RegisterVerifyScreen(navController: NavController, email: String) {
|
|||
intent.addCategory(Intent.CATEGORY_APP_EMAIL)
|
||||
intentLauncher.launch(intent)
|
||||
},
|
||||
shape = MaterialTheme.shapes.small.copy(
|
||||
topStart = CornerSize(8.dp),
|
||||
topEnd = CornerSize(8.dp),
|
||||
bottomStart = CornerSize(8.dp),
|
||||
bottomEnd = CornerSize(8.dp)
|
||||
)
|
||||
) {
|
||||
Text(text = stringResource(R.string.open_mail_app))
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue