mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-12-16 00:33:49 -05:00
ui cleanup, new themes
This commit is contained in:
Christien Rioux
parent
94988718e8
commit
44fe198e5d
31 changed files with 1051 additions and 407 deletions
|
|
@ -22,6 +22,7 @@ List<DropdownMenuItem<dynamic>> _getThemeDropdownItems() {
|
|||
ColorPreference.eggplant: translate('themes.eggplant'),
|
||||
ColorPreference.lime: translate('themes.lime'),
|
||||
ColorPreference.grim: translate('themes.grim'),
|
||||
ColorPreference.elite: translate('themes.elite'),
|
||||
ColorPreference.contrast: translate('themes.contrast')
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ class StyledDialog extends StatelessWidget {
|
|||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return AlertDialog(
|
||||
elevation: 0,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(16)),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(16 * scaleConfig.borderRadiusScale)),
|
||||
),
|
||||
contentPadding: const EdgeInsets.all(4),
|
||||
backgroundColor: scale.primaryScale.dialogBorder,
|
||||
|
|
@ -31,12 +33,14 @@ class StyledDialog extends StatelessWidget {
|
|||
decoration: ShapeDecoration(
|
||||
color: scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16))),
|
||||
borderRadius: BorderRadius.circular(
|
||||
16 * scaleConfig.borderRadiusScale))),
|
||||
child: DecoratedBox(
|
||||
decoration: ShapeDecoration(
|
||||
color: scale.primaryScale.appBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12))),
|
||||
borderRadius: BorderRadius.circular(
|
||||
12 * scaleConfig.borderRadiusScale))),
|
||||
child: child.paddingAll(0))));
|
||||
}
|
||||
|
||||
|
|
|
|||
27
lib/theme/views/styled_scaffold.dart
Normal file
27
lib/theme/views/styled_scaffold.dart
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import 'package:awesome_extensions/awesome_extensions.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme.dart';
|
||||
|
||||
class StyledScaffold extends StatelessWidget {
|
||||
const StyledScaffold({required this.appBar, required this.body, super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
|
||||
return clipBorder(
|
||||
clipEnabled: true,
|
||||
borderEnabled: scaleConfig.useVisualIndicators,
|
||||
borderRadius: 16 * scaleConfig.borderRadiusScale,
|
||||
borderColor: scale.primaryScale.border,
|
||||
child: Scaffold(appBar: appBar, body: body, key: key))
|
||||
.paddingAll(32);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
final PreferredSizeWidget? appBar;
|
||||
final Widget? body;
|
||||
}
|
||||
|
|
@ -2,4 +2,5 @@ export 'brightness_preferences.dart';
|
|||
export 'color_preferences.dart';
|
||||
export 'scanner_error_widget.dart';
|
||||
export 'styled_dialog.dart';
|
||||
export 'styled_scaffold.dart';
|
||||
export 'widget_helpers.dart';
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ void showErrorToast(BuildContext context, String message) {
|
|||
contentPadding: const EdgeInsets.all(16),
|
||||
primaryColor: scale.errorScale.elementBackground,
|
||||
secondaryColor: scale.errorScale.calloutBackground,
|
||||
borderRadius: 16,
|
||||
borderRadius: 16 * scaleConfig.borderRadiusScale,
|
||||
toastDuration: const Duration(seconds: 4),
|
||||
animationDuration: const Duration(milliseconds: 1000),
|
||||
displayBorder: scaleConfig.useVisualIndicators,
|
||||
|
|
@ -152,7 +152,7 @@ void showInfoToast(BuildContext context, String message) {
|
|||
contentPadding: const EdgeInsets.all(16),
|
||||
primaryColor: scale.tertiaryScale.elementBackground,
|
||||
secondaryColor: scale.tertiaryScale.calloutBackground,
|
||||
borderRadius: 16,
|
||||
borderRadius: 16 * scaleConfig.borderRadiusScale,
|
||||
toastDuration: const Duration(seconds: 2),
|
||||
animationDuration: const Duration(milliseconds: 500),
|
||||
displayBorder: scaleConfig.useVisualIndicators,
|
||||
|
|
@ -170,13 +170,15 @@ Widget styledTitleContainer({
|
|||
}) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return DecoratedBox(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.border,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
borderRadius:
|
||||
BorderRadius.circular(16 * scaleConfig.borderRadiusScale),
|
||||
)),
|
||||
child: Column(children: [
|
||||
Text(
|
||||
|
|
@ -189,7 +191,8 @@ Widget styledTitleContainer({
|
|||
color:
|
||||
backgroundColor ?? scale.primaryScale.subtleBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
borderRadius: BorderRadius.circular(
|
||||
16 * scaleConfig.borderRadiusScale),
|
||||
)),
|
||||
child: child)
|
||||
.paddingAll(4)
|
||||
|
|
@ -207,15 +210,17 @@ Widget styledBottomSheet({
|
|||
}) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return DecoratedBox(
|
||||
decoration: ShapeDecoration(
|
||||
color: borderColor ?? scale.primaryScale.dialogBorder,
|
||||
shape: const RoundedRectangleBorder(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(16),
|
||||
topRight: Radius.circular(16)))),
|
||||
topLeft: Radius.circular(16 * scaleConfig.borderRadiusScale),
|
||||
topRight:
|
||||
Radius.circular(16 * scaleConfig.borderRadiusScale)))),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
Text(
|
||||
title,
|
||||
|
|
@ -226,10 +231,12 @@ Widget styledBottomSheet({
|
|||
decoration: ShapeDecoration(
|
||||
color:
|
||||
backgroundColor ?? scale.primaryScale.subtleBackground,
|
||||
shape: const RoundedRectangleBorder(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(16),
|
||||
topRight: Radius.circular(16)))),
|
||||
topLeft: Radius.circular(
|
||||
16 * scaleConfig.borderRadiusScale),
|
||||
topRight: Radius.circular(
|
||||
16 * scaleConfig.borderRadiusScale)))),
|
||||
child: child)
|
||||
.paddingLTRB(4, 4, 4, 0)
|
||||
]));
|
||||
|
|
@ -261,3 +268,25 @@ const grayColorFilter = ColorFilter.matrix(<double>[
|
|||
1,
|
||||
0,
|
||||
]);
|
||||
|
||||
Widget clipBorder({
|
||||
required bool clipEnabled,
|
||||
required bool borderEnabled,
|
||||
required double borderRadius,
|
||||
required Color borderColor,
|
||||
required Widget child,
|
||||
}) =>
|
||||
ClipRRect(
|
||||
borderRadius: clipEnabled
|
||||
? BorderRadius.circular(borderRadius)
|
||||
: BorderRadius.zero,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(boxShadow: [
|
||||
if (borderEnabled) BoxShadow(color: borderColor, spreadRadius: 2)
|
||||
]),
|
||||
child: ClipRRect(
|
||||
borderRadius: clipEnabled
|
||||
? BorderRadius.circular(borderRadius)
|
||||
: BorderRadius.zero,
|
||||
child: child,
|
||||
)).paddingAll(clipEnabled && borderEnabled ? 2 : 0));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue