Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2025-07-23 14:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

ui cleanup

Browse source
This commit is contained in:
Christien Rioux 2025-03-17 00:51:16 -04:00
parent d460a0388c
commit 77c68aa45f
57 changed files with 1158 additions and 914 deletions
Download patch file Download diff file Expand all files Collapse all files

7
lib/theme/models/scale_theme/scale_color.dart
View file

@ -17,6 +17,7 @@ class ScaleColor {
required this.primaryText,
required this.borderText,
required this.dialogBorder,
required this.dialogBorderText,
required this.calloutBackground,
required this.calloutText,
});
@ -36,6 +37,7 @@ class ScaleColor {
Color primaryText;
Color borderText;
Color dialogBorder;
Color dialogBorderText;
Color calloutBackground;
Color calloutText;
@ -55,6 +57,7 @@ class ScaleColor {
Color? foregroundText,
Color? borderText,
Color? dialogBorder,
Color? dialogBorderText,
Color? calloutBackground,
Color? calloutText,
}) =>
@ -76,6 +79,7 @@ class ScaleColor {
primaryText: foregroundText ?? this.primaryText,
borderText: borderText ?? this.borderText,
dialogBorder: dialogBorder ?? this.dialogBorder,
dialogBorderText: dialogBorderText ?? this.dialogBorderText,
calloutBackground: calloutBackground ?? this.calloutBackground,
calloutText: calloutText ?? this.calloutText);
@ -112,6 +116,9 @@ class ScaleColor {
const Color(0x00000000),
dialogBorder: Color.lerp(a.dialogBorder, b.dialogBorder, t) ??
const Color(0x00000000),
dialogBorderText:
Color.lerp(a.dialogBorderText, b.dialogBorderText, t) ??
const Color(0x00000000),
calloutBackground:
Color.lerp(a.calloutBackground, b.calloutBackground, t) ??
const Color(0x00000000),

1
lib/theme/models/scale_theme/scale_custom_dropdown_theme.dart
View file

@ -1,7 +1,6 @@
import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
class ScaleCustomDropdownTheme {

117
lib/theme/models/scale_theme/scale_input_decorator_theme.dart
View file

@ -1,36 +1,61 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
class ScaleInputDecoratorTheme extends InputDecorationTheme {
ScaleInputDecoratorTheme(
this._scaleScheme, ScaleConfig scaleConfig, this._textTheme)
: super(
border: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
contentPadding: const EdgeInsets.all(8),
labelStyle: TextStyle(
color: _scaleScheme.primaryScale.subtleText.withAlpha(127)),
floatingLabelStyle:
TextStyle(color: _scaleScheme.primaryScale.subtleText),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.primaryScale.hoverBorder, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)));
: hintAlpha = scaleConfig.preferBorders ? 127 : 255,
super(
contentPadding: const EdgeInsets.all(8),
labelStyle: TextStyle(color: _scaleScheme.primaryScale.subtleText),
floatingLabelStyle:
TextStyle(color: _scaleScheme.primaryScale.subtleText),
border: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(0x7F)),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.errorScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.primaryScale.hoverBorder, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
hoverColor:
_scaleScheme.primaryScale.hoverElementBackground.withAlpha(0x7F),
filled: true,
focusedErrorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: _scaleScheme.errorScale.border, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
);
final ScaleScheme _scaleScheme;
final TextTheme _textTheme;
final int hintAlpha;
final int disabledAlpha = 127;
@override
TextStyle? get hintStyle => WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return TextStyle(color: _scaleScheme.grayScale.border);
}
return TextStyle(color: _scaleScheme.primaryScale.border);
return TextStyle(
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
@ -46,7 +71,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -71,7 +96,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
BorderSide? get outlineBorder => WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -97,7 +122,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
@override
Color? get prefixIconColor => WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return _scaleScheme.primaryScale.primary.withAlpha(127);
return _scaleScheme.primaryScale.primary.withAlpha(disabledAlpha);
}
if (states.contains(WidgetState.error)) {
return _scaleScheme.errorScale.primary;
@ -108,7 +133,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
@override
Color? get suffixIconColor => WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return _scaleScheme.primaryScale.primary.withAlpha(127);
return _scaleScheme.primaryScale.primary.withAlpha(disabledAlpha);
}
if (states.contains(WidgetState.error)) {
return _scaleScheme.errorScale.primary;
@ -121,7 +146,39 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
final textStyle = _textTheme.bodyLarge ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
return textStyle.copyWith(
color: _scaleScheme.errorScale.hoverBorder);
}
if (states.contains(WidgetState.focused)) {
return textStyle.copyWith(
color: _scaleScheme.errorScale.hoverBorder);
}
return textStyle.copyWith(
color: _scaleScheme.errorScale.subtleBorder);
}
if (states.contains(WidgetState.hovered)) {
return textStyle.copyWith(
color: _scaleScheme.primaryScale.hoverBorder);
}
if (states.contains(WidgetState.focused)) {
return textStyle.copyWith(
color: _scaleScheme.primaryScale.hoverBorder);
}
return textStyle.copyWith(
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
TextStyle? get floatingLabelStyle =>
WidgetStateTextStyle.resolveWith((states) {
final textStyle = _textTheme.bodyLarge ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -146,18 +203,14 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
return textStyle.copyWith(color: _scaleScheme.primaryScale.border);
});
@override
TextStyle? get floatingLabelStyle => labelStyle;
@override
TextStyle? get helperStyle => WidgetStateTextStyle.resolveWith((states) {
final textStyle = _textTheme.bodySmall ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(127));
return textStyle.copyWith(color: _scaleScheme.grayScale.border);
}
return textStyle.copyWith(
color: _scaleScheme.secondaryScale.border.withAlpha(127));
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
@ -165,6 +218,14 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
final textStyle = _textTheme.bodySmall ?? const TextStyle();
return textStyle.copyWith(color: _scaleScheme.errorScale.primary);
});
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(IntProperty('disabledAlpha', disabledAlpha))
..add(IntProperty('hintAlpha', hintAlpha));
}
}
extension ScaleInputDecoratorThemeExt on ScaleTheme {

13
lib/theme/models/scale_theme/scale_scheme.dart
View file

@ -76,8 +76,8 @@ class ScaleScheme extends ThemeExtension<ScaleScheme> {
ColorScheme toColorScheme(Brightness brightness) => ColorScheme(
brightness: brightness,
primary: primaryScale.primary, // reviewed
onPrimary: primaryScale.primaryText, // reviewed
primary: primaryScale.primary,
onPrimary: primaryScale.primaryText,
// primaryContainer: primaryScale.hoverElementBackground,
// onPrimaryContainer: primaryScale.subtleText,
secondary: secondaryScale.primary,
@ -92,15 +92,12 @@ class ScaleScheme extends ThemeExtension<ScaleScheme> {
onError: errorScale.primaryText,
// errorContainer: errorScale.hoverElementBackground,
// onErrorContainer: errorScale.subtleText,
background: grayScale.appBackground, // reviewed
onBackground: grayScale.appText, // reviewed
surface: primaryScale.appBackground, // reviewed
onSurface: primaryScale.appText, // reviewed
surfaceVariant: secondaryScale.appBackground,
surface: primaryScale.appBackground,
onSurface: primaryScale.appText,
onSurfaceVariant: secondaryScale.appText,
outline: primaryScale.border,
outlineVariant: secondaryScale.border,
shadow: primaryScale.primary.darken(80),
shadow: primaryScale.appBackground.darken(60),
//scrim: primaryScale.background,
// inverseSurface: primaryScale.subtleText,
// onInverseSurface: primaryScale.subtleBackground,

83
lib/theme/models/scale_theme/scale_theme.dart
View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'scale_input_decorator_theme.dart';
import 'scale_scheme.dart';
export 'scale_color.dart';
@ -41,4 +42,86 @@ class ScaleTheme extends ThemeExtension<ScaleTheme> {
scheme: scheme.lerp(other.scheme, t),
config: config.lerp(other.config, t));
}
ThemeData toThemeData(Brightness brightness) {
final colorScheme = scheme.toColorScheme(brightness);
final baseThemeData = ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);
final elevatedButtonTheme = ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: scheme.primaryScale.elementBackground,
foregroundColor: scheme.primaryScale.appText,
disabledBackgroundColor:
scheme.grayScale.elementBackground.withAlpha(0x7F),
disabledForegroundColor:
scheme.grayScale.primary.withAlpha(0x7F),
shape: RoundedRectangleBorder(
side: BorderSide(color: scheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * config.borderRadiusScale)))
.copyWith(side: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(color: scheme.grayScale.border.withAlpha(0x7F));
} else if (states.contains(WidgetState.pressed)) {
return BorderSide(
color: scheme.primaryScale.border,
strokeAlign: BorderSide.strokeAlignOutside);
} else if (states.contains(WidgetState.hovered)) {
return BorderSide(color: scheme.primaryScale.hoverBorder);
} else if (states.contains(WidgetState.focused)) {
return BorderSide(color: scheme.primaryScale.hoverBorder, width: 2);
}
return BorderSide(color: scheme.primaryScale.border);
})));
final themeData = baseThemeData.copyWith(
scrollbarTheme: baseThemeData.scrollbarTheme.copyWith(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.border;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.hoverBorder;
}
return scheme.primaryScale.subtleBorder;
}), trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.activeElementBackground;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.hoverElementBackground;
}
return scheme.primaryScale.elementBackground;
}), trackBorderColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.subtleBorder;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.subtleBorder;
}
return scheme.primaryScale.subtleBorder;
})),
appBarTheme: baseThemeData.appBarTheme.copyWith(
backgroundColor: scheme.primaryScale.border,
foregroundColor: scheme.primaryScale.borderText),
bottomSheetTheme: baseThemeData.bottomSheetTheme.copyWith(
elevation: 0,
modalElevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16 * config.borderRadiusScale),
topRight: Radius.circular(16 * config.borderRadiusScale)))),
canvasColor: scheme.primaryScale.subtleBackground,
chipTheme: baseThemeData.chipTheme.copyWith(
backgroundColor: scheme.primaryScale.elementBackground,
selectedColor: scheme.primaryScale.activeElementBackground,
surfaceTintColor: scheme.primaryScale.hoverElementBackground,
checkmarkColor: scheme.primaryScale.primary,
side: BorderSide(color: scheme.primaryScale.border)),
elevatedButtonTheme: elevatedButtonTheme,
inputDecorationTheme:
ScaleInputDecoratorTheme(scheme, config, textTheme),
extensions: <ThemeExtension<dynamic>>[scheme, config, this]);
return themeData;
}
}

