refactor light and dark onto existing new color scheme; fix message editor top strip color; tweak color field semantics

This commit is contained in:
Dan Ballard 2021-12-08 21:40:40 -08:00
parent f6a4d5c3fa
commit 194ade9aa6
12 changed files with 150 additions and 96 deletions

View File

@ -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;
}
}

View File

@ -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(),

View File

@ -163,7 +163,7 @@ class _AddContactViewState extends State<AddContactView> {
}
});
},
labelText: '',
hintText: '',
)
])));
}
@ -215,7 +215,7 @@ class _AddContactViewState extends State<AddContactView> {
),
CwtchTextField(
controller: ctrlrGroupName,
labelText: AppLocalizations.of(context)!.groupNameLabel,
hintText: AppLocalizations.of(context)!.groupNameLabel,
onChanged: (newValue) {},
validator: (value) {},
),

View File

@ -104,7 +104,7 @@ class _AddEditProfileViewState extends State<AddEditProfileView> {
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;

View File

@ -117,7 +117,7 @@ class _AddEditServerViewState extends State<AddEditServerView> {
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<AddEditServerView> {
Provider.of<FlwtchState>(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<AddEditServerView> {
Provider.of<FlwtchState>(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<AddEditServerView> {
),
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,

View File

@ -139,7 +139,7 @@ class _ContactsViewState extends State<ContactsView> {
Widget _buildFilterable() {
Widget txtfield = CwtchTextField(
controller: ctrlrFilter,
labelText: AppLocalizations.of(context)!.search,
hintText: AppLocalizations.of(context)!.search,
onChanged: (newVal) {
Provider.of<ContactListState>(context, listen: false).filter = newVal;
},

View File

@ -101,7 +101,7 @@ class _GroupSettingsViewState extends State<GroupSettingsView> {
),
CwtchTextField(
controller: ctrlrGroupAddr,
labelText: '',
hintText: '',
validator: (value) {},
)
]),
@ -116,7 +116,7 @@ class _GroupSettingsViewState extends State<GroupSettingsView> {
CwtchTextField(
controller: TextEditingController(text: Provider.of<ContactInfoState>(context, listen: false).server),
validator: (value) {},
labelText: '',
hintText: '',
)
]),

View File

@ -104,6 +104,7 @@ class _MessageViewState extends State<MessageView> {
return WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
backgroundColor: Provider.of<Settings>(context).theme.backgroundMainColor(),
floatingActionButton: appState.unreadMessagesBelow
? FloatingActionButton(
child: Icon(Icons.arrow_downward),
@ -253,7 +254,7 @@ class _MessageViewState extends State<MessageView> {
enabled: !isOffline,
decoration: InputDecoration(
hintText: isOffline ? "" : AppLocalizations.of(context)!.placeholderEnterMessage,
hintStyle: TextStyle(color: Provider.of<Settings>(context).theme.altTextColor()),
hintStyle: TextStyle(color: Provider.of<Settings>(context).theme.sendHintTextColor()),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
enabled: true,
@ -313,7 +314,8 @@ class _MessageViewState extends State<MessageView> {
children = [composeBox];
}
return Column(mainAxisSize: MainAxisSize.min, children: children);
return Container(
color: Provider.of<Settings>(context).theme.backgroundMainColor(), child: Column(mainAxisSize: MainAxisSize.min, children: children));
}
// Send the message if enter is pressed without the shift key...

View File

@ -35,6 +35,7 @@ class _MessageListState extends State<MessageList> {
return RepaintBoundary(
child: Container(
color: Provider.of<Settings>(context).theme.backgroundMainColor(),
child: Column(children: [
Visibility(
visible: showMessageWarning,
@ -65,7 +66,7 @@ class _MessageListState extends State<MessageList> {
fit: BoxFit.scaleDown,
alignment: Alignment.center,
image: AssetImage("assets/core/negative_heart_512px.png"),
colorFilter: ColorFilter.mode(Provider.of<Settings>(context).theme.hilightElementTextColor(), BlendMode.srcIn))),
colorFilter: ColorFilter.mode(Provider.of<Settings>(context).theme.hilightElementColor(), BlendMode.srcIn))),
// Don't load messages for syncing server...
child: loadMessages
? ScrollablePositionedList.builder(

View File

@ -32,7 +32,7 @@ class _ProfileImageState extends State<ProfileImage> {
? BlendMode.softLight
: BlendMode.darken
: BlendMode.srcOut,
color: Provider.of<Settings>(context).theme.backgroundHilightElementColor(),
color: Provider.of<Settings>(context).theme.portraitBackgroundColor(),
isAntiAlias: true,
width: widget.diameter,
height: widget.diameter,

View File

@ -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<CwtchTextField> {
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(),

View File

@ -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);