[mob][photos] update the UI acc. to the new figma design

This commit is contained in:
Aman Raj Singh Mourya 2024-06-10 15:19:09 +05:30
parent 53b1dc9b67
commit d94fe56318
6 changed files with 119 additions and 95 deletions

View File

@ -119,10 +119,6 @@ class LocalAuthenticationService {
String errorDialogContent, [
String errorDialogTitle = "",
]) async {
// if (await requestEnteAuthForLockScreen(context)) {
// return true;
// }
if (await _isLocalAuthSupportedOnDevice()) {
AppLock.of(context)!.disable();
final result = await requestAuthentication(

View File

@ -35,7 +35,8 @@ class _LockScreenOptionState extends State<LockScreenOption> {
@override
Widget build(BuildContext context) {
final colorScheme = getEnteColorScheme(context);
final colorTheme = getEnteColorScheme(context);
final textTheme = getEnteTextTheme(context);
return Scaffold(
body: CustomScrollView(
primary: false,
@ -64,7 +65,7 @@ class _LockScreenOptionState extends State<LockScreenOption> {
alignCaptionedTextToLeft: true,
isTopBorderRadiusRemoved: false,
isBottomBorderRadiusRemoved: false,
menuItemColor: colorScheme.fillFaint,
menuItemColor: colorTheme.fillFaint,
trailingWidget: ToggleSwitchWidget(
value: () => appLock!,
onChanged: () async {
@ -78,14 +79,7 @@ class _LockScreenOptionState extends State<LockScreenOption> {
isPasswordEnabled =
_configuration.isPasswordSet();
isPinEnabled = _configuration.isPinSet();
}
// else if ((isPasswordEnabled ||
// isPinEnabled) &&
// appLock == false) {
// await _configuration.removePinAndPassword();
// result = true;
// }
else {
} else {
result = await LocalAuthenticationService
.instance
.requestLocalAuthForLockScreen(
@ -104,11 +98,23 @@ class _LockScreenOptionState extends State<LockScreenOption> {
setState(() {
if (result) {
appLock = !appLock!;
} else {
appLock = appLock;
}
});
},
),
),
const Padding(
padding: EdgeInsets.only(top: 16),
),
appLock!
? Container()
: Text(
'Choose between your device\'s default lock screen and a custom lock screen with a PIN or password.',
style: textTheme.smallFaint,
textAlign: TextAlign.center,
),
],
),
appLock!
@ -125,9 +131,12 @@ class _LockScreenOptionState extends State<LockScreenOption> {
alignCaptionedTextToLeft: true,
isTopBorderRadiusRemoved: false,
isBottomBorderRadiusRemoved: true,
menuItemColor: colorScheme.fillFaint,
trailingIconIsMuted: true,
trailingIcon: Icons.chevron_right_outlined,
menuItemColor: colorTheme.fillFaint,
trailingIcon:
!(isPasswordEnabled || isPinEnabled)
? Icons.check
: null,
trailingIconColor: colorTheme.tabIcon,
onTap: () async {
setState(() {
_configuration.removePinAndPassword();
@ -140,7 +149,7 @@ class _LockScreenOptionState extends State<LockScreenOption> {
),
DividerWidget(
dividerType: DividerType.menuNoIcon,
bgColor: colorScheme.fillFaint,
bgColor: colorTheme.fillFaint,
),
MenuItemWidget(
captionedTextWidget:
@ -150,11 +159,13 @@ class _LockScreenOptionState extends State<LockScreenOption> {
alignCaptionedTextToLeft: true,
isTopBorderRadiusRemoved: true,
isBottomBorderRadiusRemoved: true,
menuItemColor: colorScheme.fillFaint,
trailingIconIsMuted: true,
trailingIcon: Icons.chevron_right_outlined,
menuItemColor: colorTheme.fillFaint,
trailingIcon:
isPinEnabled ? Icons.check : null,
trailingIconColor: colorTheme.tabIcon,
onTap: () async {
await Navigator.of(context).push(
final bool result =
await Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return const LockScreenOptionPin();
@ -166,14 +177,18 @@ class _LockScreenOptionState extends State<LockScreenOption> {
_configuration.isPasswordSet();
isPinEnabled =
_configuration.isPinSet();
appLock =
isPinEnabled || isPasswordEnabled;
if (result == false) {
appLock = appLock;
} else {
appLock =
isPinEnabled || isPasswordEnabled;
}
});
},
),
DividerWidget(
dividerType: DividerType.menuNoIcon,
bgColor: colorScheme.fillFaint,
bgColor: colorTheme.fillFaint,
),
MenuItemWidget(
captionedTextWidget:
@ -183,11 +198,13 @@ class _LockScreenOptionState extends State<LockScreenOption> {
alignCaptionedTextToLeft: true,
isTopBorderRadiusRemoved: true,
isBottomBorderRadiusRemoved: false,
menuItemColor: colorScheme.fillFaint,
trailingIconIsMuted: true,
trailingIcon: Icons.chevron_right_outlined,
menuItemColor: colorTheme.fillFaint,
trailingIcon:
isPasswordEnabled ? Icons.check : null,
trailingIconColor: colorTheme.tabIcon,
onTap: () async {
await Navigator.of(context).push(
final bool result =
await Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return const LockScreenOptionPassword();
@ -199,8 +216,12 @@ class _LockScreenOptionState extends State<LockScreenOption> {
_configuration.isPasswordSet();
isPinEnabled =
_configuration.isPinSet();
appLock =
isPinEnabled || isPasswordEnabled;
if (result == false) {
appLock = appLock;
} else {
appLock =
isPinEnabled || isPasswordEnabled;
}
});
},
),

View File

@ -38,7 +38,6 @@ class _LockScreenOptionConfirmPasswordState
@override
void dispose() {
_focusNode.dispose();
// print("CONFIRM DISPOSE");
super.dispose();
}
@ -60,8 +59,8 @@ class _LockScreenOptionConfirmPasswordState
),
],
);
Navigator.of(context).pop();
Navigator.of(context).pop();
Navigator.of(context).pop(true);
Navigator.of(context).pop(true);
} else {
await showDialogWidget(
context: context,
@ -87,12 +86,24 @@ class _LockScreenOptionConfirmPasswordState
final colorTheme = getEnteColorScheme(context);
final textTheme = getEnteTextTheme(context);
return Scaffold(
appBar: AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back,
color: colorTheme.tabIcon,
),
),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 120,
height: 60,
),
SizedBox(
height: 120,
@ -124,7 +135,7 @@ class _LockScreenOptionConfirmPasswordState
),
),
Text(
'Enter the password to lock the app',
'Re-enter Password',
style: textTheme.bodyBold,
),
const Padding(padding: EdgeInsets.all(24)),
@ -145,7 +156,7 @@ class _LockScreenOptionConfirmPasswordState
Padding(
padding: const EdgeInsets.all(18.0),
child: ButtonWidget(
labelText: 'Next',
labelText: S.of(context).confirm,
buttonType: ButtonType.secondary,
buttonSize: ButtonSize.large,
onTap: () => _confirmPasswordMatch(),

View File

@ -19,7 +19,6 @@ class LockScreenOptionConfirmPin extends StatefulWidget {
class _LockScreenOptionConfirmPinState
extends State<LockScreenOptionConfirmPin> {
final _confirmPinController = TextEditingController(text: null);
String _confirmPin = "";
final Configuration _configuration = Configuration.instance;
final _focusNode = FocusNode();
@ -45,8 +44,8 @@ class _LockScreenOptionConfirmPinState
}
Future<void> _confirmPinMatch() async {
if (widget.pin == _confirmPin) {
await _configuration.savePin(_confirmPin);
if (widget.pin == _confirmPinController.text) {
await _configuration.savePin(_confirmPinController.text);
await showDialogWidget(
context: context,
title: 'Pin has been set',
@ -62,8 +61,8 @@ class _LockScreenOptionConfirmPinState
),
],
);
Navigator.of(context).pop();
Navigator.of(context).pop();
Navigator.of(context).pop(true);
Navigator.of(context).pop(true);
} else {
await showDialogWidget(
context: context,
@ -89,13 +88,24 @@ class _LockScreenOptionConfirmPinState
final colorTheme = getEnteColorScheme(context);
final textTheme = getEnteTextTheme(context);
return Scaffold(
// resizeToAvoidBottomInset: false,
resizeToAvoidBottomInset: false,
appBar: AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop(false);
},
icon: Icon(
Icons.arrow_back,
color: colorTheme.tabIcon,
),
),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 120,
height: 60,
),
SizedBox(
height: 120,
@ -133,7 +143,7 @@ class _LockScreenOptionConfirmPinState
),
),
Text(
'Re-enter to confirm the pin',
'Re-enter PIN',
style: textTheme.bodyBold,
),
const Padding(padding: EdgeInsets.all(12)),
@ -160,11 +170,6 @@ class _LockScreenOptionConfirmPinState
),
textStyle: textTheme.h3,
obscureText: '*',
onChanged: (String pin) {
setState(() {
_confirmPin = pin;
});
},
onSubmit: (value) {
FocusScope.of(context).unfocus();
},
@ -175,7 +180,7 @@ class _LockScreenOptionConfirmPinState
padding: const EdgeInsets.all(18.0),
child: ButtonWidget(
labelText: S.of(context).confirm,
buttonType: _confirmPin.length == 4
buttonType: _confirmPinController.text.length == 4
? ButtonType.primary
: ButtonType.secondary,
buttonSize: ButtonSize.large,

View File

@ -22,7 +22,6 @@ class LockScreenOptionPassword extends StatefulWidget {
class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
final _passwordController = TextEditingController(text: null);
String password = "";
final _focusNode = FocusNode();
@override
@ -37,9 +36,7 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
@override
void dispose() {
super.dispose();
// _passwordController.dispose();
_focusNode.dispose();
// print("DISPOSE");
}
Future<bool> confirmPasswordAuth(String code) async {
@ -53,16 +50,17 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
Future<void> _confirmPassword() async {
if (widget.isAuthenticating) {
await confirmPasswordAuth(password);
await confirmPasswordAuth(_passwordController.text);
return;
} else {
await Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => LockScreenOptionConfirmPassword(
password: password,
password: _passwordController.text,
),
),
);
_passwordController.clear();
}
}
@ -71,12 +69,24 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
final colorTheme = getEnteColorScheme(context);
final textTheme = getEnteTextTheme(context);
return Scaffold(
appBar: AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop(false);
},
icon: Icon(
Icons.arrow_back,
color: colorTheme.tabIcon,
),
),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 120,
height: 60,
),
SizedBox(
height: 120,
@ -108,9 +118,7 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
),
),
Text(
widget.isAuthenticating
? 'Enter the password to change \nLockscreen settings.'
: 'Enter the password to lock the app',
widget.isAuthenticating ? 'Enter Password' : 'Set new Password',
textAlign: TextAlign.center,
style: textTheme.bodyBold,
),
@ -126,11 +134,6 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
textEditingController: _passwordController,
prefixIcon: Icons.lock_outline,
isPasswordInput: true,
onChange: (String p0) {
setState(() {
password = p0;
});
},
),
),
const Spacer(),
@ -138,9 +141,7 @@ class _LockScreenOptionPasswordState extends State<LockScreenOptionPassword> {
padding: const EdgeInsets.all(18.0),
child: ButtonWidget(
labelText: 'Next',
buttonType: password.length > 8
? ButtonType.primary
: ButtonType.secondary,
buttonType: ButtonType.secondary,
buttonSize: ButtonSize.large,
onTap: () => _confirmPassword(),
),

View File

@ -1,8 +1,6 @@
import "package:flutter/material.dart";
import "package:photos/theme/ente_theme.dart";
import "package:photos/ui/components/buttons/button_widget.dart";
import "package:photos/ui/components/buttons/icon_button_widget.dart";
import "package:photos/ui/components/models/button_type.dart";
import "package:photos/ui/settings/TEMP/lock_screen_option_confirm_pin.dart";
import "package:pinput/pin_put/pin_put.dart";
@ -21,7 +19,6 @@ class LockScreenOptionPin extends StatefulWidget {
class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
final _pinController = TextEditingController(text: null);
String _code = "";
final _focusNode = FocusNode();
final _pinPutDecoration = BoxDecoration(
@ -43,7 +40,6 @@ class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
super.dispose();
_pinController.dispose();
_focusNode.dispose();
print("PIN");
}
Future<bool> confirmPinAuth(String code) async {
@ -66,6 +62,7 @@ class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
LockScreenOptionConfirmPin(pin: code),
),
);
_pinController.clear();
}
}
@ -74,13 +71,25 @@ class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
final colorTheme = getEnteColorScheme(context);
final textTheme = getEnteTextTheme(context);
return Scaffold(
appBar: AppBar(
elevation: 0,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop(false);
},
icon: Icon(
Icons.arrow_back,
color: colorTheme.tabIcon,
),
),
),
// resizeToAvoidBottomInset: false,
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 120,
height: 60,
),
SizedBox(
height: 120,
@ -118,9 +127,7 @@ class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
),
),
Text(
widget.isAuthenticating
? 'Enter the pin to change Lockscreen settings.'
: 'Enter the pin to lock the app',
widget.isAuthenticating ? 'Enter PIN' : 'Set new PIN',
style: textTheme.bodyBold,
),
const Padding(padding: EdgeInsets.all(12)),
@ -147,29 +154,12 @@ class _LockScreenOptionPinState extends State<LockScreenOptionPin> {
),
textStyle: textTheme.h3,
obscureText: '*',
onChanged: (String pin) {
setState(() {
_code = pin;
});
},
onSubmit: (value) {
FocusScope.of(context).unfocus();
_confirmPin(_pinController.text);
},
),
),
const Spacer(),
Padding(
padding: const EdgeInsets.all(18.0),
child: ButtonWidget(
labelText: 'Next',
buttonType: _code.length == 4
? ButtonType.primary
: ButtonType.secondary,
buttonSize: ButtonSize.large,
onTap: () => _confirmPin(_code),
),
),
const Padding(padding: EdgeInsets.only(bottom: 24)),
],
),
),