From ed42cb91342db54758bc83357cb28a5d66518411 Mon Sep 17 00:00:00 2001 From: Christian Pauly Date: Fri, 4 Nov 2022 11:17:22 +0100 Subject: [PATCH] chore: Design enhancements --- lib/config/app_config.dart | 2 +- lib/pages/chat/events/message.dart | 10 ++-- lib/pages/chat_list/chat_list.dart | 3 - lib/pages/chat_list/chat_list_item.dart | 4 +- lib/pages/connect/connect_page_view.dart | 22 +++++-- .../homeserver_picker_view.dart | 59 ++++++++++--------- lib/pages/login/login_view.dart | 2 - lib/pages/sign_up/signup_view.dart | 3 - lib/widgets/layouts/login_scaffold.dart | 37 ++++++------ 9 files changed, 77 insertions(+), 65 deletions(-) diff --git a/lib/config/app_config.dart b/lib/config/app_config.dart index 528777d6..d9bec2bf 100644 --- a/lib/config/app_config.dart +++ b/lib/config/app_config.dart @@ -16,7 +16,7 @@ abstract class AppConfig { static const double messageFontSize = 15.75; static const bool allowOtherHomeservers = true; static const bool enableRegistration = true; - static const Color primaryColor = Color(0xFF5625BA); + static const Color primaryColor = Color.fromARGB(255, 135, 103, 172); static const Color primaryColorLight = Color(0xFFCCBDEA); static const Color secondaryColor = Color(0xFF41a2bc); static String _privacyUrl = diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index b5d5cbc3..1a9ad1da 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -89,13 +89,13 @@ class Message extends StatelessWidget { final displayEvent = event.getDisplayEvent(timeline); final borderRadius = BorderRadius.only( topLeft: !ownMessage - ? const Radius.circular(2) - : const Radius.circular(AppConfig.borderRadius), - topRight: ownMessage - ? const Radius.circular(2) + ? const Radius.circular(4) : const Radius.circular(AppConfig.borderRadius), + topRight: const Radius.circular(AppConfig.borderRadius), bottomLeft: const Radius.circular(AppConfig.borderRadius), - bottomRight: const Radius.circular(AppConfig.borderRadius), + bottomRight: ownMessage + ? const Radius.circular(4) + : const Radius.circular(AppConfig.borderRadius), ); final noBubble = { MessageTypes.Video, diff --git a/lib/pages/chat_list/chat_list.dart b/lib/pages/chat_list/chat_list.dart index 35e23552..d489a781 100644 --- a/lib/pages/chat_list/chat_list.dart +++ b/lib/pages/chat_list/chat_list.dart @@ -160,8 +160,6 @@ class ChatListController extends State bool isSearching = false; static const String _serverStoreNamespace = 'im.fluffychat.search.server'; - StreamSubscription? _spacesSubscription; - void setServer() async { final newServer = await showTextInputDialog( useRootNavigator: false, @@ -371,7 +369,6 @@ class ChatListController extends State _intentDataStreamSubscription?.cancel(); _intentFileStreamSubscription?.cancel(); _intentUriStreamSubscription?.cancel(); - _spacesSubscription?.cancel(); scrollController.removeListener(_onScroll); super.dispose(); } diff --git a/lib/pages/chat_list/chat_list_item.dart b/lib/pages/chat_list/chat_list_item.dart index cc4ec38c..75d24cf7 100644 --- a/lib/pages/chat_list/chat_list_item.dart +++ b/lib/pages/chat_list/chat_list_item.dart @@ -205,9 +205,9 @@ class ChatListItem extends StatelessWidget { padding: EdgeInsets.only( right: room.notificationCount > 0 ? 4.0 : 0.0), child: Icon( - Icons.push_pin_outlined, + Icons.push_pin, size: 16, - color: Theme.of(context).colorScheme.secondary, + color: Theme.of(context).colorScheme.primary, ), ), Padding( diff --git a/lib/pages/connect/connect_page_view.dart b/lib/pages/connect/connect_page_view.dart index c4396503..e40919c8 100644 --- a/lib/pages/connect/connect_page_view.dart +++ b/lib/pages/connect/connect_page_view.dart @@ -3,6 +3,7 @@ import 'dart:typed_data'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; +import 'package:matrix/matrix.dart'; import 'package:fluffychat/pages/connect/connect_page.dart'; import 'package:fluffychat/widgets/layouts/login_scaffold.dart'; @@ -95,7 +96,6 @@ class ConnectPageView extends StatelessWidget { hintText: L10n.of(context)!.chooseAUsername, errorText: controller.signupError, errorStyle: const TextStyle(color: Colors.orange), - fillColor: Theme.of(context).colorScheme.background, ), ), ), @@ -150,9 +150,10 @@ class ConnectPageView extends StatelessWidget { ) : Center( child: identityProviders.length == 1 - ? Padding( + ? Container( + width: double.infinity, padding: const EdgeInsets.all(12.0), - child: ElevatedButton( + child: ElevatedButton.icon( style: ElevatedButton.styleFrom( backgroundColor: Theme.of(context) .colorScheme @@ -161,9 +162,22 @@ class ConnectPageView extends StatelessWidget { .colorScheme .onPrimaryContainer, ), + icon: identityProviders.single.icon == null + ? const Icon( + Icons.web_outlined, + size: 16, + ) + : Image.network( + Uri.parse(identityProviders.single.icon!) + .getDownloadLink(Matrix.of(context) + .getLoginClient()) + .toString(), + width: 32, + height: 32, + ), onPressed: () => controller .ssoLoginAction(identityProviders.single.id!), - child: Text(identityProviders.single.name ?? + label: Text(identityProviders.single.name ?? identityProviders.single.brand ?? L10n.of(context)!.loginWithOneClick), ), diff --git a/lib/pages/homeserver_picker/homeserver_picker_view.dart b/lib/pages/homeserver_picker/homeserver_picker_view.dart index 53fb0d00..5ab0ca50 100644 --- a/lib/pages/homeserver_picker/homeserver_picker_view.dart +++ b/lib/pages/homeserver_picker/homeserver_picker_view.dart @@ -16,6 +16,26 @@ class HomeserverPickerView extends StatelessWidget { Widget build(BuildContext context) { final benchmarkResults = controller.benchmarkResults; return LoginScaffold( + appBar: AppBar( + titleSpacing: 0, + title: Padding( + padding: const EdgeInsets.all(12.0), + child: TextField( + focusNode: controller.homeserverFocusNode, + controller: controller.homeserverController, + onChanged: controller.onChanged, + decoration: InputDecoration( + prefixText: '${L10n.of(context)!.homeserver}: ', + hintText: L10n.of(context)!.enterYourHomeserver, + suffixIcon: const Icon(Icons.search), + errorText: controller.error, + ), + readOnly: !AppConfig.allowOtherHomeservers, + onSubmitted: (_) => controller.checkHomeserverAction(), + autocorrect: false, + ), + ), + ), body: Column( children: [ // display a prominent banner to import session for TOR browser @@ -44,32 +64,6 @@ class HomeserverPickerView extends StatelessWidget { Expanded( child: ListView( children: [ - Container( - alignment: Alignment.center, - height: 200, - child: Image.asset( - 'assets/info-logo.png', - filterQuality: FilterQuality.medium, - ), - ), - Padding( - padding: const EdgeInsets.all(12.0), - child: TextField( - focusNode: controller.homeserverFocusNode, - controller: controller.homeserverController, - onChanged: controller.onChanged, - decoration: InputDecoration( - prefixText: '${L10n.of(context)!.homeserver}: ', - hintText: L10n.of(context)!.enterYourHomeserver, - suffixIcon: const Icon(Icons.search), - errorText: controller.error, - fillColor: Theme.of(context).backgroundColor, - ), - readOnly: !AppConfig.allowOtherHomeservers, - onSubmitted: (_) => controller.checkHomeserverAction(), - autocorrect: false, - ), - ), if (controller.displayServerList) Padding( padding: const EdgeInsets.all(12.0), @@ -114,9 +108,17 @@ class HomeserverPickerView extends StatelessWidget { ), ), ) - else + else ...[ + Container( + alignment: Alignment.center, + height: 200, + child: Image.asset( + 'assets/info-logo.png', + filterQuality: FilterQuality.medium, + ), + ), Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Center( child: Text( AppConfig.applicationWelcomeMessage ?? @@ -126,6 +128,7 @@ class HomeserverPickerView extends StatelessWidget { ), ), ), + ], ], ), ), diff --git a/lib/pages/login/login_view.dart b/lib/pages/login/login_view.dart index 8f22069e..dc98757b 100644 --- a/lib/pages/login/login_view.dart +++ b/lib/pages/login/login_view.dart @@ -47,7 +47,6 @@ class LoginView extends StatelessWidget { errorText: controller.usernameError, errorStyle: const TextStyle(color: Colors.orange), hintText: L10n.of(context)!.emailOrUsername, - fillColor: Theme.of(context).colorScheme.background, ), ), ), @@ -76,7 +75,6 @@ class LoginView extends StatelessWidget { ), ), hintText: L10n.of(context)!.password, - fillColor: Theme.of(context).colorScheme.background, ), ), ), diff --git a/lib/pages/sign_up/signup_view.dart b/lib/pages/sign_up/signup_view.dart index 51e09269..1fbeede3 100644 --- a/lib/pages/sign_up/signup_view.dart +++ b/lib/pages/sign_up/signup_view.dart @@ -46,7 +46,6 @@ class SignupPageView extends StatelessWidget { ), errorStyle: const TextStyle(color: Colors.orange), hintText: L10n.of(context)!.chooseAStrongPassword, - fillColor: Theme.of(context).colorScheme.background, ), ), ), @@ -65,7 +64,6 @@ class SignupPageView extends StatelessWidget { prefixIcon: const Icon(Icons.repeat_outlined), hintText: L10n.of(context)!.repeatPassword, errorStyle: const TextStyle(color: Colors.orange), - fillColor: Theme.of(context).colorScheme.background, ), ), ), @@ -83,7 +81,6 @@ class SignupPageView extends StatelessWidget { prefixIcon: const Icon(Icons.mail_outlined), hintText: L10n.of(context)!.enterAnEmailAddress, errorText: controller.error, - fillColor: Theme.of(context).colorScheme.background, errorMaxLines: 4, errorStyle: TextStyle( color: controller.emailController.text.isEmpty diff --git a/lib/widgets/layouts/login_scaffold.dart b/lib/widgets/layouts/login_scaffold.dart index f3a9a77c..69d96807 100644 --- a/lib/widgets/layouts/login_scaffold.dart +++ b/lib/widgets/layouts/login_scaffold.dart @@ -16,6 +16,25 @@ class LoginScaffold extends StatelessWidget { @override Widget build(BuildContext context) { final isMobileMode = !FluffyThemes.isColumnMode(context); + final scaffold = Scaffold( + backgroundColor: isMobileMode ? null : Colors.transparent, + appBar: appBar == null + ? null + : AppBar( + titleSpacing: appBar?.titleSpacing, + automaticallyImplyLeading: + appBar?.automaticallyImplyLeading ?? true, + centerTitle: appBar?.centerTitle, + title: appBar?.title, + leading: appBar?.leading, + actions: appBar?.actions, + backgroundColor: isMobileMode ? null : Colors.transparent, + ), + extendBodyBehindAppBar: true, + extendBody: true, + body: body, + ); + if (isMobileMode) return scaffold; return Container( decoration: const BoxDecoration( image: DecorationImage( @@ -38,23 +57,7 @@ class LoginScaffold extends StatelessWidget { constraints: isMobileMode ? const BoxConstraints() : const BoxConstraints(maxWidth: 480, maxHeight: 640), - child: Scaffold( - backgroundColor: Colors.transparent, - appBar: appBar == null - ? null - : AppBar( - automaticallyImplyLeading: - appBar?.automaticallyImplyLeading ?? true, - centerTitle: appBar?.centerTitle, - title: appBar?.title, - leading: appBar?.leading, - actions: appBar?.actions, - backgroundColor: Colors.transparent, - ), - extendBodyBehindAppBar: true, - extendBody: true, - body: body, - ), + child: scaffold, ), ), ),