mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
## Summary
- Refine the mobile composer with compact and expanded states, shared
footer fades, haptics, reliable keyboard dismissal, and full-width
camera and photo surfaces.
- Standardize popovers, filters, and section menus with consistent type,
strokes, radii, spacing, icons, and destructive styling.
- Align message presentation with desktop through consistent system
rows, typing and loading feedback, emoji placement, and predictable
photo viewing.
## Validation
- `just mobile-check`
- `just mobile-test` — 1,037 passed, 1 skipped
- Tested on Pixel 10 and a connected iPhone
## Snapshots
<table>
<tr>
<td align="center">Compact composer</td>
<td align="center">Attachment menu</td>
<td align="center">Recent photos</td>
</tr>
<tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--01-compact-composer.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--02-attachment-menu.png"
width="260" /></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/9732022cb13bb39ce797c4faaa714fe4c924955f/pr-3918--03-photo-surface.png"
width="260" /></td>
</tr>
</table>
---------
Signed-off-by: kenny lopez <klopez4212@gmail.com>
138 lines
3.7 KiB
Dart
138 lines
3.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import 'grid.dart';
|
|
|
|
const _fontFamily = 'Inter';
|
|
|
|
/// Avatar size for full channel and thread messages.
|
|
const messageAvatarSize = 42.0;
|
|
|
|
/// Avatar size for conversation-oriented Activity rows.
|
|
const activityAvatarSize = messageAvatarSize;
|
|
|
|
/// Avatar size for compact message-result rows.
|
|
const compactMessageAvatarSize = messageAvatarSize;
|
|
|
|
/// Horizontal space between a message avatar and its content.
|
|
const messageAvatarContentGap = Grid.twelve;
|
|
|
|
/// Primary message copy: 15sp regular on a 20sp line height.
|
|
const messageBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 20 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Message author names: 15sp semibold on a 17sp line height.
|
|
const messageUsernameTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Secondary author metadata: 15sp regular on a tight 17sp line height.
|
|
const messageMetadataTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Message timestamps share the secondary author metadata style.
|
|
const messageTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Compact reply previews: 13.1sp regular on a 17sp line height.
|
|
const replyPreviewTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Reaction counts: 13.1sp medium on a 17sp line height.
|
|
const reactionCountTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Channel and thread titles: 20sp bold on a 24sp line height.
|
|
const channelTitleTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w700,
|
|
height: 24 / 20,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Primary labels in compact content lists.
|
|
const contentListTitleTextStyle = messageUsernameTextStyle;
|
|
|
|
/// Secondary copy in compact content lists.
|
|
const contentListBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Timestamps in compact content lists.
|
|
const contentListTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Filter chip labels use a tighter 15sp Inter treatment.
|
|
const filterChipTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Search fields use the primary 15sp body treatment.
|
|
const searchInputTextStyle = messageBodyTextStyle;
|
|
|
|
/// System message actor names: 15sp semibold on a 17sp line height.
|
|
const systemMessageHeadingTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// System message copy: 15sp regular on a 20sp line height.
|
|
const systemMessageBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 20 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Activity sender names share the primary author style.
|
|
const activityUsernameTextStyle = messageUsernameTextStyle;
|
|
|
|
/// Activity timestamps share the secondary author metadata style.
|
|
const activityTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Activity context labels: 13.1sp medium on a 17sp line height.
|
|
const activityContextTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Activity message previews use the primary message copy style.
|
|
const activityPreviewTextStyle = messageBodyTextStyle;
|