Skip to content

Commit a374a57

Browse files
WadeWTWadeWT
authored
Key customisation (#473)
* refactoring some key padding stuff * changing dracula * more key customisation sfuff * Adding preferences for the new options * Adding appropriate icons * getting the borders to work while maintaining a consistent key size * tweaking the magic numbers * cleaning up unused keyborders stuff * removing unused imports * Revert "changing dracula" This reverts commit 19bf665. * lint fixes * More lint * just one more lint fix, I swear * finally learnt how to use formatKotlin... * fixes from code review
1 parent 9b31657 commit a374a57

6 files changed

Lines changed: 281 additions & 63 deletions

File tree

‎app/src/main/java/com/dessalines/thumbkey/db/AppDb.kt‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ const val DEFAULT_SPACEBAR_MULTITAPS = 1
5050
const val DEFAULT_SLIDE_SENSITIVITY = 9
5151
const val DEFAULT_SLIDE_ENABLED = 0
5252
const val DEFAULT_BACKDROP_ENABLED = 0
53+
const val DEFAULT_KEY_PADDING = 0
54+
const val DEFAULT_KEY_BORDER_WIDTH = 1
55+
const val DEFAULT_KEY_RADIUS = 0
5356

5457
@Entity
5558
data class AppSettings(
@@ -165,6 +168,21 @@ data class AppSettings(
165168
defaultValue = DEFAULT_BACKDROP_ENABLED.toString(),
166169
)
167170
val backdropEnabled: Int,
171+
@ColumnInfo(
172+
name = "key_padding",
173+
defaultValue = DEFAULT_KEY_PADDING.toString(),
174+
)
175+
val keyPadding: Int,
176+
@ColumnInfo(
177+
name = "key_border_width",
178+
defaultValue = DEFAULT_KEY_BORDER_WIDTH.toString(),
179+
)
180+
val keyBorderWidth: Int,
181+
@ColumnInfo(
182+
name = "key_radius",
183+
defaultValue = DEFAULT_KEY_RADIUS.toString(),
184+
)
185+
val keyRadius: Int,
168186
)
169187

170188
data class LayoutsUpdate(
@@ -233,6 +251,18 @@ data class LookAndFeelUpdate(
233251
name = "backdrop_enabled",
234252
)
235253
val backdropEnabled: Int,
254+
@ColumnInfo(
255+
name = "key_padding",
256+
)
257+
val keyPadding: Int,
258+
@ColumnInfo(
259+
name = "key_border_width",
260+
)
261+
val keyBorderWidth: Int,
262+
@ColumnInfo(
263+
name = "key_radius",
264+
)
265+
val keyRadius: Int,
236266
)
237267

238268
data class BehaviorUpdate(
@@ -418,8 +448,22 @@ val MIGRATION_10_11 = object : Migration(10, 11) {
418448
}
419449
}
420450

451+
val MIGRATION_11_12 = object : Migration(11, 12) {
452+
override fun migrate(database: SupportSQLiteDatabase) {
453+
database.execSQL(
454+
"alter table AppSettings add column key_padding INTEGER NOT NULL default $DEFAULT_KEY_PADDING",
455+
)
456+
database.execSQL(
457+
"alter table AppSettings add column key_border_width INTEGER NOT NULL default $DEFAULT_KEY_BORDER_WIDTH",
458+
)
459+
database.execSQL(
460+
"alter table AppSettings add column key_radius INTEGER NOT NULL default $DEFAULT_KEY_RADIUS",
461+
)
462+
}
463+
}
464+
421465
@Database(
422-
version = 11,
466+
version = 12,
423467
entities = [AppSettings::class],
424468
exportSchema = true,
425469
)
@@ -453,6 +497,7 @@ abstract class AppDB : RoomDatabase() {
453497
MIGRATION_8_9,
454498
MIGRATION_9_10,
455499
MIGRATION_10_11,
500+
MIGRATION_11_12,
456501
)
457502
// Necessary because it can't insert data on creation
458503
.addCallback(object : Callback() {

‎app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardKey.kt‎

Lines changed: 66 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import androidx.compose.animation.core.tween
88
import androidx.compose.animation.fadeOut
99
import androidx.compose.animation.slideInVertically
1010
import androidx.compose.foundation.background
11+
import androidx.compose.foundation.border
1112
import androidx.compose.foundation.clickable
1213
import androidx.compose.foundation.gestures.detectDragGestures
1314
import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -18,6 +19,7 @@ import androidx.compose.foundation.layout.height
1819
import androidx.compose.foundation.layout.padding
1920
import androidx.compose.foundation.layout.size
2021
import androidx.compose.foundation.layout.width
22+
import androidx.compose.foundation.shape.RoundedCornerShape
2123
import androidx.compose.material3.Icon
2224
import androidx.compose.material3.MaterialTheme
2325
import androidx.compose.material3.Text
@@ -33,6 +35,7 @@ import androidx.compose.runtime.rememberCoroutineScope
3335
import androidx.compose.runtime.setValue
3436
import androidx.compose.ui.Alignment
3537
import androidx.compose.ui.Modifier
38+
import androidx.compose.ui.draw.clip
3639
import androidx.compose.ui.graphics.Color
3740
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
3841
import androidx.compose.ui.input.pointer.pointerInput
@@ -41,6 +44,7 @@ import androidx.compose.ui.platform.LocalHapticFeedback
4144
import androidx.compose.ui.text.font.FontWeight
4245
import androidx.compose.ui.unit.Dp
4346
import androidx.compose.ui.unit.dp
47+
import androidx.compose.ui.unit.lerp
4448
import com.dessalines.thumbkey.IMEService
4549
import com.dessalines.thumbkey.utils.FontSizeVariant
4650
import com.dessalines.thumbkey.utils.KeyAction
@@ -67,13 +71,15 @@ fun KeyboardKey(
6771
animationSpeed: Int,
6872
autoCapitalize: Boolean,
6973
spacebarMultiTaps: Boolean,
70-
keyBorders: Boolean,
7174
vibrateOnTap: Boolean,
7275
soundOnTap: Boolean,
7376
hideLetters: Boolean,
7477
hideSymbols: Boolean,
7578
capsLock: Boolean,
76-
keySize: Int,
79+
legendSize: Int,
80+
keyPadding: Int,
81+
keyBorderWidth: Int,
82+
keyRadius: Int,
7783
minSwipeLength: Int,
7884
slideSensitivity: Int,
7985
slideEnabled: Boolean,
@@ -86,7 +92,7 @@ fun KeyboardKey(
8692
onSwitchPosition: () -> Unit,
8793
) {
8894
// Necessary for swipe settings to get updated correctly
89-
val id = key.toString() + animationHelperSpeed + animationSpeed + autoCapitalize + vibrateOnTap + soundOnTap + keySize + minSwipeLength + slideSensitivity + slideEnabled
95+
val id = key.toString() + animationHelperSpeed + animationSpeed + autoCapitalize + vibrateOnTap + soundOnTap + legendSize + minSwipeLength + slideSensitivity + slideEnabled
9096

9197
val ctx = LocalContext.current
9298
val ime = ctx as IMEService
@@ -116,14 +122,11 @@ fun KeyboardKey(
116122
MaterialTheme.colorScheme.inversePrimary
117123
}
118124

119-
val keySizeDp = keySize.dp
120-
val keyPadding = 4.dp
121-
122-
val keyBorderSize = if (keyBorders) {
123-
0.5.dp
124-
} else {
125-
0.dp
126-
}
125+
val borderWidth = keyBorderWidth / 10.0
126+
val keyBorderColour = MaterialTheme.colorScheme.outline
127+
val keySize = legendSize + (keyPadding * 2.0) + (borderWidth * 2.0)
128+
val cornerRadius = (keyRadius / 100.0) * (keySize / 2.0)
129+
val legendPadding = 4.dp + borderWidth.dp
127130

128131
val haptic = LocalHapticFeedback.current
129132
val audioManager = ctx.getSystemService(Context.AUDIO_SERVICE) as AudioManager
@@ -141,9 +144,21 @@ fun KeyboardKey(
141144

142145
val keyboardKeyModifier =
143146
Modifier
144-
.height(keySizeDp)
145-
.width(keySizeDp * key.widthMultiplier)
146-
.padding(keyBorderSize)
147+
.height(keySize.dp)
148+
.width(keySize.dp * key.widthMultiplier)
149+
.padding(keyPadding.dp)
150+
.clip(RoundedCornerShape(cornerRadius.dp))
151+
.then(
152+
if (borderWidth > 0.0) {
153+
Modifier.border(
154+
borderWidth.dp,
155+
keyBorderColour,
156+
shape = RoundedCornerShape(cornerRadius.dp),
157+
)
158+
} else {
159+
(Modifier)
160+
},
161+
)
147162
.background(color = backgroundColor)
148163
// Note: pointerInput has a delay when switching keyboards, so you must use this
149164
.clickable(interactionSource = interactionSource, indication = null) {
@@ -367,96 +382,114 @@ fun KeyboardKey(
367382

368383
// a 3x3 grid
369384
// Use box so they can overlap
385+
// Some magic padding numbers so that large radii don't obscure the legends
386+
val radiusPercent = keyRadius.toFloat() / 100.toFloat()
387+
val yPadding = 0.dp + borderWidth.dp
388+
val diagonalXPadding = lerp(legendPadding, 11.dp + borderWidth.dp, radiusPercent)
389+
val diagonalYPadding = lerp(yPadding, 6.dp + borderWidth.dp, radiusPercent)
390+
370391
Box(
371392
modifier = keyboardKeyModifier,
372393
) {
373394
Box(
374395
contentAlignment = Alignment.TopStart,
375396
modifier = Modifier
376397
.fillMaxSize()
377-
.padding(horizontal = keyPadding),
398+
.padding(
399+
horizontal = diagonalXPadding,
400+
vertical = diagonalYPadding,
401+
),
378402
) {
379403
key.swipes?.get(SwipeDirection.TOP_LEFT)?.let {
380-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
404+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
381405
}
382406
}
383407
Box(
384408
contentAlignment = Alignment.TopCenter,
385409
modifier = Modifier
386410
.fillMaxSize()
387-
.padding(horizontal = keyPadding),
411+
.padding(vertical = yPadding),
388412
) {
389413
key.swipes?.get(SwipeDirection.TOP)?.let {
390-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
414+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
391415
}
392416
}
393417
Box(
394418
contentAlignment = Alignment.TopEnd,
395419
modifier = Modifier
396420
.fillMaxSize()
397-
.padding(horizontal = keyPadding),
421+
.padding(
422+
horizontal = diagonalXPadding,
423+
vertical = diagonalYPadding,
424+
),
398425
) {
399426
key.swipes?.get(SwipeDirection.TOP_RIGHT)?.let {
400-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
427+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
401428
}
402429
}
403430
Box(
404431
contentAlignment = Alignment.CenterStart,
405432
modifier = Modifier
406433
.fillMaxSize()
407-
.padding(horizontal = keyPadding),
434+
.padding(horizontal = legendPadding),
408435
) {
409436
key.swipes?.get(SwipeDirection.LEFT)?.let {
410-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
437+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
411438
}
412439
}
413440
Box(
414441
contentAlignment = Alignment.Center,
415442
modifier = Modifier
416443
.fillMaxSize()
417-
.padding(horizontal = keyPadding),
444+
.padding(legendPadding),
418445
) {
419-
KeyText(key.center, keySizeDp, hideLetters, hideSymbols, capsLock)
446+
KeyText(key.center, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
420447
}
421448

422449
Box(
423450
contentAlignment = Alignment.CenterEnd,
424451
modifier = Modifier
425452
.fillMaxSize()
426-
.padding(horizontal = keyPadding),
453+
.padding(horizontal = legendPadding),
427454
) {
428455
key.swipes?.get(SwipeDirection.RIGHT)?.let {
429-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
456+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
430457
}
431458
}
432459
Box(
433460
contentAlignment = Alignment.BottomStart,
434461
modifier = Modifier
435462
.fillMaxSize()
436-
.padding(horizontal = keyPadding),
463+
.padding(
464+
horizontal = diagonalXPadding,
465+
vertical = diagonalYPadding,
466+
),
437467
) {
438468
key.swipes?.get(SwipeDirection.BOTTOM_LEFT)?.let {
439-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
469+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
440470
}
441471
}
442472
Box(
443473
contentAlignment = Alignment.BottomCenter,
444474
modifier = Modifier
445475
.fillMaxSize()
446-
.padding(horizontal = keyPadding),
476+
.padding(vertical = yPadding),
447477
) {
448478
key.swipes?.get(SwipeDirection.BOTTOM)?.let {
449-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
479+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
450480
}
451481
}
452482
Box(
453483
contentAlignment = Alignment.BottomEnd,
454484
modifier = Modifier
455485
.fillMaxSize()
456-
.padding(horizontal = keyPadding),
486+
.padding(
487+
horizontal = diagonalXPadding,
488+
vertical = diagonalYPadding,
489+
),
457490
) {
458491
key.swipes?.get(SwipeDirection.BOTTOM_RIGHT)?.let {
459-
KeyText(it, keySizeDp, hideLetters, hideSymbols, capsLock)
492+
KeyText(it, (legendSize - borderWidth).dp, hideLetters, hideSymbols, capsLock)
460493
}
461494
}
462495

@@ -492,7 +525,7 @@ fun KeyboardKey(
492525
) {
493526
val fontSize = fontSizeVariantToFontSize(
494527
fontSizeVariant = FontSizeVariant.LARGE,
495-
keySize = keySizeDp,
528+
keySize = legendSize.dp,
496529
)
497530
releasedKey.value?.let { text ->
498531
Text(

0 commit comments

Comments
 (0)