From 194ade9aa681aa94de362601faa13a62ca94d7e2 Mon Sep 17 00:00:00 2001 From: Dan Ballard Date: Wed, 8 Dec 2021 21:40:40 -0800 Subject: [PATCH] refactor light and dark onto existing new color scheme; fix message editor top strip color; tweak color field semantics --- lib/themes/cwtch.dart | 161 ++++++++++++++++++------------ lib/themes/opaque.dart | 28 ++++-- lib/views/addcontactview.dart | 4 +- lib/views/addeditprofileview.dart | 2 +- lib/views/addeditservers.dart | 22 ++-- lib/views/contactsview.dart | 2 +- lib/views/groupsettingsview.dart | 4 +- lib/views/messageview.dart | 6 +- lib/widgets/messagelist.dart | 3 +- lib/widgets/profileimage.dart | 2 +- lib/widgets/textfield.dart | 8 +- test/textfield_test.dart | 4 +- 12 files changed, 150 insertions(+), 96 deletions(-) diff --git a/lib/themes/cwtch.dart b/lib/themes/cwtch.dart index df718ba1..6c66a8f4 100644 --- a/lib/themes/cwtch.dart +++ b/lib/themes/cwtch.dart @@ -5,29 +5,45 @@ import 'package:flutter/material.dart'; import 'opaque.dart'; +final Color darkGreyPurple = Color(0xFF281831); +final Color deepPurple = Color(0xFF422850); +final Color mauvePurple = Color(0xFF8E64A5); +final Color whiteishPurple = Color(0xFFE3DFE4); +final Color lightGrey = Color(0xFF9E9E9E); +final Color softGreen = Color(0xFFA0FFB0); +final Color softRed = Color(0xFFFFA0B0); + +final Color whitePurple = Color(0xFFFFFDFF); +final Color softPurple = Color(0xFFFDF3FC); +final Color purple = Color(0xFFDFB9DE); +final Color brightPurple = Color(0xFFD1B0E0); // not in new: portrait badge color +final Color darkPurple = Color(0xFF350052); +final Color greyPurple = Color(0xFF775F84); // not in new: portrait borders +final Color pink = Color(0xFFE85DA1); // not in new: active button color +final Color hotPink = Color(0xFFD20070); // Color(0xFFD01972); +final Color softGrey = Color(0xFFB3B6B3); // not in new theme: blocked +//static final Color softGreen = Color(0xFFA0FFB0); +//static final Color softRed = Color(0xFFFFA0B0); + class OpaqueDark extends OpaqueThemeType { - static final Color darkGreyPurple = Color(0xFF281831); - static final Color deepPurple = Color(0xFF422850); - static final Color mauvePurple = Color(0xFF8E64A5); - static final Color purple = Color(0xFFDFB9DE); - static final Color whitePurple = Color(0xFFE3DFE4); - static final Color softPurple = Color(0xFFFDF3FC); - static final Color pink = Color(0xFFE85DA1); - static final Color hotPink = Color(0xFFD01972); - static final Color lightGrey = Color(0xFF9E9E9E); - static final Color softGreen = Color(0xFFA0FFB0); - static final Color softRed = Color(0xFFFFA0B0); + static final Color background = darkGreyPurple; + static final Color header = darkGreyPurple; + static final Color userBubble = mauvePurple; + static final Color peerBubble = deepPurple; + static final Color font = whiteishPurple; + static final Color settings = whiteishPurple; + static final Color accent = hotPink; String identifier() { - return "dark"; + return mode_dark; } Color backgroundMainColor() { - return darkGreyPurple; + return background; // darkGreyPurple; } Color backgroundPaneColor() { - return darkGreyPurple; + return header; //darkGreyPurple; } Color backgroundHilightElementColor() { @@ -35,19 +51,19 @@ class OpaqueDark extends OpaqueThemeType { } Color mainTextColor() { - return whitePurple; + return font; //whiteishPurple; } - Color altTextColor() { + Color sendHintTextColor() { return mauvePurple; } - Color hilightElementTextColor() { + Color hilightElementColor() { return purple; } Color defaultButtonColor() { - return hotPink; + return accent; //hotPink; } Color defaultButtonActiveColor() { @@ -55,7 +71,11 @@ class OpaqueDark extends OpaqueThemeType { } Color defaultButtonTextColor() { - return whitePurple; + return whiteishPurple; + } + + Color defaultButtonDisabledColor() { + return lightGrey; } Color defaultButtonDisabledTextColor() { @@ -70,6 +90,10 @@ class OpaqueDark extends OpaqueThemeType { return deepPurple; } + Color textfieldHintColor() { + return mainTextColor(); //TODO pick + } + Color textfieldErrorColor() { return hotPink; } @@ -78,12 +102,12 @@ class OpaqueDark extends OpaqueThemeType { return purple; } - Color scrollbarActiveColor() { - return hotPink; + Color portraitBackgroundColor() { + return deepPurple; } Color portraitOnlineBorderColor() { - return whitePurple; + return whiteishPurple; } Color portraitOfflineBorderColor() { @@ -103,7 +127,7 @@ class OpaqueDark extends OpaqueThemeType { } Color portraitContactBadgeTextColor() { - return whitePurple; + return whiteishPurple; } Color portraitProfileBadgeColor() { @@ -119,81 +143,86 @@ class OpaqueDark extends OpaqueThemeType { } Color toolbarIconColor() { - return whitePurple; + return settings; //whiteishPurple; } Color messageFromMeBackgroundColor() { - return mauvePurple; + return userBubble; // mauvePurple; } Color messageFromMeTextColor() { - return whitePurple; + return font; //whiteishPurple; } Color messageFromOtherBackgroundColor() { - return deepPurple; + return peerBubble; //deepPurple; } Color messageFromOtherTextColor() { - return whitePurple; + return font; //whiteishPurple; } } class OpaqueLight extends OpaqueThemeType { - static final Color whitePurple = Color(0xFFFFFDFF); - static final Color softPurple = Color(0xFFFDF3FC); - static final Color purple = Color(0xFFDFB9DE); - static final Color brightPurple = Color(0xFFD1B0E0); - static final Color darkPurple = Color(0xFF350052); - static final Color greyPurple = Color(0xFF775F84); - static final Color pink = Color(0xFFE85DA1); - static final Color hotPink = Color(0xFFD01972); - static final Color lightGrey = Color(0xFFB3B6B3); - static final Color softGreen = Color(0xFFA0FFB0); - static final Color softRed = Color(0xFFFFA0B0); + static final Color background = whitePurple; + static final Color header = softPurple; + static final Color userBubble = purple; + static final Color peerBubble = softPurple; + static final Color font = darkPurple; + static final Color settings = darkPurple; + static final Color accent = hotPink; + String identifier() { - return "light"; + return mode_light; } + // Main screen background color (message pane, item rows) Color backgroundMainColor() { - return whitePurple; + return background; //whitePurple; } + // Top pane ane pane colors (settings) Color backgroundPaneColor() { - return softPurple; + return header; //softPurple; } + // Selected row color Color backgroundHilightElementColor() { + // Todo: lighten? cant + // hm... in light its the top pane color. but in dark its unique return softPurple; } + // Main text color Color mainTextColor() { - return darkPurple; + return settings; } - Color altTextColor() { + // Faded text color for suggestions in textfields + Color sendHintTextColor() { return purple; } - Color hilightElementTextColor() { - return darkPurple; + // pressed row, offline heart + Color hilightElementColor() { + return purple; //darkPurple; // todo shouldn't be this, too dark, makes font unreadable } Color defaultButtonColor() { - return hotPink; + return accent; // hotPink; } Color defaultButtonActiveColor() { - return pink; + return pink; // todo: lighten in light, darken in dark } Color defaultButtonTextColor() { - return whitePurple; + return whitePurple; // ? } Color defaultButtonDisabledColor() { - return lightGrey; + return softGrey; } Color textfieldBackgroundColor() { @@ -203,17 +232,22 @@ class OpaqueLight extends OpaqueThemeType { Color textfieldBorderColor() { return purple; } + + Color textfieldHintColor() { + return font; //TODO pick + } Color textfieldErrorColor() { return hotPink; } + // todo button Color scrollbarDefaultColor() { - return darkPurple; + return accent; } - Color scrollbarActiveColor() { - return hotPink; + Color portraitBackgroundColor() { + return softPurple; } Color portraitOnlineBorderColor() { @@ -224,27 +258,28 @@ class OpaqueLight extends OpaqueThemeType { return greyPurple; } - Color portraitBlockedBorderColor() { - return lightGrey; + return softGrey; } Color portraitBlockedTextColor() { - return lightGrey; + return softGrey; } Color portraitContactBadgeColor() { - return hotPink; + return accent; } Color portraitContactBadgeTextColor() { - return whitePurple; + return whitePurple; // todo button color } + // TODO del Color portraitProfileBadgeColor() { return brightPurple; } + // TODO del Color portraitProfileBadgeTextColor() { return whitePurple; } @@ -254,22 +289,22 @@ class OpaqueLight extends OpaqueThemeType { } Color toolbarIconColor() { - return darkPurple; + return settings; //darkPurple; } Color messageFromMeBackgroundColor() { - return brightPurple; + return userBubble; //brightPurple; } Color messageFromMeTextColor() { - return mainTextColor(); + return font; //mainTextColor(); } Color messageFromOtherBackgroundColor() { - return purple; + return peerBubble; //purple; } Color messageFromOtherTextColor() { - return darkPurple; + return font; //darkPurple; } } \ No newline at end of file diff --git a/lib/themes/opaque.dart b/lib/themes/opaque.dart index a117f41e..40058392 100644 --- a/lib/themes/opaque.dart +++ b/lib/themes/opaque.dart @@ -4,6 +4,9 @@ import 'dart:core'; import 'package:flutter/material.dart'; import 'package:cwtch/settings.dart'; +const mode_light = "light"; +const mode_dark = "dark"; + abstract class OpaqueThemeType { static final Color red = Color(0xFFFF0000); @@ -11,14 +14,17 @@ abstract class OpaqueThemeType { return "dummy"; } + // Main screen background color (message pane, item rows) Color backgroundMainColor() { return red; } + // Top pane ane pane colors (settings) Color backgroundPaneColor() { return red; } + // Selected Row Color backgroundHilightElementColor() { return red; } @@ -27,11 +33,14 @@ abstract class OpaqueThemeType { return red; } - Color altTextColor() { + // Faded text color for suggestions in textfields + // Todo: implement way more places + Color sendHintTextColor() { return red; } - Color hilightElementTextColor() { + // pressed row, offline heart + Color hilightElementColor() { return red; } @@ -59,6 +68,10 @@ abstract class OpaqueThemeType { return red; } + Color textfieldHintColor() { + return red; + } + Color textfieldErrorColor() { return red; } @@ -67,7 +80,7 @@ abstract class OpaqueThemeType { return red; } - Color scrollbarActiveColor() { + Color portraitBackgroundColor() { return red; } @@ -103,6 +116,8 @@ abstract class OpaqueThemeType { return red; } + // dropshaddpow + // todo: probably should not be reply icon color in messagerow Color dropShadowColor() { return red; } @@ -148,7 +163,7 @@ ThemeData mkThemeData(Settings opaque) { primaryColor: opaque.current().backgroundMainColor(), canvasColor: opaque.current().backgroundPaneColor(), backgroundColor: opaque.current().backgroundMainColor(), - highlightColor: opaque.current().hilightElementTextColor(), + highlightColor: opaque.current().hilightElementColor(), iconTheme: IconThemeData( color: opaque.current().toolbarIconColor(), ), @@ -164,7 +179,7 @@ ThemeData mkThemeData(Settings opaque) { actionsIconTheme: IconThemeData( color: opaque.current().mainTextColor(), )), - bottomNavigationBarTheme: BottomNavigationBarThemeData(type: BottomNavigationBarType.fixed, backgroundColor: opaque.current().backgroundHilightElementColor()), + //bottomNavigationBarTheme: BottomNavigationBarThemeData(type: BottomNavigationBarType.fixed, backgroundColor: opaque.current().backgroundHilightElementColor()), // Can't determine current use textButtonTheme: TextButtonThemeData( style: ButtonStyle( backgroundColor: MaterialStateProperty.all(opaque.current().defaultButtonColor()), @@ -172,6 +187,7 @@ ThemeData mkThemeData(Settings opaque) { overlayColor: MaterialStateProperty.all(opaque.current().defaultButtonActiveColor()), padding: MaterialStateProperty.all(EdgeInsets.all(20))), ), + hintColor: opaque.current().textfieldHintColor(), elevatedButtonTheme: ElevatedButtonThemeData( style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith((states) => states.contains(MaterialState.disabled) ? opaque.current().defaultButtonDisabledColor() : opaque.current().defaultButtonColor()), @@ -190,7 +206,7 @@ ThemeData mkThemeData(Settings opaque) { ), ), scrollbarTheme: ScrollbarThemeData( - isAlwaysShown: false, thumbColor: MaterialStateProperty.all(opaque.current().scrollbarActiveColor()), trackColor: MaterialStateProperty.all(opaque.current().scrollbarDefaultColor())), + isAlwaysShown: false, thumbColor: MaterialStateProperty.all(opaque.current().scrollbarDefaultColor())), tabBarTheme: TabBarTheme(indicator: UnderlineTabIndicator(borderSide: BorderSide(color: opaque.current().defaultButtonActiveColor()))), dialogTheme: DialogTheme( backgroundColor: opaque.current().backgroundPaneColor(), diff --git a/lib/views/addcontactview.dart b/lib/views/addcontactview.dart index 8485058f..c073f0f5 100644 --- a/lib/views/addcontactview.dart +++ b/lib/views/addcontactview.dart @@ -163,7 +163,7 @@ class _AddContactViewState extends State { } }); }, - labelText: '', + hintText: '', ) ]))); } @@ -215,7 +215,7 @@ class _AddContactViewState extends State { ), CwtchTextField( controller: ctrlrGroupName, - labelText: AppLocalizations.of(context)!.groupNameLabel, + hintText: AppLocalizations.of(context)!.groupNameLabel, onChanged: (newValue) {}, validator: (value) {}, ), diff --git a/lib/views/addeditprofileview.dart b/lib/views/addeditprofileview.dart index 20a4cec5..e92b9c7e 100644 --- a/lib/views/addeditprofileview.dart +++ b/lib/views/addeditprofileview.dart @@ -104,7 +104,7 @@ class _AddEditProfileViewState extends State { CwtchTextField( controller: ctrlrNick, autofocus: false, - labelText: AppLocalizations.of(context)!.yourDisplayName, + hintText: AppLocalizations.of(context)!.yourDisplayName, validator: (value) { if (value.isEmpty) { return AppLocalizations.of(context)!.displayNameTooltip; diff --git a/lib/views/addeditservers.dart b/lib/views/addeditservers.dart index aec67bfe..011903c5 100644 --- a/lib/views/addeditservers.dart +++ b/lib/views/addeditservers.dart @@ -117,7 +117,7 @@ class _AddEditServerViewState extends State { Visibility( visible: serverInfoState.onion.isNotEmpty, child: SwitchListTile( - title: Text(AppLocalizations.of(context)!.serverEnabled, style: TextStyle(color: settings.current().mainTextColor())), + title: Text(AppLocalizations.of(context)!.serverEnabled, style: TextStyle(color: settings.current().mainTextColor)), subtitle: Text(AppLocalizations.of(context)!.serverEnabledDescription), value: serverInfoState.running, onChanged: (bool value) { @@ -128,14 +128,14 @@ class _AddEditServerViewState extends State { Provider.of(context, listen: false).cwtch.StopServer(serverInfoState.onion); } }, - activeTrackColor: settings.theme.defaultButtonActiveColor(), - inactiveTrackColor: settings.theme.defaultButtonDisabledColor(), - secondary: Icon(CwtchIcons.negative_heart_24px, color: settings.current().mainTextColor()), + activeTrackColor: settings.theme.defaultButtonActiveColor, + inactiveTrackColor: settings.theme.defaultButtonDisabledColor, + secondary: Icon(CwtchIcons.negative_heart_24px, color: settings.current().mainTextColor), )), // Auto start SwitchListTile( - title: Text(AppLocalizations.of(context)!.serverAutostartLabel, style: TextStyle(color: settings.current().mainTextColor())), + title: Text(AppLocalizations.of(context)!.serverAutostartLabel, style: TextStyle(color: settings.current().mainTextColor)), subtitle: Text(AppLocalizations.of(context)!.serverAutostartDescription), value: serverInfoState.autoStart, onChanged: (bool value) { @@ -145,9 +145,9 @@ class _AddEditServerViewState extends State { Provider.of(context, listen: false).cwtch.SetServerAttribute(serverInfoState.onion, "autostart", value ? "true" : "false"); } }, - activeTrackColor: settings.theme.defaultButtonActiveColor(), - inactiveTrackColor: settings.theme.defaultButtonDisabledColor(), - secondary: Icon(CwtchIcons.favorite_24dp, color: settings.current().mainTextColor()), + activeTrackColor: settings.theme.defaultButtonActiveColor, + inactiveTrackColor: settings.theme.defaultButtonDisabledColor, + secondary: Icon(CwtchIcons.favorite_24dp, color: settings.current().mainTextColor), ), // metrics @@ -190,13 +190,13 @@ class _AddEditServerViewState extends State { ), Checkbox( value: usePassword, - fillColor: MaterialStateProperty.all(settings.current().defaultButtonColor()), - activeColor: settings.current().defaultButtonActiveColor(), + fillColor: MaterialStateProperty.all(settings.current().defaultButtonColor), + activeColor: settings.current().defaultButtonActiveColor, onChanged: _handleSwitchPassword, ), Text( AppLocalizations.of(context)!.radioUsePassword, - style: TextStyle(color: settings.current().mainTextColor()), + style: TextStyle(color: settings.current().mainTextColor), ), SizedBox( height: 20, diff --git a/lib/views/contactsview.dart b/lib/views/contactsview.dart index e6e13c19..87c6cee6 100644 --- a/lib/views/contactsview.dart +++ b/lib/views/contactsview.dart @@ -139,7 +139,7 @@ class _ContactsViewState extends State { Widget _buildFilterable() { Widget txtfield = CwtchTextField( controller: ctrlrFilter, - labelText: AppLocalizations.of(context)!.search, + hintText: AppLocalizations.of(context)!.search, onChanged: (newVal) { Provider.of(context, listen: false).filter = newVal; }, diff --git a/lib/views/groupsettingsview.dart b/lib/views/groupsettingsview.dart index 463a99b2..6407c4ef 100644 --- a/lib/views/groupsettingsview.dart +++ b/lib/views/groupsettingsview.dart @@ -101,7 +101,7 @@ class _GroupSettingsViewState extends State { ), CwtchTextField( controller: ctrlrGroupAddr, - labelText: '', + hintText: '', validator: (value) {}, ) ]), @@ -116,7 +116,7 @@ class _GroupSettingsViewState extends State { CwtchTextField( controller: TextEditingController(text: Provider.of(context, listen: false).server), validator: (value) {}, - labelText: '', + hintText: '', ) ]), diff --git a/lib/views/messageview.dart b/lib/views/messageview.dart index 539bebfb..231170fe 100644 --- a/lib/views/messageview.dart +++ b/lib/views/messageview.dart @@ -104,6 +104,7 @@ class _MessageViewState extends State { return WillPopScope( onWillPop: _onWillPop, child: Scaffold( + backgroundColor: Provider.of(context).theme.backgroundMainColor(), floatingActionButton: appState.unreadMessagesBelow ? FloatingActionButton( child: Icon(Icons.arrow_downward), @@ -253,7 +254,7 @@ class _MessageViewState extends State { enabled: !isOffline, decoration: InputDecoration( hintText: isOffline ? "" : AppLocalizations.of(context)!.placeholderEnterMessage, - hintStyle: TextStyle(color: Provider.of(context).theme.altTextColor()), + hintStyle: TextStyle(color: Provider.of(context).theme.sendHintTextColor()), enabledBorder: InputBorder.none, focusedBorder: InputBorder.none, enabled: true, @@ -313,7 +314,8 @@ class _MessageViewState extends State { children = [composeBox]; } - return Column(mainAxisSize: MainAxisSize.min, children: children); + return Container( + color: Provider.of(context).theme.backgroundMainColor(), child: Column(mainAxisSize: MainAxisSize.min, children: children)); } // Send the message if enter is pressed without the shift key... diff --git a/lib/widgets/messagelist.dart b/lib/widgets/messagelist.dart index 365a75fc..f56f9c66 100644 --- a/lib/widgets/messagelist.dart +++ b/lib/widgets/messagelist.dart @@ -35,6 +35,7 @@ class _MessageListState extends State { return RepaintBoundary( child: Container( + color: Provider.of(context).theme.backgroundMainColor(), child: Column(children: [ Visibility( visible: showMessageWarning, @@ -65,7 +66,7 @@ class _MessageListState extends State { fit: BoxFit.scaleDown, alignment: Alignment.center, image: AssetImage("assets/core/negative_heart_512px.png"), - colorFilter: ColorFilter.mode(Provider.of(context).theme.hilightElementTextColor(), BlendMode.srcIn))), + colorFilter: ColorFilter.mode(Provider.of(context).theme.hilightElementColor(), BlendMode.srcIn))), // Don't load messages for syncing server... child: loadMessages ? ScrollablePositionedList.builder( diff --git a/lib/widgets/profileimage.dart b/lib/widgets/profileimage.dart index 7593bc67..00001370 100644 --- a/lib/widgets/profileimage.dart +++ b/lib/widgets/profileimage.dart @@ -32,7 +32,7 @@ class _ProfileImageState extends State { ? BlendMode.softLight : BlendMode.darken : BlendMode.srcOut, - color: Provider.of(context).theme.backgroundHilightElementColor(), + color: Provider.of(context).theme.portraitBackgroundColor(), isAntiAlias: true, width: widget.diameter, height: widget.diameter, diff --git a/lib/widgets/textfield.dart b/lib/widgets/textfield.dart index 64b4f020..f3803391 100644 --- a/lib/widgets/textfield.dart +++ b/lib/widgets/textfield.dart @@ -7,9 +7,9 @@ doNothing(String x) {} // Provides a styled Text Field for use in Form Widgets. // Callers must provide a text controller, label helper text and a validator. class CwtchTextField extends StatefulWidget { - CwtchTextField({required this.controller, required this.labelText, this.validator, this.autofocus = false, this.onChanged = doNothing}); + CwtchTextField({required this.controller, required this.hintText, this.validator, this.autofocus = false, this.onChanged = doNothing}); final TextEditingController controller; - final String labelText; + final String hintText; final FormFieldValidator? validator; final Function(String) onChanged; final bool autofocus; @@ -42,12 +42,12 @@ class _CwtchTextFieldState extends State { enableIMEPersonalizedLearning: false, focusNode: _focusNode, decoration: InputDecoration( - labelText: widget.labelText, - labelStyle: TextStyle(color: theme.current().mainTextColor(), backgroundColor: theme.current().textfieldBackgroundColor()), + hintText: widget.hintText, floatingLabelBehavior: FloatingLabelBehavior.never, filled: true, focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(15.0), borderSide: BorderSide(color: theme.current().textfieldBorderColor(), width: 3.0)), focusedErrorBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(15.0), borderSide: BorderSide(color: theme.current().textfieldErrorColor(), width: 3.0)), + errorBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(15.0), borderSide: BorderSide(color: theme.current().textfieldErrorColor(), width: 3.0)), errorStyle: TextStyle( color: theme.current().textfieldErrorColor(), diff --git a/test/textfield_test.dart b/test/textfield_test.dart index 97d65844..a133cb1e 100644 --- a/test/textfield_test.dart +++ b/test/textfield_test.dart @@ -27,7 +27,7 @@ void main() { tester.binding.window.physicalSizeTestValue = Size(800, 300); final TextEditingController ctrlr1 = TextEditingController(); - Widget testWidget = CwtchTextField(controller: ctrlr1, validator: (value) { }, labelText: '',); + Widget testWidget = CwtchTextField(controller: ctrlr1, validator: (value) { }, hintText: '',); Widget testHarness = MultiProvider( providers:[getSettingsEnglishDark()], @@ -69,7 +69,7 @@ void main() { Widget testWidget = CwtchTextField( controller: ctrlr1, - labelText: strLabel1, + hintText: strLabel1, validator: (value) { if (value == null || value == "") return strFail1; final number = num.tryParse(value);