mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-18 08:34:31 +00:00
desktop notifications view
This commit is contained in:
julian
parent
7cf3a8efba
commit
60bdc6151b
5 changed files with 179 additions and 48 deletions
|
|
@ -4,6 +4,8 @@ import 'package:stackwallet/models/notification_model.dart';
|
|||
import 'package:stackwallet/utilities/format.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
import 'package:stackwallet/utilities/util.dart';
|
||||
import 'package:stackwallet/widgets/conditional_parent.dart';
|
||||
import 'package:stackwallet/widgets/rounded_container.dart';
|
||||
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
||||
|
||||
|
|
@ -20,22 +22,33 @@ class NotificationCard extends StatelessWidget {
|
|||
return Format.extractDateFrom(date.millisecondsSinceEpoch ~/ 1000);
|
||||
}
|
||||
|
||||
static const double mobileIconSize = 24;
|
||||
static const double desktopIconSize = 30;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDesktop = Util.isDesktop;
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
RoundedWhiteContainer(
|
||||
padding: isDesktop
|
||||
? const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 10,
|
||||
)
|
||||
: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
notification.changeNowId == null
|
||||
? SvgPicture.asset(
|
||||
notification.iconAssetName,
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
height: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
)
|
||||
: Container(
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
height: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
|
|
@ -45,8 +58,8 @@ class NotificationCard extends StatelessWidget {
|
|||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.accentColorDark,
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
height: isDesktop ? desktopIconSize : mobileIconSize,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
|
|
@ -56,9 +69,35 @@ class NotificationCard extends StatelessWidget {
|
|||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
notification.title,
|
||||
style: STextStyles.titleBold12(context),
|
||||
ConditionalParent(
|
||||
condition: isDesktop && !notification.read,
|
||||
builder: (child) => Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
child,
|
||||
Text(
|
||||
"New",
|
||||
style:
|
||||
STextStyles.desktopTextExtraExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.accentColorGreen,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
notification.title,
|
||||
style: isDesktop
|
||||
? STextStyles.desktopTextExtraExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark,
|
||||
)
|
||||
: STextStyles.titleBold12(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
|
|
@ -68,11 +107,25 @@ class NotificationCard extends StatelessWidget {
|
|||
children: [
|
||||
Text(
|
||||
notification.description,
|
||||
style: STextStyles.label(context),
|
||||
style: isDesktop
|
||||
? STextStyles.desktopTextExtraExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textSubtitle1,
|
||||
)
|
||||
: STextStyles.label(context),
|
||||
),
|
||||
Text(
|
||||
extractPrettyDateString(notification.date),
|
||||
style: STextStyles.label(context),
|
||||
style: isDesktop
|
||||
? STextStyles.desktopTextExtraExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textSubtitle1,
|
||||
)
|
||||
: STextStyles.label(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_v
|
|||
import 'package:stackwallet/pages_desktop_specific/home/notifications/desktop_notifications_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/support_and_about_view/desktop_about_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/support_and_about_view/desktop_support_view.dart';
|
||||
import 'package:stackwallet/providers/desktop/current_desktop_menu_item.dart';
|
||||
import 'package:stackwallet/providers/global/notifications_provider.dart';
|
||||
import 'package:stackwallet/providers/ui/unread_notifications_provider.dart';
|
||||
import 'package:stackwallet/route_generator.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
||||
|
|
@ -20,7 +23,6 @@ class DesktopHomeView extends ConsumerStatefulWidget {
|
|||
}
|
||||
|
||||
class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
|
||||
DesktopMenuItemId currentViewKey = DesktopMenuItemId.myStack;
|
||||
final Map<DesktopMenuItemId, Widget> contentViews = {
|
||||
DesktopMenuItemId.myStack: const Navigator(
|
||||
key: Key("desktopStackHomeKey"),
|
||||
|
|
@ -58,10 +60,36 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
|
|||
),
|
||||
};
|
||||
|
||||
void onMenuSelectionChanged(DesktopMenuItemId newKey) {
|
||||
setState(() {
|
||||
currentViewKey = newKey;
|
||||
});
|
||||
void onMenuSelectionWillChange(DesktopMenuItemId newKey) {
|
||||
// check for unread notifications and refresh provider before
|
||||
// showing notifications view
|
||||
if (newKey == DesktopMenuItemId.notifications) {
|
||||
ref.refresh(unreadNotificationsStateProvider);
|
||||
}
|
||||
// mark notifications as read if leaving notifications view
|
||||
if (ref.read(currentDesktopMenuItemProvider.state).state ==
|
||||
DesktopMenuItemId.notifications &&
|
||||
newKey != DesktopMenuItemId.notifications) {
|
||||
final Set<int> unreadNotificationIds =
|
||||
ref.read(unreadNotificationsStateProvider.state).state;
|
||||
|
||||
if (unreadNotificationIds.isNotEmpty) {
|
||||
List<Future<void>> futures = [];
|
||||
for (int i = 0; i < unreadNotificationIds.length - 1; i++) {
|
||||
futures.add(ref
|
||||
.read(notificationsProvider)
|
||||
.markAsRead(unreadNotificationIds.elementAt(i), false));
|
||||
}
|
||||
|
||||
// wait for multiple to update if any
|
||||
Future.wait(futures).then((_) {
|
||||
// only notify listeners once
|
||||
ref
|
||||
.read(notificationsProvider)
|
||||
.markAsRead(unreadNotificationIds.last, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
|
|
@ -71,14 +99,16 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
|
|||
child: Row(
|
||||
children: [
|
||||
DesktopMenu(
|
||||
onSelectionChanged: onMenuSelectionChanged,
|
||||
// onSelectionChanged: onMenuSelectionChanged,
|
||||
onSelectionWillChange: onMenuSelectionWillChange,
|
||||
),
|
||||
Container(
|
||||
width: 1,
|
||||
color: Theme.of(context).extension<StackColors>()!.background,
|
||||
),
|
||||
Expanded(
|
||||
child: contentViews[currentViewKey]!,
|
||||
child: contentViews[
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state]!,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart';
|
||||
import 'package:stackwallet/providers/desktop/current_desktop_menu_item.dart';
|
||||
import 'package:stackwallet/utilities/assets.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
|
@ -21,10 +22,12 @@ enum DesktopMenuItemId {
|
|||
class DesktopMenu extends ConsumerStatefulWidget {
|
||||
const DesktopMenu({
|
||||
Key? key,
|
||||
required this.onSelectionChanged,
|
||||
this.onSelectionChanged,
|
||||
this.onSelectionWillChange,
|
||||
}) : super(key: key);
|
||||
|
||||
final void Function(DesktopMenuItemId)? onSelectionChanged;
|
||||
final void Function(DesktopMenuItemId)? onSelectionWillChange;
|
||||
|
||||
@override
|
||||
ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
|
||||
|
|
@ -35,12 +38,12 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
static const minimizedWidth = 72.0;
|
||||
|
||||
double _width = expandedWidth;
|
||||
DesktopMenuItemId selectedMenuItem = DesktopMenuItemId.myStack;
|
||||
|
||||
void updateSelectedMenuItem(DesktopMenuItemId idKey) {
|
||||
setState(() {
|
||||
selectedMenuItem = idKey;
|
||||
});
|
||||
widget.onSelectionWillChange?.call(idKey);
|
||||
|
||||
ref.read(currentDesktopMenuItemProvider.state).state = idKey;
|
||||
|
||||
widget.onSelectionChanged?.call(idKey);
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +98,10 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.walletDesktop,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: DesktopMenuItemId.myStack == selectedMenuItem
|
||||
color: DesktopMenuItemId.myStack ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
|
|
@ -106,7 +112,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "My Stack",
|
||||
value: DesktopMenuItemId.myStack,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -118,7 +125,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
// Assets.svg.exchangeDesktop,
|
||||
// width: 20,
|
||||
// height: 20,
|
||||
// color: DesktopMenuItemId.exchange == selectedMenuItem
|
||||
// color: DesktopMenuItemId.exchange == ref.watch(currentDesktopMenuItemProvider.state).state
|
||||
// ? Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .textDark
|
||||
|
|
@ -129,7 +136,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
// ),
|
||||
// label: "Exchange",
|
||||
// value: DesktopMenuItemId.exchange,
|
||||
// group: selectedMenuItem,
|
||||
// group: ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
// onChanged: updateSelectedMenuItem,
|
||||
// iconOnly: _width == minimizedWidth,
|
||||
// ),
|
||||
|
|
@ -141,19 +148,22 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color:
|
||||
DesktopMenuItemId.notifications == selectedMenuItem
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
.withOpacity(0.8),
|
||||
color: DesktopMenuItemId.notifications ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
.withOpacity(0.8),
|
||||
),
|
||||
label: "Notifications",
|
||||
value: DesktopMenuItemId.notifications,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -165,7 +175,10 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.addressBookDesktop,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: DesktopMenuItemId.addressBook == selectedMenuItem
|
||||
color: DesktopMenuItemId.addressBook ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
|
|
@ -176,7 +189,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "Address Book",
|
||||
value: DesktopMenuItemId.addressBook,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -188,7 +202,10 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.gear,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: DesktopMenuItemId.settings == selectedMenuItem
|
||||
color: DesktopMenuItemId.settings ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
|
|
@ -199,7 +216,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "Settings",
|
||||
value: DesktopMenuItemId.settings,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -211,7 +229,10 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.messageQuestion,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: DesktopMenuItemId.support == selectedMenuItem
|
||||
color: DesktopMenuItemId.support ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
|
|
@ -222,7 +243,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "Support",
|
||||
value: DesktopMenuItemId.support,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -234,7 +256,10 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
Assets.svg.aboutDesktop,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: DesktopMenuItemId.about == selectedMenuItem
|
||||
color: DesktopMenuItemId.about ==
|
||||
ref
|
||||
.watch(currentDesktopMenuItemProvider.state)
|
||||
.state
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark
|
||||
|
|
@ -245,7 +270,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "About",
|
||||
value: DesktopMenuItemId.about,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
iconOnly: _width == minimizedWidth,
|
||||
),
|
||||
|
|
@ -262,7 +288,8 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
|
|||
),
|
||||
label: "Exit",
|
||||
value: 7,
|
||||
group: selectedMenuItem,
|
||||
group:
|
||||
ref.watch(currentDesktopMenuItemProvider.state).state,
|
||||
onChanged: (_) {
|
||||
// todo: save stuff/ notify before exit?
|
||||
exit(0);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/notifications/notification_card.dart';
|
||||
import 'package:stackwallet/providers/providers.dart';
|
||||
import 'package:stackwallet/providers/ui/unread_notifications_provider.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
|
||||
|
|
@ -47,10 +48,25 @@ class _DesktopNotificationsViewState
|
|||
),
|
||||
)
|
||||
: ListView.builder(
|
||||
primary: false,
|
||||
itemCount: notifications.length,
|
||||
itemBuilder: (context, index) {
|
||||
return NotificationCard(
|
||||
notification: notifications[index],
|
||||
final notification = notifications[index];
|
||||
if (notification.read == false) {
|
||||
ref
|
||||
.read(unreadNotificationsStateProvider.state)
|
||||
.state
|
||||
.add(notification.id);
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 5,
|
||||
),
|
||||
child: NotificationCard(
|
||||
notification: notification,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
5
lib/providers/desktop/current_desktop_menu_item.dart
Normal file
5
lib/providers/desktop/current_desktop_menu_item.dart
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
|
||||
|
||||
final currentDesktopMenuItemProvider =
|
||||
StateProvider<DesktopMenuItemId>((ref) => DesktopMenuItemId.myStack);
|
||||
Loading…
Reference in a new issue