Design Changes

ThomasFercher · Aug 22, 2021 · 2cb4161 · 2cb4161
1 parent 6d581cf
commit 2cb4161
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 87 deletions.
diff --git a/lib/customwidgets/input/selectBar/legendSelectBar.dart b/lib/customwidgets/input/selectBar/legendSelectBar.dart
@@ -18,6 +18,8 @@ class LegendSelectBar extends StatelessWidget {
   final double? iconSize;
   final bool? isCard;
   final EdgeInsets? margin;
+  final double? width;
+  final double? height;
 
   LegendSelectBar({
     required this.options,
@@ -26,6 +28,8 @@ class LegendSelectBar extends StatelessWidget {
     this.iconSize,
     this.isCard,
     this.margin,
+    this.width,
+    this.height,
   });
 
   List<Widget> getOptions(BuildContext context) {
@@ -58,6 +62,8 @@ class LegendSelectBar extends StatelessWidget {
         return Padding(
           padding: margin ?? EdgeInsets.all(4.0),
           child: Container(
+            width: width,
+            height: height,
             padding: EdgeInsets.all(sizing.borderRadius.bottomLeft.x / 2),
             decoration: isCard ?? false
                 ? BoxDecoration(

diff --git a/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart b/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart
@@ -3,6 +3,8 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
 import 'package:webstore/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart';
+import 'package:webstore/customwidgets/typography/legendText.dart';
+import 'package:webstore/customwidgets/typography/typography.dart';
 import '../../../../objects/menuOption.dart';
 import '../../../../router/routerProvider.dart';
 import '../../../../styles/layoutType.dart';
@@ -11,9 +13,13 @@ import '../../../../styles/legendTheme.dart';
 
 class FixedAppBar extends StatelessWidget {
   final bool? showMenu;
+  final WidgetBuilder? builder;
+  final Widget? leading;
 
   FixedAppBar({
     this.showMenu,
+    this.builder,
+    this.leading,
   });
 
   @override
@@ -22,20 +28,28 @@ class FixedAppBar extends StatelessWidget {
 
     return SliverAppBar(
       backgroundColor: theme.colors.primaryColor,
-      leading: Hero(
-        tag: ValueKey("appBarLeading"),
-        child: Container(
-          width: 80,
-          height: 80,
-          child: Placeholder(),
+      actions: [
+        Builder(
+          builder: builder ?? (c) => Container(),
         ),
-      ),
-      actions: [Container()],
+      ],
       title: Hero(
         tag: ValueKey("appBarTitle"),
         child: Material(
           color: Colors.transparent,
-          child: showMenu ?? true ? FixedMenu(context: context) : Container(),
+          child: Row(
+            children: [
+              leading ??
+                  LegendText(
+                    text: "Legend Design",
+                    textStyle: LegendTextStyle.h1(),
+                  ),
+              if (showMenu ?? true)
+                Expanded(
+                  child: FixedMenu(context: context),
+                ),
+            ],
+          ),
         ),
       ),
       expandedHeight: theme.sizing.appbarHeight,

diff --git a/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart b/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart
@@ -54,7 +54,7 @@ class FixedMenu extends StatelessWidget {
                   ),
                 ),
                 Expanded(
-                  flex: 1,
+                  flex: 2,
                   child: Container(),
                 ),
               ],

diff --git a/lib/customwidgets/layout/fixed/fixedSider.dart b/lib/customwidgets/layout/fixed/fixedSider.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:provider/provider.dart';
 import 'package:webstore/customwidgets/layout/sections/sectionTile.dart';
 import 'package:webstore/router/routes/sectionProvider.dart';
@@ -133,6 +134,17 @@ class Sider extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     LegendTheme theme = Provider.of<LegendTheme>(context);
+
+    ScrollController scrollController = ScrollController(
+      initialScrollOffset: 80.0,
+    );
+    scrollController
+      ..addListener(() {
+        if (scrollController.offset <= 80) {
+          scrollController.jumpTo(80);
+        }
+      });
+
     List<MenuOptionHeader> options = RouterProvider.of(context).menuOptions;
     List<DrawerMenuTile> tiles = List.of(
       options.map(
@@ -156,12 +168,7 @@ class Sider extends StatelessWidget {
       ),
     );
 
-    List<Widget> children = [
-      Container(
-        child: Placeholder(),
-        height: 100,
-      ),
-    ];
+    List<Widget> children = [];
 
     if (showMenu ?? false) {
       children.add(ListView(
@@ -176,21 +183,37 @@ class Sider extends StatelessWidget {
         children: sectionTiles,
       ));
     }
+
     if (builder != null)
-      children.add(
-        Expanded(
-          child: Builder(
-            builder: builder!,
-          ),
-        ),
-      );
+      children.add(Builder(
+        builder: (context) => builder!(context),
+      ));
+
+    for (var i = 1; i < children.length; i += 2) {
+      children.insert(i, Padding(padding: EdgeInsets.only(top: 16)));
+    }
 
     return Container(
       width: 200,
       height: MediaQuery.of(context).size.height,
       color: theme.colors.primaryColor,
-      child: Column(
-        children: children,
+      child: Expanded(
+        child: CustomScrollView(
+          shrinkWrap: true,
+          slivers: [
+            SliverAppBar(
+              title: Container(),
+              backgroundColor: theme.colors.primaryColor,
+              actions: [Container()],
+              expandedHeight: theme.sizing.appbarHeight,
+              collapsedHeight: theme.sizing.appbarHeight,
+              toolbarHeight: theme.sizing.appbarHeight,
+              pinned: true,
+              automaticallyImplyLeading: false,
+            ),
+            SliverList(delegate: SliverChildListDelegate(children))
+          ],
+        ),
       ),
     );
   }

diff --git a/lib/customwidgets/layout/legendScaffold.dart b/lib/customwidgets/layout/legendScaffold.dart
@@ -30,6 +30,7 @@ class LegendScaffold extends StatelessWidget {
   final String pageName;
   final Function(BuildContext context)? onActionButtonPressed;
   final WidgetBuilder? siderBuilder;
+  final WidgetBuilder? appBarBuilder;
   final bool? showSiderMenu;
   final bool? showAppBarMenu;
   late final bool singlePage;
@@ -43,6 +44,7 @@ class LegendScaffold extends StatelessWidget {
     this.siderBuilder,
     this.showSiderMenu,
     this.showAppBarMenu,
+    this.appBarBuilder,
     WidgetBuilder? contentBuilder,
     List<Widget>? children,
     bool? singlePage,
@@ -123,24 +125,23 @@ class LegendScaffold extends StatelessWidget {
   }
 
   Widget getHeader() {
-    if (layoutType == LayoutType.FixedHeaderSider) {
-      return FixedAppBar(
-        showMenu: showAppBarMenu ?? false,
-      );
-    } else if (layoutType == LayoutType.FixedHeader) {
-      return FixedAppBar();
-    } else {
-      return SliverToBoxAdapter(
-        child: Container(),
-      );
+    switch (layoutType) {
+      case LayoutType.FixedHeaderSider:
+        return FixedAppBar(
+          showMenu: showAppBarMenu,
+          builder: appBarBuilder,
+        );
+      case LayoutType.FixedHeader:
+        return FixedAppBar(
+          builder: appBarBuilder,
+        );
+      default:
+        return SliverToBoxAdapter(
+          child: Container(),
+        );
     }
   }
 
-  Widget getDrawer(BuildContext context) {
-    ScreenSize ss = SizeProvider.of(context).screenSize;
-    return DrawerMenu();
-  }
-
   Widget getActionButton(BuildContext context) {
     return FloatingActionButton(
       onPressed: () {
@@ -165,7 +166,7 @@ class LegendScaffold extends StatelessWidget {
     LegendColorTheme colors = Provider.of<LegendTheme>(context).colors;
 
     return Scaffold(
-      endDrawer: getDrawer(context),
+      endDrawer: DrawerMenu(),
       endDrawerEnableOpenDragGesture: false,
       floatingActionButton: onActionButtonPressed != null
           ? Builder(

diff --git a/lib/customwidgets/layout/sections/sectionTile.dart b/lib/customwidgets/layout/sections/sectionTile.dart
@@ -5,13 +5,23 @@ import 'package:webstore/customwidgets/typography/legendText.dart';
 import 'package:webstore/customwidgets/typography/typography.dart';
 import 'package:webstore/router/routes/sectionRouteInfo.dart';
 
+extension StringExtension on String {
+  String capitalize() {
+    return "${this[0].toUpperCase()}${this.substring(1)}";
+  }
+}
+
 class SectionTile extends StatelessWidget {
-  final String name;
+  late final String name;
+  late final String displayName;
 
-  const SectionTile({
+  SectionTile({
     Key? key,
-    required this.name,
-  }) : super(key: key);
+    required String name,
+  }) : super(key: key) {
+    this.name = name;
+    this.displayName = name.replaceAll("/", "").capitalize();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -20,8 +30,8 @@ class SectionTile extends StatelessWidget {
       title: Container(
         alignment: Alignment.center,
         child: LegendText(
-          text: name,
-          textStyle: LegendTextStyle.siderMenuCollapsed().copyWith(
+          text: displayName,
+          textStyle: LegendTextStyle.sectionLink().copyWith(
             fontSize: 16,
             fontWeight: FontWeight.w400,
           ),

diff --git a/lib/customwidgets/typography/typography.dart b/lib/customwidgets/typography/typography.dart
@@ -56,8 +56,8 @@ class LegendTextStyle extends TextStyle {
     return LegendTextStyle(
       textColor: Colors.grey[850]!,
       backgroundColor: Colors.transparent,
-      fontSize: 16,
-      fontWeight: FontWeight.w100,
+      fontSize: 28,
+      fontWeight: FontWeight.w300,
       fontFamily: "sans serif",
     );
   }
@@ -122,6 +122,16 @@ class LegendTextStyle extends TextStyle {
     );
   }
 
+  factory LegendTextStyle.sectionLink() {
+    return LegendTextStyle(
+      textColor: Colors.black87,
+      backgroundColor: Colors.transparent,
+      fontSize: 16,
+      fontWeight: FontWeight.w300,
+      fontFamily: "Roboto",
+    );
+  }
+
   factory LegendTextStyle.h6() {
     return LegendTextStyle(
       textColor: Colors.white,