271 lines
8.3 KiB
Dart
271 lines
8.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:photos/theme/colors.dart';
|
|
import 'package:photos/theme/ente_theme.dart';
|
|
import 'package:photos/theme/text_style.dart';
|
|
|
|
enum ButtonType {
|
|
primary,
|
|
secondary,
|
|
neutral,
|
|
trailingIcon,
|
|
critical,
|
|
tertiaryCritical,
|
|
trailingIconPrimary,
|
|
trailingIconSecondary,
|
|
}
|
|
|
|
class LargeButtonWidget extends StatelessWidget {
|
|
final ButtonType buttonType;
|
|
const LargeButtonWidget({required this.buttonType, super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = getEnteColorScheme(context);
|
|
final inverseColorScheme = getEnteColorScheme(context, inverse: true);
|
|
final textTheme = getEnteTextTheme(context);
|
|
final inverseTextTheme = getEnteTextTheme(context, inverse: true);
|
|
final defaultButtonColor = _defaultButtonColor(colorScheme);
|
|
final pressedButtonColor = _pressedButtonColor(colorScheme);
|
|
final disabledButtonColor = _disabledButtonColor(colorScheme);
|
|
final defaultBorderColor = _defaultBorderColor(colorScheme);
|
|
final pressedBorderColor = _pressedBorderColor(colorScheme);
|
|
final disabledBorderColor = _disabledBorderColor(colorScheme);
|
|
final defaultIconColor = _defaultIconColor(
|
|
colorScheme: colorScheme, inverseColorScheme: inverseColorScheme);
|
|
final pressedIconColor = _pressedIconColor(colorScheme);
|
|
final disabledIconColor = _disabledIconColor(colorScheme);
|
|
final defaultLabelStyle = _defaultLabelStyle(
|
|
textTheme: textTheme,
|
|
inverseTextTheme: inverseTextTheme,
|
|
);
|
|
final pressedLabelStyle = _pressedLabelStyle(textTheme, colorScheme);
|
|
final disabledLabelStyle = _disabledLabelStyle(textTheme, colorScheme);
|
|
|
|
return GestureDetector(
|
|
onTap: () {},
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
borderRadius: const BorderRadius.all(Radius.circular(4)),
|
|
color: defaultButtonColor,
|
|
border: Border.all(color: defaultBorderColor),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
//show loading or row depending on state of button
|
|
child: _hasTrailingIcon()
|
|
? Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(right: 16),
|
|
child: Text(
|
|
"Button",
|
|
style: defaultLabelStyle,
|
|
),
|
|
),
|
|
Icon(
|
|
Icons.add_outlined,
|
|
size: 20,
|
|
color: defaultIconColor,
|
|
),
|
|
],
|
|
)
|
|
: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.add_outlined,
|
|
size: 20,
|
|
color: defaultIconColor,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Text(
|
|
"Button",
|
|
style: defaultLabelStyle,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Color _defaultButtonColor(EnteColorScheme colorScheme) {
|
|
if (_isPrimary()) {
|
|
return colorScheme.primary500;
|
|
}
|
|
if (_isSecondary()) {
|
|
return colorScheme.fillFaint;
|
|
}
|
|
if (buttonType == ButtonType.neutral ||
|
|
buttonType == ButtonType.trailingIcon) {
|
|
return colorScheme.fillBase;
|
|
}
|
|
if (buttonType == ButtonType.critical) {
|
|
return colorScheme.warning700;
|
|
}
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return Colors.transparent;
|
|
}
|
|
return Colors.transparent;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
Color? _pressedButtonColor(EnteColorScheme colorScheme) {
|
|
if (_isPrimary()) {
|
|
return colorScheme.primary700;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
Color? _disabledButtonColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.primary || buttonType == ButtonType.critical) {
|
|
return colorScheme.fillFaint;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
Color _defaultBorderColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.warning700;
|
|
}
|
|
return Colors.transparent;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
Color? _pressedBorderColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.primary) {
|
|
return colorScheme.strokeMuted;
|
|
}
|
|
if (buttonType == ButtonType.secondary ||
|
|
buttonType == ButtonType.critical ||
|
|
buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.strokeBase;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
Color? _disabledBorderColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.primary ||
|
|
buttonType == ButtonType.secondary ||
|
|
buttonType == ButtonType.critical) {
|
|
return Colors.transparent;
|
|
}
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.strokeMuted;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
Color _defaultIconColor({
|
|
required EnteColorScheme colorScheme,
|
|
required EnteColorScheme inverseColorScheme,
|
|
}) {
|
|
if (_isPrimary() || buttonType == ButtonType.critical) {
|
|
return strokeBaseDark;
|
|
}
|
|
if (_isSecondary()) {
|
|
return colorScheme.strokeBase;
|
|
}
|
|
if (buttonType == ButtonType.neutral ||
|
|
buttonType == ButtonType.trailingIcon) {
|
|
return inverseColorScheme.strokeBase;
|
|
}
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.warning500;
|
|
}
|
|
//fallback
|
|
return colorScheme.strokeBase;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
Color? _pressedIconColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.strokeBase;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
Color? _disabledIconColor(EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.primary ||
|
|
buttonType == ButtonType.secondary) {
|
|
return colorScheme.strokeMuted;
|
|
}
|
|
if (buttonType == ButtonType.critical ||
|
|
buttonType == ButtonType.tertiaryCritical) {
|
|
return colorScheme.strokeFaint;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
TextStyle _defaultLabelStyle({
|
|
required EnteTextTheme textTheme,
|
|
required EnteTextTheme inverseTextTheme,
|
|
}) {
|
|
if (_isPrimary() || buttonType == ButtonType.critical) {
|
|
return textTheme.bodyBold.copyWith(color: textBaseDark);
|
|
}
|
|
if (_isSecondary()) {
|
|
return textTheme.bodyBold;
|
|
}
|
|
if (buttonType == ButtonType.neutral ||
|
|
buttonType == ButtonType.trailingIcon) {
|
|
return inverseTextTheme.bodyBold;
|
|
}
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return textTheme.bodyBold.copyWith(color: warning500);
|
|
}
|
|
//fallback
|
|
return textTheme.bodyBold;
|
|
}
|
|
|
|
//Returning null to fallback to default color
|
|
TextStyle? _pressedLabelStyle(
|
|
EnteTextTheme textTheme, EnteColorScheme colorScheme) {
|
|
if (buttonType == ButtonType.tertiaryCritical) {
|
|
return textTheme.bodyBold.copyWith(color: colorScheme.strokeBase);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
TextStyle? _disabledLabelStyle(
|
|
EnteTextTheme textTheme,
|
|
EnteColorScheme colorScheme,
|
|
) {
|
|
if (buttonType == ButtonType.primary ||
|
|
buttonType == ButtonType.secondary ||
|
|
buttonType == ButtonType.critical ||
|
|
buttonType == ButtonType.tertiaryCritical) {
|
|
return textTheme.bodyBold.copyWith(color: colorScheme.textFaint);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
bool _hasTrailingIcon() {
|
|
return (buttonType == ButtonType.trailingIcon ||
|
|
buttonType == ButtonType.trailingIconPrimary ||
|
|
buttonType == ButtonType.trailingIconSecondary);
|
|
}
|
|
|
|
bool _isPrimary() {
|
|
return (buttonType == ButtonType.primary ||
|
|
buttonType == ButtonType.trailingIconPrimary);
|
|
}
|
|
|
|
bool _isSecondary() {
|
|
return (buttonType == ButtonType.secondary ||
|
|
buttonType == ButtonType.trailingIconSecondary);
|
|
}
|
|
|
|
bool _isCritical() {
|
|
return (buttonType == ButtonType.critical ||
|
|
buttonType == ButtonType.tertiaryCritical);
|
|
}
|
|
}
|