Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve creating posts/comments #1359

Merged
merged 9 commits into from
May 13, 2024
Merged

Improve creating posts/comments #1359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0a0ddd9
Improve creating posts/comments
micahmo May 8, 2024
3c1acb1
Merge remote-tracking branch 'upstream/develop' into feature/improve-…
micahmo May 9, 2024
49868de
Remove unused selectable parameter
micahmo May 9, 2024
3398a34
Improve appearance of post/comment reply controls
micahmo May 9, 2024
44b7adb
Merge remote-tracking branch 'upstream/develop' into feature/improve-…
micahmo May 13, 2024
b74d8e3
Add comments for clarity
micahmo May 13, 2024
bce7b83
Simplify viewSource parameter
micahmo May 13, 2024
7d74b02
Use container margin instead of padding
micahmo May 13, 2024
06b79b4
Refactor widget
micahmo May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -662,4 +662,5 @@ For more information on this, and how to apply and follow the GNU AGPL, see

Portions of this software are copyright of their respective authors and released
under the MIT license:
- marquee_widget.dart, Copyright (c) 2018 Marcel Garus
- marquee_widget.dart, Copyright (c) 2018 Marcel Garus
- conditional_parent_widget.dart, Copyright (c) 2023 ltOgt
19 changes: 13 additions & 6 deletions lib/comment/view/create_comment_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import 'package:thunder/shared/input_dialogs.dart';
import 'package:thunder/shared/language_selector.dart';
import 'package:thunder/shared/snackbar.dart';
import 'package:thunder/user/widgets/user_indicator.dart';
import 'package:thunder/utils/colors.dart';
import 'package:thunder/utils/instance.dart';
import 'package:thunder/utils/media/image.dart';

