Mikescher/SimpleCloudNotifier
1
0
Fork 0
Code Pull Requests Actions Releases Activity

fixes and ui.dart

Browse Source
This commit is contained in:
Mike Schwörer 2024-06-08 12:55:58 +02:00
parent 95d51c82e9
commit 243a274480
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
9 changed files with 277 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
flutter/lib/nav_layout.dart
View File

@ -64,13 +64,13 @@ class _SCNNavLayoutState extends State<SCNNavLayout> {
showSearch: _selectedIndex == 0 || _selectedIndex == 1,
showThemeSwitch: true,
),
body: LazyIndexedStack(
body: IndexedStack(
children: [
MessageListPage(),
ChannelRootPage(),
AccountRootPage(),
SettingsRootPage(),
SendRootPage(),
ExcludeFocus(excluding: _selectedIndex != 0, child: MessageListPage()),
ExcludeFocus(excluding: _selectedIndex != 1, child: ChannelRootPage()),
ExcludeFocus(excluding: _selectedIndex != 2, child: AccountRootPage()),
ExcludeFocus(excluding: _selectedIndex != 3, child: SettingsRootPage()),
ExcludeFocus(excluding: _selectedIndex != 4, child: SendRootPage()),
],
index: _selectedIndex,
),

133
flutter/lib/pages/account/account.dart
View File

@ -11,6 +11,7 @@ import 'package:simplecloudnotifier/state/application_log.dart';
import 'package:simplecloudnotifier/state/globals.dart';
import 'package:simplecloudnotifier/state/app_auth.dart';
import 'package:simplecloudnotifier/utils/toaster.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
import 'package:uuid/uuid.dart';
class AccountRootPage extends StatefulWidget {
@ -143,22 +144,23 @@ class _AccountRootPageState extends State<AccountRootPage> {
),
),
const SizedBox(height: 32),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
UI.button(
text: 'Create new account',
onPressed: () {
if (loading) return;
_createNewAccount();
},
child: const Text('Create new account'),
big: true,
),
const SizedBox(height: 16),
FilledButton.tonal(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
UI.button(
text: 'Use existing account',
onPressed: () {
if (loading) return;
Navigator.push(context, MaterialPageRoute<AccountLoginPage>(builder: (context) => AccountLoginPage()));
},
child: const Text('Use existing account'),
tonal: true,
big: true,
),
],
),
@ -167,11 +169,7 @@ class _AccountRootPageState extends State<AccountRootPage> {
}
Widget _buildShowAccount(BuildContext context, AppAuth acc, User user) {
//TODO better layout
return Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 24.0, 8.0, 8.0),
child: Column(
@ -181,14 +179,12 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text(user.username ?? user.userID, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
const SizedBox(height: 16),
..._buildCards(context, user),
],
),
),
),
const Expanded(child: SizedBox(height: 16)),
SizedBox(height: 16),
_buildFooter(context, user),
SizedBox(height: 40)
SizedBox(height: 40),
],
),
),
);
}
@ -275,23 +271,15 @@ class _AccountRootPageState extends State<AccountRootPage> {
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
icon: FaIcon(FontAwesomeIcons.pen),
iconSize: 18,
padding: EdgeInsets.all(4),
constraints: BoxConstraints(),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
UI.buttonIconOnly(
onPressed: () {/*TODO*/},
icon: FontAwesomeIcons.pen,
),
const SizedBox(height: 4),
if (!user.isPro)
IconButton(
icon: FaIcon(FontAwesomeIcons.cartCircleArrowUp),
iconSize: 18,
padding: EdgeInsets.all(4),
constraints: BoxConstraints(),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
UI.buttonIconOnly(
onPressed: () {/*TODO*/},
icon: FontAwesomeIcons.cartCircleArrowUp,
),
],
),
@ -301,15 +289,9 @@ class _AccountRootPageState extends State<AccountRootPage> {
List<Widget> _buildCards(BuildContext context, User user) {
return [
Card.filled(
UI.buttonCard(
context: context,
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: () {/*TODO*/},
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
FutureBuilder(
@ -325,18 +307,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text('Subscriptions', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
],
),
),
),
),
Card.filled(
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: () {/*TODO*/},
child: Padding(
padding: const EdgeInsets.all(16),
),
UI.buttonCard(
context: context,
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
child: Row(
children: [
FutureBuilder(
@ -352,18 +327,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text('Clients', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
],
),
),
),
),
Card.filled(
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: () {/*TODO*/},
child: Padding(
padding: const EdgeInsets.all(16),
),
UI.buttonCard(
context: context,
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
child: Row(
children: [
FutureBuilder(
@ -379,18 +347,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text('Keys', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
],
),
),
),
),
Card.filled(
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: () {/*TODO*/},
child: Padding(
padding: const EdgeInsets.all(16),
),
UI.buttonCard(
context: context,
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
child: Row(
children: [
FutureBuilder(
@ -406,18 +367,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text('Channels', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
],
),
),
),
),
Card.filled(
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: () {/*TODO*/},
child: Padding(
padding: const EdgeInsets.all(16),
),
UI.buttonCard(
context: context,
margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
child: Row(
children: [
Text('${user.messagesSent}', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
@ -425,8 +379,7 @@ class _AccountRootPageState extends State<AccountRootPage> {
Text('Messages', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
],
),
),
),
onTap: () {/*TODO*/},
),
];
}
@ -436,9 +389,19 @@ class _AccountRootPageState extends State<AccountRootPage> {
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: Row(
children: [
Expanded(child: FilledButton(onPressed: _logout, child: Text('Logout'), style: TextButton.styleFrom(backgroundColor: Colors.orange))),
Expanded(
child: UI.button(
text: 'Logout',
onPressed: _logout,
color: Colors.orange,
)),
const SizedBox(width: 8),
Expanded(child: FilledButton(onPressed: _deleteAccount, child: Text('Delete Account'), style: TextButton.styleFrom(backgroundColor: Colors.red))),
Expanded(
child: UI.button(
text: 'Delete Account',
onPressed: _deleteAccount,
color: Colors.red,
)),
],
),
);

7
flutter/lib/pages/account/login.dart
View File

@ -9,6 +9,7 @@ import 'package:simplecloudnotifier/state/globals.dart';
import 'package:simplecloudnotifier/state/app_auth.dart';
import 'package:simplecloudnotifier/state/token_source.dart';
import 'package:simplecloudnotifier/utils/toaster.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
class AccountLoginPage extends StatefulWidget {
const AccountLoginPage({super.key});
@ -102,10 +103,10 @@ class _AccountLoginPageState extends State<AccountLoginPage> {
),
),
const SizedBox(height: 16),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
UI.button(
text: 'Login',
big: true,
onPressed: _login,
child: const Text('Login'),
),
],
),

41
flutter/lib/pages/debug/debug_actions.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:simplecloudnotifier/utils/toaster.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
import 'package:toastification/toastification.dart';
class DebugActionsPage extends StatefulWidget {
@ -17,36 +18,40 @@ class _DebugActionsPageState extends State<DebugActionsPage> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
UI.button(
big: false,
onPressed: () => Toaster.success("Hello World", "This was a triumph!"),
child: const Text('Show Success Notification'),
text: 'Show Success Notification',
),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
SizedBox(height: 4),
UI.button(
big: false,
onPressed: () => Toaster.info("Hello World", "This was a triumph!"),
child: const Text('Show Info Notification'),
text: 'Show Info Notification',
),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
SizedBox(height: 4),
UI.button(
big: false,
onPressed: () => Toaster.warn("Hello World", "This was a triumph!"),
child: const Text('Show Warn Notification'),
text: 'Show Warn Notification',
),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
SizedBox(height: 4),
UI.button(
big: false,
onPressed: () => Toaster.error("Hello World", "This was a triumph!"),
child: const Text('Show Info Notification'),
text: 'Show Info Notification',
),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
SizedBox(height: 4),
UI.button(
big: false,
onPressed: () => Toaster.simple("Hello World"),
child: const Text('Show Simple Notification'),
text: 'Show Simple Notification',
),
SizedBox(height: 20),
FilledButton(
style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
UI.button(
big: false,
onPressed: _sendTokenToServer,
child: const Text('Send FCM Token to Server'),
text: 'Send FCM Token to Server',
),
],
),

11
flutter/lib/pages/debug/debug_request_view.dart
View File

@ -4,6 +4,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:simplecloudnotifier/components/layout/scaffold.dart';
import 'package:simplecloudnotifier/state/request_log.dart';
import 'package:simplecloudnotifier/utils/toaster.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
class DebugRequestViewPage extends StatelessWidget {
final SCNRequest request;
@ -55,17 +56,13 @@ class DebugRequestViewPage extends StatelessWidget {
Expanded(
child: Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
),
IconButton(
icon: FaIcon(
FontAwesomeIcons.copy,
),
UI.buttonIconOnly(
iconSize: 14,
padding: EdgeInsets.fromLTRB(0, 0, 4, 0),
constraints: BoxConstraints(),
onPressed: () {
Clipboard.setData(new ClipboardData(text: value));
Clipboard.setData(new ClipboardData(text: title));
Toaster.info("Clipboard", 'Copied text to Clipboard');
},
icon: FontAwesomeIcons.copy,
),
],
),

18
flutter/lib/pages/message_list/message_list_item.dart
View File

@ -5,6 +5,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:simplecloudnotifier/models/channel.dart';
import 'package:simplecloudnotifier/models/message.dart';
import 'package:intl/intl.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
class MessageListItem extends StatelessWidget {
static final _dateFormat = DateFormat('yyyy-MM-dd kk:mm');
@ -102,19 +103,10 @@ class MessageListItem extends StatelessWidget {
if (message.priority == 2) SizedBox(width: 4),
if (message.priority == 0) FaIcon(FontAwesomeIcons.solidDown, size: 16, color: Colors.lightBlue[900]),
if (message.priority == 0) SizedBox(width: 4),
Container(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
margin: const EdgeInsets.fromLTRB(0, 0, 4, 0),
decoration: BoxDecoration(
color: Theme.of(context).hintColor,
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: Text(
resolveChannelName(message),
style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: 12),
overflow: TextOverflow.clip,
maxLines: 1,
),
UI.channelChip(
context: context,
text: resolveChannelName(message),
margin: EdgeInsets.fromLTRB(0, 0, 4, 0),
),
Expanded(child: SizedBox()),
Text(

47
flutter/lib/pages/message_view/message_view.dart
View File

@ -12,6 +12,7 @@ import 'package:simplecloudnotifier/models/keytoken.dart';
import 'package:simplecloudnotifier/models/message.dart';
import 'package:simplecloudnotifier/models/user.dart';
import 'package:simplecloudnotifier/state/app_auth.dart';
import 'package:simplecloudnotifier/utils/ui.dart';
class MessageViewPage extends StatefulWidget {
const MessageViewPage({super.key, required this.message});
@ -129,19 +130,11 @@ class _MessageViewPageState extends State<MessageViewPage> {
return [
Row(
children: [
Container(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
UI.channelChip(
context: context,
text: _resolveChannelName(channel, message),
margin: const EdgeInsets.fromLTRB(0, 0, 4, 0),
decoration: BoxDecoration(
color: Theme.of(context).hintColor,
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: Text(
_resolveChannelName(channel, message),
style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: 16),
overflow: TextOverflow.clip,
maxLines: 1,
),
fontSize: 16,
),
Expanded(child: SizedBox()),
Text(_dateFormat.format(DateTime.parse(message.timestamp)), style: const TextStyle(fontSize: 14)),
@ -157,29 +150,18 @@ class _MessageViewPageState extends State<MessageViewPage> {
Row(
children: [
Expanded(child: SizedBox()),
IconButton(
icon: FaIcon(FontAwesomeIcons.copy),
iconSize: 18,
padding: EdgeInsets.all(4),
constraints: BoxConstraints(),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
UI.buttonIconOnly(
onPressed: () {/*TODO*/},
icon: FontAwesomeIcons.copy,
),
IconButton(
icon: FaIcon(FontAwesomeIcons.lineColumns),
iconSize: 18,
padding: EdgeInsets.all(4),
constraints: BoxConstraints(),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
UI.buttonIconOnly(
icon: FontAwesomeIcons.lineColumns,
onPressed: () {/*TODO*/},
),
],
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).hintColor),
borderRadius: BorderRadius.circular(4),
),
UI.box(
context: context,
padding: const EdgeInsets.all(4),
child: Text(message.content ?? ''),
),
@ -187,12 +169,9 @@ class _MessageViewPageState extends State<MessageViewPage> {
}
Widget _buildMetaCard(BuildContext context, IconData icn, String title, List<String> values, void Function()? action) {
final container = Container(
final container = UI.box(
context: context,
padding: EdgeInsets.fromLTRB(16, 2, 4, 2),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).hintColor),
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
FaIcon(icn, size: 18),

1
flutter/lib/utils/navi.dart Normal file
View File

@ -0,0 +1 @@
class Navi {}

109
flutter/lib/utils/ui.dart Normal file
View File

@ -0,0 +1,109 @@
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class UI {
static const double DefaultBorderRadius = 4;
static Widget button({required String text, required void Function() onPressed, bool big = false, Color? color = null, bool tonal = false, IconData? icon = null}) {
final double fontSize = big ? 24 : 14;
final padding = big ? EdgeInsets.fromLTRB(8, 12, 8, 12) : null;
final style = FilledButton.styleFrom(
textStyle: TextStyle(fontSize: fontSize),
padding: padding,
backgroundColor: color,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(DefaultBorderRadius)),
);
if (tonal) {
if (icon != null) {
return FilledButton.tonalIcon(
style: style,
onPressed: onPressed,
icon: Icon(icon),
label: Text(text),
);
} else {
return FilledButton.tonal(
style: style,
onPressed: onPressed,
child: Text(text),
);
}
} else {
if (icon != null) {
return FilledButton.icon(
style: style,
onPressed: onPressed,
icon: Icon(icon),
label: Text(text),
);
} else {
return FilledButton(
style: style,
onPressed: onPressed,
child: Text(text),
);
}
}
}
static Widget buttonIconOnly({
required void Function() onPressed,
required IconData icon,
double? iconSize = null,
}) {
return IconButton(
icon: FaIcon(icon),
iconSize: iconSize ?? 18,
padding: EdgeInsets.all(4),
constraints: BoxConstraints(),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
onPressed: onPressed,
);
}
static Widget buttonCard({required BuildContext context, required Widget child, required void Function() onTap, EdgeInsets? margin = null}) {
return Card.filled(
margin: margin,
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(DefaultBorderRadius)),
color: Theme.of(context).cardTheme.color,
child: InkWell(
splashColor: Theme.of(context).splashColor,
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(16),
child: child,
),
),
);
}
static Widget channelChip({required BuildContext context, required String text, EdgeInsets? margin = null, double fontSize = 12}) {
return Container(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
margin: margin,
decoration: BoxDecoration(
color: Theme.of(context).hintColor,
borderRadius: BorderRadius.all(Radius.circular(DefaultBorderRadius)),
),
child: Text(
text,
style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: fontSize),
overflow: TextOverflow.clip,
maxLines: 1,
),
);
}
static Widget box({required BuildContext context, required Widget child, required EdgeInsets? padding}) {
return Container(
padding: padding ?? EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).hintColor),
borderRadius: BorderRadius.circular(DefaultBorderRadius),
),
child: child,
);
}
}