Skip to content

Commit 4bcbaa7

Browse files
sds100sds100
committed
#1706 fix: optimize the trigger screen for smaller screens
1 parent 23fe601 commit 4bcbaa7

5 files changed

Lines changed: 163 additions & 92 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
## Bug fixes
1414

1515
- #1686 (more fixes) do not show some screens behind system bars on the left/right side of the device.
16+
- #1701 optimize the trigger screen for smaller screens so elements are less cut off.
1617

1718
## [3.1.1](https://github.com/sds100/KeyMapper/releases/tag/v3.1.1)
1819

‎app/src/free/java/io/github/sds100/keymapper/trigger/AdvancedTriggersBottomSheet.kt‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
package io.github.sds100.keymapper.trigger
22

33
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.Spacer
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.height
89
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.width
11+
import androidx.compose.foundation.rememberScrollState
12+
import androidx.compose.foundation.verticalScroll
913
import androidx.compose.material3.ExperimentalMaterial3Api
1014
import androidx.compose.material3.FilledTonalButton
1115
import androidx.compose.material3.MaterialTheme
@@ -16,6 +20,7 @@ import androidx.compose.material3.SheetValue.Expanded
1620
import androidx.compose.material3.Text
1721
import androidx.compose.runtime.Composable
1822
import androidx.compose.runtime.rememberCoroutineScope
23+
import androidx.compose.ui.Alignment
1924
import androidx.compose.ui.Modifier
2025
import androidx.compose.ui.platform.LocalDensity
2126
import androidx.compose.ui.platform.LocalUriHandler
@@ -59,70 +64,75 @@ private fun AdvancedTriggersBottomSheet(
5964
// Hide drag handle because other bottom sheets don't have it
6065
dragHandle = {},
6166
) {
62-
Spacer(modifier = Modifier.height(8.dp))
63-
64-
Text(
65-
modifier = Modifier.fillMaxWidth(),
66-
textAlign = TextAlign.Center,
67-
text = stringResource(R.string.advanced_triggers_sheet_title),
68-
style = MaterialTheme.typography.headlineMedium,
69-
)
70-
71-
Spacer(modifier = Modifier.height(8.dp))
72-
73-
Text(
74-
modifier = Modifier
75-
.padding(horizontal = 16.dp)
76-
.fillMaxWidth(),
77-
text = stringResource(R.string.advanced_triggers_sheet_text),
78-
)
79-
80-
Spacer(modifier = Modifier.height(8.dp))
81-
82-
Text(
83-
modifier = Modifier
84-
.padding(horizontal = 16.dp)
85-
.fillMaxWidth(),
86-
text = stringResource(R.string.purchasing_not_implemented_bottom_sheet_text),
87-
fontStyle = FontStyle.Italic,
88-
)
89-
90-
Spacer(modifier = Modifier.height(8.dp))
91-
92-
val uriHandler = LocalUriHandler.current
93-
val googlePlayUrl = stringResource(R.string.url_play_store_listing)
94-
95-
Row(
96-
modifier = Modifier
97-
.fillMaxWidth()
98-
.padding(horizontal = 16.dp),
99-
horizontalArrangement = Arrangement.SpaceBetween,
100-
) {
101-
OutlinedButton(
102-
modifier = Modifier,
103-
onClick = {
104-
scope.launch {
105-
sheetState.hide()
106-
onDismissRequest()
107-
}
108-
},
67+
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
68+
Spacer(modifier = Modifier.height(8.dp))
69+
70+
Text(
71+
modifier = Modifier.fillMaxWidth(),
72+
textAlign = TextAlign.Center,
73+
text = stringResource(R.string.advanced_triggers_sheet_title),
74+
style = MaterialTheme.typography.headlineMedium,
75+
)
76+
77+
Spacer(modifier = Modifier.height(8.dp))
78+
79+
Text(
80+
modifier = Modifier
81+
.padding(horizontal = 16.dp)
82+
.fillMaxWidth(),
83+
text = stringResource(R.string.advanced_triggers_sheet_text),
84+
)
85+
86+
Spacer(modifier = Modifier.height(8.dp))
87+
88+
Text(
89+
modifier = Modifier
90+
.padding(horizontal = 16.dp)
91+
.fillMaxWidth(),
92+
text = stringResource(R.string.purchasing_not_implemented_bottom_sheet_text),
93+
fontStyle = FontStyle.Italic,
94+
)
95+
96+
Spacer(modifier = Modifier.height(8.dp))
97+
98+
val uriHandler = LocalUriHandler.current
99+
val googlePlayUrl = stringResource(R.string.url_play_store_listing)
100+
101+
Row(
102+
modifier = Modifier
103+
.fillMaxWidth()
104+
.padding(horizontal = 16.dp),
105+
horizontalArrangement = Arrangement.SpaceBetween,
106+
verticalAlignment = Alignment.CenterVertically,
109107
) {
110-
Text(stringResource(R.string.neg_cancel))
108+
OutlinedButton(
109+
modifier = Modifier,
110+
onClick = {
111+
scope.launch {
112+
sheetState.hide()
113+
onDismissRequest()
114+
}
115+
},
116+
) {
117+
Text(stringResource(R.string.neg_cancel))
118+
}
119+
120+
Spacer(modifier = Modifier.width(8.dp))
121+
122+
FilledTonalButton(
123+
modifier = Modifier,
124+
onClick = {
125+
scope.launch {
126+
uriHandler.openUri(googlePlayUrl)
127+
}
128+
},
129+
) {
130+
Text(stringResource(R.string.purchasing_download_key_mapper_from_google_play))
131+
}
111132
}
112133

113-
FilledTonalButton(
114-
modifier = Modifier,
115-
onClick = {
116-
scope.launch {
117-
uriHandler.openUri(googlePlayUrl)
118-
}
119-
},
120-
) {
121-
Text(stringResource(R.string.purchasing_download_key_mapper_from_google_play))
122-
}
134+
Spacer(Modifier.height(16.dp))
123135
}
124-
125-
Spacer(Modifier.height(16.dp))
126136
}
127137
}
128138

