From 95c4da5e6f19d429c1feede085760035c1710abf Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Fri, 28 Jun 2024 11:51:07 +0800 Subject: [PATCH] feat: refacotor share menu UI --- .../presentation/share/publish_tab.dart | 12 +- .../presentation/share/share_button.dart | 1 - .../presentation/share/share_menu.dart | 110 ++++++++++-------- .../lib/style_widget/text_field.dart | 6 +- 4 files changed, 76 insertions(+), 53 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/publish_tab.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/publish_tab.dart index 2d1c6d3cb7..bd4fdec55a 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/publish_tab.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/publish_tab.dart @@ -98,7 +98,13 @@ class _PublishedWidgetState extends State<_PublishedWidget> { const VSpace(16), _PublishUrl( controller: controller, - onCopy: (url) {}, + onCopy: (url) { + AppFlowyClipboard.setData(text: url); + showSnackBarMessage( + context, + LocaleKeys.document_inlineLink_copyLink.tr(), + ); + }, onSubmitted: (url) {}, ), const VSpace(16), @@ -138,13 +144,14 @@ class _PublishedWidgetState extends State<_PublishedWidget> { }) { return SizedBox( height: 36, - width: 189, + width: 184, child: FlowyButton( decoration: BoxDecoration( color: backgroundColor, borderRadius: BorderRadius.circular(10), border: Border.all(color: borderColor), ), + radius: BorderRadius.circular(10), text: FlowyText.regular( name, textAlign: TextAlign.center, @@ -229,6 +236,7 @@ class _PublishUrl extends StatelessWidget { return SizedBox( height: 36, child: FlowyTextField( + readOnly: true, autoFocus: false, controller: controller, suffixIcon: _buildCopyLinkIcon(), diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart index 2fed083fe3..4a78b83df9 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_button.dart @@ -52,7 +52,6 @@ class DocumentShareButton extends StatelessWidget { constraints: const BoxConstraints( maxWidth: 422, ), - margin: const EdgeInsets.all(16), offset: const Offset(0, 8), popupBuilder: (context) => BlocProvider.value( value: shareBloc, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_menu.dart index 3adb2837f3..648e53c4dd 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/share/share_menu.dart @@ -1,6 +1,5 @@ import 'package:appflowy/generated/locale_keys.g.dart'; -import 'package:appflowy/util/theme_extension.dart'; -import 'package:custom_sliding_segmented_control/custom_sliding_segmented_control.dart'; +import 'package:appflowy/mobile/presentation/home/tab/_round_underline_tab_indicator.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; @@ -13,7 +12,7 @@ enum ShareMenuTab { exportAs; static List supportedTabs = [ - ShareMenuTab.share, + // ShareMenuTab.share, ShareMenuTab.publish, ShareMenuTab.exportAs, ]; @@ -37,60 +36,75 @@ class ShareMenu extends StatefulWidget { State createState() => _ShareMenuState(); } -class _ShareMenuState extends State { +class _ShareMenuState extends State + with SingleTickerProviderStateMixin { ShareMenuTab selectedTab = ShareMenuTab.publish; + late final tabController = TabController( + length: ShareMenuTab.supportedTabs.length, + vsync: this, + initialIndex: ShareMenuTab.supportedTabs.indexOf(selectedTab), + ); @override Widget build(BuildContext context) { - final children = { - for (final tab in ShareMenuTab.supportedTabs) - tab: _Segment( - title: tab.i18n.tr(), - isSelected: selectedTab == tab, - ), - }; - final color = Theme.of(context).isLightMode - ? const Color(0xFFEEF0F3) - : Colors.black.withOpacity(0.3); - final thumbColor = Theme.of(context).isLightMode - ? Colors.white - : Theme.of(context).colorScheme.secondary; return Column( mainAxisSize: MainAxisSize.min, children: [ - SizedBox( - height: 34, - child: CustomSlidingSegmentedControl( - initialValue: selectedTab, - curve: Curves.linear, - padding: 0, - fixedWidth: 128, - innerPadding: const EdgeInsets.all(3.0), - children: children, - decoration: BoxDecoration( - color: color, - borderRadius: BorderRadius.circular(8), - ), - thumbDecoration: BoxDecoration( - color: thumbColor, - boxShadow: const [ - BoxShadow( - color: Color(0x141F2225), - blurRadius: 8, - offset: Offset(0, 2), - ), - ], - borderRadius: BorderRadius.circular(8), - ), - onValueChanged: (v) { - setState(() { - selectedTab = v; - }); - }, + const VSpace(10), + Container( + alignment: Alignment.centerLeft, + height: 30, + child: _buildTabBar(context), + ), + Divider( + color: Theme.of(context).dividerColor, + height: 1, + thickness: 1, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 14.0), + child: _buildTab(context), + ), + const VSpace(20), + ], + ); + } + + @override + void dispose() { + tabController.dispose(); + super.dispose(); + } + + Widget _buildTabBar(BuildContext context) { + final children = [ + for (final tab in ShareMenuTab.supportedTabs) + Padding( + padding: const EdgeInsets.only(bottom: 10), + child: _Segment( + title: tab.i18n.tr(), + isSelected: selectedTab == tab, ), ), - _buildTab(context), - ], + ]; + return TabBar( + indicatorSize: TabBarIndicatorSize.label, + indicator: RoundUnderlineTabIndicator( + width: 48.0, + borderSide: BorderSide( + color: Theme.of(context).colorScheme.primary, + width: 3, + ), + insets: const EdgeInsets.only(bottom: -2), + ), + isScrollable: true, + controller: tabController, + tabs: children, + onTap: (index) { + setState(() { + selectedTab = ShareMenuTab.supportedTabs[index]; + }); + }, ); } diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart index 1b46682628..c70b38420e 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart @@ -1,10 +1,9 @@ import 'dart:async'; +import 'package:flowy_infra/size.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:flowy_infra/size.dart'; - class FlowyTextField extends StatefulWidget { final String? hintText; final String? text; @@ -37,6 +36,7 @@ class FlowyTextField extends StatefulWidget { final List? inputFormatters; final bool obscureText; final bool isDense; + final bool readOnly; const FlowyTextField({ super.key, @@ -71,6 +71,7 @@ class FlowyTextField extends StatefulWidget { this.inputFormatters, this.obscureText = false, this.isDense = true, + this.readOnly = false, }); @override @@ -144,6 +145,7 @@ class FlowyTextFieldState extends State { @override Widget build(BuildContext context) { return TextField( + readOnly: widget.readOnly, controller: controller, focusNode: focusNode, onChanged: (text) {