From fb2b6690ba3fc4923eafc47c5503c2f4066afd5a Mon Sep 17 00:00:00 2001 From: Shareef Dweikat Date: Tue, 9 Aug 2022 18:06:37 +0200 Subject: [PATCH] Drop hover effect (#138) --- lib/constants/app_constants.dart | 2 +- lib/views/desktop/introduction-slider.dart | 2 +- lib/views/desktop/send/send.dart | 4 +- .../desktop/send/widgets/DTDropAFile.dart | 25 ++++++ .../desktop/send/widgets/DTSelectAFile.dart | 88 ++++++++----------- .../send/widgets/DTSelectOrDropAFile.dart | 48 ++++++++++ lib/views/mobile/introduction-slider.dart | 2 +- lib/views/shared/settings.dart | 41 +++++---- 8 files changed, 140 insertions(+), 72 deletions(-) create mode 100644 lib/views/desktop/send/widgets/DTDropAFile.dart create mode 100644 lib/views/desktop/send/widgets/DTSelectOrDropAFile.dart diff --git a/lib/constants/app_constants.dart b/lib/constants/app_constants.dart index 36a1cd57..81e0d145 100644 --- a/lib/constants/app_constants.dart +++ b/lib/constants/app_constants.dart @@ -9,6 +9,7 @@ const String SETTINGS = "Settings"; //ui strings const String SEND_AND_RECEIVE_FILES_SECURLY_AND_FAST = 'Send and receive files securely and fast'; +const String DROP_HERE = 'Drop Here'; const String SEND_FILES_SIMPLE_SECURE_FAST = 'Send files simply, securely, and fast.'; const String SENDING_IN_PROGRESS = 'Sending in progress...'; @@ -78,7 +79,6 @@ const String THE_TRANSFER_HAS_BEEN_CANCELLED = "The transfer has been cancelled by"; //Slider UI strings -const String GET_STARTED = 'Get Started'; const String START_HERE = 'Start Here'; const String END_TO_END_ENCRYPTION = 'End-to-End Encryption'; const String NO_SIGN_UP = 'No Sign-Up'; diff --git a/lib/views/desktop/introduction-slider.dart b/lib/views/desktop/introduction-slider.dart index a6bf1f1d..74c1b263 100644 --- a/lib/views/desktop/introduction-slider.dart +++ b/lib/views/desktop/introduction-slider.dart @@ -34,7 +34,7 @@ class IntroScreenState extends State { desktopActionButtonEnabled: true, description: SEND_AND_RECEIVE_FILES_SECURELY_WITH_SIMPLICITY_AND_SPEED, - btnTitle: GET_STARTED, + btnTitle: NEXT, pathImage: INTRO_LOGO, backgroundColor: Colors.black, heightImage: 300.0), diff --git a/lib/views/desktop/send/send.dart b/lib/views/desktop/send/send.dart index ee6b1279..68517e23 100644 --- a/lib/views/desktop/send/send.dart +++ b/lib/views/desktop/send/send.dart @@ -3,7 +3,7 @@ import 'package:dart_wormhole_gui/config/theme/colors.dart'; import 'package:dart_wormhole_gui/constants/app_constants.dart'; import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTCodeGeneration.dart'; import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTErrorUI.dart'; -import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTSelectAFile.dart'; +import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTSelectOrDropAFile.dart'; import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTSendingDone.dart'; import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTSendingProgress.dart'; import 'package:dart_wormhole_gui/views/desktop/widgets/custom-app-bar.dart'; @@ -54,7 +54,7 @@ class SendScreen extends StatelessWidget { Widget selectAFileUI() { return Consumer(builder: (context, state, _) { - return DTSelectAFile( + return DTSelectOrDropAFile( onFileSelected: state.handleSelectFile, onFileDropped: state.send) .dottedParent(); }); diff --git a/lib/views/desktop/send/widgets/DTDropAFile.dart b/lib/views/desktop/send/widgets/DTDropAFile.dart new file mode 100644 index 00000000..c39d9b8c --- /dev/null +++ b/lib/views/desktop/send/widgets/DTDropAFile.dart @@ -0,0 +1,25 @@ +import 'package:dart_wormhole_gui/constants/app_constants.dart'; +import 'package:dart_wormhole_gui/views/widgets/Heading.dart'; +import 'package:flutter/material.dart'; + +class DTDropAFile extends StatelessWidget { + DTDropAFile(); + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Heading( + title: DROP_HERE, + textAlign: TextAlign.center, + textStyle: TextStyle( + fontSize: 40.0, + fontFamily: Theme.of(context).textTheme.headline1?.fontFamily, + color: Theme.of(context).textTheme.headline1?.color, + ), + // key: Key('Timing_Progress'), + ), + ], + ); + } +} diff --git a/lib/views/desktop/send/widgets/DTSelectAFile.dart b/lib/views/desktop/send/widgets/DTSelectAFile.dart index 130d1d2e..c1fb3054 100644 --- a/lib/views/desktop/send/widgets/DTSelectAFile.dart +++ b/lib/views/desktop/send/widgets/DTSelectAFile.dart @@ -1,71 +1,55 @@ import 'package:dart_wormhole_gui/constants/app_constants.dart'; import 'package:dart_wormhole_gui/constants/asset_path.dart'; -import 'package:dart_wormhole_gui/views/shared/util.dart'; import 'package:dart_wormhole_gui/views/widgets/Heading.dart'; -import 'package:dart_wormhole_william/client/file.dart' as f; -import 'package:desktop_drop/desktop_drop.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class DTSelectAFile extends StatelessWidget { - final Future Function() onFileSelected; - final Future Function(f.File) onFileDropped; - - DTSelectAFile( - {Key? key, required this.onFileSelected, required this.onFileDropped}) - : super(key: key); - + final Function onFileSelected; + DTSelectAFile(this.onFileSelected); @override Widget build(BuildContext context) { return Container( - color: Theme.of(context).dialogBackgroundColor, - child: DropTarget( - onDragDone: (detail) async { - await onFileDropped(detail.files.first.readOnlyFile()); - }, - child: Container( - padding: EdgeInsets.only(top: 80.0.h), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + padding: EdgeInsets.only(top: 80.0.h), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Heading( + title: SEND_FILES_SIMPLE_SECURE_FAST, + textStyle: Theme.of(context).textTheme.headline1, + ), + Column( children: [ Heading( - title: SEND_FILES_SIMPLE_SECURE_FAST, - textStyle: Theme.of(context).textTheme.headline1, + title: DROP_A_FILE, + textStyle: Theme.of(context).textTheme.headline5, ), - Column( - children: [ - Heading( - title: DROP_A_FILE, - textStyle: Theme.of(context).textTheme.headline5, - ), - Heading( - title: OR, - textStyle: Theme.of(context).textTheme.headline5, - marginTop: 26.0, - ), - ], + Heading( + title: OR, + textStyle: Theme.of(context).textTheme.headline5, + marginTop: 26.0, ), - MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: () async { - await onFileSelected(); - }, - child: Container( - height: 200.0, - width: 250.0, - child: Image.asset( - PLUS_ICON, - width: 250.0, - ), - ), - )), - SizedBox( - height: 20.0, - ) ], ), - ), + MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () async { + await onFileSelected(); + }, + child: Container( + height: 200.0, + width: 250.0, + child: Image.asset( + PLUS_ICON, + width: 250.0, + ), + ), + )), + SizedBox( + height: 20.0, + ) + ], ), ); } diff --git a/lib/views/desktop/send/widgets/DTSelectOrDropAFile.dart b/lib/views/desktop/send/widgets/DTSelectOrDropAFile.dart new file mode 100644 index 00000000..398f8b72 --- /dev/null +++ b/lib/views/desktop/send/widgets/DTSelectOrDropAFile.dart @@ -0,0 +1,48 @@ +import 'package:dart_wormhole_gui/views/desktop/send/widgets/DTSelectAFile.dart'; +import 'package:dart_wormhole_gui/views/shared/util.dart'; +import 'package:dart_wormhole_william/client/file.dart' as f; +import 'package:desktop_drop/desktop_drop.dart'; +import 'package:flutter/material.dart'; + +import 'DTDropAFile.dart'; + +class DTSelectOrDropAFile extends StatefulWidget { + final Future Function() onFileSelected; + final Future Function(f.File) onFileDropped; + bool dragEntered = false; + DTSelectOrDropAFile( + {Key? key, required this.onFileSelected, required this.onFileDropped}) + : super(key: key); + + @override + State createState() => _DTSelectOrDropAFile(); +} + +class _DTSelectOrDropAFile extends State { + @override + Widget build(BuildContext context) { + return Container( + color: widget.dragEntered + ? Color(0xff3A2655) + : Theme.of(context).dialogBackgroundColor, + child: DropTarget( + onDragDone: (detail) async { + await widget.onFileDropped(detail.files.first.readOnlyFile()); + }, + onDragEntered: (detail) async { + this.setState(() { + widget.dragEntered = true; + }); + }, + onDragExited: (detail) async { + this.setState(() { + widget.dragEntered = false; + }); + }, + child: widget.dragEntered + ? DTDropAFile() + : DTSelectAFile(widget.onFileSelected), + ), + ); + } +} diff --git a/lib/views/mobile/introduction-slider.dart b/lib/views/mobile/introduction-slider.dart index 75aa4247..d30a9bc0 100644 --- a/lib/views/mobile/introduction-slider.dart +++ b/lib/views/mobile/introduction-slider.dart @@ -33,7 +33,7 @@ class IntroScreenState extends State { SEND_AND_RECEIVE_FILES_SECURELY_WITH_SIMPLICITY_AND_SPEED, subTitleTextFontSize: 14.0, titleTextFontSize: 23.0, - btnTitle: GET_STARTED, + btnTitle: NEXT, pathImage: INTRO_LOGO, backgroundColor: Colors.black, heightImage: 300.0), diff --git a/lib/views/shared/settings.dart b/lib/views/shared/settings.dart index 32b86a7d..36cf8047 100644 --- a/lib/views/shared/settings.dart +++ b/lib/views/shared/settings.dart @@ -9,6 +9,7 @@ import 'package:shared_preferences/shared_preferences.dart'; abstract class SettingsShared extends State { SharedPreferences? prefs; + bool selectingFolder = false; String? get path { final path = prefs?.get(PATH); @@ -41,22 +42,32 @@ abstract class SettingsShared extends State { } void handleSelectFile() async { - String? directory = await FilePicker.platform.getDirectoryPath(); - if (directory == null) { - return; - } - await canWriteToDirectory(directory).then((canWrite) async { - if (canWrite) { - setState(() { - prefs?.setString(PATH, directory); - }); - } else { - ScaffoldMessenger.of(context).showSnackBar(SnackBar( - content: Text( - THE_APP_DOES_NOT_HAVE_THE_PREMISSION_TO_STORE_FILES_IN_THE_DIR), - )); + if (selectingFolder) return; + try { + this.setState(() { + selectingFolder = true; + }); + String? directory = await FilePicker.platform.getDirectoryPath(); + if (directory == null) { + return; } - }); + await canWriteToDirectory(directory).then((canWrite) async { + if (canWrite) { + setState(() { + prefs?.setString(PATH, directory); + }); + } else { + ScaffoldMessenger.of(context).showSnackBar(SnackBar( + content: Text( + THE_APP_DOES_NOT_HAVE_THE_PREMISSION_TO_STORE_FILES_IN_THE_DIR), + )); + } + }); + } finally { + this.setState(() { + selectingFolder = false; + }); + } } Widget build(BuildContext context);