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

Merge pull request #216 from ente-io/new-user-redesign

Browse source 
New user redesign
This commit is contained in:
Neeraj Gupta 2022-04-22 18:11:40 +05:30 committed by GitHub
parent 4549684fed 55819800be
commit 9a4db83c3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 190 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/loadingGalleryLottie.json Normal file
View file

File diff suppressed because one or more lines are too long

5
lib/ente_theme_data.dart
View file

@ -14,11 +14,10 @@ extension CustomColorScheme on ColorScheme {
? Color.fromRGBO(240, 240, 240, 1)
: Color.fromRGBO(8, 18, 18, 0.4);
Color get fabBackgroundColor =>
Color get dynamicFABBackgroundColor =>
brightness == Brightness.light ? Colors.black : Colors.grey[850];
Color get fabTextOrIconColor =>
brightness == Brightness.light ? Colors.white : Colors.white;
Color get dynamicFABTextColor => Colors.white; //same for both themes
// todo: use brightness == Brightness.light for changing color for dark/light theme
ButtonStyle get optionalActionButtonStyle => buildElevatedButtonThemeData(

38
lib/ui/backup_folder_selection_page.dart
View file

@ -104,10 +104,10 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
? "Unselect all"
: "Select all",
textAlign: TextAlign.right,
style: Theme.of(context)
.textTheme
.overline
.copyWith(decoration: TextDecoration.underline),
style: Theme.of(context).textTheme.overline.copyWith(
decoration: TextDecoration.underline,
fontSize: 16,
letterSpacing: 1),
),
),
),
@ -133,7 +133,7 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
child: Container(
width: double.infinity,
padding: EdgeInsets.only(
left: 24, right: 24, bottom: Platform.isIOS ? 60 : 32),
left: 20, right: 20, bottom: Platform.isIOS ? 60 : 32),
child: OutlinedButton(
child: Text(widget.buttonText),
onPressed: _selectedFolders.isEmpty
@ -213,16 +213,24 @@ class _BackupFolderSelectionPageState extends State<BackupFolderSelectionPage> {
padding: const EdgeInsets.only(bottom: 1, right: 1),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).colorScheme.boxUnSelectColor,
),
borderRadius: BorderRadius.all(
Radius.circular(12),
),
color: isSelected
? Theme.of(context).colorScheme.boxSelectColor
: Theme.of(context).colorScheme.boxUnSelectColor,
),
border: Border.all(
color: Theme.of(context).colorScheme.boxUnSelectColor,
),
borderRadius: BorderRadius.all(
Radius.circular(12),
),
// color: isSelected
// ? Theme.of(context).colorScheme.boxSelectColor
// : Theme.of(context).colorScheme.boxUnSelectColor,
gradient: isSelected
? LinearGradient(colors: const [
Color(0xFF00DD4D),
Color(0xFF43BA6C)
]) //same for both themes
: LinearGradient(colors: [
Theme.of(context).colorScheme.boxUnSelectColor,
Theme.of(context).colorScheme.boxUnSelectColor
])),
padding: EdgeInsets.fromLTRB(8, 4, 4, 4),
child: InkWell(
child: Row(

4
lib/ui/common/dynamicFAB.dart
View file

@ -37,9 +37,9 @@ class DynamicFAB extends StatelessWidget {
FloatingActionButton(
//mini: true,
backgroundColor:
Theme.of(context).colorScheme.fabBackgroundColor,
Theme.of(context).colorScheme.dynamicFABBackgroundColor,
foregroundColor:
Theme.of(context).colorScheme.fabTextOrIconColor,
Theme.of(context).colorScheme.dynamicFABTextColor,
child: Transform.rotate(
angle: isFormValid ? 0 : math.pi / 2, //var here
child: Icon(

8
lib/ui/email_entry_page.dart
View file

@ -335,9 +335,13 @@ class _EmailEntryPageState extends State<EmailEntryPage> {
horizontal: 20),
child: Container(
decoration: BoxDecoration(
border: Border.all(
boxShadow: [
BoxShadow(
spreadRadius: 0.5,
color: Theme.of(context).hintColor,
width: 0.5),
offset: Offset(0, -0.325),
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.zero,

194
lib/ui/grant_permissions_widget.dart
View file

@ -3,143 +3,91 @@ import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:photo_manager/photo_manager.dart';
import 'package:photos/ente_theme_data.dart';
// import 'package:photos/ente_theme_data.dart';
import 'package:photos/services/sync_service.dart';
class GrantPermissionsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 50),
child: Image.asset(
"assets/gallery.png",
height: 250,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(
'ente needs your permission to access gallery',
style:
Theme.of(context).textTheme.headline4.copyWith(height: 1.4),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Divider(
thickness: 1.5,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(
'Why we need permissions',
style: Theme.of(context).textTheme.headline5,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 20, 0, 5),
child: ListTile(
leading: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 40,
width: 40,
color: Colors.greenAccent,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 50),
child: Image.asset(
"assets/gallery.png",
height: 250,
),
),
title: Text("hey there random stuff"),
subtitle: Text(
"Even more random stuff here. blah blabh blahhasdn asidf as"),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 180),
child: ListTile(
leading: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 40,
width: 40,
color: Colors.greenAccent,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(
'ente needs your permission to access gallery',
style: Theme.of(context)
.textTheme
.headline4
.copyWith(height: 1.4),
),
title: Text("hey there random stuff"),
subtitle: Text(
"Even more random stuff here. blah blabh blahhasdn asidf as"),
),
),
],
),
),
floatingActionButton: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Theme.of(context).backgroundColor,
spreadRadius: 200,
blurRadius: 100,
offset: Offset(0, 150),
)
]),
width: double.infinity,
height: 56,
padding: EdgeInsets.symmetric(horizontal: 20),
child: FloatingActionButton.extended(
backgroundColor: Theme.of(context).colorScheme.fabBackgroundColor,
onPressed: () async {
final state = await PhotoManager.requestPermissionExtend();
if (state == PermissionState.authorized ||
state == PermissionState.limited) {
await SyncService.instance.onPermissionGranted(state);
} else if (state == PermissionState.denied) {
AlertDialog alert = AlertDialog(
title: Text("Please grant permissions"),
content: Text(
"ente can encrypt and preserve files only if you grant access to them"),
actions: [
TextButton(
child: Text(
"OK",
style: Theme.of(context).textTheme.subtitle1.copyWith(
fontSize: 14, fontWeight: FontWeight.w700),
],
),
Container(
width: double.infinity,
padding: EdgeInsets.only(
left: 20, right: 20, bottom: Platform.isIOS ? 60 : 32),
child: OutlinedButton(
child: Text("Grant Permission"),
onPressed: () async {
final state = await PhotoManager.requestPermissionExtend();
if (state == PermissionState.authorized ||
state == PermissionState.limited) {
await SyncService.instance.onPermissionGranted(state);
} else if (state == PermissionState.denied) {
AlertDialog alert = AlertDialog(
title: Text("Please grant permissions"),
content: Text(
"ente can encrypt and preserve files only if you grant access to them"),
actions: [
TextButton(
child: Text(
"OK",
style: Theme.of(context).textTheme.subtitle1.copyWith(
fontSize: 14, fontWeight: FontWeight.w700),
),
onPressed: () {
Navigator.of(context, rootNavigator: true)
.pop('dialog');
if (Platform.isIOS) {
PhotoManager.openSetting();
}
},
),
onPressed: () {
Navigator.of(context, rootNavigator: true)
.pop('dialog');
if (Platform.isIOS) {
PhotoManager.openSetting();
}
},
),
],
);
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: alert,
);
},
barrierColor: Colors.black12,
);
}
},
label: Text('Grant permission',
style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).colorScheme.fabTextOrIconColor)),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
showDialog(
context: context,
builder: (BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: alert,
);
},
barrierColor: Colors.black12,
);
}
},
// padding: EdgeInsets.fromLTRB(12, 20, 12, 20),
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}

