From c13dc9dcc7cb8fe5ee4f3a28d76481da3b8022d9 Mon Sep 17 00:00:00 2001 From: Tommy Chow Date: Thu, 6 Jan 2022 09:32:39 -0500 Subject: [PATCH] Add setting for more readable name colors --- lib/models/irc_message.dart | 15 +++++++++++++-- lib/screens/channel/chat/chat_message.dart | 3 +++ lib/screens/channel/chat/chat_store.dart | 2 +- lib/screens/settings/chat_settings.dart | 7 +++++++ .../settings/stores/settings_store.dart | 3 +++ .../settings/stores/settings_store.g.dart | 19 +++++++++++++++++++ 6 files changed, 46 insertions(+), 3 deletions(-) diff --git a/lib/models/irc_message.dart b/lib/models/irc_message.dart index 1a8ae926..732fe5ed 100644 --- a/lib/models/irc_message.dart +++ b/lib/models/irc_message.dart @@ -84,6 +84,7 @@ class IRCMessage { RoomFFZ? ffzRoomInfo, bool hideMessage = false, bool zeroWidthEnabled = false, + bool useReadableColors = false, Timestamp timestamp = Timestamp.none, }) { const badgeHeight = 20.0; @@ -228,12 +229,22 @@ class IRCMessage { } } - // Add the username to the span. + var color = HexColor.fromHex(tags['color'] ?? '#868686'); + + if (useReadableColors) { + final hsl = HSLColor.fromColor(color); + if (hsl.lightness <= 0.5) color = hsl.withLightness(hsl.lightness + ((1 - hsl.lightness) * 0.5)).toColor(); + } + + // Printing template for debugging purposes. + // debugPrint('OLD - NAME: ${tags['display-name']!}, HUE: ${hsl.hue}, SATURATION: ${hsl.saturation}, LIGHNTESS: ${hsl.lightness}'); + // debugPrint('NEW - NAME: ${tags['display-name']!}, HUE: ${hsl.hue}, SATURATION: ${hsl.saturation}, LIGHNTESS: ${hsl.lightness}'); + span.add( TextSpan( text: tags['display-name']!, style: TextStyle( - color: HexColor.fromHex(tags['color'] ?? '#868686'), + color: color, fontWeight: FontWeight.bold, ), ), diff --git a/lib/screens/channel/chat/chat_message.dart b/lib/screens/channel/chat/chat_message.dart index bc374717..d09e5938 100644 --- a/lib/screens/channel/chat/chat_message.dart +++ b/lib/screens/channel/chat/chat_message.dart @@ -43,6 +43,7 @@ class ChatMessage extends StatelessWidget { bttvUserToBadge: assetsStore.userToBTTVBadges, ffzRoomInfo: assetsStore.ffzRoomInfo, zeroWidthEnabled: settingsStore.showZeroWidth, + useReadableColors: settingsStore.useReadableColors, timestamp: timeStamps, ), ), @@ -82,6 +83,7 @@ class ChatMessage extends StatelessWidget { ffzRoomInfo: assetsStore.ffzRoomInfo, hideMessage: settingsStore.hideBannedMessages, zeroWidthEnabled: settingsStore.showZeroWidth, + useReadableColors: settingsStore.useReadableColors, timestamp: timeStamps, ), ), @@ -134,6 +136,7 @@ class ChatMessage extends StatelessWidget { bttvUserToBadge: assetsStore.userToBTTVBadges, ffzRoomInfo: assetsStore.ffzRoomInfo, zeroWidthEnabled: settingsStore.showZeroWidth, + useReadableColors: settingsStore.useReadableColors, timestamp: timeStamps, ), ), diff --git a/lib/screens/channel/chat/chat_store.dart b/lib/screens/channel/chat/chat_store.dart index 0146f4fa..4c5c8c70 100644 --- a/lib/screens/channel/chat/chat_store.dart +++ b/lib/screens/channel/chat/chat_store.dart @@ -104,7 +104,7 @@ abstract class _ChatStoreBase with Store { // The IRC data can contain more than one message separated by CRLF. // To account for this, split by CRLF, then loop and process each message. for (final message in data.trimRight().split('\r\n')) { - debugPrint(message); + // debugPrint(message); if (message.startsWith('@')) { final parsedIRCMessage = IRCMessage.fromString(message, userLogin: auth.user.details?.login); diff --git a/lib/screens/settings/chat_settings.dart b/lib/screens/settings/chat_settings.dart index f556765b..04f5f2e6 100644 --- a/lib/screens/settings/chat_settings.dart +++ b/lib/screens/settings/chat_settings.dart @@ -16,6 +16,13 @@ class ChatSettings extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ const SectionHeader('Chat'), + SwitchListTile.adaptive( + isThreeLine: true, + title: const Text('Use more readable colors for chat names'), + subtitle: const Text('Attempts to make names more readable by boosting the lightness of darker colors.'), + value: settingsStore.useReadableColors, + onChanged: (newValue) => settingsStore.useReadableColors = newValue, + ), SwitchListTile.adaptive( isThreeLine: true, title: const Text('Hide banned and deleted messages'), diff --git a/lib/screens/settings/stores/settings_store.dart b/lib/screens/settings/stores/settings_store.dart index a776236a..c4398da7 100644 --- a/lib/screens/settings/stores/settings_store.dart +++ b/lib/screens/settings/stores/settings_store.dart @@ -28,6 +28,9 @@ abstract class _SettingsStoreBase with Store { var showThumbnailUptime = true; // Chat Settings + @observable + var useReadableColors = false; + @observable var hideBannedMessages = false; diff --git a/lib/screens/settings/stores/settings_store.g.dart b/lib/screens/settings/stores/settings_store.g.dart index d3b9f797..c59ef127 100644 --- a/lib/screens/settings/stores/settings_store.g.dart +++ b/lib/screens/settings/stores/settings_store.g.dart @@ -12,6 +12,7 @@ SettingsStore _$SettingsStoreFromJson(Map json) => ..showVideo = json['showVideo'] as bool ..showOverlay = json['showOverlay'] as bool ..showThumbnailUptime = json['showThumbnailUptime'] as bool + ..useReadableColors = json['useReadableColors'] as bool ..hideBannedMessages = json['hideBannedMessages'] as bool ..showZeroWidth = json['showZeroWidth'] as bool ..showTimestamps = json['showTimestamps'] as bool @@ -25,6 +26,7 @@ Map _$SettingsStoreToJson(SettingsStore instance) => 'showVideo': instance.showVideo, 'showOverlay': instance.showOverlay, 'showThumbnailUptime': instance.showThumbnailUptime, + 'useReadableColors': instance.useReadableColors, 'hideBannedMessages': instance.hideBannedMessages, 'showZeroWidth': instance.showZeroWidth, 'showTimestamps': instance.showTimestamps, @@ -101,6 +103,22 @@ mixin _$SettingsStore on _SettingsStoreBase, Store { }); } + final _$useReadableColorsAtom = + Atom(name: '_SettingsStoreBase.useReadableColors'); + + @override + bool get useReadableColors { + _$useReadableColorsAtom.reportRead(); + return super.useReadableColors; + } + + @override + set useReadableColors(bool value) { + _$useReadableColorsAtom.reportWrite(value, super.useReadableColors, () { + super.useReadableColors = value; + }); + } + final _$hideBannedMessagesAtom = Atom(name: '_SettingsStoreBase.hideBannedMessages'); @@ -201,6 +219,7 @@ useOledTheme: ${useOledTheme}, showVideo: ${showVideo}, showOverlay: ${showOverlay}, showThumbnailUptime: ${showThumbnailUptime}, +useReadableColors: ${useReadableColors}, hideBannedMessages: ${hideBannedMessages}, showZeroWidth: ${showZeroWidth}, showTimestamps: ${showTimestamps},