GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2024-11-30 08:19:30 +01:00
Code Issues Projects Releases Wiki Activity

feat: Initial material you support

Browse Source
This commit is contained in:
Christian Pauly 2022-05-18 08:54:50 +02:00
parent a6ef4f670d
commit 1e3f778130
10 changed files with 87 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/colors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

5
lib/config/app_config.dart
View File

@ -11,7 +11,8 @@ abstract class AppConfig {
static String get defaultHomeserver => _defaultHomeserver; static String get defaultHomeserver => _defaultHomeserver;
static double bubbleSizeFactor = 1; static double bubbleSizeFactor = 1;
static double fontSizeFactor = 1; static double fontSizeFactor = 1;
static Color chatColor = primaryColor; static const Color chatColor = primaryColor;
static Color? colorSchemeSeed;
static const double messageFontSize = 15.75; static const double messageFontSize = 15.75;
static const bool allowOtherHomeservers = true; static const bool allowOtherHomeservers = true;
static const bool enableRegistration = true; static const bool enableRegistration = true;
@ -63,7 +64,7 @@ abstract class AppConfig {
static void loadFromJson(Map<String, dynamic> json) { static void loadFromJson(Map<String, dynamic> json) {
if (json['chat_color'] != null) { if (json['chat_color'] != null) {
try { try {
chatColor = Color(json['application_name']); colorSchemeSeed = Color(json['application_name']);
} catch (e) { } catch (e) {
Logs().w( Logs().w(
'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"', 'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"',

127
lib/config/themes.dart
View File

@ -1,4 +1,3 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -23,6 +22,9 @@ abstract class FluffyThemes {
Widget? prefixIcon, Widget? prefixIcon,
}) => }) =>
InputDecoration( InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
fillColor: Colors.white.withAlpha(200), fillColor: Colors.white.withAlpha(200),
labelText: labelText, labelText: labelText,
hintText: hintText, hintText: hintText,
@ -74,17 +76,9 @@ abstract class FluffyThemes {
static ThemeData get light => ThemeData( static ThemeData get light => ThemeData(
visualDensity: VisualDensity.standard, visualDensity: VisualDensity.standard,
primaryColorDark: Colors.white, useMaterial3: true,
primaryColorLight: const Color(0xff121212),
brightness: Brightness.light, brightness: Brightness.light,
primaryColor: AppConfig.chatColor, colorSchemeSeed: AppConfig.colorSchemeSeed,
colorScheme: ThemeData.light().colorScheme.copyWith(
primary: AppConfig.chatColor,
secondary: AppConfig.chatColor,
surface: FluffyThemes.lighten(AppConfig.chatColor, 0.535),
),
backgroundColor: Colors.white,
secondaryHeaderColor: Colors.blueGrey.shade50,
scaffoldBackgroundColor: Colors.white, scaffoldBackgroundColor: Colors.white,
textTheme: PlatformInfos.isDesktop textTheme: PlatformInfos.isDesktop
? Typography.material2018().black.merge(fallbackTextTheme) ? Typography.material2018().black.merge(fallbackTextTheme)
@ -101,54 +95,23 @@ abstract class FluffyThemes {
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
}, },
), ),
dialogTheme: DialogTheme( dividerColor: Colors.blueGrey.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
popupMenuTheme: PopupMenuThemeData(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: AppConfig.chatColor,
foregroundColor: Colors.white,
),
elevatedButtonTheme: ElevatedButtonThemeData( elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
primary: AppConfig.chatColor,
onPrimary: Colors.white,
textStyle: const TextStyle(fontSize: 16), textStyle: const TextStyle(fontSize: 16),
elevation: 6, elevation: 6,
shadowColor: const Color(0x44000000), shadowColor: const Color(0x44000000),
minimumSize: const Size.fromHeight(48), minimumSize: const Size.fromHeight(48),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
), ),
), ),
cardTheme: CardTheme( cardTheme: const CardTheme(
elevation: 6, elevation: 6,
shadowColor: const Color(0x44000000), // shadowColor: Color(0x44000000),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
), ),
inputDecorationTheme: InputDecorationTheme( inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder( border: const UnderlineInputBorder(borderSide: BorderSide(width: 1)),
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide: BorderSide(
color: lighten(AppConfig.chatColor, .51),
width: 1,
),
),
filled: true, filled: true,
fillColor: Colors.blueGrey.shade50, fillColor: Colors.blueGrey.shade50,
), ),
@ -156,49 +119,22 @@ abstract class FluffyThemes {
elevation: 6, elevation: 6,
shadowColor: Color(0x44000000), shadowColor: Color(0x44000000),
systemOverlayStyle: SystemUiOverlayStyle.dark, systemOverlayStyle: SystemUiOverlayStyle.dark,
surfaceTintColor: Colors.white,
backgroundColor: Colors.white, backgroundColor: Colors.white,
titleTextStyle: TextStyle(
color: Colors.black,
fontSize: 20,
),
iconTheme: IconThemeData(color: Colors.black),
), ),
); );
static ThemeData get dark => ThemeData.dark().copyWith( static ThemeData get dark => ThemeData(
visualDensity: VisualDensity.standard, visualDensity: VisualDensity.standard,
primaryColorDark: const Color(0xff121212), useMaterial3: true,
primaryColorLight: Colors.white, brightness: Brightness.dark,
primaryColor: AppConfig.chatColor, colorSchemeSeed: AppConfig.colorSchemeSeed,
errorColor: const Color(0xFFCF6679),
backgroundColor: Colors.black,
scaffoldBackgroundColor: Colors.black, scaffoldBackgroundColor: Colors.black,
colorScheme: ThemeData.dark().colorScheme.copyWith(
primary: FluffyThemes.lighten(AppConfig.chatColor, 0.33),
secondary: FluffyThemes.lighten(AppConfig.chatColor, 0.33),
surface: FluffyThemes.darken(AppConfig.chatColor, 0.35),
),
secondaryHeaderColor: Colors.blueGrey.shade900,
textTheme: PlatformInfos.isDesktop textTheme: PlatformInfos.isDesktop
? Typography.material2018().white.merge(fallbackTextTheme) ? Typography.material2018().white.merge(fallbackTextTheme)
: null, : null,
dialogTheme: DialogTheme( snackBarTheme:
shape: RoundedRectangleBorder( const SnackBarThemeData(behavior: SnackBarBehavior.floating),
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
popupMenuTheme: PopupMenuThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
cardTheme: CardTheme(
elevation: 7,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
clipBehavior: Clip.hardEdge,
),
pageTransitionsTheme: const PageTransitionsTheme( pageTransitionsTheme: const PageTransitionsTheme(
builders: { builders: {
TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(), TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
@ -209,48 +145,19 @@ abstract class FluffyThemes {
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
}, },
), ),
floatingActionButtonTheme: FloatingActionButtonThemeData( dividerColor: Colors.blueGrey.shade600,
backgroundColor: AppConfig.chatColor,
foregroundColor: Colors.white,
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
filled: true,
fillColor: Colors.blueGrey.shade900,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide: BorderSide(
color: FluffyThemes.darken(AppConfig.chatColor, .31),
),
),
),
elevatedButtonTheme: ElevatedButtonThemeData( elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
primary: AppConfig.chatColor, primary: AppConfig.chatColor,
onPrimary: Colors.white, onPrimary: Colors.white,
minimumSize: const Size.fromHeight(48), minimumSize: const Size.fromHeight(48),
textStyle: const TextStyle(fontSize: 16), textStyle: const TextStyle(fontSize: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
), ),
), ),
snackBarTheme:
const SnackBarThemeData(behavior: SnackBarBehavior.floating),
appBarTheme: const AppBarTheme( appBarTheme: const AppBarTheme(
elevation: 6, elevation: 6,
systemOverlayStyle: SystemUiOverlayStyle.light,
backgroundColor: Color(0xff1D1D1D), backgroundColor: Color(0xff1D1D1D),
titleTextStyle: TextStyle(
color: Colors.white,
fontSize: 20,
),
iconTheme: IconThemeData(color: Colors.white),
),
cupertinoOverrideTheme: const CupertinoThemeData(
textTheme: CupertinoTextThemeData(),
), ),
); );

7
lib/pages/chat/chat_view.dart
View File

@ -194,13 +194,8 @@ class ChatView extends StatelessWidget {
padding: const EdgeInsets.only(bottom: 56.0), padding: const EdgeInsets.only(bottom: 56.0),
child: FloatingActionButton( child: FloatingActionButton(
onPressed: controller.scrollDown, onPressed: controller.scrollDown,
foregroundColor:
Theme.of(context).textTheme.bodyText2!.color,
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
mini: true, mini: true,
child: Icon(Icons.arrow_downward_outlined, child: const Icon(Icons.arrow_downward_outlined),
color: Theme.of(context).primaryColor),
), ),
) )
: null, : null,

10
lib/pages/chat/events/message.dart
View File

@ -65,7 +65,7 @@ class Message extends StatelessWidget {
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
final ownMessage = event.senderId == client.userID; final ownMessage = event.senderId == client.userID;
final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft; final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
var color = Theme.of(context).appBarTheme.backgroundColor; var color = Theme.of(context).scaffoldBackgroundColor;
final displayTime = event.type == EventTypes.RoomCreate || final displayTime = event.type == EventTypes.RoomCreate ||
nextEvent == null || nextEvent == null ||
!event.originServerTs.sameEnvironment(nextEvent!.originServerTs); !event.originServerTs.sameEnvironment(nextEvent!.originServerTs);
@ -78,10 +78,8 @@ class Message extends StatelessWidget {
? nextEvent!.sender.id == event.sender.id && !displayTime ? nextEvent!.sender.id == event.sender.id && !displayTime
: false; : false;
final textColor = ownMessage final textColor = ownMessage
? Colors.white ? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).brightness == Brightness.dark : Theme.of(context).colorScheme.onBackground;
? Colors.white
: Colors.black;
final rowMainAxisAlignment = final rowMainAxisAlignment =
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start; ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
@ -105,7 +103,7 @@ class Message extends StatelessWidget {
if (ownMessage) { if (ownMessage) {
color = displayEvent.status.isError color = displayEvent.status.isError
? Colors.redAccent ? Colors.redAccent
: Theme.of(context).primaryColor; : Theme.of(context).colorScheme.primary;
} }
final rowChildren = <Widget>[ final rowChildren = <Widget>[

10
lib/pages/chat_details/chat_details_view.dart
View File

@ -74,13 +74,9 @@ class ChatDetailsView extends StatelessWidget {
ChatSettingsPopupMenu(room, false) ChatSettingsPopupMenu(room, false)
], ],
title: Text( title: Text(
room.getLocalizedDisplayname( room.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!)), MatrixLocals(L10n.of(context)!)),
style: TextStyle( ),
color: Theme.of(context)
.appBarTheme
.titleTextStyle!
.color)),
backgroundColor: backgroundColor:
Theme.of(context).appBarTheme.backgroundColor, Theme.of(context).appBarTheme.backgroundColor,
flexibleSpace: FlexibleSpaceBar( flexibleSpace: FlexibleSpaceBar(

7
lib/pages/chat_list/stories_header.dart
View File

@ -253,9 +253,6 @@ class _StoryButton extends StatelessWidget {
height: 24, height: 24,
child: FloatingActionButton.small( child: FloatingActionButton.small(
heroTag: null, heroTag: null,
backgroundColor:
Theme.of(context).backgroundColor,
foregroundColor: Theme.of(context).primaryColor,
onPressed: () => onPressed: () =>
VRouter.of(context).to('/stories/create'), VRouter.of(context).to('/stories/create'),
child: const Icon( child: const Icon(
@ -269,7 +266,7 @@ class _StoryButton extends StatelessWidget {
), ),
), ),
), ),
const SizedBox(height: 8), const Spacer(),
Text( Text(
profile.displayName ?? '', profile.displayName ?? '',
maxLines: 1, maxLines: 1,
@ -279,7 +276,7 @@ class _StoryButton extends StatelessWidget {
fontWeight: unread ? FontWeight.bold : null, fontWeight: unread ? FontWeight.bold : null,
), ),
), ),
const SizedBox(height: 8), const Spacer(),
], ],
), ),
), ),

