Take the icon square up to the touch target, and let it fill the row
Asked for: more space between the header icons, and a box tall enough to fill the header rather than sitting inside it. 48dp does both -- the marks stand 31dp apart and 31dp from the screen edge, measured on the emulator, where the 40dp square had them 23dp apart and 27dp from it. It is also the platform's minimum touch target, which the previous size was short of, and it is taller than any header's text: the session header's row now takes its height from the button and needs no vertical padding of its own, for the same reason the rows add no gap between two buttons. The ring around the mark is still the only spacing rule; every number here moved because it did. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
4dd1e6ed8c
commit
c6bb337c60
2 files changed
+7
-5
No files matched your search
@@ -132,11 +132,13 @@ private val GLYPH_EXTENT = GLYPH_SIZE.value.dp
|
|||||||
* bolted on beside it, which left the two header icons 31dp apart and the outer one 14dp from the
|
* bolted on beside it, which left the two header icons 31dp apart and the outer one 14dp from the
|
||||||
* edge, so a pair that acts on one screen read as two unrelated marks with one falling off it.
|
* edge, so a pair that acts on one screen read as two unrelated marks with one falling off it.
|
||||||
*
|
*
|
||||||
* 40dp is Material's own icon-button state layer, and it is also what the pressed-state ripple
|
* 48dp is the platform's minimum touch target, so the square is also the whole of what a finger has
|
||||||
* draws: at 28dp that circle was inscribed in the mark's own corners. The touch target grows with
|
* to find. It is what the pressed-state ripple draws, too: at 28dp that circle was inscribed in the
|
||||||
* it, from well under the platform's 48dp minimum to within 8dp of it.
|
* mark's own corners, and beside a title it arrived at the first letter. And it is taller than any
|
||||||
|
* header's text, which is what lets the button fill a header row rather than sit in the middle of
|
||||||
|
* one -- the rows add no vertical padding of their own for the same reason they add no gap.
|
||||||
*/
|
*/
|
||||||
private val GLYPH_BUTTON_SIZE = 40.dp
|
private val GLYPH_BUTTON_SIZE = 48.dp
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The ring itself, for putting something that is *not* a glyph button next to one -- a title beside
|
* The ring itself, for putting something that is *not* a glyph button next to one -- a title beside
|
||||||
|
|||||||
@@ -1309,7 +1309,7 @@ fun SessionScreen(settings: ServerSettings, summary: SessionSummary, onBack: ()
|
|||||||
Column(Modifier.fillMaxSize()) {
|
Column(Modifier.fillMaxSize()) {
|
||||||
Row(
|
Row(
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 4.dp),
|
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
|
||||||
) {
|
) {
|
||||||
GlyphButton(BACK_GLYPH, "Back", onBack)
|
GlyphButton(BACK_GLYPH, "Back", onBack)
|
||||||
// A ring's worth, which is what the arrow already keeps on its other three sides --
|
// A ring's worth, which is what the arrow already keeps on its other three sides --
|
||||||
|
|||||||
Reference in new issue
Block a user