diff --git a/lib/ui/screens/authorized_group_page_screen.dart b/lib/ui/screens/authorized_group_page_screen.dart index e2e46ed..d2c4055 100644 --- a/lib/ui/screens/authorized_group_page_screen.dart +++ b/lib/ui/screens/authorized_group_page_screen.dart @@ -10,6 +10,7 @@ import 'package:comunic/ui/widgets/group_membership_widget.dart'; import 'package:comunic/ui/widgets/like_widget.dart'; import 'package:comunic/ui/widgets/post_create_form_widget.dart'; import 'package:comunic/ui/widgets/posts_list_widget.dart'; +import 'package:comunic/ui/widgets/safe_state.dart'; import 'package:comunic/utils/intl_utils.dart'; import 'package:flutter/material.dart'; @@ -21,6 +22,10 @@ import 'package:flutter/material.dart'; enum _MenuItems { OPEN_MEMBERS, OPEN_SETTINGS } +Color get _headerTextColor => Colors.white; + +Color get _headerColor => Colors.blueAccent.shade700; + class AuthorizedGroupPageScreen extends StatefulWidget { final AdvancedGroupInfo advancedGroupInfo; final Function() needRefresh; @@ -38,73 +43,120 @@ class AuthorizedGroupPageScreen extends StatefulWidget { _AuthorizedGroupPageScreenState(); } -class _AuthorizedGroupPageScreenState extends State { +class _AuthorizedGroupPageScreenState + extends SafeState + with SingleTickerProviderStateMixin { AdvancedGroupInfo get _group => widget.advancedGroupInfo; + TabController _tabController; + final _postsKey = GlobalKey(); + List<_GroupPageTab> get _tabs => [ + _GroupPageTab(widget: _buildGroupPagePostsList(), label: tr("Posts")), + ]; + + @override + void initState() { + _tabController = TabController( + length: _tabs.length, + initialIndex: 0, + vsync: this, + ); + + super.initState(); + } + + @override + void dispose() { + _tabController.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { - return RefreshIndicator( - onRefresh: () => widget.needRefresh(), - child: _buildGroupPagePostsList(), + return Column( + children: [ + _buildGroupPageHeader(), + Container( + color: _headerColor, + child: TabBar( + tabs: _tabs.map((e) => e.tab).toList(), + controller: _tabController, + ), + ), + Expanded( + child: TabBarView( + controller: _tabController, + children: _tabs.map((e) => e.widget).toList(), + ), + ), + ], ); } /// Build group page header Widget _buildGroupPageHeader() { - return Container( - color: Colors.black26, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - GroupIcon( - group: _group, - ), - Expanded( - child: Text( - " ${_group.displayName}", - style: TextStyle(fontSize: 20), + return DefaultTextStyle( + style: TextStyle(color: _headerTextColor), + child: Container( + color: _headerColor, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + children: [ + GroupIcon( + group: _group, ), - ), - Column( - children: [ - GroupMembershipWidget( - group: _group, - onUpdated: () => widget.needRefresh(), + Expanded( + child: Text( + " ${_group.displayName}", + style: TextStyle(fontSize: 20), ), - Container( - height: 4, - ), - GroupFollowingWidget( - group: _group, - onUpdated: () => widget.needRefresh(), - ), - Container( - height: 2, - ), - LikeWidget( - likeElement: _group, - ), - ], - ), - PopupMenuButton<_MenuItems>( - itemBuilder: (c) => [ - PopupMenuItem( - child: Text(tr("Group members")), - value: _MenuItems.OPEN_MEMBERS, - enabled: _group.isAtLeastModerator, - ), - PopupMenuItem( - child: Text(tr("Group settings")), - value: _MenuItems.OPEN_SETTINGS, - enabled: _group.isAdmin, - ), - ], - onSelected: _handleMenuSelection, - ), - ], + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GroupMembershipWidget( + group: _group, + onUpdated: () => widget.needRefresh(), + ), + Container( + height: 4, + ), + GroupFollowingWidget( + group: _group, + onUpdated: () => widget.needRefresh(), + inactiveColor: Colors.blueAccent, + activeColor: Colors.white, + ), + Container( + height: 2, + ), + LikeWidget( + inativeColor: Colors.blueAccent, + activeColor: Colors.white, + likeElement: _group, + ), + ], + ), + PopupMenuButton<_MenuItems>( + itemBuilder: (c) => [ + PopupMenuItem( + child: Text(tr("Group members")), + value: _MenuItems.OPEN_MEMBERS, + enabled: _group.isAtLeastModerator, + ), + PopupMenuItem( + child: Text(tr("Group settings")), + value: _MenuItems.OPEN_SETTINGS, + enabled: _group.isAdmin, + ), + ], + onSelected: _handleMenuSelection, + ), + ], + ), ), ), ); @@ -125,7 +177,6 @@ class _AuthorizedGroupPageScreenState extends State { return PostsListWidget( key: _postsKey, topWidgets: [ - _buildGroupPageHeader(), _buildPostCreationArea(), ], getPostsList: () => PostsHelper().getGroupPosts(_group.id), @@ -149,3 +200,16 @@ class _AuthorizedGroupPageScreenState extends State { } } } + +class _GroupPageTab { + final Widget widget; + final String label; + + const _GroupPageTab({ + @required this.widget, + @required this.label, + }) : assert(widget != null), + assert(label != null); + + Tab get tab => Tab(text: label); +} diff --git a/lib/ui/widgets/group_following_widget.dart b/lib/ui/widgets/group_following_widget.dart index c34115d..a3a0b4b 100644 --- a/lib/ui/widgets/group_following_widget.dart +++ b/lib/ui/widgets/group_following_widget.dart @@ -12,10 +12,16 @@ import 'package:flutter/material.dart'; class GroupFollowingWidget extends StatefulWidget { final Group group; final Function() onUpdated; + final Color inactiveColor; + final Color activeColor; - const GroupFollowingWidget( - {Key key, @required this.group, @required this.onUpdated}) - : assert(group != null), + const GroupFollowingWidget({ + Key key, + @required this.group, + @required this.onUpdated, + this.activeColor, + this.inactiveColor, + }) : assert(group != null), assert(onUpdated != null), super(key: key); @@ -31,9 +37,17 @@ class _GroupFollowingWidgetState extends SafeState { if (!_group.isAtLeastMember) return Container(); return InkWell( - child: Text( - _group.following ? tr("Following") : tr("Follow"), - style: TextStyle(color: Colors.blue), + child: RichText( + text: TextSpan(children: [ + WidgetSpan( + child: Icon( + Icons.notifications, + size: 16.0, + color: _group.following ? widget.activeColor : widget.inactiveColor, + )), + TextSpan( + text: " " + (_group.following ? tr("Following") : tr("Follow"))), + ]), ), onTap: () => _toggleFollowing(), ); diff --git a/lib/ui/widgets/like_widget.dart b/lib/ui/widgets/like_widget.dart index c08b4ab..5a3f974 100644 --- a/lib/ui/widgets/like_widget.dart +++ b/lib/ui/widgets/like_widget.dart @@ -16,12 +16,16 @@ typedef UpdatedLikingCallBack = Function(int, bool); class LikeWidget extends StatefulWidget { final LikeElement likeElement; final double buttonIconSize; + final Color activeColor; + final Color inativeColor; - const LikeWidget({ - Key key, - @required this.likeElement, - this.buttonIconSize = 15.0, - }) : assert(likeElement != null), + const LikeWidget( + {Key key, + @required this.likeElement, + this.buttonIconSize = 15.0, + this.activeColor, + this.inativeColor}) + : assert(likeElement != null), super(key: key); @override @@ -54,7 +58,9 @@ class _LikeWidgetState extends SafeState { children: [ Icon( Icons.thumb_up, - color: elem.userLike ? Colors.blue : null, + color: elem.userLike + ? (widget.activeColor ?? Colors.blue) + : widget.inativeColor, size: widget.buttonIconSize, ), SizedBox(