[Desktop] Start building the desktop interface

I have an exam tomorrow, so I might be a bit slow for today :P
passwdapp · Sep 1, 2020 · 8860f02 · 8860f02
1 parent e1ed06b
commit 8860f02
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 13 deletions.
diff --git a/lib/constants/colors.dart b/lib/constants/colors.dart
@@ -3,7 +3,7 @@ import 'package:passwd/models/color_info.dart';
 import 'package:supercharged/supercharged.dart';
 
 Color primaryColor = "#00ECD7".toColor();
-Color canvasColor = "#151618".toColor();
+Color canvasColor = "#1A1A1A".toColor();
 Color primaryColorHovered = "#00AFA0".toColor();
 
 List<Color> iconColors = [

diff --git a/lib/screens/home/home_screen.dart b/lib/screens/home/home_screen.dart
@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_icons/flutter_icons.dart';
+import 'package:passwd/constants/colors.dart';
+import 'package:passwd/constants/menu_entries.dart';
 import 'package:passwd/screens/home/home_viewmodel.dart';
 import 'package:passwd/screens/home_passwords/home_passwords_sceeen.dart';
 import 'package:passwd/screens/home_settings/home_settings_screen.dart';
 import 'package:passwd/screens/home_tags/home_tags_screen.dart';
+import 'package:passwd/widgets/responsive/screen_type_builder.dart';
 import 'package:stacked/stacked.dart';
 
 class HomeScreen extends StatelessWidget {
@@ -16,12 +20,64 @@ class HomeScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     return ViewModelBuilder<HomeViewModel>.reactive(
       viewModelBuilder: () => HomeViewModel(),
-      builder: (context, model, child) => Scaffold(
-        body: IndexedStack(
-          children: items,
-          index: 0,
+      builder: (context, model, child) => ScreenTypeBuilder(
+        mobile: Scaffold(
+          body: getStack(
+            model.currentItem,
+          ),
+        ),
+        desktop: Scaffold(
+          body: Row(
+            children: [
+              Container(
+                width: 272,
+                color: Colors.white.withOpacity(0.025),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 4,
+                  vertical: 12,
+                ),
+                child: ListView.builder(
+                  itemCount: navMenuEntries.length,
+                  itemBuilder: (context, i) => ListTile(
+                    leading: Icon(navMenuEntries[i].icon),
+                    title: Text(
+                      navMenuEntries[i].localizationTag,
+                    ),
+                    onTap: () {
+                      if (i != model.currentItem) {
+                        model.currentItem = i;
+                      }
+                    },
+                    hoverColor: primaryColor.withOpacity(0.08),
+                    selected: i == model.currentItem,
+                  ),
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 2,
+                    horizontal: 4,
+                  ),
+                  child: getStack(
+                    model.currentItem,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+        tablet: getStack(
+          model.currentItem,
         ),
       ),
     );
   }
+
+  Widget getStack(int i) {
+    return IndexedStack(
+      children: items,
+      index: i,
+    );
+  }
 }
diff --git a/lib/screens/home/home_viewmodel.dart b/lib/screens/home/home_viewmodel.dart
@@ -1,3 +1,11 @@
 import 'package:flutter/foundation.dart';
 
-class HomeViewModel extends ChangeNotifier {}
+class HomeViewModel extends ChangeNotifier {
+  int _currentItem = 0;
+  int get currentItem => _currentItem;
+
+  set currentItem(int i) {
+    _currentItem = i;
+    notifyListeners();
+  }
+}
diff --git a/lib/screens/home_passwords/home_passwords_viewmodel.dart b/lib/screens/home_passwords/home_passwords_viewmodel.dart
@@ -30,6 +30,8 @@ class HomePasswordsViewModel extends ChangeNotifier {
       await locator<DatabaseService>().reloadDatabaseFromDisk();
     }
     _entries = locator<DatabaseService>().entries;
+
+    notifyListeners();
     await Future.delayed(Duration(milliseconds: 500));
     loading = false;
 

diff --git a/lib/utils/get_device_type.dart b/lib/utils/get_device_type.dart
@@ -4,12 +4,12 @@ import 'package:passwd/models/device_type.dart';
 DeviceType getDeviceType(MediaQueryData data) {
   double deviceWidth = data.size.shortestSide;
 
-  if (deviceWidth > 950) {
-    return DeviceType.DESKTOP;
+  if (deviceWidth > 600 && deviceWidth <= 950) {
+    return DeviceType.TABLET;
   }
 
-  if (deviceWidth > 600) {
-    return DeviceType.TABLET;
+  if (deviceWidth > 950) {
+    return DeviceType.DESKTOP;
   }
 
   return DeviceType.MOBILE;

diff --git a/lib/widgets/responsive/screen_type_builder.dart b/lib/widgets/responsive/screen_type_builder.dart
@@ -22,7 +22,7 @@ class ScreenTypeBuilder extends StatelessWidget {
         }
 
         if (information.deviceType == DeviceType.TABLET && tablet != null) {
-          return desktop;
+          return tablet;
         }
 
         return mobile;

diff --git a/lib/widgets/title.dart b/lib/widgets/title.dart
@@ -3,13 +3,17 @@ import 'package:passwd/constants/colors.dart';
 
 class TitleWidget extends StatelessWidget {
   final double textSize;
+  final MainAxisAlignment mainAxisAlignment;
 
-  TitleWidget({this.textSize = 36});
+  TitleWidget({
+    this.textSize = 36,
+    this.mainAxisAlignment = MainAxisAlignment.center,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisAlignment: mainAxisAlignment,
       children: [
         Text(
           "Pass",