beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

redesign folder selection screen

Browse source
This commit is contained in:
Neeraj Gupta 2022-03-12 19:33:30 +05:30
parent 150c8177b1
commit 9f64039623
6 changed files with 202 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
fonts/Inter-Medium.ttf Normal file
View file

Binary file not shown.

101
lib/app.dart
View file

@ -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,

114
lib/ui/backup_folder_selection_page.dart
View file

@ -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,
),
);
}

16
lib/ui/common/custom_color_scheme.dart Normal file
View file

@ -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);
}

38
lib/ui/common_elements.dart
View file

@ -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,
),
);

1
pubspec.yaml
View file

@ -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