From 3a50989e570a0982aa85cc4312b597cac5b85b09 Mon Sep 17 00:00:00 2001 From: Bruno D'Luka <45696119+bdlukaa@users.noreply.github.com> Date: Fri, 2 Jul 2021 19:54:03 -0300 Subject: [PATCH 1/3] Rework dialog --- lib/src/controls/surfaces/dialog.dart | 134 ++++++++++++++------------ 1 file changed, 72 insertions(+), 62 deletions(-) diff --git a/lib/src/controls/surfaces/dialog.dart b/lib/src/controls/surfaces/dialog.dart index 38e94c333..d370c7000 100644 --- a/lib/src/controls/surfaces/dialog.dart +++ b/lib/src/controls/surfaces/dialog.dart @@ -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) { @@ -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(), ); }(), ), - ], - ), + ), + ], ), ); } @@ -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, @@ -239,27 +244,30 @@ 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)), + ), + actionsPadding: EdgeInsets.all(20), barrierColor: Colors.grey[200].withOpacity(0.8), titleStyle: style.typography.title, bodyStyle: style.typography.body, - elevation: 8, - elevationColor: Colors.black, ); } @@ -278,10 +286,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), ); } @@ -295,10 +305,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, ); } } From 13864b4bab33a499c1509bcc1b6a9fe32e5fefb4 Mon Sep 17 00:00:00 2001 From: Bruno D'Luka <45696119+bdlukaa@users.noreply.github.com> Date: Fri, 2 Jul 2021 19:58:40 -0300 Subject: [PATCH 2/3] Update documentation --- CHANGELOG.md | 1 + README.md | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7661445b..8c5fa5516 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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` diff --git a/README.md b/README.md index c4190b563..b60bfa656 100644 --- a/README.md +++ b/README.md @@ -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`: @@ -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 From 5df4addd4cf10485b326d6d679f32b510557ef50 Mon Sep 17 00:00:00 2001 From: Bruno D'Luka <45696119+bdlukaa@users.noreply.github.com> Date: Fri, 2 Jul 2021 20:03:05 -0300 Subject: [PATCH 3/3] Update dialog.dart --- lib/src/controls/surfaces/dialog.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/controls/surfaces/dialog.dart b/lib/src/controls/surfaces/dialog.dart index d370c7000..353ef72a5 100644 --- a/lib/src/controls/surfaces/dialog.dart +++ b/lib/src/controls/surfaces/dialog.dart @@ -263,6 +263,7 @@ class ContentDialogThemeData { 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),