redesign folder selection screen

2022-03-12 19:33:30 +05:30 · 2022-03-12 19:33:30 +05:30 · 9f64039623
commit 9f64039623
parent 150c8177b1
6 changed files with 202 additions and 68 deletions
--- a/fonts/Inter-Medium.ttf
+++ b/fonts/Inter-Medium.ttf
--- a/lib/app.dart
+++ b/lib/app.dart
@ -1,5 +1,8 @@
+import 'dart:io';
+
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:background_fetch/background_fetch.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_easyloading/flutter_easyloading.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@ -15,19 +18,50 @@ final lightThemeData = ThemeData(
  fontFamily: 'Inter',
  brightness: Brightness.light,
  hintColor: Colors.grey,
+  primaryColor: Colors.deepOrangeAccent,
  iconTheme: IconThemeData(color: Colors.black),
  primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0),
  colorScheme: ColorScheme.light(primary: Colors.black),
  accentColor: Color.fromRGBO(45, 194, 98, 0.2),
  buttonColor: Color.fromRGBO(45, 194, 98, 1.0),
-  buttonTheme: ButtonThemeData().copyWith(
-    buttonColor: Color.fromRGBO(45, 194, 98, 1.0),
+  outlinedButtonTheme: OutlinedButtonThemeData(
+    style: OutlinedButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: EdgeInsets.fromLTRB(50, 16, 50, 16),
+      textStyle: TextStyle(
+        fontWeight: FontWeight.w600,
+        fontFamily: 'Inter-SemiBold',
+        fontSize: 18,
+      ),
+    ).copyWith(
+      backgroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.grey.shade500;
+          }
+          return Colors.black;
+        },
+      ),
+      foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.white;
+          }
+          return Colors.white;
+        },
+      ),
+      alignment: Alignment.center,
+    ),
  ),
  toggleableActiveColor: Colors.red[400],
  scaffoldBackgroundColor: Colors.white,
  bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
  backgroundColor: Colors.white,
-  appBarTheme: AppBarTheme().copyWith(color: Colors.blue),
+  appBarTheme: AppBarTheme().copyWith(
+      backgroundColor: Colors.white,
+      iconTheme: IconThemeData(color: Colors.black)),
  //https://api.flutter.dev/flutter/material/TextTheme-class.html
  textTheme: TextTheme().copyWith(
      headline6: TextStyle(
@ -41,7 +75,6 @@ final lightThemeData = ThemeData(
      bodyText2: TextStyle(color: Colors.yellow),
      bodyText1: TextStyle(color: Colors.orange)),
  cardColor: Color.fromRGBO(250, 250, 250, 1.0),
-  //
  dialogTheme: DialogTheme().copyWith(
    backgroundColor: Color.fromRGBO(250, 250, 250, 1.0), //
  ),
@ -86,6 +119,37 @@ final darkThemeData = ThemeData(
        fontSize: 12,
      )),
  toggleableActiveColor: Colors.green[400],
+  outlinedButtonTheme: OutlinedButtonThemeData(
+    style: OutlinedButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: EdgeInsets.fromLTRB(50, 16, 50, 16),
+      textStyle: TextStyle(
+        fontWeight: FontWeight.w600,
+        fontFamily: 'Inter-SemiBold',
+        fontSize: 18,
+      ),
+    ).copyWith(
+      backgroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.grey.shade500;
+          }
+          return Colors.white;
+        },
+      ),
+      foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        (Set<MaterialState> states) {
+          if (states.contains(MaterialState.disabled)) {
+            return Colors.white;
+          }
+          return Colors.black;
+        },
+      ),
+      alignment: Alignment.center,
+    ),
+  ),
  scaffoldBackgroundColor: Colors.black,
  backgroundColor: Colors.black,
  appBarTheme: AppBarTheme().copyWith(
@ -107,11 +171,6 @@ final darkThemeData = ThemeData(
  ),
 );

