diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index 491f50e91b..a345a6a6ab 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -2897,7 +2897,7 @@ "clearAllSelected": "Clear all selected", "newDirectMessage": "New direct message", "contactInfo": "Contact info", - "countPinnedMessage": "{count, plural, =0{Pinned Message} other{Pinned Message #{count}}}", + "countPinnedMessage": "{count, plural, =1{Pinned Message} other{Pinned Message #{count}}}", "@countPinnedMessage": { "type": "text", "placeholders": { diff --git a/assets/l10n/intl_ru.arb b/assets/l10n/intl_ru.arb index bb949a3a68..659c9e5bf6 100644 --- a/assets/l10n/intl_ru.arb +++ b/assets/l10n/intl_ru.arb @@ -2917,7 +2917,7 @@ "@linagoraContactsCount": {}, "contactsCount": "Контакты ({count})", "@contactsCount": {}, - "countPinnedMessage": "{count, plural, =0{Закрепленное сообщение} other{Закрепленное сообщение #{count}}}", + "countPinnedMessage": "{count, plural, =1{Закрепленное сообщение} other{Закрепленное сообщение #{count}}}", "@countPinnedMessage": { "type": "text", "placeholders": { diff --git a/lib/pages/chat/chat_pinned_events/pinned_events_view.dart b/lib/pages/chat/chat_pinned_events/pinned_events_view.dart index 20aab7ca7b..97cf5355bf 100644 --- a/lib/pages/chat/chat_pinned_events/pinned_events_view.dart +++ b/lib/pages/chat/chat_pinned_events/pinned_events_view.dart @@ -211,6 +211,8 @@ class _PinnedEventsContentWidget extends StatelessWidget { @override Widget build(BuildContext context) { + final pinnedEventsOrder = countPinnedEvents + 1; + return Expanded( child: Padding( padding: PinnedEventsStyle.paddingContentPinned, @@ -218,7 +220,7 @@ class _PinnedEventsContentWidget extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( - L10n.of(context)!.countPinnedMessage(countPinnedEvents), + L10n.of(context)!.countPinnedMessage(pinnedEventsOrder), style: Theme.of(context).textTheme.titleMedium?.copyWith( color: LinagoraSysColors.material().secondary, ), diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_action_button_mobile.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_action_button_mobile.dart new file mode 100644 index 0000000000..e308aca0c6 --- /dev/null +++ b/lib/pages/chat/chat_pinned_events/pinned_messages_action_button_mobile.dart @@ -0,0 +1,37 @@ +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_style.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +class PinnedMessagesActionButton extends StatelessWidget { + const PinnedMessagesActionButton({ + super.key, + this.onTap, + }); + + final VoidCallback? onTap; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + IconButton( + iconSize: PinnedMessagesStyle.unpinButtonSizeMobile, + padding: EdgeInsets.zero, + constraints: const BoxConstraints(), + onPressed: onTap, + icon: PinnedMessagesStyle.unpinIcon( + size: PinnedMessagesStyle.unpinButtonSizeMobile, + ), + ), + const SizedBox(height: PinnedMessagesStyle.menuActionBtnGapMobile), + Text( + L10n.of(context)!.unpin, + style: Theme.of(context).textTheme.labelMedium?.copyWith( + color: Theme.of(context).colorScheme.primary, + ), + ), + ], + ); + } +} diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_menu_mobile.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_menu_mobile.dart new file mode 100644 index 0000000000..20d91efe58 --- /dev/null +++ b/lib/pages/chat/chat_pinned_events/pinned_messages_menu_mobile.dart @@ -0,0 +1,49 @@ +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages.dart'; +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_action_button_mobile.dart'; +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_style.dart'; +import 'package:flutter/material.dart'; +import 'package:matrix/matrix.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +class PinnedMessagesMenuMobile extends StatelessWidget { + const PinnedMessagesMenuMobile({ + super.key, + required this.controller, + }); + + final PinnedMessagesController controller; + + @override + Widget build(BuildContext context) { + return SizedBox( + height: PinnedMessagesStyle.menuHeightMobile, + child: ValueListenableBuilder>( + valueListenable: controller.selectedEvents, + builder: (context, selectedEvents, child) { + if (selectedEvents.isEmpty) return child!; + + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + PinnedMessagesActionButton( + onTap: controller.unpinSelectedEvents, + ), + ], + ); + }, + child: Center( + child: TextButton.icon( + onPressed: () => controller.unpinAll(), + icon: PinnedMessagesStyle.unpinIcon(), + label: Text( + L10n.of(context)!.unpinAllMessages, + style: Theme.of(context).textTheme.labelLarge?.copyWith( + color: Theme.of(context).colorScheme.primary, + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_menu_web.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_menu_web.dart new file mode 100644 index 0000000000..6b9a0840b0 --- /dev/null +++ b/lib/pages/chat/chat_pinned_events/pinned_messages_menu_web.dart @@ -0,0 +1,75 @@ +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages.dart'; +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_style.dart'; +import 'package:flutter/material.dart'; +import 'package:matrix/matrix.dart'; +import 'package:flutter_gen/gen_l10n/l10n.dart'; + +class PinnedMessagesMenuWeb extends StatelessWidget { + const PinnedMessagesMenuWeb({ + super.key, + required this.controller, + }); + + final PinnedMessagesController controller; + + @override + Widget build(BuildContext context) { + return ValueListenableBuilder>( + valueListenable: controller.selectedEvents, + builder: (context, selectedEvents, child) { + if (selectedEvents.isEmpty) return child!; + + return Padding( + padding: PinnedMessagesStyle.actionBarParentPaddingWeb, + child: Material( + elevation: 1, + borderRadius: BorderRadius.circular( + PinnedMessagesStyle.actionBarBorderRadiusWeb, + ), + child: Container( + height: PinnedMessagesStyle.unpinButtonHeightWeb, + width: PinnedMessagesStyle.unpinButtonWidthWeb, + padding: PinnedMessagesStyle.actionBarPaddingWeb, + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.surfaceVariant, + borderRadius: BorderRadius.circular( + PinnedMessagesStyle.actionBarBorderRadiusWeb, + ), + ), + child: Row( + children: [ + IconButton( + onPressed: controller.closeSelectionMode, + icon: Icon( + Icons.close, + color: Theme.of(context).colorScheme.onSurfaceVariant, + size: PinnedMessagesStyle.closeSelectionIconSizeWeb, + ), + ), + Text( + L10n.of(context)!.messageSelected(selectedEvents.length), + style: Theme.of(context).textTheme.labelLarge?.copyWith( + color: Theme.of(context).colorScheme.onSurfaceVariant, + ), + ), + const Spacer(), + TextButton.icon( + onPressed: () => controller.unpinSelectedEvents(), + icon: PinnedMessagesStyle.unpinIcon(), + label: Text( + L10n.of(context)!.unpin, + style: Theme.of(context).textTheme.labelLarge?.copyWith( + color: Theme.of(context).colorScheme.primary, + ), + ), + ), + ], + ), + ), + ), + ); + }, + child: const SizedBox.shrink(), + ); + } +} diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart index 31666df23f..68c71ba5ee 100644 --- a/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart +++ b/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart @@ -1,5 +1,7 @@ import 'package:fluffychat/di/global/get_it_initializer.dart'; import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages.dart'; +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_menu_mobile.dart'; +import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_menu_web.dart'; import 'package:fluffychat/pages/chat/chat_pinned_events/pinned_messages_style.dart'; import 'package:fluffychat/pages/chat/events/message/message.dart'; import 'package:fluffychat/utils/responsive/responsive_utils.dart'; @@ -109,71 +111,9 @@ class PinnedMessagesScreen extends StatelessWidget { ), ), ), - ValueListenableBuilder>( - valueListenable: controller.selectedEvents, - builder: (context, selectedEvents, child) { - if (selectedEvents.isEmpty) return child!; - - return Padding( - padding: PinnedMessagesStyle.actionBarParentPadding, - child: Material( - elevation: 1, - borderRadius: BorderRadius.circular( - PinnedMessagesStyle.actionBarBorderRadius, - ), - child: Container( - height: PinnedMessagesStyle.unpinButtonHeight, - width: PinnedMessagesStyle.unpinButtonWidth, - padding: PinnedMessagesStyle.actionBarPadding, - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surfaceVariant, - borderRadius: BorderRadius.circular( - PinnedMessagesStyle.actionBarBorderRadius, - ), - ), - child: Row( - children: [ - IconButton( - onPressed: controller.closeSelectionMode, - icon: Icon( - Icons.close, - color: - Theme.of(context).colorScheme.onSurfaceVariant, - size: 20, - ), - ), - Text( - L10n.of(context)! - .messageSelected(selectedEvents.length), - style: - Theme.of(context).textTheme.labelLarge?.copyWith( - color: Theme.of(context) - .colorScheme - .onSurfaceVariant, - ), - ), - const Spacer(), - TextButton.icon( - onPressed: () => controller.unpinSelectedEvents(), - icon: PinnedMessagesStyle.unpinIcon(), - label: Text( - L10n.of(context)!.unpin, - style: Theme.of(context) - .textTheme - .labelLarge - ?.copyWith( - color: Theme.of(context).colorScheme.primary, - ), - ), - ), - ], - ), - ), - ), - ); - }, - child: const SizedBox.shrink(), - ), + responsiveUtils.isMobile(context) + ? PinnedMessagesMenuMobile(controller: controller) + : PinnedMessagesMenuWeb(controller: controller), ], ), ); diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_style.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_style.dart index e58acbd13c..8e62baf592 100644 --- a/lib/pages/chat/chat_pinned_events/pinned_messages_style.dart +++ b/lib/pages/chat/chat_pinned_events/pinned_messages_style.dart @@ -11,14 +11,28 @@ class PinnedMessagesStyle { EdgeInsets.symmetric( vertical: responsiveUtils.isMobile(context) ? 4.0 : 16.0, ); + static const SizedBox paddingIconAndUnpin = SizedBox(width: 4.0); + static Widget unpinIcon({double? size}) => SvgPicture.asset( + ImagePaths.icUnpin, + height: size ?? unpinButtonSizeDefault, + ); - static const double unpinButtonHeight = 56; - static const double unpinButtonWidth = 556; - static const EdgeInsets actionBarParentPadding = EdgeInsets.all(16.0); - static const EdgeInsets actionBarPadding = EdgeInsets.symmetric( + // Web + static const double unpinButtonHeightWeb = 56; + static const double unpinButtonWidthWeb = 556; + static const EdgeInsets actionBarParentPaddingWeb = EdgeInsets.all(16.0); + static const EdgeInsets actionBarPaddingWeb = EdgeInsets.symmetric( horizontal: 8.0, ); - static const double actionBarBorderRadius = 16.0; + static const double actionBarBorderRadiusWeb = 16.0; + static const double closeSelectionIconSizeWeb = 20.0; + static const double unpinButtonSizeDefault = 18.0; + + // Mobile + static const double menuHeightMobile = 80; + static const double unpinButtonSizeMobile = 24.0; + static const double menuActionBtnGapMobile = 4.0; - static Widget unpinIcon() => SvgPicture.asset(ImagePaths.icUnpin, height: 18); -} + static const double paddingAllContextMenuItem = 12; + static const double heightContextMenuItem = 48; +} \ No newline at end of file