Skip to content

Commit

Permalink
Dialog 3.0.0 (bdlukaa#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdlukaa
bdlukaa authored Jul 2, 2021
2 parents db60ea5 + 67e4251 commit 36d5add
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 67 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ Date format: DD/MM/YYYY

## [next] - [##/##/2021]

- Update `ContentDialog` design.
- Update `NavigationView` design:
- **BREAKING:** Acryic is not used anymore. Consequently, `useAcrylic` method was removed.
- Implemented `Mica`, used by the new `NavigationView`
Expand Down
8 changes: 3 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1097,7 +1097,7 @@ ContentDialog(

The code above produces the following:

![No Wifi Connection Dialog](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_one_button.png)
![No Wifi Connection Dialog](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/dialogs/dialog_rs2_one_button.png)

You can display the dialog as an overlay by calling the function `showDialog`:

Expand All @@ -1110,10 +1110,8 @@ showDialog(
);
```

![Delete File Dialog](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_delete_file.png)\
![](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_two_button.png)\
![](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_three_button.png)\
![](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/dialogs/dialog_rs2_three_button_default.png)
![Delete File Dialog](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/dialogs/dialog_rs2_delete_file.png)\
![Subscribe to App Service Dialog](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/dialogs/dialog_rs2_three_button_default.png)\

## Flyout

Expand Down
135 changes: 73 additions & 62 deletions lib/src/controls/surfaces/dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,35 +71,42 @@ class ContentDialog extends StatelessWidget {
ContentDialogThemeData.standard(FluentTheme.of(context)).merge(
FluentTheme.of(context).dialogTheme.merge(this.style),
);
return PhysicalModel(
color: style.elevationColor ?? Colors.black,
elevation: style.elevation ?? 0,
child: Container(
constraints: BoxConstraints(maxWidth: 368),
decoration: style.decoration,
padding: style.padding,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (title != null)
Padding(
padding: style.titlePadding ?? EdgeInsets.zero,
child: DefaultTextStyle(
style: style.titleStyle ?? TextStyle(),
child: title!,
),
),
if (content != null)
Padding(
padding: style.bodyPadding ?? EdgeInsets.zero,
child: DefaultTextStyle(
style: style.bodyStyle ?? TextStyle(),
child: content!,
),
),
if (actions != null)
ButtonTheme.merge(
return Container(
constraints: BoxConstraints(maxWidth: 368),
decoration: style.decoration,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: style.padding ?? EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (title != null)
Padding(
padding: style.titlePadding ?? EdgeInsets.zero,
child: DefaultTextStyle(
style: style.titleStyle ?? TextStyle(),
child: title!,
),
),
if (content != null)
Padding(
padding: style.bodyPadding ?? EdgeInsets.zero,
child: DefaultTextStyle(
style: style.bodyStyle ?? TextStyle(),
child: content!,
),
),
],
),
),
if (actions != null)
Container(
decoration: style.actionsDecoration,
padding: style.actionsPadding,
child: ButtonTheme.merge(
data: style.actionThemeData ?? ButtonThemeData(),
child: () {
if (actions!.length == 1) {
Expand All @@ -110,26 +117,24 @@ class ContentDialog extends StatelessWidget {
}
return Row(
mainAxisSize: MainAxisSize.min,
children: () {
return actions!.map((e) {
final index = actions!.indexOf(e);
return Expanded(
child: Padding(
padding: EdgeInsets.only(
right: index != (actions!.length - 1)
? style.actionsSpacing ?? 3
: 0,
),
child: e,
children: actions!.map((e) {
final index = actions!.indexOf(e);
return Expanded(
child: Padding(
padding: EdgeInsets.only(
right: index != (actions!.length - 1)
? style.actionsSpacing ?? 3
: 0,
),
);
}).toList();
}(),
child: e,
),
);
}).toList(),
);
}(),
),
],
),
),
],
),
);
}
Expand Down Expand Up @@ -219,17 +224,17 @@ class ContentDialogThemeData {
final EdgeInsetsGeometry? padding;
final EdgeInsetsGeometry? titlePadding;
final EdgeInsetsGeometry? bodyPadding;
final double? actionsSpacing;

final Decoration? decoration;
final Color? barrierColor;

final TextStyle? titleStyle;
final TextStyle? bodyStyle;
final ButtonThemeData? actionThemeData;
final double? actionsSpacing;
final Decoration? actionsDecoration;
final EdgeInsetsGeometry? actionsPadding;

final double? elevation;
final Color? elevationColor;
final TextStyle? titleStyle;
final TextStyle? bodyStyle;

const ContentDialogThemeData({
this.decoration,
Expand All @@ -239,27 +244,31 @@ class ContentDialogThemeData {
this.padding,
this.actionsSpacing,
this.actionThemeData,
this.actionsDecoration,
this.actionsPadding,
this.titleStyle,
this.bodyStyle,
this.elevation,
this.elevationColor,
});

factory ContentDialogThemeData.standard(ThemeData style) {
return ContentDialogThemeData(
decoration: BoxDecoration(
color: style.scaffoldBackgroundColor,
border: Border.all(color: style.disabledColor, width: 1.2),
borderRadius: BorderRadius.circular(12),
boxShadow: kElevationToShadow[8],
),
padding: EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
titlePadding: EdgeInsets.only(bottom: 12),
bodyPadding: EdgeInsets.only(bottom: 30),
actionsSpacing: 3,
actionsSpacing: 10,
actionsDecoration: BoxDecoration(
color: style.micaBackgroundColor,
borderRadius: BorderRadius.vertical(bottom: Radius.circular(12)),
boxShadow: kElevationToShadow[1],
),
actionsPadding: EdgeInsets.all(20),
barrierColor: Colors.grey[200].withOpacity(0.8),
titleStyle: style.typography.title,
bodyStyle: style.typography.body,
elevation: 8,
elevationColor: Colors.black,
);
}

Expand All @@ -278,10 +287,12 @@ class ContentDialogThemeData {
actionsSpacing: lerpDouble(a?.actionsSpacing, b?.actionsSpacing, t),
actionThemeData:
ButtonThemeData.lerp(a?.actionThemeData, b?.actionThemeData, t),
actionsDecoration:
Decoration.lerp(a?.actionsDecoration, b?.actionsDecoration, t),
actionsPadding:
EdgeInsetsGeometry.lerp(a?.actionsPadding, b?.actionsPadding, t),
titleStyle: TextStyle.lerp(a?.titleStyle, b?.titleStyle, t),
bodyStyle: TextStyle.lerp(a?.bodyStyle, b?.bodyStyle, t),
elevation: lerpDouble(a?.elevation, b?.elevation, t),
elevationColor: Color.lerp(a?.elevationColor, b?.elevationColor, t),
);
}

Expand All @@ -295,10 +306,10 @@ class ContentDialogThemeData {
titlePadding: style.titlePadding ?? titlePadding,
actionsSpacing: style.actionsSpacing ?? actionsSpacing,
actionThemeData: style.actionThemeData ?? actionThemeData,
actionsDecoration: style.actionsDecoration ?? actionsDecoration,
actionsPadding: style.actionsPadding ?? actionsPadding,
titleStyle: style.titleStyle ?? titleStyle,
bodyStyle: style.bodyStyle ?? bodyStyle,
elevation: style.elevation ?? elevation,
elevationColor: style.elevationColor ?? elevationColor,
);
}
}

0 comments on commit 36d5add

Please sign in to comment.