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:
@@ -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);
|
||||||
|
|
||||||
|
|||||||
+12
-15
@@ -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,
|
||||||
},
|
);
|
||||||
),
|
},
|
||||||
],
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user