Expand Down Expand Up @@ -93,6 +94,9 @@ class _CreateCommentPageState extends State<CreateCommentPage> {
/// Used for restoring and saving drafts
SharedPreferences? sharedPreferences;

/// Whether to view source for posts or comments
bool viewSource = false;

@override
void initState() {
super.initState();
Expand Down Expand Up @@ -276,18 +280,20 @@ class _CreateCommentPageState extends State<CreateCommentPage> {
child: Container(
padding: const EdgeInsets.only(top: 6.0, bottom: 12.0),
decoration: BoxDecoration(
color: theme.dividerColor.withOpacity(0.25),
color: getBackgroundColor(context),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: PostSubview(
useDisplayNames: true,
postViewMedia: widget.postViewMedia!,
crossPosts: const [],
moderators: const [],
viewSource: false,
viewSource: viewSource,
onViewSourceToggled: () => setState(() => viewSource = !viewSource),
showQuickPostActionBar: false,
showExpandableButton: false,
selectable: true,
showReplyEditorButtons: true,
),
),
),
Expand All @@ -296,7 +302,7 @@ class _CreateCommentPageState extends State<CreateCommentPage> {
padding: const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 16.0),
child: Container(
decoration: BoxDecoration(
color: theme.dividerColor.withOpacity(0.25),
color: getBackgroundColor(context),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: CommentContent(
Expand All @@ -310,10 +316,11 @@ class _CreateCommentPageState extends State<CreateCommentPage> {
isUserLoggedIn: true,
isOwnComment: false,
isHidden: false,
viewSource: false,
onViewSourceToggled: () {},
viewSource: viewSource,
onViewSourceToggled: () => setState(() => viewSource = !viewSource),
disableActions: true,
selectable: true,
showReplyEditorButtons: true,
),
),
),
Expand Down Expand Up @@ -343,7 +350,7 @@ class _CreateCommentPageState extends State<CreateCommentPage> {
width: double.infinity,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceVariant,
color: getBackgroundColor(context),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: CommonMarkdownBody(body: _bodyTextController.text, isComment: true),
Expand Down
44 changes: 24 additions & 20 deletions lib/community/pages/create_post_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import 'package:thunder/shared/link_preview_card.dart';
import 'package:thunder/shared/snackbar.dart';
import 'package:thunder/user/utils/restore_user.dart';
import 'package:thunder/user/widgets/user_selector.dart';
import 'package:thunder/utils/colors.dart';
import 'package:thunder/utils/debounce.dart';
import 'package:thunder/utils/instance.dart';
import 'package:thunder/utils/media/image.dart';
Expand Down Expand Up @@ -515,26 +516,29 @@ class _CreatePostPageState extends State<CreatePostPage> {
],
),
const SizedBox(height: 10),
showPreview
? Container(
constraints: const BoxConstraints(minWidth: double.infinity),
decoration: BoxDecoration(border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.all(12),
child: SingleChildScrollView(
child: CommonMarkdownBody(
body: _bodyTextController.text,
isComment: true,
),
),
)
: MarkdownTextInputField(
controller: _bodyTextController,
focusNode: _bodyFocusNode,
label: l10n.postBody,
minLines: 8,
maxLines: null,
textStyle: theme.textTheme.bodyLarge,
),
AnimatedCrossFade(
firstChild: Container(
margin: const EdgeInsets.only(top: 8.0),
width: double.infinity,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: getBackgroundColor(context),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: CommonMarkdownBody(body: _bodyTextController.text, isComment: true),
),
secondChild: MarkdownTextInputField(
controller: _bodyTextController,
focusNode: _bodyFocusNode,
label: l10n.postBody,
minLines: 8,
maxLines: null,
textStyle: theme.textTheme.bodyLarge,
),
crossFadeState: showPreview ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: const Duration(milliseconds: 120),
excludeBottomFocus: false,
),
]),
),
),
Expand Down
57 changes: 46 additions & 11 deletions lib/post/widgets/post_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
// Flutter imports
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Expand Down Expand Up @@ -34,8 +37,11 @@ import 'package:thunder/shared/avatars/user_avatar.dart';
import 'package:thunder/shared/chips/community_chip.dart';
import 'package:thunder/shared/chips/user_chip.dart';
import 'package:thunder/shared/common_markdown_body.dart';
import 'package:thunder/shared/conditional_parent_widget.dart';
import 'package:thunder/shared/cross_posts.dart';
import 'package:thunder/shared/divider.dart';
import 'package:thunder/shared/media_view.dart';
import 'package:thunder/shared/reply_to_preview_actions.dart';
import 'package:thunder/shared/text/scalable_text.dart';
import 'package:thunder/thunder/bloc/thunder_bloc.dart';

Expand All @@ -46,9 +52,11 @@ class PostSubview extends StatefulWidget {
final List<CommunityModeratorView>? moderators;
final List<PostView>? crossPosts;
final bool viewSource;
final void Function()? onViewSourceToggled;
final bool showQuickPostActionBar;
final bool showExpandableButton;
final bool selectable;
final bool showReplyEditorButtons;

const PostSubview({
super.key,
Expand All @@ -58,9 +66,11 @@ class PostSubview extends StatefulWidget {
required this.moderators,
required this.crossPosts,
required this.viewSource,
this.onViewSourceToggled,
this.showQuickPostActionBar = true,
this.showExpandableButton = true,
this.selectable = false,
this.showReplyEditorButtons = false,
});

@override
Expand All @@ -70,6 +80,7 @@ class PostSubview extends StatefulWidget {
class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStateMixin {
final ExpandableController expandableController = ExpandableController(initialExpanded: true);
late PostViewMedia postViewMedia;
final FocusNode _selectableRegionFocusNode = FocusNode();

@override
void initState() {
Expand Down Expand Up @@ -173,16 +184,32 @@ class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStat
),
expanded: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: widget.viewSource
? ScalableText(
post.body ?? '',
style: theme.textTheme.bodySmall?.copyWith(fontFamily: 'monospace'),
fontScale: thunderState.contentFontSizeScale,
)
: CommonMarkdownBody(
body: post.body ?? '',
isSelectableText: widget.selectable,
),
child: ConditionalParentWidget(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we need to apply the SelectableRegion here, or would it be more suited as part of the create comment page? (same thing with the comment SelectableRegion)

I guess the main discussion point is whether or not we're expecting to make the post selectable in other areas outside of the create comment page. We already have a way to copy post/comments from #1327!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I originally put the SelectableRegion around the whole PostSubview and CommentContent widgets, but that had a couple of weird side-effects. For one, I couldn't see the drag handles or the selection highlight color. But the bigger issue is that it allows everything in those widgets to be selectable, including the metadata, which I thought was weird! It seemed to be behave much better when wrapped directly around the CommonMarkdownBody, and I don't think it causes any harm, even if this is the only place we use it. Thoughts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh okay, you make a good point about allowing metadata to be selected! We'll keep it as it!

condition: widget.selectable,
parentBuilder: (child) {
return SelectableRegion(
focusNode: _selectableRegionFocusNode,
// See comments on [SelectableTextModal] regarding the next two properties
selectionControls: Platform.isIOS ? cupertinoTextSelectionHandleControls : materialTextSelectionHandleControls,
contextMenuBuilder: (context, selectableRegionState) {
return AdaptiveTextSelectionToolbar.buttonItems(
buttonItems: selectableRegionState.contextMenuButtonItems,
anchors: selectableRegionState.contextMenuAnchors,
);
},
child: child,
);
},
child: widget.viewSource
? ScalableText(
post.body ?? '',
style: theme.textTheme.bodySmall?.copyWith(fontFamily: 'monospace'),
fontScale: thunderState.contentFontSizeScale,
)
: CommonMarkdownBody(
body: post.body ?? '',
),
),
),
),
const SizedBox(height: 16.0),
Expand Down Expand Up @@ -228,6 +255,14 @@ class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStat
hasBeenEdited: postViewMedia.postView.post.updated != null ? true : false,
url: postViewMedia.media.firstOrNull != null ? postViewMedia.media.first.originalUrl : null,
),
if (widget.showReplyEditorButtons && widget.postViewMedia.postView.post.body?.isNotEmpty == true) ...[
micahmo marked this conversation as resolved.
Show resolved Hide resolved
const ThunderDivider(sliver: false, padding: false),
ReplyToPreviewActions(
onViewSourceToggled: widget.onViewSourceToggled,
viewSource: widget.viewSource,
text: widget.postViewMedia.postView.post.body!,
),
],
],
),
),
Expand Down Expand Up @@ -311,7 +346,7 @@ class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStat
},
),
),
]
],
],
),
),
Expand Down
11 changes: 2 additions & 9 deletions lib/settings/pages/appearance_settings_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:thunder/core/enums/local_settings.dart';
import 'package:thunder/shared/divider.dart';

import 'package:thunder/thunder/bloc/thunder_bloc.dart';
import 'package:thunder/utils/constants.dart';
Expand Down Expand Up @@ -43,15 +44,7 @@ class AppearanceSettingsPage extends StatelessWidget {
],
),
),
SliverToBoxAdapter(
child: Divider(
indent: 32.0,
height: 32.0,
endIndent: 32.0,
thickness: 2.0,
color: theme.dividerColor.withOpacity(0.6),
),
),
const ThunderDivider(sliver: true),
SliverList(
delegate: SliverChildListDelegate(
[
Expand Down
21 changes: 3 additions & 18 deletions lib/settings/pages/debug_settings_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import 'package:thunder/notification/shared/android_notification.dart';
import 'package:thunder/notification/utils/local_notifications.dart';

import 'package:thunder/shared/dialogs.dart';
import 'package:thunder/shared/divider.dart';
import 'package:thunder/shared/snackbar.dart';
import 'package:thunder/thunder/bloc/thunder_bloc.dart';
import 'package:thunder/settings/widgets/settings_list_tile.dart';
Expand Down Expand Up @@ -167,15 +168,7 @@ class _DebugSettingsPageState extends State<DebugSettingsPage> {
},
),
),
SliverToBoxAdapter(
child: Divider(
indent: 32.0,
height: 32.0,
endIndent: 32.0,
thickness: 2.0,
color: theme.dividerColor.withOpacity(0.6),
),
),
const ThunderDivider(sliver: true),
SliverToBoxAdapter(
child: FutureBuilder<int>(
future: getExtendedImageCacheSize(),
Expand Down Expand Up @@ -382,15 +375,7 @@ class _DebugSettingsPageState extends State<DebugSettingsPage> {
),
],
],
SliverToBoxAdapter(
child: Divider(
indent: 32.0,
height: 32.0,
endIndent: 32.0,
thickness: 2.0,
color: theme.dividerColor.withOpacity(0.6),
),
),
const ThunderDivider(sliver: true),
SliverToBoxAdapter(
child: SettingsListTile(
icon: Icons.edit_notifications_rounded,
Expand Down
Loading
Loading