GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2024-12-28 09:02:35 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'krille/material-you' into 'main'

Browse Source 
feat: Initial material you support

See merge request famedly/fluffychat!872
This commit is contained in:
Krille Fear 2022-05-18 07:15:13 +00:00
commit 105106cc22
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 double bubbleSizeFactor = 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 bool allowOtherHomeservers = true;
static const bool enableRegistration = true;
@ -63,7 +64,7 @@ abstract class AppConfig {
static void loadFromJson(Map<String, dynamic> json) {
if (json['chat_color'] != null) {
try {
chatColor = Color(json['application_name']);
colorSchemeSeed = Color(json['application_name']);
} catch (e) {
Logs().w(
'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/services.dart';
@ -23,6 +22,9 @@ abstract class FluffyThemes {
Widget? prefixIcon,
}) =>
InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
fillColor: Colors.white.withAlpha(200),
labelText: labelText,
hintText: hintText,
@ -74,17 +76,9 @@ abstract class FluffyThemes {
static ThemeData get light => ThemeData(
visualDensity: VisualDensity.standard,
primaryColorDark: Colors.white,
primaryColorLight: const Color(0xff121212),
useMaterial3: true,
brightness: Brightness.light,
primaryColor: AppConfig.chatColor,
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,
colorSchemeSeed: AppConfig.colorSchemeSeed,
scaffoldBackgroundColor: Colors.white,
textTheme: PlatformInfos.isDesktop
? Typography.material2018().black.merge(fallbackTextTheme)
@ -101,54 +95,23 @@ abstract class FluffyThemes {
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
},
),
dialogTheme: DialogTheme(
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,
),
dividerColor: Colors.blueGrey.shade50,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: AppConfig.chatColor,
onPrimary: Colors.white,
textStyle: const TextStyle(fontSize: 16),
elevation: 6,
shadowColor: const Color(0x44000000),
minimumSize: const Size.fromHeight(48),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
padding: const EdgeInsets.all(12),
),
),
cardTheme: CardTheme(
cardTheme: const CardTheme(
elevation: 6,
shadowColor: const Color(0x44000000),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
// shadowColor: Color(0x44000000),
clipBehavior: Clip.hardEdge,
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderSide: BorderSide(
color: lighten(AppConfig.chatColor, .51),
width: 1,
),
),
border: const UnderlineInputBorder(borderSide: BorderSide(width: 1)),
filled: true,
fillColor: Colors.blueGrey.shade50,
),
@ -156,49 +119,22 @@ abstract class FluffyThemes {
elevation: 6,
shadowColor: Color(0x44000000),
systemOverlayStyle: SystemUiOverlayStyle.dark,
surfaceTintColor: 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,
primaryColorDark: const Color(0xff121212),
primaryColorLight: Colors.white,
primaryColor: AppConfig.chatColor,
errorColor: const Color(0xFFCF6679),
backgroundColor: Colors.black,
useMaterial3: true,
brightness: Brightness.dark,
colorSchemeSeed: AppConfig.colorSchemeSeed,
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
? Typography.material2018().white.merge(fallbackTextTheme)
: null,
dialogTheme: DialogTheme(
shape: RoundedRectangleBorder(
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,
),
snackBarTheme:
const SnackBarThemeData(behavior: SnackBarBehavior.floating),
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
@ -209,48 +145,19 @@ abstract class FluffyThemes {
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
},
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
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),
),
),
),
dividerColor: Colors.blueGrey.shade600,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: AppConfig.chatColor,
onPrimary: Colors.white,
minimumSize: const Size.fromHeight(48),
textStyle: const TextStyle(fontSize: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
padding: const EdgeInsets.all(12),
),
),
snackBarTheme:
const SnackBarThemeData(behavior: SnackBarBehavior.floating),
appBarTheme: const AppBarTheme(
elevation: 6,
systemOverlayStyle: SystemUiOverlayStyle.light,
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),
child: FloatingActionButton(
onPressed: controller.scrollDown,
foregroundColor:
Theme.of(context).textTheme.bodyText2!.color,
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
mini: true,
child: Icon(Icons.arrow_downward_outlined,
color: Theme.of(context).primaryColor),
child: const Icon(Icons.arrow_downward_outlined),
),
)
: 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 ownMessage = event.senderId == client.userID;
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 ||
nextEvent == null ||
!event.originServerTs.sameEnvironment(nextEvent!.originServerTs);
@ -78,10 +78,8 @@ class Message extends StatelessWidget {
? nextEvent!.sender.id == event.sender.id && !displayTime
: false;
final textColor = ownMessage
? Colors.white
: Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black;
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.onBackground;
final rowMainAxisAlignment =
ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
@ -105,7 +103,7 @@ class Message extends StatelessWidget {
if (ownMessage) {
color = displayEvent.status.isError
? Colors.redAccent
: Theme.of(context).primaryColor;
: Theme.of(context).colorScheme.primary;
}
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)
],
title: Text(
room.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!)),
style: TextStyle(
color: Theme.of(context)
.appBarTheme
.titleTextStyle!
.color)),
room.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!)),
),
backgroundColor:
Theme.of(context).appBarTheme.backgroundColor,
flexibleSpace: FlexibleSpaceBar(

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

@ -253,9 +253,6 @@ class _StoryButton extends StatelessWidget {
height: 24,
child: FloatingActionButton.small(
heroTag: null,
backgroundColor:
Theme.of(context).backgroundColor,
foregroundColor: Theme.of(context).primaryColor,
onPressed: () =>
VRouter.of(context).to('/stories/create'),
child: const Icon(
@ -269,7 +266,7 @@ class _StoryButton extends StatelessWidget {
),
),
),
const SizedBox(height: 8),
const Spacer(),
Text(
profile.displayName ?? '',
maxLines: 1,
@ -279,7 +276,7 @@ class _StoryButton extends StatelessWidget {
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(() {});
}
void setChatColor(Color color) async {
void setChatColor(Color? color) async {
await Matrix.of(context).store.setItem(
SettingKeys.chatColor,
color.value.toString(),
color?.value.toString(),
);
AppConfig.chatColor = color;
AppConfig.colorSchemeSeed = color;
AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light,
dark: FluffyThemes.dark,
@ -51,13 +51,14 @@ class SettingsStyleController extends State<SettingsStyle> {
AdaptiveThemeMode? currentTheme;
static final List<Color> customColors = [
static final List<Color?> customColors = [
AppConfig.primaryColor,
Colors.blue.shade800,
Colors.green.shade800,
Colors.orange.shade900,
Colors.orange.shade700,
Colors.pink.shade700,
Colors.blueGrey.shade600,
null,
];
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(),
title: Text(L10n.of(context)!.changeTheme),
),
backgroundColor: Theme.of(context).colorScheme.surface,
body: MaxWidthBody(
withScrolling: true,
child: Column(
children: [
Row(
children: SettingsStyleController.customColors
.map(
(color) => Padding(
padding: const EdgeInsets.all(12.0),
child: InkWell(
borderRadius: BorderRadius.circular(colorPickerSize),
onTap: () => controller.setChatColor(color),
child: Material(
color: color,
elevation: 6,
SizedBox(
height: colorPickerSize + 24,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: SettingsStyleController.customColors
.map(
(color) => Padding(
padding: const EdgeInsets.all(12.0),
child: InkWell(
borderRadius: BorderRadius.circular(colorPickerSize),
child: SizedBox(
width: colorPickerSize,
height: colorPickerSize,
child: AppConfig.chatColor.value == color.value
? const Center(
child: Icon(
Icons.check,
size: 16,
color: Colors.white,
))
: null),
onTap: () => controller.setChatColor(color),
child: color == null
? Material(
elevation:
AppConfig.colorSchemeSeed?.value == null
? 100
: 0,
shadowColor: AppConfig.colorSchemeSeed,
borderRadius:
BorderRadius.circular(colorPickerSize),
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),
RadioListTile<AdaptiveThemeMode>(
@ -122,7 +145,7 @@ class SettingsStyleView extends StatelessWidget {
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Material(
color: Theme.of(context).primaryColor,
color: Theme.of(context).colorScheme.primary,
elevation: 6,
shadowColor:
Theme.of(context).secondaryHeaderColor.withAlpha(100),
@ -132,7 +155,7 @@ class SettingsStyleView extends StatelessWidget {
child: Text(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
style: TextStyle(
color: Colors.white,
color: Theme.of(context).colorScheme.onPrimary,
fontSize:
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);
store.getItem(SettingKeys.chatColor).then((value) {
if (value != null && int.tryParse(value) != null) {
AppConfig.chatColor = Color(int.parse(value));
AppConfig.colorSchemeSeed = Color(int.parse(value));
AdaptiveTheme.of(context).setTheme(
light: FluffyThemes.light,
dark: FluffyThemes.dark,