fixup! Update Scribe mobile custom prompt bar UI

Fix Scribe Bar hint color in mobile
Fix Scribe Bar spacing allocation in mobile
USe borderRadius instead of ClipRRect
This commit is contained in:
Théo Poizat
2026-03-02 09:38:52 +01:00
committed by Dat H. Pham
parent c35534a12b
commit 0c2fa84f93
3 changed files with 64 additions and 68 deletions
@@ -205,6 +205,9 @@ abstract final class AIScribeSizes {
static const EdgeInsetsGeometry searchBarPadding = static const EdgeInsetsGeometry searchBarPadding =
EdgeInsetsDirectional.symmetric(horizontal: 16); EdgeInsetsDirectional.symmetric(horizontal: 16);
static const EdgeInsetsGeometry searchBarMobilePadding =
EdgeInsetsDirectional.all(16);
static const EdgeInsetsGeometry suggestionContentPadding = static const EdgeInsetsGeometry suggestionContentPadding =
EdgeInsetsDirectional.all(16); EdgeInsetsDirectional.all(16);
@@ -153,16 +153,18 @@ class _AiScribeMobileActionsBottomSheetState
); );
} }
Widget _buildBottomBarContent(BuildContext context) { Widget _buildBottomBar(BuildContext context) {
if (!widget.showCustomPromptBar) { if (!widget.showCustomPromptBar) {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
return AIScribeBar( return Padding(
onCustomPrompt: _onCustomPromptSubmit, padding: AIScribeSizes.searchBarMobilePadding,
imagePaths: widget.imagePaths, child: AIScribeBar(
borderRadius: AIScribeSizes.bottomBarRadius, onCustomPrompt: _onCustomPromptSubmit,
hintStyle: AIScribeTextStyles.searchBar, imagePaths: widget.imagePaths,
borderRadius: AIScribeSizes.bottomBarRadius,
)
); );
} }
@@ -185,8 +187,7 @@ class _AiScribeMobileActionsBottomSheetState
final hasContent = widget.content?.isNotEmpty ?? false; final hasContent = widget.content?.isNotEmpty ?? false;
final bottomBarPadding = MediaQuery.of(context).viewInsets.bottom + 16.0; final bottomBarPadding = MediaQuery.of(context).viewInsets.bottom;
final bottomBarInset = bottomBarPadding + (widget.showCustomPromptBar ? AIScribeSizes.searchBarMaxHeight : 0.0);
return PointerInterceptor( return PointerInterceptor(
child: Container( child: Container(
@@ -198,7 +199,7 @@ class _AiScribeMobileActionsBottomSheetState
child: Stack( child: Stack(
children: [ children: [
Padding( Padding(
padding: EdgeInsets.only(bottom: bottomBarInset), padding: EdgeInsets.only(bottom: bottomBarPadding),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -221,18 +222,14 @@ class _AiScribeMobileActionsBottomSheetState
}, },
), ),
), ),
], ],
), ),
), ),
_buildBottomBar(context)
], ],
), ),
), ),
Positioned(
bottom: bottomBarPadding,
left: 16.0,
right: 16.0,
child: _buildBottomBarContent(context),
),
], ],
), ),
), ),
@@ -10,14 +10,12 @@ class AIScribeBar extends StatefulWidget {
final OnCustomPromptCallback onCustomPrompt; final OnCustomPromptCallback onCustomPrompt;
final ImagePaths imagePaths; final ImagePaths imagePaths;
final double? borderRadius; final double? borderRadius;
final TextStyle? hintStyle;
const AIScribeBar({ const AIScribeBar({
super.key, super.key,
required this.onCustomPrompt, required this.onCustomPrompt,
required this.imagePaths, required this.imagePaths,
this.borderRadius, this.borderRadius
this.hintStyle,
}); });
@override @override
@@ -75,59 +73,57 @@ class _AIScribeBarState extends State<AIScribeBar> {
borderRadius: borderRadius, borderRadius: borderRadius,
gradient: AIScribeColors.barGradient, gradient: AIScribeColors.barGradient,
), ),
child: ClipRRect( child: Container(
borderRadius: borderRadius, width: AIScribeSizes.searchBarWidth,
child: Container( padding: AIScribeSizes.searchBarPadding,
width: AIScribeSizes.searchBarWidth, decoration: BoxDecoration(
padding: AIScribeSizes.searchBarPadding, color: AIScribeColors.background,
decoration: const BoxDecoration( borderRadius: borderRadius,
color: AIScribeColors.background, ),
), constraints: const BoxConstraints(
constraints: const BoxConstraints( maxHeight: AIScribeSizes.searchBarMaxHeight,
maxHeight: AIScribeSizes.searchBarMaxHeight, minHeight: AIScribeSizes.searchBarMinHeight,
minHeight: AIScribeSizes.searchBarMinHeight, ),
), child: Row(
child: Row( children: [
children: [ Expanded(
Expanded( child: KeyboardListener(
child: KeyboardListener( focusNode: _keyboardListenerFocusNode,
focusNode: _keyboardListenerFocusNode, onKeyEvent: _handleKeyboardEvent,
onKeyEvent: _handleKeyboardEvent, child: TextField(
child: TextField( controller: _controller,
controller: _controller, focusNode: _textFieldFocusNode,
focusNode: _textFieldFocusNode, decoration: InputDecoration(
decoration: InputDecoration( hintText: ScribeLocalizations.of(context).customPromptAction,
hintText: ScribeLocalizations.of(context).customPromptAction, hintStyle: AIScribeTextStyles.searchBarHint,
hintStyle: widget.hintStyle ?? AIScribeTextStyles.searchBarHint, border: InputBorder.none,
border: InputBorder.none, contentPadding: const EdgeInsets.symmetric(vertical: 8),
contentPadding: const EdgeInsets.symmetric(vertical: 8), isDense: true,
isDense: true,
),
style: AIScribeTextStyles.searchBar,
maxLines: null,
keyboardType: TextInputType.multiline,
cursorHeight: 16,
), ),
style: AIScribeTextStyles.searchBar,
maxLines: null,
keyboardType: TextInputType.multiline,
cursorHeight: 16,
), ),
), ),
const SizedBox(width: AIScribeSizes.fieldSpacing), ),
ValueListenableBuilder<bool>( const SizedBox(width: AIScribeSizes.fieldSpacing),
valueListenable: _isButtonEnabled, ValueListenableBuilder<bool>(
builder: (_, isEnabled, __) { valueListenable: _isButtonEnabled,
return TMailButtonWidget.fromIcon( builder: (_, isEnabled, __) {
icon: widget.imagePaths.icSend, return TMailButtonWidget.fromIcon(
iconSize: AIScribeSizes.sendIcon, icon: widget.imagePaths.icSend,
padding: AIScribeSizes.sendIconPadding, iconSize: AIScribeSizes.sendIcon,
iconColor: AIScribeColors.background, padding: AIScribeSizes.sendIconPadding,
backgroundColor: isEnabled iconColor: AIScribeColors.background,
? AIScribeColors.sendPromptBackground backgroundColor: isEnabled
: AIScribeColors.sendPromptBackgroundDisabled, ? AIScribeColors.sendPromptBackground
onTapActionCallback: isEnabled ? _onSendPressed : null, : AIScribeColors.sendPromptBackgroundDisabled,
); onTapActionCallback: isEnabled ? _onSendPressed : null,
}, );
), },
], ),
), ],
), ),
), ),
); );