Skip to content

Commit

Permalink
Implement CandidateBoard
Browse files Browse the repository at this point in the history
  • Loading branch information
bingzheung committed Aug 17, 2024
1 parent 1547c6e commit b274c59
Show file tree
Hide file tree
Showing 6 changed files with 196 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.jyutping.jyutping.keyboard.KeyboardForm
import org.jyutping.jyutping.keyboard.AlphabeticKeyboard
import org.jyutping.jyutping.keyboard.CandidateBoard
import org.jyutping.jyutping.keyboard.CantoneseNumericKeyboard
import org.jyutping.jyutping.keyboard.CantoneseSymbolicKeyboard
import org.jyutping.jyutping.keyboard.EditingPanel
Expand All @@ -22,6 +23,7 @@ class ComposeKeyboardView(context: Context) : AbstractComposeView(context) {
val keyboardForm = remember { (context as JyutpingInputMethodService).keyboardForm }
when (keyboardForm.value) {
KeyboardForm.Alphabetic -> AlphabeticKeyboard(keyHeight = responsiveKeyHeight())
KeyboardForm.CandidateBoard -> CandidateBoard(height = keyboardHeight())
KeyboardForm.Numeric -> CantoneseNumericKeyboard(keyHeight = responsiveKeyHeight())
KeyboardForm.Symbolic -> CantoneseSymbolicKeyboard(keyHeight = responsiveKeyHeight())
KeyboardForm.Settings -> SettingsScreen(height = keyboardHeight())
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,10 @@ class JyutpingInputMethodService: LifecycleInputMethodService(),
val keyboardForm: MutableState<KeyboardForm> by lazy { mutableStateOf(KeyboardForm.Alphabetic) }
fun transformTo(destination: KeyboardForm) {
if (isBuffering.value) {
bufferText = String.empty
val shouldKeepBuffer: Boolean = (keyboardForm.value == KeyboardForm.Alphabetic) || (keyboardForm.value == KeyboardForm.CandidateBoard)
if (!shouldKeepBuffer) {
bufferText = String.empty
}
}
keyboardForm.value = destination
adjustKeyboardCase()
Expand Down Expand Up @@ -222,6 +225,9 @@ class JyutpingInputMethodService: LifecycleInputMethodService(),
}
selectedCandidates.clear()
}
if (keyboardForm.value == KeyboardForm.CandidateBoard) {
transformTo(KeyboardForm.Alphabetic)
}
}
'r' -> {
if (value.length < 2) {
Expand Down
97 changes: 97 additions & 0 deletions app/src/main/java/org/jyutping/jyutping/keyboard/CandidateBoard.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
package org.jyutping.jyutping.keyboard

import android.view.HapticFeedbackConstants
import android.view.SoundEffectConstants
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
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.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.jyutping.jyutping.JyutpingInputMethodService
import org.jyutping.jyutping.R
import org.jyutping.jyutping.extensions.keyLightEmphatic
import org.jyutping.jyutping.extensions.keyboardLightBackground

@Composable
fun CandidateBoard(height: Dp) {
val collapseWidth: Dp = 44.dp
val collapseHeight: Dp = 44.dp
val minimumCellSize: Dp = 50.dp
val interactionSource = remember { MutableInteractionSource() }
val view = LocalView.current
val context = LocalContext.current as JyutpingInputMethodService
val state = rememberLazyGridState()
LaunchedEffect(context.candidateState.intValue) {
state.scrollToItem(index = 0, scrollOffset = 0)
}
Box(
modifier = Modifier
.background(Color.keyboardLightBackground)
.height(height)
.fillMaxWidth(),
contentAlignment = Alignment.TopEnd
) {
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = minimumCellSize),
modifier = Modifier.fillMaxSize(),
state = state,
verticalArrangement = Arrangement.Top,
horizontalArrangement = Arrangement.Start
) {
items(context.candidates.value) { candidate ->
CandidateView(
candidate = candidate,
modifier = Modifier
.clickable(interactionSource = interactionSource, indication = null) {
view.playSoundEffect(SoundEffectConstants.CLICK)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
context.select(candidate)
}
.padding(2.dp)
)
}
}
IconButton(
onClick = {
view.playSoundEffect(SoundEffectConstants.NAVIGATION_UP)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
context.transformTo(KeyboardForm.Alphabetic)
},
modifier = Modifier
.width(collapseWidth)
.height(collapseHeight)
.background(color = Color.keyLightEmphatic, shape = RoundedCornerShape(4.dp))
) {
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.chevron_up),
contentDescription = null,
modifier = Modifier.size(20.dp)
)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,108 @@ package org.jyutping.jyutping.keyboard

import android.view.HapticFeedbackConstants
import android.view.SoundEffectConstants
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
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.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.jyutping.jyutping.JyutpingInputMethodService
import org.jyutping.jyutping.R
import org.jyutping.jyutping.extensions.keyboardLightBackground

@Composable
fun CandidateScrollBar() {
val expanderWidth: Dp = 44.dp
val dividerHeight: Dp = 24.dp
val interactionSource = remember { MutableInteractionSource() }
val view = LocalView.current
val context = LocalContext.current as JyutpingInputMethodService
val state = rememberLazyListState()
LaunchedEffect(context.candidateState.intValue) {
state.scrollToItem(index = 0, scrollOffset = 0)
}
LazyRow(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
state = state,
horizontalArrangement = Arrangement.spacedBy(0.dp),
verticalAlignment = Alignment.Bottom
Box(
contentAlignment = Alignment.CenterEnd
) {
items(context.candidates.value) {
CandidateView(
candidate = it,
LazyRow(
modifier = Modifier.fillMaxSize(),
state = state,
horizontalArrangement = Arrangement.spacedBy(0.dp),
verticalAlignment = Alignment.Bottom
) {
items(context.candidates.value) {
CandidateView(
candidate = it,
modifier = Modifier
.clickable(interactionSource = interactionSource, indication = null) {
view.playSoundEffect(SoundEffectConstants.CLICK)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
context.select(it)
}
.padding(horizontal = 6.dp)
.padding(bottom = 12.dp)
)
}
}
Box(
modifier = Modifier
.background(Color.keyboardLightBackground)
.width(expanderWidth)
.fillMaxHeight(),
contentAlignment = Alignment.Center
) {
Box(
modifier = Modifier
.clickable(interactionSource = interactionSource, indication = null) {
view.playSoundEffect(SoundEffectConstants.CLICK)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
context.select(it)
}
.padding(horizontal = 6.dp)
.padding(bottom = 12.dp)
)
.height(dividerHeight)
.fillMaxWidth(),
contentAlignment = Alignment.CenterStart
) {
VerticalDivider(
modifier = Modifier.alpha(0.3f),
thickness = 1.dp,
color = Color.Black
)
}
IconButton(
onClick = {
view.playSoundEffect(SoundEffectConstants.NAVIGATION_DOWN)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
context.transformTo(KeyboardForm.CandidateBoard)
},
modifier = Modifier.fillMaxSize()
) {
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.chevron_down),
contentDescription = null,
modifier = Modifier.size(20.dp)
)
}
}
}
}
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/chevron_down.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25.945dp"
android:height="15.551dp"
android:viewportWidth="25.945"
android:viewportHeight="15.551">
<path
android:fillColor="@android:color/black"
android:pathData="M12.797,15.551C13.137,15.551 13.453,15.398 13.688,15.141L25.242,3.105C25.465,2.883 25.594,2.602 25.594,2.273C25.594,1.617 25.09,1.113 24.422,1.113C24.117,1.113 23.813,1.23 23.59,1.441L12.082,13.418L13.523,13.418L1.992,1.441C1.781,1.23 1.488,1.113 1.172,1.113C0.504,1.113 0,1.617 0,2.273C0,2.602 0.141,2.883 0.352,3.117L11.906,15.152C12.164,15.398 12.457,15.551 12.797,15.551Z" />
</vector>
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/chevron_up.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25.945dp"
android:height="15.434dp"
android:viewportWidth="25.945"
android:viewportHeight="15.434">
<path
android:fillColor="@android:color/black"
android:pathData="M0.352,12.434C0.141,12.644 0,12.938 0,13.266C0,13.934 0.504,14.438 1.172,14.438C1.488,14.438 1.793,14.32 1.992,14.098L13.523,2.121L12.082,2.121L23.59,14.098C23.801,14.32 24.117,14.438 24.422,14.438C25.09,14.438 25.594,13.934 25.594,13.266C25.594,12.938 25.465,12.656 25.242,12.434L13.688,0.398C13.453,0.152 13.137,0 12.797,0C12.457,0 12.152,0.141 11.906,0.398Z" />
</vector>

0 comments on commit b274c59

Please sign in to comment.