fixup! Display Scribe modals correctly when a keyboard is opened
Manage multiline content in scribe bar and spacing between keyboard and scribe bar
This commit is contained in:
@@ -161,6 +161,7 @@ abstract final class AIScribeSizes {
|
|||||||
static const double submenuSpacing = 6;
|
static const double submenuSpacing = 6;
|
||||||
static const double modalSpacing = 26;
|
static const double modalSpacing = 26;
|
||||||
static const double modalWithoutContentSpacing = 12;
|
static const double modalWithoutContentSpacing = 12;
|
||||||
|
static const double keyboardSpacing = 12;
|
||||||
|
|
||||||
// Elevation
|
// Elevation
|
||||||
static const double dialogElevation = 8;
|
static const double dialogElevation = 8;
|
||||||
|
|||||||
@@ -73,15 +73,21 @@ class AiScribeModalWidget extends StatelessWidget {
|
|||||||
|
|
||||||
if (buttonPosition != null && buttonSize != null) {
|
if (buttonPosition != null && buttonSize != null) {
|
||||||
final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
|
final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
|
||||||
|
final keyboardHeightWithSpacing = keyboardHeight > 0 ? keyboardHeight + AIScribeSizes.keyboardSpacing : 0;
|
||||||
final screenSize = MediaQuery.of(context).size;
|
final screenSize = MediaQuery.of(context).size;
|
||||||
final availableHeight = screenSize.height - keyboardHeight;
|
final availableHeight = screenSize.height - keyboardHeightWithSpacing;
|
||||||
|
|
||||||
|
// in tablet mode where we can encounter keyboard and modal we have issues
|
||||||
|
// with calculating the modal height and the search bar is frequently behind the keyboard
|
||||||
|
// that's why we take more space here
|
||||||
|
final searchBarHeight = keyboardHeight > 0 ? AIScribeSizes.searchBarMaxHeight : AIScribeSizes.searchBarMinHeight;
|
||||||
|
|
||||||
final maxHeightModal = hasContent
|
final maxHeightModal = hasContent
|
||||||
? AIScribeSizes.searchBarMinHeight +
|
? searchBarHeight +
|
||||||
AIScribeSizes.fieldSpacing +
|
AIScribeSizes.fieldSpacing +
|
||||||
min(menuActions.length * AIScribeSizes.menuItemHeight,
|
min(menuActions.length * AIScribeSizes.menuItemHeight,
|
||||||
AIScribeSizes.submenuMaxHeight)
|
AIScribeSizes.submenuMaxHeight)
|
||||||
: AIScribeSizes.searchBarMinHeight;
|
: searchBarHeight;
|
||||||
|
|
||||||
final layoutResult = AnchoredModalLayoutCalculator.calculate(
|
final layoutResult = AnchoredModalLayoutCalculator.calculate(
|
||||||
input: AnchoredModalLayoutInput(
|
input: AnchoredModalLayoutInput(
|
||||||
|
|||||||
@@ -50,8 +50,9 @@ class _AiScribeSuggestionWidgetState extends State<AiScribeSuggestionWidget>
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
|
final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
|
||||||
|
final keyboardHeightWithSpacing = keyboardHeight > 0 ? keyboardHeight + AIScribeSizes.keyboardSpacing : 0;
|
||||||
final screenSize = MediaQuery.of(context).size;
|
final screenSize = MediaQuery.of(context).size;
|
||||||
final availableHeight = screenSize.height - keyboardHeight;
|
final availableHeight = screenSize.height - keyboardHeightWithSpacing;
|
||||||
|
|
||||||
final modalWidth = min(
|
final modalWidth = min(
|
||||||
screenSize.width * AIScribeSizes.mobileFactor,
|
screenSize.width * AIScribeSizes.mobileFactor,
|
||||||
@@ -97,7 +98,10 @@ class _AiScribeSuggestionWidgetState extends State<AiScribeSuggestionWidget>
|
|||||||
),
|
),
|
||||||
PositionedDirectional(
|
PositionedDirectional(
|
||||||
start: layout.left,
|
start: layout.left,
|
||||||
bottom: layout.bottom,
|
// layout.bottom is calculated by taking keyboard into account
|
||||||
|
// but positionned without taking keyboard into account
|
||||||
|
// that's why we need to add keyboard height here
|
||||||
|
bottom: layout.bottom + keyboardHeightWithSpacing,
|
||||||
child: _buildModalContainer(
|
child: _buildModalContainer(
|
||||||
width: modalWidth,
|
width: modalWidth,
|
||||||
maxHeight: layout.availableHeight,
|
maxHeight: layout.availableHeight,
|
||||||
|
|||||||
Reference in New Issue
Block a user