started new settings menu

filcnaplo_mobile_ui/lib/common/panel/panel_button.dart

@@ -13,6 +13,7 @@ class PanelButton extends StatelessWidget {
     this.trailing,
     this.background = false,
     this.trailingDivider = false,
+    this.borderRadius,
   });
 
   final void Function()? onPressed;
@@ -22,18 +23,25 @@ class PanelButton extends StatelessWidget {
   final Widget? trailing;
   final bool background;
   final bool trailingDivider;
+  final BorderRadius? borderRadius;
 
   @override
   Widget build(BuildContext context) {
     final button = RawMaterialButton(
       onPressed: onPressed,
       padding: padding,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
+      shape: RoundedRectangleBorder(
-      fillColor: background ? Colors.white.withOpacity(Theme.of(context).brightness == Brightness.light ? .35 : .2) : null,
+          borderRadius: borderRadius ?? BorderRadius.circular(12.0)),
+      fillColor: background
+          ? Colors.white.withOpacity(
+              Theme.of(context).brightness == Brightness.light ? .35 : .2)
+          : null,
       child: ListTile(
         leading: leading != null
             ? Theme(
-                data: Theme.of(context).copyWith(iconTheme: IconThemeData(color: Theme.of(context).colorScheme.secondary)),
+                data: Theme.of(context).copyWith(
+                    iconTheme: IconThemeData(
+                        color: Theme.of(context).colorScheme.secondary)),
                 child: leading!,
               )
             : null,
@@ -55,7 +63,12 @@ class PanelButton extends StatelessWidget {
               )
             : trailing,
         title: title != null
-            ? DefaultTextStyle(style: Theme.of(context).textTheme.titleMedium!.copyWith(fontWeight: FontWeight.w600, fontSize: 16.0), child: title!)
+            ? DefaultTextStyle(
+                style: Theme.of(context)
+                    .textTheme
+                    .titleMedium!
+                    .copyWith(fontWeight: FontWeight.w600, fontSize: 16.0),
+                child: title!)
             : null,
         contentPadding: EdgeInsets.zero,
         visualDensity: VisualDensity.compact,

filcnaplo_mobile_ui/lib/common/splitted_panel/splitted_menu_option.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+class SplittedMenuOption extends StatelessWidget {
+  const SplittedMenuOption({
+    super.key,
+    required this.text,
+    this.leading,
+    this.trailing,
+    this.padding,
+    this.onTap,
+  });
+
+  final String text;
+  final Widget? leading;
+  final Widget? trailing;
+  final EdgeInsetsGeometry? padding;
+  final Function()? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(borderRadius: BorderRadius.circular(2.0)),
+      child: InkWell(
+        splashColor: Colors.grey,
+        onLongPress: () {
+          print('object');
+        },
+        onTap: onTap,
+        child: Padding(
+          padding: padding ?? EdgeInsets.zero,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Row(
+                children: [
+                  if (leading != null) leading!,
+                  const SizedBox(
+                    width: 16.0,
+                  ),
+                  Text(text),
+                  const SizedBox(
+                    width: 16.0,
+                  ),
+                ],
+              ),
+              if (trailing != null) trailing!,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

filcnaplo_mobile_ui/lib/common/splitted_panel/splitted_panel.dart

@@ -0,0 +1,109 @@
+import 'package:filcnaplo/models/settings.dart';
+import 'package:filcnaplo/theme/colors/colors.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class SplittedPanel extends StatelessWidget {
+  const SplittedPanel({
+    super.key,
+    this.children,
+    this.title,
+    this.padding,
+    this.cardPadding,
+    this.hasShadow = true,
+    this.isSeparated = false,
+    this.spacing = 6.0,
+  });
+
+  final List<Widget>? children;
+  final Widget? title;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? cardPadding;
+  final bool hasShadow;
+  final bool isSeparated;
+  final double spacing;
+
+  @override
+  Widget build(BuildContext context) {
+    double sp = spacing;
+
+    if (isSeparated && spacing == 6.0) {
+      sp = 9.0;
+    }
+
+    List<Widget> childrenInMyBasement = [];
+
+    if (children != null) {
+      var i = 0;
+
+      for (var widget in children!) {
+        var w = Container(
+          width: double.infinity,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.background,
+            borderRadius: BorderRadius.vertical(
+              top: Radius.circular(i == 0 ? 16.0 : 8.0),
+              bottom: Radius.circular(children!.length == i + 1 ? 16.0 : 8.0),
+            ),
+          ),
+          margin: EdgeInsets.only(top: i == 0 ? 0.0 : sp),
+          padding: cardPadding ?? EdgeInsets.zero,
+          child: widget,
+        );
+
+        childrenInMyBasement.add(w);
+
+        i++;
+      }
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // title
+        if (title != null) SplittedPanelTitle(title: title!),
+
+        // body
+        if (children != null)
+          Container(
+            width: double.infinity,
+            decoration: BoxDecoration(
+              color: Colors.transparent,
+              boxShadow: [
+                if (hasShadow &&
+                    Provider.of<SettingsProvider>(context, listen: false)
+                        .shadowEffect)
+                  BoxShadow(
+                    offset: const Offset(0, 21),
+                    blurRadius: 23.0,
+                    color: Theme.of(context).shadowColor,
+                  )
+              ],
+            ),
+            padding: padding ??
+                const EdgeInsets.only(bottom: 20.0, left: 24.0, right: 24.0),
+            child: Column(children: childrenInMyBasement),
+          ),
+      ],
+    );
+  }
+}
+
+class SplittedPanelTitle extends StatelessWidget {
+  const SplittedPanelTitle({super.key, required this.title});
+
+  final Widget title;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 14.0 + 24.0, bottom: 8.0),
+      child: DefaultTextStyle(
+        style: Theme.of(context).textTheme.titleMedium!.copyWith(
+            fontWeight: FontWeight.w600,
+            color: AppColors.of(context).text.withOpacity(0.65)),
+        child: title,
+      ),
+    );
+  }
+}

filcnaplo_mobile_ui/lib/screens/settings/settings_screen.dart

@@ -18,10 +18,12 @@ import 'package:filcnaplo/theme/colors/colors.dart';
 import 'package:filcnaplo_kreta_api/client/client.dart';
 import 'package:filcnaplo_mobile_ui/common/action_button.dart';
 import 'package:filcnaplo_mobile_ui/common/bottom_sheet_menu/bottom_sheet_menu.dart';
-import 'package:filcnaplo_mobile_ui/common/bottom_sheet_menu/bottom_sheet_menu_item.dart';
+// import 'package:filcnaplo_mobile_ui/common/bottom_sheet_menu/bottom_sheet_menu_item.dart';
 import 'package:filcnaplo_mobile_ui/common/panel/panel.dart';
 import 'package:filcnaplo_mobile_ui/common/panel/panel_button.dart';
 import 'package:filcnaplo_mobile_ui/common/profile_image/profile_image.dart';
+import 'package:filcnaplo_mobile_ui/common/soon_alert/soon_alert.dart';
+import 'package:filcnaplo_mobile_ui/common/splitted_panel/splitted_panel.dart';
 import 'package:filcnaplo_mobile_ui/common/system_chrome.dart';
 import 'package:filcnaplo_mobile_ui/common/widgets/update/updates_view.dart';
 import 'package:filcnaplo_mobile_ui/screens/news/news_screen.dart';
@@ -135,16 +137,16 @@ class SettingsScreenState extends State<SettingsScreen>
 
   void _showBottomSheet(User u) {
     showBottomSheetMenu(context, items: [
-      BottomSheetMenuItem(
+      // BottomSheetMenuItem(
-        onPressed: () => AccountView.show(u, context: context),
+      //   onPressed: () => AccountView.show(u, context: context),
-        icon: const Icon(FeatherIcons.user),
+      //   icon: const Icon(FeatherIcons.user),
-        title: Text("personal_details".i18n),
+      //   title: Text("personal_details".i18n),
-      ),
+      // ),
-      BottomSheetMenuItem(
+      // BottomSheetMenuItem(
-        onPressed: () => _openDKT(u),
+      //   onPressed: () => _openDKT(u),
-        icon: Icon(FeatherIcons.grid, color: AppColors.of(context).teal),
+      //   icon: Icon(FeatherIcons.grid, color: AppColors.of(context).teal),
-        title: Text("open_dkt".i18n),
+      //   title: Text("open_dkt".i18n),
-      ),
+      // ),
       UserMenuNickname(u),
       UserMenuProfilePic(u),
       // BottomSheetMenuItem(
@@ -268,7 +270,7 @@ class SettingsScreenState extends State<SettingsScreen>
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: ProfileImage(
                 heroTag: "profile",
-                radius: 36.0,
+                radius: 48.42069,
                 onTap: () => _showBottomSheet(user.getUser(user.id ?? "")),
                 name: firstName,
                 badge: updateProvider.available,
@@ -296,13 +298,116 @@ class SettingsScreenState extends State<SettingsScreen>
                   overflow: TextOverflow.ellipsis,
                   textAlign: TextAlign.center,
                   style: TextStyle(
-                      fontSize: 20.0,
+                      fontSize: 22.0,
                       fontWeight: FontWeight.w600,
                       color: AppColors.of(context).text),
                 ),
               ),
             ),
 
+            const SizedBox(
+              height: 18.0,
+            ),
+
+            // user options
+            SplittedPanel(
+              cardPadding: const EdgeInsets.all(4.0),
+              children: [
+                // personal details
+                PanelButton(
+                  onPressed: () =>
+                      AccountView.show(user.user!, context: context),
+                  title: Text("personal_details".i18n),
+                  leading: Icon(
+                    FeatherIcons.user,
+                    size: 22.0,
+                    color: AppColors.of(context).text.withOpacity(0.95),
+                  ),
+                  borderRadius: const BorderRadius.vertical(
+                      top: Radius.circular(12.0), bottom: Radius.circular(4.0)),
+                ),
+                // open dcs (digital collaboration space)
+                PanelButton(
+                  onPressed: () => _openDKT(user.user!),
+                  title: Text("open_dkt".i18n),
+                  leading: Icon(
+                    FeatherIcons.grid,
+                    size: 22.0,
+                    color: AppColors.of(context).text.withOpacity(0.95),
+                  ),
+                  borderRadius: const BorderRadius.vertical(
+                      top: Radius.circular(4.0), bottom: Radius.circular(4.0)),
+                ),
+                // edit user
+                PanelButton(
+                  onPressed: () =>
+                      _showBottomSheet(user.getUser(user.id ?? "")),
+                  title: Text("edit".i18n),
+                  leading: Icon(
+                    FeatherIcons.edit3,
+                    size: 22.0,
+                    color: AppColors.of(context).text.withOpacity(0.95),
+                  ),
+                  borderRadius: const BorderRadius.vertical(
+                      top: Radius.circular(4.0), bottom: Radius.circular(4.0)),
+                ),
+                // switch account
+                PanelButton(
+                  onPressed: () => SoonAlert.show(context: context),
+                  title: Text("switch_account".i18n),
+                  leading: Icon(
+                    FeatherIcons.users,
+                    size: 22.0,
+                    color: AppColors.of(context).text.withOpacity(0.95),
+                  ),
+                  borderRadius: const BorderRadius.vertical(
+                      top: Radius.circular(4.0), bottom: Radius.circular(4.0)),
+                ),
+                // log user out
+                PanelButton(
+                  onPressed: () async {
+                    String? userId = user.id;
+                    if (userId == null) return;
+
+                    // delete user
+                    user.removeUser(userId);
+                    await Provider.of<DatabaseProvider>(context, listen: false)
+                        .store
+                        .removeUser(userId);
+
+                    // if no users, show login
+                    if (user.getUsers().isNotEmpty) {
+                      user.setUser(user.getUsers().first.id);
+                      restore()
+                          .then((_) => user.setUser(user.getUsers().first.id));
+                    } else {
+                      Navigator.of(context)
+                          .pushNamedAndRemoveUntil("login", (_) => false);
+                    }
+                  },
+                  title: Text("log_out".i18n),
+                  leading: Icon(
+                    FeatherIcons.logOut,
+                    color: AppColors.of(context).red,
+                    size: 22.0,
+                  ),
+                  borderRadius: const BorderRadius.vertical(
+                      top: Radius.circular(4.0), bottom: Radius.circular(12.0)),
+                ),
+                // SplittedMenuOption(
+                //   padding: const EdgeInsets.all(8.0),
+                //   text: 'edit'.i18n,
+                //   trailing: const Icon(
+                //     FeatherIcons.edit2,
+                //     size: 22.0,
+                //   ),
+                //   onTap: () {
+                //     print('object');
+                //   },
+                // ),
+              ],
+            ),
+
             Padding(
               padding:
                   const EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
@@ -337,32 +442,32 @@ class SettingsScreenState extends State<SettingsScreen>
                       title: Text("add_user".i18n),
                       leading: const Icon(FeatherIcons.userPlus),
                     ),
-                    PanelButton(
+                    // PanelButton(
-                      onPressed: () async {
+                    //   onPressed: () async {
-                        String? userId = user.id;
+                    //     String? userId = user.id;
-                        if (userId == null) return;
+                    //     if (userId == null) return;
 
-                        // Delete User
+                    //     // Delete User
-                        user.removeUser(userId);
+                    //     user.removeUser(userId);
-                        await Provider.of<DatabaseProvider>(context,
+                    //     await Provider.of<DatabaseProvider>(context,
-                                listen: false)
+                    //             listen: false)
-                            .store
+                    //         .store
-                            .removeUser(userId);
+                    //         .removeUser(userId);
 
-                        // If no other Users left, go back to LoginScreen
+                    //     // If no other Users left, go back to LoginScreen
-                        if (user.getUsers().isNotEmpty) {
+                    //     if (user.getUsers().isNotEmpty) {
-                          user.setUser(user.getUsers().first.id);
+                    //       user.setUser(user.getUsers().first.id);
-                          restore().then(
+                    //       restore().then(
-                              (_) => user.setUser(user.getUsers().first.id));
+                    //           (_) => user.setUser(user.getUsers().first.id));
-                        } else {
+                    //     } else {
-                          Navigator.of(context)
+                    //       Navigator.of(context)
-                              .pushNamedAndRemoveUntil("login", (_) => false);
+                    //           .pushNamedAndRemoveUntil("login", (_) => false);
-                        }
+                    //     }
-                      },
+                    //   },
-                      title: Text("log_out".i18n),
+                    //   title: Text("log_out".i18n),
-                      leading: Icon(FeatherIcons.logOut,
+                    //   leading: Icon(FeatherIcons.logOut,
-                          color: AppColors.of(context).red),
+                    //       color: AppColors.of(context).red),
-                    ),
+                    // ),
                   ],
                 ),
               ),