11
lib/pages/settings_style/settings_style.dart
View File

@ -37,12 +37,12 @@ class SettingsStyleController extends State<SettingsStyle> {
setState(() {}); setState(() {});
} }
void setChatColor(Color color) async { void setChatColor(Color? color) async {
await Matrix.of(context).store.setItem( await Matrix.of(context).store.setItem(
SettingKeys.chatColor, SettingKeys.chatColor,
color.value.toString(), color?.value.toString(),
); );
AppConfig.chatColor = color; AppConfig.colorSchemeSeed = color;
AdaptiveTheme.of(context).setTheme( AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light, light: FluffyThemes.light,
dark: FluffyThemes.dark, dark: FluffyThemes.dark,
@ -51,13 +51,14 @@ class SettingsStyleController extends State<SettingsStyle> {
AdaptiveThemeMode? currentTheme; AdaptiveThemeMode? currentTheme;
static final List<Color> customColors = [ static final List<Color?> customColors = [
AppConfig.primaryColor, AppConfig.primaryColor,
Colors.blue.shade800, Colors.blue.shade800,
Colors.green.shade800, Colors.green.shade800,
Colors.orange.shade900, Colors.orange.shade700,
Colors.pink.shade700, Colors.pink.shade700,
Colors.blueGrey.shade600, Colors.blueGrey.shade600,
null,
]; ];
void switchTheme(AdaptiveThemeMode? newTheme) { void switchTheme(AdaptiveThemeMode? newTheme) {

77
lib/pages/settings_style/settings_style_view.dart
View File

@ -23,38 +23,61 @@ class SettingsStyleView extends StatelessWidget {
leading: const BackButton(), leading: const BackButton(),
title: Text(L10n.of(context)!.changeTheme), title: Text(L10n.of(context)!.changeTheme),
), ),
backgroundColor: Theme.of(context).colorScheme.surface,
body: MaxWidthBody( body: MaxWidthBody(
withScrolling: true, withScrolling: true,
child: Column( child: Column(
children: [ children: [
Row( SizedBox(
children: SettingsStyleController.customColors height: colorPickerSize + 24,
.map( child: ListView(
(color) => Padding( shrinkWrap: true,
padding: const EdgeInsets.all(12.0), scrollDirection: Axis.horizontal,
child: InkWell( children: SettingsStyleController.customColors
borderRadius: BorderRadius.circular(colorPickerSize), .map(
onTap: () => controller.setChatColor(color), (color) => Padding(
child: Material( padding: const EdgeInsets.all(12.0),
color: color, child: InkWell(
elevation: 6,
borderRadius: BorderRadius.circular(colorPickerSize), borderRadius: BorderRadius.circular(colorPickerSize),
child: SizedBox( onTap: () => controller.setChatColor(color),
width: colorPickerSize, child: color == null
height: colorPickerSize, ? Material(
child: AppConfig.chatColor.value == color.value elevation:
? const Center( AppConfig.colorSchemeSeed?.value == null
child: Icon( ? 100
Icons.check, : 0,
size: 16, shadowColor: AppConfig.colorSchemeSeed,
color: Colors.white, borderRadius:
)) BorderRadius.circular(colorPickerSize),
: null), child: Image.asset(
'assets/colors.png',
width: colorPickerSize,
height: colorPickerSize,
),
)
: Material(
color: color,
elevation: 6,
borderRadius:
BorderRadius.circular(colorPickerSize),
child: SizedBox(
width: colorPickerSize,
height: colorPickerSize,
child: AppConfig.colorSchemeSeed?.value ==
color.value
? const Center(
child: Icon(
Icons.check,
size: 16,
color: Colors.white,
))
: null),
),
), ),
), ),
), )
) .toList(),
.toList(), ),
), ),
const Divider(height: 1), const Divider(height: 1),
RadioListTile<AdaptiveThemeMode>( RadioListTile<AdaptiveThemeMode>(
@ -122,7 +145,7 @@ class SettingsStyleView extends StatelessWidget {
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 12),
child: Material( child: Material(
color: Theme.of(context).primaryColor, color: Theme.of(context).colorScheme.primary,
elevation: 6, elevation: 6,
shadowColor: shadowColor:
Theme.of(context).secondaryHeaderColor.withAlpha(100), Theme.of(context).secondaryHeaderColor.withAlpha(100),
@ -132,7 +155,7 @@ class SettingsStyleView extends StatelessWidget {
child: Text( child: Text(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Theme.of(context).colorScheme.onPrimary,
fontSize: fontSize:
AppConfig.messageFontSize * AppConfig.fontSizeFactor, AppConfig.messageFontSize * AppConfig.fontSizeFactor,
), ),

2
lib/widgets/matrix.dart
View File

@ -502,7 +502,7 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
.then((value) => AppConfig.experimentalVoip = value); .then((value) => AppConfig.experimentalVoip = value);
store.getItem(SettingKeys.chatColor).then((value) { store.getItem(SettingKeys.chatColor).then((value) {
if (value != null && int.tryParse(value) != null) { if (value != null && int.tryParse(value) != null) {
AppConfig.chatColor = Color(int.parse(value)); AppConfig.colorSchemeSeed = Color(int.parse(value));
AdaptiveTheme.of(context).setTheme( AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light, light: FluffyThemes.light,
dark: FluffyThemes.dark, dark: FluffyThemes.dark,