5
lib/theme/models/scale_theme/scale_tile_theme.dart
View file

@ -40,7 +40,10 @@ extension ScaleTileThemeExt on ScaleTheme {
final shapeBorder = RoundedRectangleBorder(
side: config.useVisualIndicators
? BorderSide(width: 2, color: borderColor, strokeAlign: 0)
? BorderSide(
width: 2,
color: borderColor,
)
: BorderSide.none,
borderRadius: BorderRadius.circular(8 * config.borderRadiusScale));

16
lib/theme/models/scale_theme/scale_toast_theme.dart
View file

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
enum ScaleToastKind {
@ -35,14 +34,6 @@ extension ScaleToastThemeExt on ScaleTheme {
ScaleToastTheme toastTheme(ScaleToastKind kind) {
final toastScaleColor = scheme.scale(ScaleKind.tertiary);
Icon icon;
switch (kind) {
case ScaleToastKind.info:
icon = const Icon(Icons.info, size: 32);
case ScaleToastKind.error:
icon = const Icon(Icons.dangerous, size: 32);
}
final primaryColor = toastScaleColor.calloutText;
final borderColor = toastScaleColor.border;
final backgroundColor = config.useVisualIndicators
@ -54,6 +45,13 @@ extension ScaleToastThemeExt on ScaleTheme {
final titleColor = config.useVisualIndicators
? toastScaleColor.calloutBackground
: toastScaleColor.calloutText;
Icon icon;
switch (kind) {
case ScaleToastKind.info:
icon = Icon(Icons.info, size: 32, color: primaryColor);
case ScaleToastKind.error:
icon = Icon(Icons.dangerous, size: 32, color: primaryColor);
}
return ScaleToastTheme(
primaryColor: primaryColor,