From 262757734be8f2dfc28171478bcd04fce1cfff1e Mon Sep 17 00:00:00 2001 From: Daviiddoo Date: Tue, 25 Jun 2024 23:00:42 +0800 Subject: [PATCH] Doc height and width adjustments --- docs/.env.development | 2 +- docs/pages/docs/dialog.mdx | 2 +- docs/pages/docs/scaffold.mdx | 2 +- docs/pages/docs/separator.mdx | 2 +- docs/pages/docs/tabs.mdx | 2 +- forui/lib/src/widgets/header/header.dart | 2 +- samples/lib/sample_scaffold.dart | 20 ++-- samples/lib/widgets/scaffold.dart | 86 ++++++++++-------- samples/lib/widgets/separator.dart | 76 +++++++++------- samples/lib/widgets/tabs.dart | 111 ++++++++++++----------- samples/lib/widgets/text_field.dart | 51 +++++++---- 11 files changed, 197 insertions(+), 159 deletions(-) diff --git a/docs/.env.development b/docs/.env.development index e3549b1a8..d46828e14 100644 --- a/docs/.env.development +++ b/docs/.env.development @@ -1 +1 @@ -NEXT_PUBLIC_DEMO_URL=https://demo.forui.dev \ No newline at end of file +NEXT_PUBLIC_DEMO_URL=http://localhost:59874 \ No newline at end of file diff --git a/docs/pages/docs/dialog.mdx b/docs/pages/docs/dialog.mdx index 1723696cf..3db1c8fb8 100644 --- a/docs/pages/docs/dialog.mdx +++ b/docs/pages/docs/dialog.mdx @@ -6,7 +6,7 @@ A modal dialog interrupts the user with important content and expects a response - + ```dart diff --git a/docs/pages/docs/scaffold.mdx b/docs/pages/docs/scaffold.mdx index cc0539e03..2b46303e2 100644 --- a/docs/pages/docs/scaffold.mdx +++ b/docs/pages/docs/scaffold.mdx @@ -6,7 +6,7 @@ Creates a visual scaffold for Forui widgets. - + ```dart diff --git a/docs/pages/docs/separator.mdx b/docs/pages/docs/separator.mdx index dc2bb4ef8..aad5f2b5c 100644 --- a/docs/pages/docs/separator.mdx +++ b/docs/pages/docs/separator.mdx @@ -6,7 +6,7 @@ Visually or semantically separates content. - + ```dart diff --git a/docs/pages/docs/tabs.mdx b/docs/pages/docs/tabs.mdx index cb3c97882..855a6d1b0 100644 --- a/docs/pages/docs/tabs.mdx +++ b/docs/pages/docs/tabs.mdx @@ -6,7 +6,7 @@ A set of layered sections of content—known as tab entries—that are displayed - + ```dart diff --git a/forui/lib/src/widgets/header/header.dart b/forui/lib/src/widgets/header/header.dart index d1ab0b445..d3e0c4f5e 100644 --- a/forui/lib/src/widgets/header/header.dart +++ b/forui/lib/src/widgets/header/header.dart @@ -125,7 +125,7 @@ final class FHeaderStyle with Diagnosticable { height: 1, ), action = FHeaderActionStyle.inherit(colorScheme: colorScheme), - padding = style.pagePadding.copyWith(bottom: 10); + padding = style.pagePadding.copyWith(bottom: 15); /// Returns a copy of this [FHeaderStyle] with the given properties replaced. /// diff --git a/samples/lib/sample_scaffold.dart b/samples/lib/sample_scaffold.dart index 4267865d3..e8775747c 100644 --- a/samples/lib/sample_scaffold.dart +++ b/samples/lib/sample_scaffold.dart @@ -14,18 +14,20 @@ abstract class SampleScaffold extends StatelessWidget { SampleScaffold({ String theme = 'zinc-light', super.key, - }): - theme = themes[theme]!; + }) : theme = themes[theme]!; @override Widget build(BuildContext context) => FTheme( - data: theme, - child: FScaffold( - content: Center( - child: child(context), - ), - ), - ); + data: theme, + child: FScaffold( + content: Center( + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 600), + child: child(context), + ), + ), + ), + ); Widget child(BuildContext context); } diff --git a/samples/lib/widgets/scaffold.dart b/samples/lib/widgets/scaffold.dart index 38f084b3a..a2b22defc 100644 --- a/samples/lib/widgets/scaffold.dart +++ b/samples/lib/widgets/scaffold.dart @@ -12,46 +12,56 @@ class ScaffoldPage extends SampleScaffold { }); @override - Widget child(BuildContext context) => FScaffold( - header: FHeader( - title: 'Settings', - actions: [ - FHeaderAction( - icon: FAssets.icons.ellipsis, - onPress: () {}, - ), - ], - ), - content: ListView( - children: [ - FCard( - title: 'Account', - subtitle: 'Make changes to your account here. Click save when you are done.', - child: Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: [ - const FTextField( - label: 'Name', - hint: 'John Renalo', - ), - const SizedBox(height: 10), - const FTextField( - label: 'Email', - hint: 'john@doe.com', - ), - Padding( - padding: const EdgeInsets.only(top: 24, bottom: 16), - child: FButton( - label: 'Save', - onPress: () {}, + Widget child(BuildContext context) => Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const SizedBox(height: 30), + SizedBox( + height: 420, + child: FScaffold( + header: FHeader( + title: 'Settings', + actions: [ + FHeaderAction( + icon: FAssets.icons.ellipsis, + onPress: () {}, + ), + ], + ), + content: Column( + children: [ + const SizedBox(height: 5), + FCard( + title: 'Account', + subtitle: 'Make changes to your account here. Click save when you are done.', + child: Padding( + padding: const EdgeInsets.only(top: 10), + child: Column( + children: [ + const FTextField( + label: 'Name', + hint: 'John Renalo', + ), + const SizedBox(height: 10), + const FTextField( + label: 'Email', + hint: 'john@doe.com', + ), + Padding( + padding: const EdgeInsets.only(top: 24, bottom: 16), + child: FButton( + label: 'Save', + onPress: () {}, + ), + ), + ], ), ), - ], - ), + ), + ], ), ), - ], - ), - ); + ), + ], + ); } diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart index 4c4599d52..2585268d4 100644 --- a/samples/lib/widgets/separator.dart +++ b/samples/lib/widgets/separator.dart @@ -18,43 +18,49 @@ class SeparatorPage extends SampleScaffold { return Padding( padding: const EdgeInsets.all(16), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'Flutter Forui', - style: typography.xl2.copyWith( - color: colorScheme.foreground, - fontWeight: FontWeight.w600, + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 300), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + Text( + 'Flutter Forui', + style: typography.xl2.copyWith( + color: colorScheme.foreground, + fontWeight: FontWeight.w600, + ), ), - ), - Text( - 'An open-source widget library.', - style: typography.sm.copyWith(color: colorScheme.mutedForeground), - ), - const FSeparator(), - SizedBox( - height: 30, - child: Row( - children: [ - Text( - 'Blog', - style: typography.sm.copyWith(color: colorScheme.foreground), - ), - const FSeparator(vertical: true), - Text( - 'Docs', - style: typography.sm.copyWith(color: colorScheme.foreground), - ), - const FSeparator(vertical: true), - Text( - 'Source', - style: typography.sm.copyWith(color: colorScheme.foreground), - ), - ], + Text( + 'An open-source widget library.', + style: typography.sm.copyWith(color: colorScheme.mutedForeground), ), - ), - ], + const FSeparator(), + SizedBox( + height: 30, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + Text( + 'Blog', + style: typography.sm.copyWith(color: colorScheme.foreground), + ), + const FSeparator(vertical: true), + Text( + 'Docs', + style: typography.sm.copyWith(color: colorScheme.foreground), + ), + const FSeparator(vertical: true), + Text( + 'Source', + style: typography.sm.copyWith(color: colorScheme.foreground), + ), + ], + ), + ), + ], + ), ), ); } diff --git a/samples/lib/widgets/tabs.dart b/samples/lib/widgets/tabs.dart index f83131209..1d3ff1c3d 100644 --- a/samples/lib/widgets/tabs.dart +++ b/samples/lib/widgets/tabs.dart @@ -12,65 +12,70 @@ class TabsPage extends SampleScaffold { }); @override - Widget child(BuildContext context) => Padding( - padding: const EdgeInsets.all(16), - child: FTabs( - tabs: [ - FTabEntry( - label: 'Account', - content: FCard( - title: 'Account', - subtitle: 'Make changes to your account here. Click save when you are done.', - child: Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: [ - const FTextField( - label: 'Name', - hint: 'John Renalo', + Widget child(BuildContext context) => Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(16), + child: FTabs( + tabs: [ + FTabEntry( + label: 'Account', + content: FCard( + title: 'Account', + subtitle: 'Make changes to your account here. Click save when you are done.', + child: Padding( + padding: const EdgeInsets.only(top: 10), + child: Column( + children: [ + const FTextField( + label: 'Name', + hint: 'John Renalo', + ), + const SizedBox(height: 10), + const FTextField( + label: 'Email', + hint: 'john@doe.com', + ), + Padding( + padding: const EdgeInsets.only(top: 24, bottom: 16), + child: FButton( + label: 'Save', + onPress: () {}, + ), + ), + ], ), - const SizedBox(height: 10), - const FTextField( - label: 'Email', - hint: 'john@doe.com', - ), - Padding( - padding: const EdgeInsets.only(top: 24, bottom: 16), - child: FButton( - label: 'Save', - onPress: () {}, - ), - ), - ], + ), ), ), - ), - ), - FTabEntry( - label: 'Password', - content: FCard( - title: 'Password', - subtitle: 'Change your password here. After saving, you will be logged out.', - child: Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: [ - const FTextField(label: 'Current password'), - const SizedBox(height: 10), - const FTextField(label: 'New password'), - Padding( - padding: const EdgeInsets.only(top: 24, bottom: 16), - child: FButton( - label: 'Save', - onPress: () {}, - ), + FTabEntry( + label: 'Password', + content: FCard( + title: 'Password', + subtitle: 'Change your password here. After saving, you will be logged out.', + child: Padding( + padding: const EdgeInsets.only(top: 10), + child: Column( + children: [ + const FTextField(label: 'Current password'), + const SizedBox(height: 10), + const FTextField(label: 'New password'), + Padding( + padding: const EdgeInsets.only(top: 24, bottom: 16), + child: FButton( + label: 'Save', + onPress: () {}, + ), + ), + ], ), - ], + ), ), ), - ), + ], ), - ], - ), + ), + ], ); } diff --git a/samples/lib/widgets/text_field.dart b/samples/lib/widgets/text_field.dart index ee4c049a3..0d6bf966e 100644 --- a/samples/lib/widgets/text_field.dart +++ b/samples/lib/widgets/text_field.dart @@ -15,13 +15,18 @@ class TextFieldPage extends SampleScaffold { }); @override - Widget child(BuildContext context) => Padding( - padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30), - child: FTextField( - enabled: enabled, - label: 'Email', - hint: 'john@doe.com', - ), + Widget child(BuildContext context) => Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30), + child: FTextField( + enabled: enabled, + label: 'Email', + hint: 'john@doe.com', + ), + ), + ], ); } @@ -33,12 +38,17 @@ class PasswordTextFieldPage extends SampleScaffold { }); @override - Widget child(BuildContext context) => Padding( - padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30), - child: FTextField.password( - controller: TextEditingController(text: 'My password'), - label: 'Password', - ), + Widget child(BuildContext context) => Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30), + child: FTextField.password( + controller: TextEditingController(text: 'My password'), + label: 'Password', + ), + ), + ], ); } @@ -50,10 +60,15 @@ class MultilineTextFieldPage extends SampleScaffold { }); @override - Widget child(BuildContext context) => const Padding( - padding: EdgeInsets.symmetric(horizontal: 20, vertical:30), - child: FTextField.multiline( - label: 'Leave a review', - ), + Widget child(BuildContext context) => const Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.symmetric(horizontal: 20, vertical:30), + child: FTextField.multiline( + label: 'Leave a review', + ), + ), + ], ); }