-extension CustomColorScheme on ColorScheme {
-  Color get defaultTextColor =>
-      brightness == Brightness.light ? Colors.black : Colors.white;
-}
-
 class EnteApp extends StatefulWidget {
  static const _homeWidget = HomeWidget();

@ -139,14 +198,38 @@ class _EnteAppState extends State<EnteApp> with WidgetsBindingObserver {
    _configureBackgroundFetch();
  }

+  Widget debugBuild(BuildContext context) {
+    return MaterialApp(
+      title: "ente",
+      themeMode: ThemeMode.system,
+      theme: lightThemeData,
+      darkTheme: darkThemeData,
+      home: EnteApp._homeWidget,
+      debugShowCheckedModeBanner: false,
+      navigatorKey: Network.instance.getAlice().getNavigatorKey(),
+      builder: EasyLoading.init(),
+      supportedLocales: L10n.all,
+      localizationsDelegates: const [
+        AppLocalizations.delegate,
+        GlobalMaterialLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
+    if (kDebugMode && Platform.isIOS) {
+      return debugBuild(context);
+    }
    return AdaptiveTheme(
        light: lightThemeData,
        dark: darkThemeData,
        initial: AdaptiveThemeMode.dark,
        builder: (lightTheme, dartTheme) => MaterialApp(
              title: "ente",
+              themeMode: ThemeMode.system,
              theme: lightTheme,
              darkTheme: dartTheme,
              home: EnteApp._homeWidget,
--- a/lib/ui/backup_folder_selection_page.dart
+++ b/lib/ui/backup_folder_selection_page.dart
@ -9,6 +9,7 @@ import 'package:photos/core/event_bus.dart';
 import 'package:photos/db/files_db.dart';
 import 'package:photos/events/backup_folders_updated_event.dart';
 import 'package:photos/models/file.dart';
+import 'package:photos/ui/common/custom_color_scheme.dart';
 import 'package:photos/ui/common_elements.dart';
 import 'package:photos/ui/loading_widget.dart';
 import 'package:photos/ui/thumbnail_widget.dart';
@ -61,19 +62,29 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(title: Text("select folders to backup")),
+      appBar: AppBar(
+        title: Text(""),
+      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
-          Padding(
-            padding: EdgeInsets.all(12),
+          Container(
+            padding: EdgeInsets.all(24),
+            child: Text(
+              'Select folders for backup',
+              textAlign: TextAlign.left,
+              style: TextStyle(
+                  color: Theme.of(context).colorScheme.onSurface,
+                  fontFamily: 'Inter-Bold',
+                  fontSize: 32,
+                  fontWeight: FontWeight.bold),
+            ),
          ),
          Padding(
-            padding: const EdgeInsets.only(left: 32, right: 32),
+            padding: const EdgeInsets.only(left: 24, right: 48),
            child: Text(
-              "the selected folders will be end-to-end encrypted and backed up",
+              "Selected folders will be end-to-end encrypted and backed up",
              style: Theme.of(context).textTheme.caption.copyWith(height: 1.3),
-              textAlign: TextAlign.center,
            ),
          ),
          Padding(
@ -84,15 +95,18 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
              : GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  child: Padding(
-                    padding: const EdgeInsets.fromLTRB(6, 6, 64, 6),
+                    padding: const EdgeInsets.fromLTRB(24, 6, 64, 12),
                    child: Align(
-                      alignment: Alignment.centerRight,
+                      alignment: Alignment.centerLeft,
                      child: Text(
                        _selectedFolders.length == _allFolders.length
-                            ? "unselect all"
-                            : "select all",
+                            ? "Unselect all"
+                            : "Select all",
                        textAlign: TextAlign.right,
-                        style: Theme.of(context).textTheme.overline,
+                        style: Theme.of(context)
+                            .textTheme
+                            .overline
+                            .copyWith(decoration: TextDecoration.underline),
                      ),
                    ),
                  ),
@ -119,11 +133,11 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
          Hero(
            tag: "select_folders",
            child: Container(
+              width: double.infinity,
              padding: EdgeInsets.only(
-                  left: 60, right: 60, bottom: Platform.isIOS ? 60 : 32),
-              child: button(
-                widget.buttonText,
-                fontSize: 18,
+                  left: 24, right:24, bottom: Platform.isIOS ? 60 : 32),
+              child: OutlinedButton(
+                child: Text(widget.buttonText),
                onPressed: _selectedFolders.isEmpty
                    ? null
                    : () async {
@ -132,7 +146,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
                        Bus.instance.fire(BackupFoldersUpdatedEvent());
                        Navigator.of(context).pop();
                      },
-                padding: EdgeInsets.fromLTRB(60, 20, 60, 20),
+                // padding: EdgeInsets.fromLTRB(12, 20, 12, 20),
              ),
            ),
          ),
@ -148,7 +162,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
    _sortFiles();
    final scrollController = ScrollController();
    return Container(
-      padding: EdgeInsets.only(left: 40, right: 40),
+      padding: EdgeInsets.only(left: 20, right: 24),
      child: Scrollbar(
        controller: scrollController,
        isAlwaysShown: true,
@ -198,47 +212,63 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
  Widget _getFileItem(File file) {
    final isSelected = _selectedFolders.contains(file.deviceFolder);
    return Padding(
-      padding: const EdgeInsets.only(bottom: 1, right: 4),
+      padding: const EdgeInsets.only(bottom: 1, right: 1),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
-            color: Theme.of(context).primaryColor,
+            color: Theme.of(context).colorScheme.boxUnSelectColor,
          ),
          borderRadius: BorderRadius.all(
-            Radius.circular(10),
+            Radius.circular(12),
          ),
          color: isSelected
-              ? Color.fromRGBO(16, 32, 32, 1)
-              : Color.fromRGBO(8, 18, 18, 0.4),
+              ? Theme.of(context).colorScheme.boxSelectColor
+              : Theme.of(context).colorScheme.boxUnSelectColor,
        ),
-        padding: EdgeInsets.fromLTRB(20, 16, 20, 16),
+        padding: EdgeInsets.fromLTRB(8, 4, 4, 4),
        child: InkWell(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
-                  _getThumbnail(file),
-                  Padding(padding: EdgeInsets.all(10)),
+                  Checkbox(
+                    checkColor: Colors.green,
+                    activeColor: Colors.white,
+                    value: isSelected,
+                    onChanged: (value) {
+                      if (value) {
+                        _selectedFolders.add(file.deviceFolder);
+                      } else {
+                        _selectedFolders.remove(file.deviceFolder);
+                      }
+                      setState(() {});
+                    },
+                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
-                        constraints: BoxConstraints(maxWidth: 140),
+                        constraints: BoxConstraints(maxWidth: 180),
                        child: Text(
                          file.deviceFolder,
+                          textAlign: TextAlign.left,
                          style: TextStyle(
-                            fontSize: 14,
-                            height: 1.5,
+                            fontFamily: 'Inter-Medium',
+                            fontSize: 18,
+                            fontWeight: FontWeight.w600,
                            color: isSelected
                                ? Colors.white
-                                : Colors.white.withOpacity(0.7),
+                                : Theme.of(context)
+                                    .colorScheme
+                                    .onSurface
+                                    .withOpacity(0.7),
                          ),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2,
                        ),
                      ),
-                      Padding(padding: EdgeInsets.all(2)),
+                      Padding(padding: EdgeInsets.only(top: 2)),
                      Text(
                        _itemCount[file.deviceFolder].toString() +
                            " item" +
@ -247,25 +277,19 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
                        style: TextStyle(
                          fontSize: 12,
                          color: isSelected
-                              ? Colors.white.withOpacity(0.65)
-                              : Colors.white.withOpacity(0.4),
+                              ? Colors.white
+
+                              : Theme.of(context)
+                                  .colorScheme
+                                  .onSurface
+                                  ,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
-              Checkbox(
-                value: isSelected,
-                onChanged: (value) {
-                  if (value) {
-                    _selectedFolders.add(file.deviceFolder);
-                  } else {
-                    _selectedFolders.remove(file.deviceFolder);
-                  }
-                  setState(() {});
-                },
-              ),
+              _getThumbnail(file),
            ],
          ),
          onTap: () {
@ -309,8 +333,8 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
          shouldShowSyncStatus: false,
          key: Key("backup_selection_widget" + file.tag()),
        ),
-        height: 60,
-        width: 60,
+        height: 88,
+        width: 88,
      ),
    );
  }
--- a/lib/ui/common/custom_color_scheme.dart
+++ b/lib/ui/common/custom_color_scheme.dart
@ -0,0 +1,16 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+extension CustomColorScheme on ColorScheme {
+  Color get defaultTextColor =>
+      brightness == Brightness.light ? Colors.black : Colors.white;
+
+  Color get boxSelectColor => brightness == Brightness.light
+      ? Color.fromRGBO(67, 186, 108, 1)
+      : Color.fromRGBO(16, 32, 32, 1);
+
+  Color get boxUnSelectColor => brightness == Brightness.light
+      ? Color.fromRGBO(240, 240, 240, 1)
+      : Color.fromRGBO(8, 18, 18, 0.4);
+}
--- a/lib/ui/common_elements.dart
+++ b/lib/ui/common_elements.dart
@ -24,26 +24,36 @@ Widget button(
    child: OutlinedButton(
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(8),
        ),
        padding: padding ?? EdgeInsets.fromLTRB(50, 16, 50, 16),
-        side: BorderSide(
-          width: onPressed == null ? 1 : 2,
-          color: onPressed == null
-              ? Colors.grey
-              : Color.fromRGBO(45, 194, 98, 1.0),
-        ),
-      ),
-      child: Text(
-        text,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
+        textStyle: TextStyle(
+          fontWeight: FontWeight.w600,
+          fontFamily: 'Inter-SemiBold',
          fontSize: fontSize,
-          color: onPressed == null ? Colors.grey : Colors.white,
          height: lineHeight,
        ),
-        textAlign: TextAlign.center,
+      ).copyWith(
+        backgroundColor: MaterialStateProperty.resolveWith<Color>(
+          (Set<MaterialState> states) {
+            if (states.contains(MaterialState.disabled)) {
+              return Colors.grey;
+            }
+            // return Color.fromRGBO(29, 184, 80, 1);
+            return Colors.white;
+          },
+        ),
+        foregroundColor: MaterialStateProperty.resolveWith<Color>(
+          (Set<MaterialState> states) {
+            if (states.contains(MaterialState.disabled)) {
+              return Colors.white;
+            }
+            return Colors.black;
+          },
+        ),
+        alignment: Alignment.center,
      ),
+      child: Text(text),
      onPressed: onPressed,
    ),
  );
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -151,6 +151,7 @@ flutter:
  - family: Inter
    fonts:
      - asset: fonts/Inter-Regular.ttf
+      - asset: fonts/Inter-Medium.ttf
      - asset: fonts/Inter-Light.ttf
      - asset: fonts/Inter-SemiBold.ttf
      - asset: fonts/Inter-Bold.ttf