Skip to content

Commit

Permalink
✨ Implement display max screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@sukchan-0811
sukchan-0811 committed Nov 24, 2023
1 parent 76eb9f1 commit 43515db
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 11 deletions.
138 changes: 132 additions & 6 deletions ...end/app/src/main/java/com/example/speechbuddy/compose/symbolselection/DisplayMaxScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,153 @@ import android.app.Activity
import android.content.Context
import android.content.ContextWrapper
import android.content.pm.ActivityInfo
import androidx.compose.material3.Button
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
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.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import androidx.hilt.navigation.compose.hiltViewModel
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.bumptech.glide.integration.compose.GlideImage
import com.example.speechbuddy.R
import com.example.speechbuddy.compose.utils.ButtonLevel
import com.example.speechbuddy.compose.utils.ButtonUi
import com.example.speechbuddy.domain.models.Symbol
import com.example.speechbuddy.utils.Constants
import com.example.speechbuddy.viewmodel.SymbolSelectionViewModel

@Composable
fun DisplayMaxScreen(
onEscape: () -> Unit
onExit: () -> Unit,
viewModel: SymbolSelectionViewModel = hiltViewModel()
) {
LockScreenOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)

Surface(
modifier = Modifier.zIndex(Float.MAX_VALUE)
modifier = Modifier
.fillMaxSize()
.zIndex(Float.MAX_VALUE),
color = MaterialTheme.colorScheme.background
) {
Text(text = "hello")
Button(onClick = onEscape) {
Text(text = "exit")
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(color = MaterialTheme.colorScheme.surface)
.border(
width = 1.dp,
color = MaterialTheme.colorScheme.surfaceVariant,
shape = RoundedCornerShape(24.dp)
)
) {
Box(
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.CenterStart
) {
LazyRow(
contentPadding = PaddingValues(20.dp),
horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
items(viewModel.selectedSymbols) { symbolItem ->
DisplayMaxSymbolUi(
symbol = symbolItem.symbol
)
}
}
}
}

ButtonUi(
text = stringResource(id = R.string.exit),
onClick = onExit,
modifier = Modifier.widthIn(max = 312.dp),
level = ButtonLevel.QUINARY
)
}
}
}

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun DisplayMaxSymbolUi(
symbol: Symbol
) {
val symbolImagePath =
if (symbol.id > Constants.DEFAULT_SYMBOL_COUNT)
LocalContext.current.filesDir.toString().plus("/") // needs to be modified
else
Constants.DEFAULT_SYMBOL_IMAGE_PATH

Card(
modifier = Modifier.size(160.dp),
shape = RoundedCornerShape(20.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.background
),
border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.onBackground)
) {
Box(contentAlignment = Alignment.TopEnd) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
GlideImage(
model = symbolImagePath.plus("symbol_${symbol.id}.png"),
contentDescription = symbol.text,
modifier = Modifier.height(104.dp),
contentScale = ContentScale.FillHeight
)

Box(
modifier = Modifier
.fillMaxWidth()
.height(56.dp)
.background(color = MaterialTheme.colorScheme.secondaryContainer)
.padding(horizontal = 12.dp),
contentAlignment = Alignment.Center
) {
Text(
text = symbol.text,
textAlign = TextAlign.Center,
maxLines = Constants.MAXIMUM_LINES_FOR_SYMBOL_TEXT,
style = MaterialTheme.typography.bodyLarge
)
}
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions ...pp/src/main/java/com/example/speechbuddy/compose/symbolselection/SymbolSelectionScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@ fun SymbolSelectionScreen(

if (uiState.isDisplayMax) {
hideBottomNavBar()
DisplayMaxScreen(onEscape = {
viewModel.escapeDisplayMax()
DisplayMaxScreen(onExit = {
viewModel.exitDisplayMax()
showBottomNavBar()
})
}
Expand Down
26 changes: 24 additions & 2 deletions frontend/app/src/main/java/com/example/speechbuddy/compose/utils/ButtonUi.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import androidx.compose.ui.unit.dp
import com.example.speechbuddy.ui.SpeechBuddyTheme

enum class ButtonLevel {
PRIMARY, SECONDARY, TERTIARY, QUATERNARY
PRIMARY, SECONDARY, TERTIARY, QUATERNARY, QUINARY
}

/**
Expand All @@ -28,7 +28,7 @@ enum class ButtonLevel {
* @param modifier the Modifier to be applied to this button
* @param isEnabled controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
* @param isError defines the color and the enabled state of this button. When true, this component will be disabled, and it will be displayed in error color
* @param level should be ButtonLevel.PRIMARY, ButtonLevel.SECONDARY, or ButtonLevel.TERTIARY. ButtonLevel.PRIMARY is the default value
* @param level ButtonLevel.PRIMARY is the default value
*/
@Composable
fun ButtonUi(
Expand Down Expand Up @@ -130,6 +130,28 @@ fun ButtonUi(
) {
Text(text = text, style = MaterialTheme.typography.titleMedium)
}

ButtonLevel.QUINARY -> Button(
onClick = onClick,
modifier = modifier
.fillMaxWidth()
.height(48.dp),
enabled = isEnabled,
shape = RoundedCornerShape(10.dp),
colors = if (isError) {
ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.error,
contentColor = MaterialTheme.colorScheme.onError,
disabledContainerColor = MaterialTheme.colorScheme.error,
disabledContentColor = MaterialTheme.colorScheme.onError
)
} else ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant,
contentColor = MaterialTheme.colorScheme.onSurfaceVariant
)
) {
Text(text = text, style = MaterialTheme.typography.titleMedium)
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/app/src/main/java/com/example/speechbuddy/viewmodel/SymbolSelectionViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class SymbolSelectionViewModel @Inject internal constructor(
}
}

fun escapeDisplayMax() {
fun exitDisplayMax() {
_uiState.update { currentState ->
currentState.copy(
isDisplayMax = false
Expand Down
1 change: 1 addition & 0 deletions frontend/app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
<string name="display_max">크게 보기</string>
<string name="clear_all">전체 삭제</string>
<string name="unselect_symbol">상징 선택 취소</string>
<string name="exit">나가기</string>

<!-- Text-to-Speech -->
<string name="talk_with_speech">음성으로 말하기</string>
Expand Down

0 comments on commit 43515db

Please sign in to comment.