DecoratedButton done
This commit is contained in:
parent
35eb1c5b5e
commit
eccc58782a
3
.idea/deploymentTargetSelector.xml
generated
3
.idea/deploymentTargetSelector.xml
generated
@ -5,6 +5,9 @@
|
|||||||
<SelectionState runConfigName="app">
|
<SelectionState runConfigName="app">
|
||||||
<option name="selectionMode" value="DROPDOWN" />
|
<option name="selectionMode" value="DROPDOWN" />
|
||||||
</SelectionState>
|
</SelectionState>
|
||||||
|
<SelectionState runConfigName="presentation">
|
||||||
|
<option name="selectionMode" value="DROPDOWN" />
|
||||||
|
</SelectionState>
|
||||||
</selectionStates>
|
</selectionStates>
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
5
.idea/gradle.xml
generated
5
.idea/gradle.xml
generated
@ -1,5 +1,6 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
|
<component name="GradleMigrationSettings" migrationVersion="1" />
|
||||||
<component name="GradleSettings">
|
<component name="GradleSettings">
|
||||||
<option name="linkedExternalProjectsSettings">
|
<option name="linkedExternalProjectsSettings">
|
||||||
<GradleProjectSettings>
|
<GradleProjectSettings>
|
||||||
@ -9,7 +10,9 @@
|
|||||||
<option name="modules">
|
<option name="modules">
|
||||||
<set>
|
<set>
|
||||||
<option value="$PROJECT_DIR$" />
|
<option value="$PROJECT_DIR$" />
|
||||||
<option value="$PROJECT_DIR$/app" />
|
<option value="$PROJECT_DIR$/data" />
|
||||||
|
<option value="$PROJECT_DIR$/domain" />
|
||||||
|
<option value="$PROJECT_DIR$/presentation" />
|
||||||
</set>
|
</set>
|
||||||
</option>
|
</option>
|
||||||
<option name="resolveExternalAnnotations" value="false" />
|
<option name="resolveExternalAnnotations" value="false" />
|
||||||
|
@ -0,0 +1,148 @@
|
|||||||
|
package com.nto.presentation.composable
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material3.Button
|
||||||
|
import androidx.compose.material3.ButtonColors
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.Stable
|
||||||
|
import androidx.compose.runtime.collectAsState
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.graphics.Shape
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.nto.presentation.composable.DecoratedButtonType.Default
|
||||||
|
import com.nto.presentation.composable.DecoratedButtonType.Disabled
|
||||||
|
import com.nto.presentation.theme.NTOTheme
|
||||||
|
import kotlinx.coroutines.flow.MutableStateFlow
|
||||||
|
import kotlinx.coroutines.flow.StateFlow
|
||||||
|
import kotlinx.coroutines.flow.asStateFlow
|
||||||
|
|
||||||
|
enum class DecoratedButtonType {
|
||||||
|
Default, Disabled
|
||||||
|
}
|
||||||
|
|
||||||
|
object DecoratedButtonValues {
|
||||||
|
private val DefaultColors: ButtonColors
|
||||||
|
@Composable get() = ButtonColors(
|
||||||
|
contentColor = NTOTheme.colors.primaryBackground,
|
||||||
|
containerColor = NTOTheme.colors.button,
|
||||||
|
disabledContentColor = Color.Unspecified,
|
||||||
|
disabledContainerColor = Color.Unspecified
|
||||||
|
)
|
||||||
|
|
||||||
|
private val DisabledColors: ButtonColors
|
||||||
|
@Composable get() = ButtonColors(
|
||||||
|
contentColor = NTOTheme.colors.primaryBackground,
|
||||||
|
containerColor = NTOTheme.colors.buttonDisabled,
|
||||||
|
disabledContentColor = Color.Unspecified,
|
||||||
|
disabledContainerColor = Color.Unspecified
|
||||||
|
)
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun getDefaultColor(type: DecoratedButtonType): ButtonColors {
|
||||||
|
return when (type) {
|
||||||
|
Default -> DefaultColors
|
||||||
|
Disabled -> DisabledColors
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* High level element that utilizes [DecoratedButtonType] to obtain [DecoratedButtonValues] and use it's colors accordingly.
|
||||||
|
*
|
||||||
|
* Consists of a button with a text inside it. By fact that's just a wrapper to simplify reusing process.
|
||||||
|
*
|
||||||
|
* @param text text to display inside a button.
|
||||||
|
* @param isDisabled mutable variable that represents button state. Should be in viewmodel or screen state. After being converted to the instance of [DecoratedButtonType] that is used to obtain [ButtonColors] inside [DecoratedButtonValues].
|
||||||
|
* @param modifier modifier that should contain [Modifier.height] and [Modifier.width] or other size definition to work correctly.
|
||||||
|
* @param shape element will be clipped to that shape.
|
||||||
|
* @param onClick function to be invoked on button click.
|
||||||
|
*
|
||||||
|
* @sample [DecoratedButtonSample]
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun DecoratedButton(
|
||||||
|
text: String,
|
||||||
|
isDisabled: Boolean,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
shape: Shape = RoundedCornerShape(10.dp),
|
||||||
|
onClick: () -> Unit,
|
||||||
|
) {
|
||||||
|
NTOTheme {
|
||||||
|
Button(
|
||||||
|
modifier = modifier, shape = shape, colors = DecoratedButtonValues.getDefaultColor(
|
||||||
|
when (isDisabled) {
|
||||||
|
true -> Disabled
|
||||||
|
false -> Default
|
||||||
|
}
|
||||||
|
), onClick = onClick
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
text,
|
||||||
|
style = NTOTheme.typography.displaySmall,
|
||||||
|
color = NTOTheme.colors.secondaryText
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Stable
|
||||||
|
internal class DecoratedButtonSample {
|
||||||
|
class SampleViewModel {
|
||||||
|
private val _state = MutableStateFlow(SampleState())
|
||||||
|
|
||||||
|
val state: StateFlow<SampleState>
|
||||||
|
get() = _state.asStateFlow()
|
||||||
|
|
||||||
|
fun setDisabledState(data: Boolean) {
|
||||||
|
_state.value = _state.value.copy(data = data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
data class SampleState(
|
||||||
|
var data: Boolean = false
|
||||||
|
)
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun InputFieldPreview() {
|
||||||
|
NTOTheme {
|
||||||
|
val sampleViewModel = SampleViewModel()
|
||||||
|
val state = sampleViewModel.state.collectAsState()
|
||||||
|
Column(modifier = Modifier.fillMaxSize()) {
|
||||||
|
//Filled button preset
|
||||||
|
DecoratedButton(
|
||||||
|
text = "Get Started",
|
||||||
|
isDisabled = state.value.data,
|
||||||
|
modifier = Modifier
|
||||||
|
.height(60.dp)
|
||||||
|
.width(300.dp),
|
||||||
|
shape = RoundedCornerShape(10.dp)
|
||||||
|
) {
|
||||||
|
//...
|
||||||
|
}
|
||||||
|
//Disabled button preset
|
||||||
|
Spacer(modifier = Modifier.height(10.dp))
|
||||||
|
DecoratedButton(
|
||||||
|
text = "Get Started",
|
||||||
|
isDisabled = !state.value.data,
|
||||||
|
modifier = Modifier
|
||||||
|
.height(60.dp)
|
||||||
|
.width(300.dp),
|
||||||
|
shape = RoundedCornerShape(10.dp)
|
||||||
|
) {
|
||||||
|
//...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
|||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
@ -29,6 +30,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
|
|||||||
import androidx.navigation.NavHostController
|
import androidx.navigation.NavHostController
|
||||||
import androidx.navigation.compose.rememberNavController
|
import androidx.navigation.compose.rememberNavController
|
||||||
import com.nto.presentation.R
|
import com.nto.presentation.R
|
||||||
|
import com.nto.presentation.composable.DecoratedButton
|
||||||
import com.nto.presentation.composable.InputField
|
import com.nto.presentation.composable.InputField
|
||||||
import com.nto.presentation.composable.InputFieldOptions
|
import com.nto.presentation.composable.InputFieldOptions
|
||||||
import com.nto.presentation.theme.NTOTheme
|
import com.nto.presentation.theme.NTOTheme
|
||||||
@ -114,7 +116,15 @@ fun LoginScreen(
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
Spacer(Modifier.height(50.dp))
|
Spacer(Modifier.height(50.dp))
|
||||||
//TODO: LoginButton
|
DecoratedButton(
|
||||||
|
stringResource(R.string.action_login),
|
||||||
|
state.disabled,
|
||||||
|
modifier = Modifier
|
||||||
|
.width(364.dp)
|
||||||
|
.height(60.dp)
|
||||||
|
) {
|
||||||
|
viewModel.login(navController)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<resources>
|
<resources>
|
||||||
<string name="app_name">presentation</string>
|
<string name="app_name">presentation</string>
|
||||||
<string name="login_button">Войти</string>
|
<string name="action_login">Войти</string>
|
||||||
<string name="text_email">Почта</string>
|
<string name="text_email">Почта</string>
|
||||||
<string name="text_password">Пароль</string>
|
<string name="text_password">Пароль</string>
|
||||||
<string name="greeting_login_description">Войдите в свой аккаунт чтобы продолжить</string>
|
<string name="greeting_login_description">Войдите в свой аккаунт чтобы продолжить</string>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user