59
lib/ui/home_widget.dart
View file

@ -12,6 +12,7 @@ import 'package:photo_manager/photo_manager.dart';
import 'package:photos/core/configuration.dart';
import 'package:photos/core/event_bus.dart';
import 'package:photos/db/files_db.dart';
import 'package:photos/ente_theme_data.dart';
import 'package:photos/events/account_configured_event.dart';
import 'package:photos/events/backup_folders_updated_event.dart';
import 'package:photos/events/files_updated_event.dart';
@ -33,7 +34,7 @@ import 'package:photos/services/user_service.dart';
import 'package:photos/ui/app_update_dialog.dart';
import 'package:photos/ui/backup_folder_selection_page.dart';
import 'package:photos/ui/collections_gallery_widget.dart';
import 'package:photos/ui/common_elements.dart';
import 'package:photos/ui/common/gradientButton.dart';
import 'package:photos/ui/create_collection_page.dart';
import 'package:photos/ui/extents_page_view.dart';
import 'package:photos/ui/gallery.dart';
@ -421,10 +422,18 @@ class _HomeWidgetState extends State<HomeWidget> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_headerWidgetWithSettingsButton,
Image.asset(
"assets/preserved.png",
height: 160,
Padding(
padding: const EdgeInsets.only(top: 64),
child: Image.asset(
"assets/preserved.png",
height: 206,
),
),
Text('No photos are being backed up right now',
style: Theme.of(context)
.textTheme
.caption
.copyWith(fontFamily: 'Inter-Medium', fontSize: 16)),
Center(
child: Hero(
tag: "select_folders",
@ -433,13 +442,17 @@ class _HomeWidgetState extends State<HomeWidget> {
child: Container(
width: double.infinity,
height: 64,
padding: const EdgeInsets.fromLTRB(60, 0, 60, 0),
child: button(
"start backup",
fontSize: 16,
lineHeight: 1.5,
padding: EdgeInsets.only(bottom: 4),
onPressed: () async {
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: GradientButton(
child: Text(
'Start Backup',
style: gradientButtonTextTheme(),
),
linearGradientColors: const [
Color(0xFF2CD267),
Color(0xFF1DB954),
],
onTap: () async {
if (LocalSyncService.instance
.hasGrantedLimitedPermissions()) {
PhotoManager.presentLimited();
@ -448,12 +461,32 @@ class _HomeWidgetState extends State<HomeWidget> {
context,
BackupFolderSelectionPage(
shouldSelectAll: true,
buttonText: "Start backup",
buttonText: "Start Backup",
),
);
}
},
),
// child: button(
// "start backup",
// fontSize: 16,
// lineHeight: 1.5,
// padding: EdgeInsets.only(bottom: 4),
// onPressed: () async {
// if (LocalSyncService.instance
// .hasGrantedLimitedPermissions()) {
// PhotoManager.presentLimited();
// } else {
// routeToPage(
// context,
// BackupFolderSelectionPage(
// shouldSelectAll: true,
// buttonText: "Start backup",
// ),
// );
// }
// },
// ),
),
),
),
@ -474,7 +507,7 @@ class _HomeWidgetState extends State<HomeWidget> {
width: 180,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
child: GNav(
curve: Curves.easeOutExpo,
backgroundColor: Theme.of(context).bottomAppBarColor,

95
lib/ui/loading_photos_widget.dart
View file

@ -1,8 +1,9 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:loading_animations/loading_animations.dart';
import 'package:lottie/lottie.dart';
import 'package:photos/core/event_bus.dart';
import 'package:photos/ente_theme_data.dart';
import 'package:photos/events/sync_status_update_event.dart';
import 'package:photos/services/local_sync_service.dart';
import 'package:photos/ui/backup_folder_selection_page.dart';
@ -17,20 +18,10 @@ class LoadingPhotosWidget extends StatefulWidget {
class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
StreamSubscription<SyncStatusUpdate> _firstImportEvent;
int _currentPage = 0;
final PageController _pageController = PageController(
initialPage: 0,
);
final List<String> _messages = [
"web.ente.io has a slick uploader",
"we have preserved over a million memories so far",
"all our apps are open source",
"our encryption protocols have been reviewed by engineers at Google, Apple, Amazon, and Facebook",
"you can share files and folders with your loved ones, end-to-end encrypted",
"our mobile apps run in the background to encrypt and backup new photos you take",
"we use Xchacha20Poly1305 to safely encrypt your data",
"one of our data centers is in a fall out shelter 25m underground",
];
// final int _currentPage = 0;
// final PageController _pageController = PageController(
// initialPage: 0,
// );
@override
void initState() {
@ -46,28 +37,11 @@ class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
context,
BackupFolderSelectionPage(
shouldSelectAll: true,
buttonText: "Start backup",
buttonText: "Start Backup",
));
}
}
});
Timer.periodic(Duration(seconds: 5), (Timer timer) {
if (!mounted) {
return;
}
if (_currentPage < _messages.length - 1) {
_currentPage++;
} else {
_currentPage = 0;
}
_pageController.animateToPage(
_currentPage,
duration: Duration(milliseconds: 300),
curve: Curves.easeIn,
);
});
}
@override
@ -81,47 +55,28 @@ class _LoadingPhotosWidgetState extends State<LoadingPhotosWidget> {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
LoadingBouncingGrid.square(
inverted: true,
backgroundColor: Theme.of(context).buttonColor,
size: 64,
),
Padding(padding: const EdgeInsets.all(20.0)),
Text(
"loading your gallery...",
style: TextStyle(
fontSize: 16,
),
),
Padding(padding: EdgeInsets.all(10)),
Text(
"this might take upto 30 seconds 🐣",
style: TextStyle(color: Colors.white.withOpacity(0.3)),
),
Padding(padding: const EdgeInsets.all(70)),
Text(
"did you know?",
style: TextStyle(
fontSize: 16,
color: Theme.of(context).buttonColor,
),
),
Padding(padding: EdgeInsets.all(8)),
SizedBox(
height: 80,
child: PageView.builder(
scrollDirection: Axis.vertical,
controller: _pageController,
itemBuilder: (context, index) {
return _getMessage(_messages[index]);
},
itemCount: _messages.length,
physics: NeverScrollableScrollPhysics(),
),
height: 56,
),
Lottie.asset('assets/loadingGalleryLottie.json'),
Text("Did you know?",
style: Theme.of(context).textTheme.headline6.copyWith(
fontFamily: "Inter",
color: Theme.of(context)
.colorScheme
.defaultTextColor
.withOpacity(0.4))),
SizedBox(
height: 16,
),
Text(
"ente is amazing",
style: Theme.of(context).textTheme.headline6.copyWith(
fontFamily: "Inter",
color: Theme.of(context).colorScheme.defaultTextColor),
)
],
),
),

8
lib/ui/password_entry_page.dart
View file

@ -358,9 +358,13 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
horizontal: 20),
child: Container(
decoration: BoxDecoration(
border: Border.all(
boxShadow: [
BoxShadow(
spreadRadius: 0.5,
color: Theme.of(context).hintColor,
width: 0.5),
offset: Offset(0, -0.325),
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.zero,

7
pubspec.lock
View file

@ -679,6 +679,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.1"
lottie:
dependency: "direct main"
description:
name: lottie
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.2"
matcher:
dependency: transitive
description:

1
pubspec.yaml
View file

@ -72,6 +72,7 @@ dependencies:
loading_animations: ^2.1.0
local_auth: ^1.1.5
logging: ^1.0.1
lottie: ^1.2.2
motionphoto:
git: "https://github.com/ente-io/motionphoto.git"
move_to_background: ^1.0.2