‎app/src/main/java/io/github/sds100/keymapper/trigger/RecordTriggerButtonRow.kt‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
package io.github.sds100.keymapper.trigger
22

3-
import androidx.compose.foundation.layout.Box
43
import androidx.compose.foundation.layout.Row
54
import androidx.compose.foundation.layout.Spacer
65
import androidx.compose.foundation.layout.fillMaxWidth
7-
import androidx.compose.foundation.layout.padding
86
import androidx.compose.foundation.layout.width
7+
import androidx.compose.foundation.text.BasicText
8+
import androidx.compose.foundation.text.TextAutoSize
99
import androidx.compose.material3.ButtonDefaults
1010
import androidx.compose.material3.FilledTonalButton
11+
import androidx.compose.material3.MaterialTheme
1112
import androidx.compose.material3.OutlinedButton
1213
import androidx.compose.material3.Surface
13-
import androidx.compose.material3.Text
1414
import androidx.compose.runtime.Composable
1515
import androidx.compose.ui.Alignment
1616
import androidx.compose.ui.Modifier
1717
import androidx.compose.ui.res.stringResource
1818
import androidx.compose.ui.text.style.TextOverflow
1919
import androidx.compose.ui.tooling.preview.Preview
2020
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
2122
import com.canopas.lib.showcase.IntroShowcase
2223
import io.github.sds100.keymapper.R
2324
import io.github.sds100.keymapper.compose.KeyMapperTheme
@@ -38,7 +39,7 @@ fun RecordTriggerButtonRow(
3839
showAdvancedTriggerTapTarget: Boolean = false,
3940
onAdvancedTriggerTapTargetCompleted: () -> Unit = {},
4041
) {
41-
Row(modifier) {
42+
Row(modifier, verticalAlignment = Alignment.CenterVertically) {
4243
IntroShowcase(
4344
showIntroShowCase = showRecordTriggerTapTarget,
4445
onShowCaseCompleted = onRecordTriggerTapTargetCompleted,
@@ -47,7 +48,6 @@ fun RecordTriggerButtonRow(
4748
RecordTriggerButton(
4849
modifier = Modifier
4950
.weight(1f)
50-
.align(Alignment.Bottom)
5151
.introShowCaseTarget(0, style = keyMapperShowcaseStyle()) {
5252
KeyMapperTapTarget(
5353
OnboardingTapTarget.RECORD_TRIGGER,
@@ -106,9 +106,15 @@ private fun RecordTriggerButton(
106106
onClick = onClick,
107107
colors = colors,
108108
) {
109-
Text(
109+
BasicText(
110110
text = text,
111-
maxLines = 2,
111+
maxLines = 1,
112+
autoSize = TextAutoSize.StepBased(
113+
minFontSize = 5.sp,
114+
maxFontSize = MaterialTheme.typography.labelLarge.fontSize,
115+
),
116+
style = MaterialTheme.typography.labelLarge,
117+
color = { colors.contentColor },
112118
overflow = TextOverflow.Ellipsis,
113119
)
114120
}
@@ -120,20 +126,23 @@ private fun AdvancedTriggersButton(
120126
isEnabled: Boolean,
121127
onClick: () -> Unit,
122128
) {
123-
Box(modifier = modifier) {
124-
OutlinedButton(
125-
modifier = Modifier
126-
.fillMaxWidth()
127-
.padding(top = 20.dp),
128-
enabled = isEnabled,
129-
onClick = onClick,
130-
) {
131-
Text(
132-
text = stringResource(R.string.button_advanced_triggers),
133-
maxLines = 2,
134-
overflow = TextOverflow.Ellipsis,
135-
)
136-
}
129+
OutlinedButton(
130+
modifier = modifier,
131+
enabled = isEnabled,
132+
onClick = onClick,
133+
) {
134+
val color = ButtonDefaults.textButtonColors().contentColor
135+
BasicText(
136+
text = stringResource(R.string.button_advanced_triggers),
137+
maxLines = 1,
138+
autoSize = TextAutoSize.StepBased(
139+
minFontSize = 5.sp,
140+
maxFontSize = MaterialTheme.typography.labelLarge.fontSize,
141+
),
142+
style = MaterialTheme.typography.labelLarge,
143+
color = { color },
144+
overflow = TextOverflow.Ellipsis,
145+
)
137146
}
138147
}
139148

@@ -162,3 +171,16 @@ private fun PreviewStopped() {
162171
}
163172
}
164173
}
174+
175+
@Preview(widthDp = 300)
176+
@Composable
177+
private fun PreviewStoppedCompact() {
178+
KeyMapperTheme {
179+
Surface {
180+
RecordTriggerButtonRow(
181+
modifier = Modifier.fillMaxWidth(),
182+
recordTriggerState = RecordTriggerState.Idle,
183+
)
184+
}
185+
}
186+
}

0 commit comments

Comments
 (0)