msglist: Add message action sheet with "Share" button #12
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" | ||
| #include "Generated.xcconfig" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" | ||
| #include "Generated.xcconfig" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| platform :ios, '11.0' | ||
|
|
||
| # CocoaPods analytics sends network stats synchronously affecting flutter build latency. | ||
| ENV['COCOAPODS_DISABLE_STATS'] = 'true' | ||
|
|
||
| project 'Runner', { | ||
| 'Debug' => :debug, | ||
| 'Profile' => :release, | ||
| 'Release' => :release, | ||
| } | ||
|
|
||
| def flutter_root | ||
| generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__) | ||
| unless File.exist?(generated_xcode_build_settings_path) | ||
| raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first" | ||
| end | ||
|
|
||
| File.foreach(generated_xcode_build_settings_path) do |line| | ||
| matches = line.match(/FLUTTER_ROOT\=(.*)/) | ||
| return matches[1].strip if matches | ||
| end | ||
| raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get" | ||
| end | ||
|
|
||
| require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root) | ||
|
|
||
| flutter_ios_podfile_setup | ||
|
|
||
| target 'Runner' do | ||
| use_frameworks! | ||
| use_modular_headers! | ||
|
|
||
| flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__)) | ||
| end | ||
|
|
||
| post_install do |installer| | ||
| installer.pods_project.targets.each do |target| | ||
| flutter_additional_ios_build_settings(target) | ||
| end | ||
| end | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| PODS: | ||
| - Flutter (1.0.0) | ||
| - path_provider_foundation (0.0.1): | ||
| - Flutter | ||
| - FlutterMacOS | ||
| - share_plus (0.0.1): | ||
| - Flutter | ||
|
|
||
| DEPENDENCIES: | ||
| - Flutter (from `Flutter`) | ||
| - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`) | ||
| - share_plus (from `.symlinks/plugins/share_plus/ios`) | ||
|
|
||
| EXTERNAL SOURCES: | ||
| Flutter: | ||
| :path: Flutter | ||
| path_provider_foundation: | ||
| :path: ".symlinks/plugins/path_provider_foundation/darwin" | ||
| share_plus: | ||
| :path: ".symlinks/plugins/share_plus/ios" | ||
|
|
||
| SPEC CHECKSUMS: | ||
| Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854 | ||
| path_provider_foundation: c68054786f1b4f3343858c1e1d0caaded73f0be9 | ||
| share_plus: 056a1e8ac890df3e33cb503afffaf1e9b4fbae68 | ||
|
|
||
| PODFILE CHECKSUM: 985e5b058f26709dc81f9ae74ea2b2775bdbcefe | ||
|
|
||
| COCOAPODS: 1.11.3 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:share_plus/share_plus.dart'; | ||
|
|
||
| import '../api/model/model.dart'; | ||
| import 'draggable_scrollable_modal_bottom_sheet.dart'; | ||
|
|
||
| void showMessageActionSheet({required BuildContext context, required Message message}) { | ||
| showDraggableScrollableModalBottomSheet( | ||
| context: context, | ||
| builder: (BuildContext context) { | ||
| return Column( | ||
| children: [ | ||
| MenuItemButton( | ||
| leadingIcon: Icon(Icons.adaptive.share), | ||
| onPressed: () async { | ||
| // Close the message action sheet; we're about to show the share | ||
| // sheet. (We could do this after the sharing Future settles, but | ||
| // on iOS I get impatient with how slowly our action sheet | ||
| // dismisses in that case.) | ||
| // TODO(#24): Fix iOS bug where this call causes the keyboard to | ||
| // reopen (if it was open at the time of this | ||
| // `showMessageActionSheet` call) and cover a large part of the | ||
| // share sheet. | ||
| Navigator.of(context).pop(); | ||
|
|
||
| // TODO: to support iPads, we're asked to give a | ||
| // `sharePositionOrigin` param, or risk crashing / hanging: | ||
| // https://pub.dev/packages/share_plus#ipad | ||
| // Perhaps a wart in the API; discussion: | ||
| // https://github.com/zulip/zulip-flutter/pull/12#discussion_r1130146231 | ||
| // TODO: Share raw Markdown, not HTML | ||
| await Share.shareWithResult(message.content); | ||
| }, | ||
| child: const Text('Share'), | ||
| ), | ||
| ] | ||
| ); | ||
| }); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class _DraggableScrollableLayer extends StatelessWidget { | ||
| const _DraggableScrollableLayer({required this.builder}); | ||
|
|
||
| final WidgetBuilder builder; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return DraggableScrollableSheet( | ||
| // Match `initial…` to `min…` so that a slight drag downward dismisses | ||
| // the sheet instead of just resizing it. Making them equal gives a | ||
| // buggy experience for some reason | ||
| // ( https://github.com/zulip/zulip-flutter/pull/12#discussion_r1116423455 ) | ||
| // so we work around by make `initial…` a bit bigger. | ||
| minChildSize: 0.25, | ||
| initialChildSize: 0.26, | ||
|
Comment on lines
+16
to
+17
There was a problem hiding this comment. Let's leave a comment pointing to #12 (comment) for why we're setting one of these to epsilon more than the other. |
||
|
|
||
| // With `expand: true`, the bottom sheet would then start out occupying | ||
| // the whole screen, as if `initialChildSize` was 1.0. That doesn't seem | ||
| // like what the docs call for. Maybe a bug. Or maybe it's somehow | ||
| // related to the `Stack`? | ||
| expand: false, | ||
|
|
||
| builder: (BuildContext context, ScrollController scrollController) { | ||
| return SingleChildScrollView( | ||
| // Prevent overscroll animation on swipe down; it looks | ||
| // sloppy when you're swiping to dismiss the sheet. | ||
| physics: const ClampingScrollPhysics(), | ||
|
|
||
| controller: scrollController, | ||
|
|
||
| child: Padding( | ||
| // Avoid the drag handle. See comment on | ||
| // _DragHandleLayer's SizedBox.height. | ||
| padding: const EdgeInsets.only(top: kMinInteractiveDimension), | ||
|
|
||
| // Extend DraggableScrollableSheet to full width so the whole | ||
| // sheet responds to drag/scroll uniformly. | ||
| child: FractionallySizedBox( | ||
| widthFactor: 1.0, | ||
| child: Builder(builder: builder), | ||
| ), | ||
| ), | ||
| ); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| class _DragHandleLayer extends StatelessWidget { | ||
| @override | ||
| Widget build(BuildContext context) { | ||
| ColorScheme colorScheme = Theme.of(context).colorScheme; | ||
| return SizedBox( | ||
| // In the spec, this is expressed as 22 logical pixels of top/bottom | ||
| // padding on the drag handle: | ||
| // https://m3.material.io/components/bottom-sheets/specs#e69f3dfb-e443-46ba-b4a8-aabc718cf335 | ||
| // The drag handle is specified with height 4 logical pixels, so we can | ||
| // get the same result by vertically centering the handle in a box with | ||
| // height 22 + 4 + 22 = 48. We have another way to say 48 -- | ||
| // kMinInteractiveDimension -- which is actually not a bad way to | ||
| // express it, since the feature was announced as "an optional drag | ||
| // handle with an accessible 48dp hit target": | ||
| // https://m3.material.io/components/bottom-sheets/overview#2cce5bae-eb83-40b0-8e52-5d0cfaa9b795 | ||
| // As a bonus, that constant is easy to use at the other layer in the | ||
| // Stack where we set the starting position of the sheet's content to | ||
| // avoid the drag handle. | ||
| height: kMinInteractiveDimension, | ||
|
|
||
| child: Center( | ||
| child: ClipRRect( | ||
| clipBehavior: Clip.hardEdge, | ||
| borderRadius: const BorderRadius.all(Radius.circular(2)), | ||
| child: SizedBox( | ||
| // height / width / color (including opacity) from this table: | ||
| // https://m3.material.io/components/bottom-sheets/specs#7c093473-d9e1-48f3-9659-b75519c2a29d | ||
| height: 4, | ||
| width: 32, | ||
| child: ColoredBox(color: colorScheme.onSurfaceVariant.withOpacity(0.40)), | ||
| ), | ||
| ))); | ||
| } | ||
| } | ||
|
|
||
| /// Show a modal bottom sheet that drags and scrolls to present lots of content. | ||
| /// | ||
| /// Aims to follow Material 3's "bottom sheet" with a drag handle: | ||
| /// https://m3.material.io/components/bottom-sheets/overview | ||
| Future<T?> showDraggableScrollableModalBottomSheet<T>({ | ||
| required BuildContext context, | ||
| required WidgetBuilder builder, | ||
| }) { | ||
| return showModalBottomSheet<T>( | ||
| context: context, | ||
|
|
||
| // Clip.hardEdge looks bad; Clip.antiAliasWithSaveLayer looks pixel-perfect | ||
| // on my iPhone 13 Pro but is marked as "much slower": | ||
| // https://api.flutter.dev/flutter/dart-ui/Clip.html | ||
| clipBehavior: Clip.antiAlias, | ||
|
Comment on lines
+96
to
+99
There was a problem hiding this comment. Huh — on my Pixel 5, I can't actually spot a difference regardless of what value I put here. Even There was a problem hiding this comment. This one took some extra steps for me to reproduce. Did you test by adding enough content in the sheet that it became scrollable, then as you scrolled down, watch what happened as the content crossed the curved boundary of the sheet in the corner? There was a problem hiding this comment. Ahh, I see. No, I didn't — I just looked at the corners of the sheet itself, without anything scrolling into them. |
||
|
|
||
| // The spec: | ||
| // https://m3.material.io/components/bottom-sheets/specs | ||
| // defines the container's shape with the design token | ||
| // `md.sys.shape.corner.extra-large.top`, which in the table at | ||
| // https://m3.material.io/styles/shape/shape-scale-tokens#6f668ba1-b671-4ea2-bcf3-c1cff4f4099e | ||
| // maps to: | ||
| // 28dp,28dp,0dp,0dp | ||
| // SHAPE_FAMILY_ROUNDED_CORNERS | ||
| shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(28.0))), | ||
|
|
||
| useSafeArea: true, | ||
| isScrollControlled: true, | ||
| builder: (BuildContext context) { | ||
| // Make the content start below the drag handle in the y-direction, but | ||
| // when the content is scrollable, let it scroll under the drag handle in | ||
| // the z-direction. | ||
| return Stack( | ||
| children: [ | ||
| _DraggableScrollableLayer(builder: builder), | ||
| _DragHandleLayer(), | ||
| ], | ||
| ); | ||
| }); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you say a bit about how you produced this first commit?
I tried adding just the
pubspec.yamlline and then runningflutter pub getand thenflutter run -d <an iOS device>. That produced much of the same generated code, but with a few differences, so I wonder if you did something different.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I re-made the commit and wrote a proper commit message.