Merge pull request #365 from GetStream/fix/accessibility-text-size-scaling
This commit is contained in:
@@ -97,3 +97,8 @@ extension InputDecorationX on InputDecoration {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
extension BuildContextX on BuildContext {
|
||||
double get textScaleFactor =>
|
||||
MediaQuery.maybeOf(this)?.textScaleFactor ?? 1.0;
|
||||
}
|
||||
|
||||
@@ -319,7 +319,11 @@ class MessageInputState extends State<MessageInput> {
|
||||
),
|
||||
if (widget.parentMessage != null && !widget.hideSendAsDm)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
padding: const EdgeInsets.only(
|
||||
right: 12.0,
|
||||
left: 12.0,
|
||||
bottom: 12.0,
|
||||
),
|
||||
child: _buildDmCheckbox(),
|
||||
),
|
||||
_buildFilePickerSection(),
|
||||
@@ -354,68 +358,68 @@ class MessageInputState extends State<MessageInput> {
|
||||
}
|
||||
|
||||
Widget _buildDmCheckbox() {
|
||||
return Container(
|
||||
height: 36,
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12,
|
||||
bottom: 12,
|
||||
top: 8,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
height: 16,
|
||||
width: 16,
|
||||
foregroundDecoration: BoxDecoration(
|
||||
border: _sendAsDm
|
||||
? null
|
||||
: Border.all(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.black
|
||||
.withOpacity(.5),
|
||||
width: 2,
|
||||
),
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
height: 16,
|
||||
width: 16,
|
||||
foregroundDecoration: BoxDecoration(
|
||||
border: _sendAsDm
|
||||
? null
|
||||
: Border.all(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.black
|
||||
.withOpacity(.5),
|
||||
width: 2,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Center(
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Center(
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
color: _sendAsDm
|
||||
? StreamChatTheme.of(context).colorTheme.accentBlue
|
||||
: StreamChatTheme.of(context).colorTheme.white,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_sendAsDm = !_sendAsDm;
|
||||
});
|
||||
},
|
||||
child: AnimatedCrossFade(
|
||||
duration: Duration(milliseconds: 300),
|
||||
reverseDuration: Duration(milliseconds: 300),
|
||||
crossFadeState: _sendAsDm
|
||||
? CrossFadeState.showFirst
|
||||
: CrossFadeState.showSecond,
|
||||
firstChild: StreamSvgIcon.check(
|
||||
size: 16.0,
|
||||
color: StreamChatTheme.of(context).colorTheme.white,
|
||||
),
|
||||
secondChild: SizedBox(
|
||||
height: 16,
|
||||
width: 16,
|
||||
),
|
||||
color: _sendAsDm
|
||||
? StreamChatTheme.of(context).colorTheme.accentBlue
|
||||
: StreamChatTheme.of(context).colorTheme.white,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_sendAsDm = !_sendAsDm;
|
||||
});
|
||||
},
|
||||
child: AnimatedCrossFade(
|
||||
duration: Duration(milliseconds: 300),
|
||||
reverseDuration: Duration(milliseconds: 300),
|
||||
crossFadeState: _sendAsDm
|
||||
? CrossFadeState.showFirst
|
||||
: CrossFadeState.showSecond,
|
||||
firstChild: StreamSvgIcon.check(
|
||||
size: 16.0,
|
||||
color: StreamChatTheme.of(context).colorTheme.white,
|
||||
),
|
||||
secondChild: SizedBox(
|
||||
height: 16,
|
||||
width: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text('Also send as direct message'),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||||
child: Text(
|
||||
'Also send as direct message',
|
||||
style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.black
|
||||
.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -268,9 +268,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
|
||||
}
|
||||
|
||||
child = LazyLoadScrollView(
|
||||
onEndOfPage: () async {
|
||||
return _messageSearchListController.paginateData();
|
||||
},
|
||||
onEndOfPage: () => _messageSearchListController.paginateData(),
|
||||
child: child,
|
||||
);
|
||||
|
||||
|
||||
@@ -585,7 +585,8 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
),
|
||||
],
|
||||
),
|
||||
if (showBottomRow) SizedBox(height: 20.0),
|
||||
if (showBottomRow)
|
||||
SizedBox(height: context.textScaleFactor * 18.0),
|
||||
],
|
||||
),
|
||||
if (showBottomRow)
|
||||
@@ -682,6 +683,8 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
}
|
||||
};
|
||||
|
||||
const usernameKey = Key('username');
|
||||
|
||||
children.addAll([
|
||||
if (showInChannel || showThreadReplyIndicator) ...[
|
||||
if (showThreadParticipants)
|
||||
@@ -697,7 +700,10 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
if (showUsername)
|
||||
Text(
|
||||
widget.message.user.name,
|
||||
maxLines: 1,
|
||||
key: usernameKey,
|
||||
style: widget.messageTheme.messageAuthor,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (showTimeStamp)
|
||||
Text(
|
||||
@@ -710,18 +716,17 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
|
||||
(showThreadReplyIndicator || showInChannel);
|
||||
|
||||
return Flex(
|
||||
direction: Axis.horizontal,
|
||||
clipBehavior: Clip.none,
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
if (showThreadTail)
|
||||
Container(
|
||||
margin: EdgeInsets.only(
|
||||
bottom: widget.messageTheme.replies.fontSize / 2,
|
||||
bottom: context.textScaleFactor *
|
||||
(widget.messageTheme.replies.fontSize / 2),
|
||||
),
|
||||
child: CustomPaint(
|
||||
size: const Size(16, 32),
|
||||
size: Size(16, 32) * context.textScaleFactor,
|
||||
painter: _ThreadReplyPainter(
|
||||
context: context,
|
||||
color: widget.messageTheme.messageBorderColor,
|
||||
@@ -729,16 +734,20 @@ class _MessageWidgetState extends State<MessageWidget>
|
||||
),
|
||||
),
|
||||
...children.map(
|
||||
(child) => Transform(
|
||||
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
|
||||
alignment: Alignment.center,
|
||||
child: Container(
|
||||
height: 16,
|
||||
child: Center(
|
||||
(child) {
|
||||
Widget mappedChild = Transform(
|
||||
transform: Matrix4.rotationY(widget.reverse ? pi : 0),
|
||||
alignment: Alignment.center,
|
||||
child: Container(
|
||||
height: context.textScaleFactor * 14,
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
if (child.key == usernameKey) {
|
||||
mappedChild = Flexible(child: mappedChild);
|
||||
}
|
||||
return mappedChild;
|
||||
},
|
||||
),
|
||||
].insertBetween(const SizedBox(width: 8.0)),
|
||||
);
|
||||
|
||||
@@ -241,9 +241,7 @@ class _UserListViewState extends State<UserListView>
|
||||
child: Text(message),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
_userListController.loadData();
|
||||
},
|
||||
onPressed: () => _userListController.loadData(),
|
||||
child: Text('Retry'),
|
||||
),
|
||||
],
|
||||
@@ -298,9 +296,7 @@ class _UserListViewState extends State<UserListView>
|
||||
);
|
||||
|
||||
return LazyLoadScrollView(
|
||||
onEndOfPage: () async {
|
||||
return _userListController.paginateData();
|
||||
},
|
||||
onEndOfPage: () => _userListController.paginateData(),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user