0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #810 from ente-io/button-pressed-states

Browse source 
Button pressed states
This commit is contained in:
Ashil 2023-01-17 18:47:20 +05:30 • committed by GitHub
commit eec922c925
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
lib/theme/colors.dart
View file

@ -21,6 +21,7 @@ class EnteColorScheme {
// Fill Colors
final Color fillBase;
final Color fillBasePressed;
final Color fillMuted;
final Color fillFaint;
final Color fillFaintPressed;
@ -44,6 +45,7 @@ class EnteColorScheme {
final Color warning700;
final Color warning500;
final Color warning400;
final Color warning800;
final Color caution500;
//other colors
@ -62,6 +64,7 @@ class EnteColorScheme {
this.textFaint,
this.blurTextBase,
this.fillBase,
this.fillBasePressed,
this.fillMuted,
this.fillFaint,
this.fillFaintPressed,
@ -78,9 +81,10 @@ class EnteColorScheme {
this.primary500 = _primary500,
this.primary400 = _primary400,
this.primary300 = _primary300,
this.warning800 = _warning800,
this.warning700 = _warning700,
this.warning500 = _warning500,
this.warning400 = _warning700,
this.warning400 = _warning400,
this.caution500 = _caution500,
});
}
@ -97,6 +101,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
textFaintLight,
blurTextBaseLight,
fillBaseLight,
fillBasePressedLight,
fillMutedLight,
fillFaintLight,
fillFaintPressedLight,
@ -123,6 +128,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
textFaintDark,
blurTextBaseDark,
fillBaseDark,
fillBasePressedDark,
fillMutedDark,
fillFaintDark,
fillFaintPressedDark,
@ -168,11 +174,13 @@ const Color blurTextBaseDark = Color.fromRGBO(255, 255, 255, 0.95);
// Fill Colors
const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
const Color fillBasePressedLight = Color.fromRGBO(0, 0, 0, 0.87);
const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
const Color fillFaintPressedLight = Color.fromRGBO(0, 0, 0, 0.08);
const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
const Color fillBasePressedDark = Color.fromRGBO(255, 255, 255, 0.9);
const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
@ -212,6 +220,7 @@ const Color _warning700 = Color.fromRGBO(234, 63, 63, 1);
const Color _warning500 = Color.fromRGBO(255, 101, 101, 1);
const Color warning500 = Color.fromRGBO(255, 101, 101, 1);
const Color _warning400 = Color.fromRGBO(255, 111, 111, 1);
const Color _warning800 = Color(0xFFF53434);
const Color _caution500 = Color.fromRGBO(255, 194, 71, 1);

58
lib/ui/components/button_widget.dart
View file

@ -115,7 +115,6 @@ class ButtonWidget extends StatelessWidget {
buttonType.defaultBorderColor(colorScheme, buttonSize);
buttonStyle.pressedBorderColor = buttonType.pressedBorderColor(
colorScheme: colorScheme,
inverseColorScheme: inverseColorScheme,
buttonSize: buttonSize,
);
buttonStyle.disabledBorderColor =
@ -205,27 +204,20 @@ class _ButtonChildWidgetState extends State<ButtonChildWidget> {
final _debouncer = Debouncer(const Duration(milliseconds: 300));
ExecutionState executionState = ExecutionState.idle;
@override
void initState() {
_setButtonTheme();
super.initState();
}
@override
void didUpdateWidget(covariant ButtonChildWidget oldWidget) {
_setButtonTheme();
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
progressStatus = widget.progressStatus;
checkIconColor = widget.buttonStyle.checkIconColor ??
widget.buttonStyle.defaultIconColor;
loadingIconColor = widget.buttonStyle.defaultIconColor;
if (widget.isDisabled) {
buttonColor = widget.buttonStyle.disabledButtonColor ??
widget.buttonStyle.defaultButtonColor;
borderColor = widget.buttonStyle.disabledBorderColor ??
widget.buttonStyle.defaultBorderColor;
iconColor = widget.buttonStyle.disabledIconColor ??
widget.buttonStyle.defaultIconColor;
labelStyle = widget.buttonStyle.disabledLabelStyle ??
widget.buttonStyle.defaultLabelStyle;
} else {
buttonColor = widget.buttonStyle.defaultButtonColor;
borderColor = widget.buttonStyle.defaultBorderColor;
iconColor = widget.buttonStyle.defaultIconColor;
labelStyle = widget.buttonStyle.defaultLabelStyle;
}
if (executionState == ExecutionState.successful) {
Future.delayed(Duration(seconds: widget.isInAlert ? 1 : 2), () {
setState(() {
@ -241,7 +233,9 @@ class _ButtonChildWidgetState extends State<ButtonChildWidget> {
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(4)),
border: Border.all(color: borderColor),
border: widget.buttonType == ButtonType.tertiaryCritical
? Border.all(color: borderColor)
: null,
),
child: AnimatedContainer(
duration: const Duration(milliseconds: 16),
@ -383,6 +377,28 @@ class _ButtonChildWidgetState extends State<ButtonChildWidget> {
);
}
void _setButtonTheme() {
progressStatus = widget.progressStatus;
checkIconColor = widget.buttonStyle.checkIconColor ??
widget.buttonStyle.defaultIconColor;
loadingIconColor = widget.buttonStyle.defaultIconColor;
if (widget.isDisabled) {
buttonColor = widget.buttonStyle.disabledButtonColor ??
widget.buttonStyle.defaultButtonColor;
borderColor = widget.buttonStyle.disabledBorderColor ??
widget.buttonStyle.defaultBorderColor;
iconColor = widget.buttonStyle.disabledIconColor ??
widget.buttonStyle.defaultIconColor;
labelStyle = widget.buttonStyle.disabledLabelStyle ??
widget.buttonStyle.defaultLabelStyle;
} else {
buttonColor = widget.buttonStyle.defaultButtonColor;
borderColor = widget.buttonStyle.defaultBorderColor;
iconColor = widget.buttonStyle.defaultIconColor;
labelStyle = widget.buttonStyle.defaultLabelStyle;
}
}
bool get _shouldRegisterGestures =>
!widget.isDisabled && executionState == ExecutionState.idle;

37
lib/ui/components/models/button_type.dart
View file

@ -55,6 +55,15 @@ enum ButtonType {
if (isPrimary) {
return colorScheme.primary700;
}
if (isSecondary) {
return colorScheme.fillFaintPressed;
}
if (isNeutral) {
return colorScheme.fillBasePressed;
}
if (this == ButtonType.critical) {
return colorScheme.warning800;
}
return null;
}
@ -85,20 +94,10 @@ enum ButtonType {
//Returning null to fallback to default color
Color? pressedBorderColor({
required EnteColorScheme colorScheme,
required EnteColorScheme inverseColorScheme,
required ButtonSize buttonSize,
}) {
if (isPrimary) {
return colorScheme.strokeMuted;
}
if (buttonSize == ButtonSize.small && this == ButtonType.tertiaryCritical) {
return null;
}
if (isSecondary || isCritical) {
return colorScheme.strokeBase;
}
if (isNeutral) {
return inverseColorScheme.strokeBase;
if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
return colorScheme.warning700;
}
return null;
}
@ -133,8 +132,11 @@ enum ButtonType {
//Returning null to fallback to default color
Color? pressedIconColor(EnteColorScheme colorScheme, ButtonSize buttonSize) {
if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
return colorScheme.strokeBase;
if (this == ButtonType.tertiaryCritical) {
return colorScheme.warning700;
}
if (this == ButtonType.tertiary && buttonSize == ButtonSize.small) {
return colorScheme.fillBasePressed;
}
return null;
}
@ -176,8 +178,11 @@ enum ButtonType {
EnteColorScheme colorScheme,
ButtonSize buttonSize,
) {
if (this == ButtonType.tertiaryCritical && buttonSize == ButtonSize.large) {
return textTheme.bodyBold.copyWith(color: colorScheme.strokeBase);
if (this == ButtonType.tertiaryCritical) {
return textTheme.bodyBold.copyWith(color: colorScheme.warning700);
}
if (this == ButtonType.tertiary && buttonSize == ButtonSize.small) {
return textTheme.bodyBold.copyWith(color: colorScheme.fillBasePressed);
}
return null;
}