fix: gradient scrims on top/bottom floating bars, increase ModelPill opacity
Content was bleeding through the floating top bar (model pill + menu) and bottom dock (mode pills + input) because they had no background. Added vertical gradient scrims to both areas and bumped ModelPill surface alpha from 0.7 to 0.92.
This commit is contained in:
Bruno Deanoz
parent
320ea855fd
commit
5804b337d9
2 changed files with 53 additions and 28 deletions
|
|
@ -427,37 +427,51 @@ fun ChatScreen(
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Floating Top Menu Button
|
// 2. Floating Top Menu Button
|
||||||
Row(
|
val scrimColor = MaterialTheme.colorScheme.background
|
||||||
|
Box(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.align(Alignment.TopStart)
|
.align(Alignment.TopStart)
|
||||||
.statusBarsPadding()
|
.fillMaxWidth()
|
||||||
.padding(start = 16.dp, top = 10.dp, end = 16.dp),
|
.background(
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
Brush.verticalGradient(
|
||||||
) {
|
colorStops = arrayOf(
|
||||||
GlassSurface(
|
0f to scrimColor,
|
||||||
shape = KaizenShapes.circle,
|
0.7f to scrimColor.copy(alpha = 0.55f),
|
||||||
tintAlpha = GlassTiers.pill(isSystemInDarkTheme()),
|
1f to Color.Transparent,
|
||||||
shadowStack = KaizenShadows.level2,
|
),
|
||||||
cornerRadius = 22.dp,
|
|
||||||
modifier = Modifier
|
|
||||||
.size(44.dp)
|
|
||||||
.clickable { haptics.tick(); scope.launch { drawerState.open() } },
|
|
||||||
) {
|
|
||||||
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
|
|
||||||
Icon(
|
|
||||||
imageVector = Icons.Rounded.Menu,
|
|
||||||
contentDescription = context.getString(R.string.chat_open_menu),
|
|
||||||
tint = MaterialTheme.colorScheme.onBackground,
|
|
||||||
modifier = Modifier.size(20.dp)
|
|
||||||
)
|
)
|
||||||
|
)
|
||||||
|
.statusBarsPadding()
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = Modifier.padding(start = 16.dp, top = 10.dp, end = 16.dp, bottom = 20.dp),
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
) {
|
||||||
|
GlassSurface(
|
||||||
|
shape = KaizenShapes.circle,
|
||||||
|
tintAlpha = GlassTiers.pill(isSystemInDarkTheme()),
|
||||||
|
shadowStack = KaizenShadows.level2,
|
||||||
|
cornerRadius = 22.dp,
|
||||||
|
modifier = Modifier
|
||||||
|
.size(44.dp)
|
||||||
|
.clickable { haptics.tick(); scope.launch { drawerState.open() } },
|
||||||
|
) {
|
||||||
|
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
|
||||||
|
Icon(
|
||||||
|
imageVector = Icons.Rounded.Menu,
|
||||||
|
contentDescription = context.getString(R.string.chat_open_menu),
|
||||||
|
tint = MaterialTheme.colorScheme.onBackground,
|
||||||
|
modifier = Modifier.size(20.dp)
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Spacer(Modifier.width(8.dp))
|
||||||
|
ModelPill(
|
||||||
|
label = modelDisplayName(session.config?.model ?: "", models),
|
||||||
|
onClick = { haptics.tick(); showModelSheet = true },
|
||||||
|
modifier = Modifier.weight(1f, fill = false),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
Spacer(Modifier.width(8.dp))
|
|
||||||
ModelPill(
|
|
||||||
label = modelDisplayName(session.config?.model ?: "", models),
|
|
||||||
onClick = { haptics.tick(); showModelSheet = true },
|
|
||||||
modifier = Modifier.weight(1f, fill = false),
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Error banner when initial data load fails
|
// Error banner when initial data load fails
|
||||||
|
|
@ -485,9 +499,20 @@ fun ChatScreen(
|
||||||
Column(
|
Column(
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.align(Alignment.BottomCenter)
|
.align(Alignment.BottomCenter)
|
||||||
|
.background(
|
||||||
|
Brush.verticalGradient(
|
||||||
|
colorStops = arrayOf(
|
||||||
|
0f to Color.Transparent,
|
||||||
|
0.35f to scrimColor.copy(alpha = 0.6f),
|
||||||
|
0.7f to scrimColor.copy(alpha = 0.92f),
|
||||||
|
1f to scrimColor,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
)
|
||||||
.navigationBarsPadding()
|
.navigationBarsPadding()
|
||||||
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
|
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
|
||||||
) {
|
) {
|
||||||
|
Spacer(Modifier.height(24.dp))
|
||||||
ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() })
|
ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() })
|
||||||
Spacer(Modifier.height(10.dp))
|
Spacer(Modifier.height(10.dp))
|
||||||
ChatInput(
|
ChatInput(
|
||||||
|
|
@ -499,7 +524,7 @@ fun ChatScreen(
|
||||||
onAddClick = { filePicker.launch("*/*") },
|
onAddClick = { filePicker.launch("*/*") },
|
||||||
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } },
|
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } },
|
||||||
)
|
)
|
||||||
Spacer(Modifier.height(16.dp)) // Completely clears keyboard edges on all screens
|
Spacer(Modifier.height(16.dp))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Model picker (bottom sheet), opened by the top pill
|
// Model picker (bottom sheet), opened by the top pill
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ fun ModelPill(label: String, onClick: () -> Unit, modifier: Modifier = Modifier)
|
||||||
Row(
|
Row(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.clip(KaizenShapes.xl)
|
.clip(KaizenShapes.xl)
|
||||||
.background(cs.surface.copy(alpha = 0.7f))
|
.background(cs.surface.copy(alpha = 0.92f))
|
||||||
.border(1.dp, cs.onSurface.copy(alpha = 0.08f), KaizenShapes.xl)
|
.border(1.dp, cs.onSurface.copy(alpha = 0.08f), KaizenShapes.xl)
|
||||||
.clickable { onClick() }
|
.clickable { onClick() }
|
||||||
.padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp),
|
.padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue