fix bottom strip: icon sizing, rail padding, status alignment
Phosphor icons: reduced font size from 0.88 to 0.75 in unit space and center-aligned paragraph to prevent horizontal stretching. Icon rail: removed top border, tightened padding (10h/4v from 12h/6v), reduced icon size to 14px to fit the 26px strip. Status bar: added horizontal padding and vertical center alignment. Bottom strip row: added top border, crossAxisAlignment.stretch so all three sections fill the height uniformly. Default app font bumped from 14 to 15px. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
+7
-2
@@ -70,7 +70,7 @@ class _RootShellState extends State<_RootShell> {
|
|||||||
return DefaultTextStyle(
|
return DefaultTextStyle(
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
color: tokens.globalForeground,
|
color: tokens.globalForeground,
|
||||||
fontSize: 14,
|
fontSize: 15,
|
||||||
fontWeight: clideUiDefaultWeight,
|
fontWeight: clideUiDefaultWeight,
|
||||||
fontFamily: clideUiFamily,
|
fontFamily: clideUiFamily,
|
||||||
fontFamilyFallback: clideUiFamilyFallback,
|
fontFamilyFallback: clideUiFamilyFallback,
|
||||||
@@ -171,9 +171,11 @@ class RootLayout extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (statusVisible)
|
if (statusVisible)
|
||||||
SizedBox(
|
Container(
|
||||||
height: statusHeight,
|
height: statusHeight,
|
||||||
|
decoration: BoxDecoration(border: Border(top: BorderSide(color: ClideTheme.of(ctx).surface.dividerColor))),
|
||||||
child: Row(
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
children: [
|
children: [
|
||||||
if (sidebarVisible && !sidebarCollapsed)
|
if (sidebarVisible && !sidebarCollapsed)
|
||||||
SizedBox(width: sidebarSize, child: _BottomRail(slot: Slots.sidebar))
|
SizedBox(width: sidebarSize, child: _BottomRail(slot: Slots.sidebar))
|
||||||
@@ -487,7 +489,10 @@ class StatusbarHost extends StatelessWidget {
|
|||||||
final right = items.where((i) => i.priority >= 100).toList();
|
final right = items.where((i) => i.priority >= 100).toList();
|
||||||
return Container(
|
return Container(
|
||||||
color: tokens.statusBarBackground,
|
color: tokens.statusBarBackground,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||||
|
alignment: Alignment.center,
|
||||||
child: Row(
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
for (final item in left) item.build(ctx),
|
for (final item in left) item.build(ctx),
|
||||||
const Spacer(),
|
const Spacer(),
|
||||||
|
|||||||
@@ -39,11 +39,8 @@ class _ClideIconRailState extends State<ClideIconRail> {
|
|||||||
final tokens = ClideTheme.of(context).surface;
|
final tokens = ClideTheme.of(context).surface;
|
||||||
return MouseRegion(
|
return MouseRegion(
|
||||||
onExit: (_) => setState(() => _hoveredId = null),
|
onExit: (_) => setState(() => _hoveredId = null),
|
||||||
child: Container(
|
child: SizedBox(
|
||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border(top: BorderSide(color: tokens.dividerColor)),
|
|
||||||
),
|
|
||||||
child: Row(
|
child: Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
@@ -98,7 +95,7 @@ class _RailButton extends StatelessWidget {
|
|||||||
child: GestureDetector(
|
child: GestureDetector(
|
||||||
onTap: onTap,
|
onTap: onTap,
|
||||||
child: Container(
|
child: Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
border: Border(
|
border: Border(
|
||||||
bottom: BorderSide(
|
bottom: BorderSide(
|
||||||
@@ -109,7 +106,7 @@ class _RailButton extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: ClideIcon(item.icon, size: 16, color: color),
|
child: ClideIcon(item.icon, size: 14, color: color),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -10,13 +10,14 @@ class PhosphorIconPainter extends ClideIconPainter {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
void paint(ui.Canvas canvas, ui.Color color) {
|
void paint(ui.Canvas canvas, ui.Color color) {
|
||||||
final builder = ui.ParagraphBuilder(ui.ParagraphStyle(fontFamily: family, fontSize: 0.88, height: 1.0))
|
final builder = ui.ParagraphBuilder(
|
||||||
|
ui.ParagraphStyle(fontFamily: family, fontSize: 0.75, height: 1.0, textAlign: ui.TextAlign.center),
|
||||||
|
)
|
||||||
..pushStyle(ui.TextStyle(color: color, fontFamily: family))
|
..pushStyle(ui.TextStyle(color: color, fontFamily: family))
|
||||||
..addText(String.fromCharCode(codePoint));
|
..addText(String.fromCharCode(codePoint));
|
||||||
final paragraph = builder.build()..layout(const ui.ParagraphConstraints(width: 1.0));
|
final paragraph = builder.build()..layout(const ui.ParagraphConstraints(width: 1.0));
|
||||||
final dx = (1.0 - paragraph.maxIntrinsicWidth) / 2;
|
|
||||||
final dy = (1.0 - paragraph.height) / 2;
|
final dy = (1.0 - paragraph.height) / 2;
|
||||||
canvas.drawParagraph(paragraph, ui.Offset(dx, dy));
|
canvas.drawParagraph(paragraph, ui.Offset(0, dy));
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
|||||||
Reference in New Issue
Block a user