make user sheets popovers on desktop
This commit is contained in:
parent
76d78596cd
commit
ce5c7b972b
6 changed files with 122 additions and 44 deletions
15
lib/helpers/extensions/global_rect.dart
Normal file
15
lib/helpers/extensions/global_rect.dart
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import "package:material_ui/material_ui.dart";
|
||||
|
||||
extension GlobalRect on BuildContext {
|
||||
/// Where the widget this context belongs to is on screen, e.g. to open a
|
||||
/// menu or popover next to it.
|
||||
Rect get globalRect {
|
||||
final overlay = Overlay.of(this).context.findRenderObject() as RenderBox;
|
||||
|
||||
return switch (findRenderObject()) {
|
||||
final RenderBox box =>
|
||||
box.localToGlobal(.zero, ancestor: overlay) & box.size,
|
||||
_ => Rect.zero,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import "package:material_ui/material_ui.dart";
|
||||
import "package:nexus/helpers/extensions/global_rect.dart";
|
||||
import "package:nexus/helpers/extensions/is_desktop.dart";
|
||||
|
||||
extension ShowAdaptiveMenu on BuildContext {
|
||||
|
|
@ -38,11 +39,7 @@ extension ShowAdaptiveMenu on BuildContext {
|
|||
final overlay = Overlay.of(this).context.findRenderObject() as RenderBox;
|
||||
final anchor = switch (globalPosition) {
|
||||
final position? => position & Size.zero,
|
||||
null => switch (findRenderObject()) {
|
||||
final RenderBox box =>
|
||||
box.localToGlobal(.zero, ancestor: overlay) & box.size,
|
||||
_ => Rect.zero,
|
||||
},
|
||||
null => globalRect,
|
||||
};
|
||||
|
||||
await showMenu(
|
||||
|
|
|
|||
35
lib/helpers/extensions/show_adaptive_popover.dart
Normal file
35
lib/helpers/extensions/show_adaptive_popover.dart
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import "package:material_ui/material_ui.dart";
|
||||
import "package:nexus/helpers/extensions/global_rect.dart";
|
||||
import "package:nexus/helpers/extensions/is_desktop.dart";
|
||||
import "package:nexus/helpers/extensions/show_adaptive_sheet.dart";
|
||||
import "package:nexus/widgets/popover_layout.dart";
|
||||
|
||||
extension ShowAdaptivePopover on BuildContext {
|
||||
/// Shows the widget from [builder] in a popover next to the widget this
|
||||
/// context belongs to on desktop, or a bottom sheet on mobile. Use the
|
||||
/// context passed to [builder] to close it.
|
||||
Future<void> showAdaptivePopover(WidgetBuilder builder) {
|
||||
if (!isDesktop) return showAdaptiveSheet(builder);
|
||||
|
||||
final anchor = globalRect;
|
||||
|
||||
return showDialog(
|
||||
context: this,
|
||||
barrierColor: Colors.transparent,
|
||||
useSafeArea: false,
|
||||
builder: (context) => CustomSingleChildLayout(
|
||||
delegate: PopoverLayout(anchor),
|
||||
child: ConstrainedBox(
|
||||
constraints: const .new(maxWidth: 420, maxHeight: 600),
|
||||
child: Material(
|
||||
elevation: 8,
|
||||
clipBehavior: .antiAlias,
|
||||
color: Theme.of(context).colorScheme.surfaceContainer,
|
||||
borderRadius: .circular(16),
|
||||
child: Builder(builder: builder),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import "package:material_ui/material_ui.dart";
|
||||
import "package:nexus/helpers/extensions/show_adaptive_sheet.dart";
|
||||
import "package:nexus/helpers/extensions/show_adaptive_popover.dart";
|
||||
import "package:nexus/models/content/membership.dart";
|
||||
import "package:nexus/widgets/user_bottom_sheet.dart";
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ extension ShowUserPopover on BuildContext {
|
|||
MembershipContent member,
|
||||
String userId, {
|
||||
String? roomId,
|
||||
}) => showAdaptiveSheet(
|
||||
}) => showAdaptivePopover(
|
||||
(context) => UserBottomSheet(member, userId, roomId: roomId),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue