diff --git a/lib/screens/posts/compose_article.dart b/lib/screens/posts/compose_article.dart index a1755e8f..cc7ac19e 100644 --- a/lib/screens/posts/compose_article.dart +++ b/lib/screens/posts/compose_article.dart @@ -201,6 +201,7 @@ class ArticleComposeScreen extends HookConsumerWidget { return Container( decoration: BoxDecoration( + color: colorScheme.surface, border: Border.all(color: colorScheme.outline.withOpacity(0.3)), borderRadius: BorderRadius.circular(8), ), @@ -225,19 +226,14 @@ class ArticleComposeScreen extends HookConsumerWidget { ], ), ), - Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), - child: widgetItem, - ), - ), + Expanded(child: widgetItem), ], ), ); } Widget buildEditorPane() { - return Center( + final editorContent = Center( child: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 560), child: Column( @@ -267,6 +263,20 @@ class ArticleComposeScreen extends HookConsumerWidget { ), ), ); + + // Add background color for mobile editor pane + if (!isWideScreen(context)) { + return Container( + decoration: BoxDecoration( + color: colorScheme.surface, + borderRadius: BorderRadius.circular(8), + ), + margin: const EdgeInsets.symmetric(vertical: 8), + child: editorContent, + ); + } + + return editorContent; } return PopScope( @@ -325,7 +335,9 @@ class ArticleComposeScreen extends HookConsumerWidget { Tooltip( message: 'togglePreview'.tr(), child: IconButton( - icon: Icon(showPreview.value ? Symbols.edit : Symbols.preview), + icon: Icon( + showPreview.value ? Symbols.preview_off : Symbols.preview, + ), onPressed: () => showPreview.value = !showPreview.value, ), ), @@ -395,12 +407,25 @@ class ArticleComposeScreen extends HookConsumerWidget { switchOutCurve: Curves.easeOutCubic, transitionBuilder: (Widget child, Animation animation) { - return FadeTransition( - opacity: animation, - child: SlideTransition( + final isWide = isWideScreen(context); + if (isWide) { + // Desktop: scale animation + return ScaleTransition( + scale: Tween(begin: 0.95, end: 1.0) + .animate( + CurvedAnimation( + parent: animation, + curve: Curves.easeOutCubic, + ), + ), + child: child, + ); + } else { + // Mobile: horizontal slide animation + return SlideTransition( position: Tween( - begin: const Offset(0, 0.05), + begin: const Offset(0.05, 0), end: Offset.zero, ).animate( CurvedAnimation( @@ -409,8 +434,8 @@ class ArticleComposeScreen extends HookConsumerWidget { ), ), child: child, - ), - ); + ); + } }, child: isWideScreen(context) ? Row( @@ -439,4 +464,4 @@ class ArticleComposeScreen extends HookConsumerWidget { ), ); } -} \ No newline at end of file +} diff --git a/lib/widgets/common/responsive_sidebar.dart b/lib/widgets/common/responsive_sidebar.dart index de30df3e..d6e801a1 100644 --- a/lib/widgets/common/responsive_sidebar.dart +++ b/lib/widgets/common/responsive_sidebar.dart @@ -44,7 +44,7 @@ class ResponsiveSidebar extends HookConsumerWidget { showDrawer.value = true; animationController.forward(); } else if (!showSidebar.value && showDrawer.value) { - showDrawer.value = false; + // Don't set showDrawer.value = false here - let animation complete first animationController.reverse(); } } else { diff --git a/lib/widgets/post/compose_card.dart b/lib/widgets/post/compose_card.dart index ba169903..a23c0472 100644 --- a/lib/widgets/post/compose_card.dart +++ b/lib/widgets/post/compose_card.dart @@ -121,11 +121,10 @@ class PostComposeCard extends HookConsumerWidget { content: composeState.contentController.text, visibility: composeState.visibility.value, type: composeState.postType, - attachments: - composeState.attachments.value - .where((e) => e.isOnCloud) - .map((e) => e.data as SnCloudFile) - .toList(), + attachments: composeState.attachments.value + .where((e) => e.isOnCloud) + .map((e) => e.data as SnCloudFile) + .toList(), publisher: composeState.currentPublisher.value!, updatedAt: DateTime.now(), ); @@ -218,27 +217,25 @@ class PostComposeCard extends HookConsumerWidget { IconButton( onPressed: (composeState.submitting.value || - composeState.currentPublisher.value == null) - ? null - : performSubmit, - icon: - composeState.submitting.value - ? SizedBox( - width: 24, - height: 24, - child: const CircularProgressIndicator( - strokeWidth: 2, - ), - ) - : Icon( - originalPost != null - ? Symbols.edit - : Symbols.upload, + composeState.currentPublisher.value == null) + ? null + : performSubmit, + icon: composeState.submitting.value + ? SizedBox( + width: 24, + height: 24, + child: const CircularProgressIndicator( + strokeWidth: 2, ), - tooltip: - originalPost != null - ? 'postUpdate'.tr() - : 'postPublish'.tr(), + ) + : Icon( + originalPost != null + ? Symbols.edit + : Symbols.upload, + ), + tooltip: originalPost != null + ? 'postUpdate'.tr() + : 'postPublish'.tr(), visualDensity: const VisualDensity( horizontal: -4, vertical: -2, @@ -268,13 +265,10 @@ class PostComposeCard extends HookConsumerWidget { context: context, isScrollControlled: true, useRootNavigator: true, - builder: - (context) => SheetScaffold( - titleText: 'Post Preview', - child: SingleChildScrollView( - child: PostItem(item: post), - ), - ), + builder: (context) => SheetScaffold( + titleText: 'Post Preview', + child: SingleChildScrollView(child: PostItem(item: post)), + ), ); }, ), @@ -283,16 +277,15 @@ class PostComposeCard extends HookConsumerWidget { Expanded( child: KeyboardListener( focusNode: FocusNode(), - onKeyEvent: - (event) => ComposeLogic.handleKeyPress( - event, - composeState, - ref, - context, - originalPost: originalPost, - repliedPost: repliedPost, - forwardedPost: forwardedPost, - ), + onKeyEvent: (event) => ComposeLogic.handleKeyPress( + event, + composeState, + ref, + context, + originalPost: originalPost, + repliedPost: repliedPost, + forwardedPost: forwardedPost, + ), child: SingleChildScrollView( padding: const EdgeInsets.all(16), child: ConstrainedBox( @@ -304,17 +297,16 @@ class PostComposeCard extends HookConsumerWidget { // Publisher profile picture GestureDetector( child: ProfilePictureWidget( - fileId: - composeState - .currentPublisher - .value - ?.picture - ?.id, + fileId: composeState + .currentPublisher + .value + ?.picture + ?.id, radius: 20, fallbackIcon: composeState.currentPublisher.value == null - ? Symbols.question_mark - : null, + ? Symbols.question_mark + : null, ), onTap: () { if (composeState.currentPublisher.value == null) { @@ -326,8 +318,8 @@ class PostComposeCard extends HookConsumerWidget { context: context, isScrollControlled: true, useRootNavigator: true, - builder: - (context) => const NewPublisherScreen(), + builder: (context) => + const NewPublisherScreen(), ).then((value) { if (value != null) { composeState.currentPublisher.value = @@ -370,9 +362,8 @@ class PostComposeCard extends HookConsumerWidget { context: context, isScrollControlled: true, useRootNavigator: true, - builder: - (context) => - const NewPublisherScreen(), + builder: (context) => + const NewPublisherScreen(), ).then((value) { if (value != null) { composeState.currentPublisher.value = @@ -388,8 +379,8 @@ class PostComposeCard extends HookConsumerWidget { isScrollControlled: true, useRootNavigator: true, context: context, - builder: - (context) => const PublisherModal(), + builder: (context) => + const PublisherModal(), ).then((value) { if (value != null) { composeState.currentPublisher.value = @@ -415,19 +406,16 @@ class PostComposeCard extends HookConsumerWidget { ), // Bottom toolbar - SizedBox( - height: 65, - child: ClipRRect( - borderRadius: const BorderRadius.only( - bottomLeft: Radius.circular(8), - bottomRight: Radius.circular(8), - ), - child: ComposeToolbar( - state: composeState, - originalPost: originalPost, - isCompact: true, - useSafeArea: isContained, - ), + ClipRRect( + borderRadius: const BorderRadius.only( + bottomLeft: Radius.circular(8), + bottomRight: Radius.circular(8), + ), + child: ComposeToolbar( + state: composeState, + originalPost: originalPost, + isCompact: true, + useSafeArea: isContained, ), ), ],