diff --git a/lib/pages/player/widgets/drama_comments_sheet.dart b/lib/pages/player/widgets/drama_comments_sheet.dart index c2e0bf8..497961b 100644 --- a/lib/pages/player/widgets/drama_comments_sheet.dart +++ b/lib/pages/player/widgets/drama_comments_sheet.dart @@ -457,7 +457,11 @@ class _DramaCommentsSheetState extends State { ), ); - InputDecoration _composerDecoration(String hint, {required bool focused}) { + InputDecoration _composerDecoration( + String hint, { + required bool focused, + required bool multiline, + }) { final radius = BorderRadius.circular( focused ? _expandedInputRadius : _composerRadius, ); @@ -467,7 +471,11 @@ class _DramaCommentsSheetState extends State { ); return InputDecoration( hintText: hint, - hintStyle: const TextStyle(color: AppColors.muted, fontSize: 14), + hintStyle: TextStyle( + color: AppColors.muted, + fontSize: 14, + height: multiline ? 1.4 : null, + ), counterText: '', contentPadding: EdgeInsets.symmetric( horizontal: 16, @@ -525,7 +533,7 @@ class _DramaCommentsSheetState extends State { child: Container( key: const Key('comment-input-placeholder'), height: _composerHeight, - padding: const EdgeInsets.only(right: 3), + padding: const EdgeInsets.only(right: 6), decoration: BoxDecoration( color: AppColors.commentInput, borderRadius: BorderRadius.circular(_composerRadius), @@ -533,13 +541,21 @@ class _DramaCommentsSheetState extends State { child: Row( children: [ Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 16), - child: Text( - signedIn ? l10n.writeComment : l10n.commentLoginHint, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle(color: AppColors.muted, fontSize: 14), + child: Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.only(left: 16), + child: Text( + signedIn ? l10n.writeComment : l10n.commentLoginHint, + key: const Key('comment-input-placeholder-label'), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + color: AppColors.muted, + fontSize: 14, + height: 1, + ), + ), ), ), ), @@ -566,6 +582,7 @@ class _DramaCommentsSheetState extends State { required bool hasContent, required bool canPost, }) { + final multiline = _input.text.contains('\n'); return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, @@ -587,12 +604,19 @@ class _DramaCommentsSheetState extends State { minLines: 1, maxLines: 4, maxLength: _maxCommentLength, - textAlignVertical: TextAlignVertical.top, - style: const TextStyle(color: AppColors.cream, fontSize: 15), + textAlignVertical: multiline + ? TextAlignVertical.top + : TextAlignVertical.center, + style: TextStyle( + color: AppColors.cream, + fontSize: 15, + height: multiline ? 1.4 : null, + ), cursorColor: AppColors.blue, decoration: _composerDecoration( signedIn ? l10n.writeComment : l10n.commentLoginHint, focused: true, + multiline: multiline, ), onTap: signedIn ? null : _authenticateForComment, ), diff --git a/test/comment/drama_comments_sheet_test.dart b/test/comment/drama_comments_sheet_test.dart index 098a524..dc6b3fc 100644 --- a/test/comment/drama_comments_sheet_test.dart +++ b/test/comment/drama_comments_sheet_test.dart @@ -109,6 +109,16 @@ void main() { final input = find.byKey(const Key('comment-input')); expect(input, findsOneWidget); expect(tester.widget(input).focusNode?.hasFocus, isTrue); + expect( + tester.widget(input).textAlignVertical, + TextAlignVertical.center, + ); + + await tester.enterText(input, 'First line\nSecond line'); + await tester.pump(); + final multilineField = tester.widget(input); + expect(multilineField.textAlignVertical, TextAlignVertical.top); + expect(multilineField.style?.height, 1.4); }); testWidgets('should_gate_guest_post_without_creating_comment', ( @@ -492,6 +502,17 @@ void main() { tester.getSize(find.byKey(const Key('comment-input-placeholder'))).height, 44, ); + final placeholderLabel = find.byKey( + const Key('comment-input-placeholder-label'), + ); + final placeholderSendIcon = find.descendant( + of: find.byKey(const Key('comment-post')), + matching: find.byIcon(Icons.send_rounded), + ); + expect( + tester.getCenter(placeholderLabel).dy, + closeTo(tester.getCenter(placeholderSendIcon).dy, 1), + ); expect(find.byKey(const Key('player-comments-drag-handle')), findsNothing); expect( tester.getSize(find.byKey(const Key('player-comments-close'))),