From c18c6d72bd6e5a914c7acea91154d48c69bc3b3b Mon Sep 17 00:00:00 2001 From: NicKoehler Date: Mon, 27 Feb 2023 09:44:52 +0100 Subject: [PATCH] create folder modern dialog --- flutter/lib/common.dart | 47 ++++++- .../lib/desktop/pages/file_manager_page.dart | 120 ++++++++++++------ 2 files changed, 119 insertions(+), 48 deletions(-) diff --git a/flutter/lib/common.dart b/flutter/lib/common.dart index 53a401230..a73ab8bd3 100644 --- a/flutter/lib/common.dart +++ b/flutter/lib/common.dart @@ -168,6 +168,22 @@ class MyTheme { brightness: Brightness.light, hoverColor: Color.fromARGB(255, 224, 224, 224), scaffoldBackgroundColor: Color(0xFFFFFFFF), + dialogBackgroundColor: Color(0xFFFFFFFF), + dialogTheme: DialogTheme( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(18.0), + ), + ), + inputDecorationTheme: InputDecorationTheme( + fillColor: Color(0xFFEEEEEE), + filled: true, + isDense: true, + contentPadding: EdgeInsets.all(15), + border: UnderlineInputBorder( + borderRadius: BorderRadius.circular(18), + borderSide: BorderSide.none, + ), + ), textTheme: const TextTheme( titleLarge: TextStyle(fontSize: 19, color: Colors.black87), titleSmall: TextStyle(fontSize: 14, color: Colors.black87), @@ -205,6 +221,22 @@ class MyTheme { brightness: Brightness.dark, hoverColor: Color.fromARGB(255, 45, 46, 53), scaffoldBackgroundColor: Color(0xFF18191E), + dialogBackgroundColor: Color(0xFF18191E), + dialogTheme: DialogTheme( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(18.0), + ), + ), + inputDecorationTheme: InputDecorationTheme( + fillColor: Color(0xFF24252B), + filled: true, + isDense: true, + contentPadding: EdgeInsets.all(15), + border: UnderlineInputBorder( + borderRadius: BorderRadius.circular(18), + borderSide: BorderSide.none, + ), + ), textTheme: const TextTheme( titleLarge: TextStyle(fontSize: 19), titleSmall: TextStyle(fontSize: 14), @@ -681,18 +713,19 @@ class CustomAlertDialog extends StatelessWidget { scrollable: true, title: title, titlePadding: EdgeInsets.fromLTRB(padding, 24, padding, 0), - contentPadding: EdgeInsets.fromLTRB(contentPadding ?? padding, 25, - contentPadding ?? padding, actions is List ? 10 : padding), + contentPadding: EdgeInsets.fromLTRB( + contentPadding ?? padding, + 25, + contentPadding ?? padding, + actions is List ? 10 : padding, + ), content: ConstrainedBox( constraints: contentBoxConstraints, - child: Theme( - data: Theme.of(context).copyWith( - inputDecorationTheme: InputDecorationTheme( - isDense: true, contentPadding: EdgeInsets.all(15))), - child: content), + child: content, ), actions: actions, actionsPadding: EdgeInsets.fromLTRB(padding, 0, padding, padding), + actionsAlignment: MainAxisAlignment.center, ), ); } diff --git a/flutter/lib/desktop/pages/file_manager_page.dart b/flutter/lib/desktop/pages/file_manager_page.dart index badb68a84..31f9e154b 100644 --- a/flutter/lib/desktop/pages/file_manager_page.dart +++ b/flutter/lib/desktop/pages/file_manager_page.dart @@ -49,6 +49,11 @@ enum MouseFocusScope { none } +final buttonShape = + MaterialStateProperty.all(RoundedRectangleBorder( + borderRadius: BorderRadius.circular(18.0), +)); + class FileManagerPage extends StatefulWidget { const FileManagerPage({Key? key, required this.id, this.forceRelay}) : super(key: key); @@ -300,14 +305,13 @@ class _FileManagerPageState extends State } skipCount = index + 1; } - var searchResult = entries - .skip(skipCount) - .where((element) => element.name.toLowerCase().startsWith(buffer)); + var searchResult = entries.skip(skipCount).where( + (element) => element.name.toLowerCase().startsWith(buffer)); if (searchResult.isEmpty) { // cannot find next, lets restart search from head debugPrint("restart search from head"); - searchResult = - entries.where((element) => element.name.toLowerCase().startsWith(buffer)); + searchResult = entries.where( + (element) => element.name.toLowerCase().startsWith(buffer)); } if (searchResult.isEmpty) { setState(() { @@ -321,8 +325,8 @@ class _FileManagerPageState extends State onSearch: (buffer) { debugPrint("searching for $buffer"); final selectedEntries = getSelectedItems(isLocal); - final searchResult = - entries.where((element) => element.name.toLowerCase().startsWith(buffer)); + final searchResult = entries.where( + (element) => element.name.toLowerCase().startsWith(buffer)); selectedEntries.clear(); if (searchResult.isEmpty) { setState(() { @@ -504,8 +508,7 @@ class _FileManagerPageState extends State debugPrint("entry is not valid: ${entry.path}"); } final selectedEntries = getSelectedItems(isLocal); - final searchResult = - entries.where((element) => element == entry); + final searchResult = entries.where((element) => element == entry); selectedEntries.clear(); if (searchResult.isEmpty) { return; @@ -976,25 +979,66 @@ class _FileManagerPageState extends State cancel() => close(false); return CustomAlertDialog( - title: Text(translate("Create Folder")), - content: Column( - mainAxisSize: MainAxisSize.min, + title: Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ - TextFormField( - decoration: InputDecoration( - labelText: translate( - "Please enter the folder name"), - ), - controller: name, - autofocus: true, + SvgPicture.asset("assets/folder_new.svg", + color: MyTheme.accent), + Text( + translate("Create Folder"), + ).paddingOnly( + left: 10, + ), + ], + ), + content: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + children: [ + TextFormField( + decoration: InputDecoration( + labelText: translate( + "Please enter the folder name", + ), + ), + controller: name, + autofocus: true, + ), + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + ElevatedButton.icon( + style: ButtonStyle( + backgroundColor: + MaterialStateProperty.all( + MyTheme.accent, + ), + shape: buttonShape, + ), + icon: Icon(Icons.close_rounded), + label: Text(translate("Cancel")), + onPressed: cancel, + ), + ElevatedButton.icon( + style: ButtonStyle( + backgroundColor: + MaterialStateProperty.all( + MyTheme.accent, + ), + shape: buttonShape, + ), + icon: Icon(Icons.done_rounded), + label: Text(translate("Ok")), + onPressed: submit, + ), + ], + ).paddingOnly(top: 20) + ], ), ], ), - actions: [ - dialogButton("Cancel", - onPressed: cancel, isOutline: true), - dialogButton("OK", onPressed: submit) - ], onSubmit: submit, onCancel: cancel, ); @@ -1036,11 +1080,7 @@ class _FileManagerPageState extends State ? MyTheme.accent80 : MyTheme.accent, ), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(18.0), - ), - ), + shape: buttonShape, ), onPressed: validItems(selectedItems) ? () { @@ -1430,14 +1470,14 @@ class _FileManagerPageState extends State ).marginSymmetric(horizontal: 4), ), Flexible( - flex: 1, - child: ascending.value != null - ? Icon( - ascending.value! - ? Icons.keyboard_arrow_up_rounded - : Icons.keyboard_arrow_down_rounded, - ) - : const Offstage()) + flex: 1, + child: ascending.value != null + ? Icon( + ascending.value! + ? Icons.keyboard_arrow_up_rounded + : Icons.keyboard_arrow_down_rounded, + ) + : const Offstage()) ], ), ), @@ -1467,10 +1507,8 @@ class _FileManagerPageState extends State axis: Axis.vertical, onPointerMove: (dx) { nameColWidth.value += dx; - nameColWidth.value = min( - kDesktopFileTransferMaximumWidth, - max(kDesktopFileTransferMinimumWidth, - nameColWidth.value)); + nameColWidth.value = min(kDesktopFileTransferMaximumWidth, + max(kDesktopFileTransferMinimumWidth, nameColWidth.value)); }, padding: padding, ),