diff --git a/frontend/appflowy_flutter/assets/translations/en.json b/frontend/appflowy_flutter/assets/translations/en.json index bcca185f4e..47361ec47c 100644 --- a/frontend/appflowy_flutter/assets/translations/en.json +++ b/frontend/appflowy_flutter/assets/translations/en.json @@ -188,10 +188,10 @@ "exportDatabase": "Export database", "selectFiles": "Select the files that need to be export", "createNewFolder": "Create a new folder", - "createNewFolderDesc": "Tell us where you want to store your data ...", + "createNewFolderDesc": "Tell us where you want to store your data", "open": "Open", "openFolder": "Open an existing folder", - "openFolderDesc": "Read and write it to your existing AppFlowy folder ...", + "openFolderDesc": "Read and write it to your existing AppFlowy folder", "folderHintText": "folder name", "location": "Creating a new folder", "locationDesc": "Pick a name for your AppFlowy data folder", @@ -383,7 +383,6 @@ "imageSavingFailed": "Image Saving Failed", "addIcon": "Add Icon" } - } }, "board": { diff --git a/frontend/appflowy_flutter/lib/user/presentation/folder/folder_widget.dart b/frontend/appflowy_flutter/lib/user/presentation/folder/folder_widget.dart index 8a34c04b14..50de6ad88d 100644 --- a/frontend/appflowy_flutter/lib/user/presentation/folder/folder_widget.dart +++ b/frontend/appflowy_flutter/lib/user/presentation/folder/folder_widget.dart @@ -2,9 +2,7 @@ import 'dart:io'; import 'package:appflowy/util/file_picker/file_picker_service.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:flowy_infra_ui/style_widget/text.dart'; -import 'package:flowy_infra_ui/style_widget/text_field.dart'; -import 'package:flowy_infra_ui/widget/rounded_button.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; @@ -36,10 +34,7 @@ class _FolderWidgetState extends State { @override Widget build(BuildContext context) { - return SizedBox( - height: 250, - child: _mapIndexToWidget(context), - ); + return _mapIndexToWidget(context); } Widget _mapIndexToWidget(BuildContext context) { @@ -86,37 +81,24 @@ class FolderOptionsWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return ListView( - shrinkWrap: true, - children: [ - Card( - child: ListTile( - title: FlowyText.medium( - LocaleKeys.settings_files_createNewFolder.tr(), - ), - subtitle: FlowyText.regular( - LocaleKeys.settings_files_createNewFolderDesc.tr(), - ), - trailing: _buildTextButton( - context, - LocaleKeys.settings_files_create.tr(), - onPressedCreate, - ), + return Column( + children: [ + _FolderCard( + title: LocaleKeys.settings_files_createNewFolder.tr(), + subtitle: LocaleKeys.settings_files_createNewFolderDesc.tr(), + trailing: _buildTextButton( + context, + LocaleKeys.settings_files_create.tr(), + onPressedCreate, ), ), - Card( - child: ListTile( - title: FlowyText.medium( - LocaleKeys.settings_files_openFolder.tr(), - ), - subtitle: FlowyText.regular( - LocaleKeys.settings_files_openFolderDesc.tr(), - ), - trailing: _buildTextButton( - context, - LocaleKeys.settings_files_open.tr(), - onPressedOpen, - ), + _FolderCard( + title: LocaleKeys.settings_files_openFolder.tr(), + subtitle: LocaleKeys.settings_files_openFolderDesc.tr(), + trailing: _buildTextButton( + context, + LocaleKeys.settings_files_open.tr(), + onPressedOpen, ), ), ], @@ -164,56 +146,55 @@ class CreateFolderWidgetState extends State { label: const Text('Back'), ), ), - Card( - child: ListTile( - title: FlowyText.medium( - LocaleKeys.settings_files_location.tr(), - ), - subtitle: FlowyText.regular( - LocaleKeys.settings_files_locationDesc.tr(), - ), - trailing: SizedBox( - width: 100, - height: 36, - child: FlowyTextField( - hintText: LocaleKeys.settings_files_folderHintText.tr(), - onChanged: (name) { - _folderName = name; - }, - onSubmitted: (name) { - setState(() { - _folderName = name; - }); - }, + _FolderCard( + title: LocaleKeys.settings_files_location.tr(), + subtitle: LocaleKeys.settings_files_locationDesc.tr(), + trailing: SizedBox( + width: 120, + child: FlowyTextField( + hintText: LocaleKeys.settings_files_folderHintText.tr(), + onChanged: (name) => _folderName = name, + onSubmitted: (name) => setState( + () => _folderName = name, ), ), ), ), - Card( - child: ListTile( - title: FlowyText.medium(LocaleKeys.settings_files_folderPath.tr()), - subtitle: FlowyText.regular(_path), - trailing: _buildTextButton( - context, LocaleKeys.settings_files_browser.tr(), () async { + _FolderCard( + title: LocaleKeys.settings_files_folderPath.tr(), + subtitle: _path, + trailing: _buildTextButton( + context, + LocaleKeys.settings_files_browser.tr(), + () async { final dir = await getIt().getDirectoryPath(); if (dir != null) { - setState(() { - directory = dir; - }); + setState(() => directory = dir); } - }), + }, ), ), - Card( - child: _buildTextButton( - context, LocaleKeys.settings_files_create.tr(), () async { - if (_path.isEmpty) { - _showToast(LocaleKeys.settings_files_locationCannotBeEmpty.tr()); - } else { - await getIt().setLocation(_path); - await widget.onPressedCreate(); - } - }), + const VSpace(4.0), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: Row( + children: [ + _buildTextButton( + context, + LocaleKeys.settings_files_create.tr(), + () async { + if (_path.isEmpty) { + _showToast( + LocaleKeys.settings_files_locationCannotBeEmpty.tr(), + ); + } else { + await getIt().setLocation(_path); + await widget.onPressedCreate(); + } + }, + ), + ], + ), ) ], ); @@ -240,12 +221,70 @@ class CreateFolderWidgetState extends State { Widget _buildTextButton( BuildContext context, String title, VoidCallback onPressed) { - return SizedBox( - width: 70, - height: 36, - child: RoundedTextButton( - title: title, - onPressed: onPressed, - ), + return FlowyTextButton( + title, + onPressed: onPressed, + fillColor: Theme.of(context).colorScheme.primary, + fontColor: Theme.of(context).colorScheme.onPrimary, + hoverColor: Theme.of(context).colorScheme.primaryContainer, ); } + +class _FolderCard extends StatelessWidget { + const _FolderCard({ + Key? key, + required this.title, + required this.subtitle, + this.trailing, + }) : super(key: key); + + final String title; + + final String subtitle; + + final Widget? trailing; + + @override + Widget build(BuildContext context) { + return Card( + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 4.0, + horizontal: 16.0, + ), + child: Row( + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + FlowyText.medium( + title, + ), + Row( + children: [ + Flexible( + child: Text( + subtitle, + overflow: TextOverflow.ellipsis, + style: + Theme.of(context).textTheme.bodyMedium!.copyWith( + fontWeight: FontWeight.w400, + ), + ), + ), + ], + ), + ], + ), + ), + if (trailing != null) ...[ + const HSpace(40), + trailing!, + ], + ], + ), + ), + ); + } +} diff --git a/frontend/appflowy_flutter/lib/user/presentation/skip_log_in_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/skip_log_in_screen.dart index e394f98fe1..84f9fa441f 100644 --- a/frontend/appflowy_flutter/lib/user/presentation/skip_log_in_screen.dart +++ b/frontend/appflowy_flutter/lib/user/presentation/skip_log_in_screen.dart @@ -1,9 +1,8 @@ +import 'package:appflowy/core/frameless_window.dart'; import 'package:dartz/dartz.dart' as dartz; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/size.dart'; -import 'package:flowy_infra_ui/style_widget/button.dart'; -import 'package:flowy_infra_ui/widget/rounded_button.dart'; -import 'package:flowy_infra_ui/widget/spacing.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:appflowy_backend/dispatch/dispatch.dart'; import 'package:appflowy_backend/log.dart'; import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart'; @@ -39,6 +38,7 @@ class _SkipLogInScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( + appBar: const _SkipLoginMoveWindow(), body: Center( child: _renderBody(context), ), @@ -54,9 +54,13 @@ class _SkipLogInScreenState extends State { logoSize: const Size.square(60), ), const VSpace(40), - SizedBox( - width: 250, - child: GoButton(onPressed: () => _autoRegister(context)), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GoButton( + onPressed: () => _autoRegister(context), + ), + ], ), const VSpace(20), SizedBox( @@ -72,18 +76,15 @@ class _SkipLogInScreenState extends State { }, ), ), - const VSpace(20), - SizedBox( - width: 400, - child: _buildSubscribeButtons(context), - ), + const Spacer(), + _buildSubscribeButtons(context), ], ); } Row _buildSubscribeButtons(BuildContext context) { return Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + mainAxisAlignment: MainAxisAlignment.center, children: [ FlowyTextButton( LocaleKeys.githubStarText.tr(), @@ -95,6 +96,7 @@ class _SkipLogInScreenState extends State { onPressed: () => _launchURL('https://github.com/AppFlowy-IO/appflowy'), ), + const HSpace(20), FlowyTextButton( LocaleKeys.subscribeNewsletterText.tr(), fontWeight: FontWeight.w500, @@ -149,19 +151,41 @@ class _SkipLogInScreenState extends State { class GoButton extends StatelessWidget { final VoidCallback onPressed; + const GoButton({ - Key? key, + super.key, required this.onPressed, - }) : super(key: key); + }); @override Widget build(BuildContext context) { - return RoundedTextButton( - title: LocaleKeys.letsGoButtonText.tr(), + return FlowyTextButton( + LocaleKeys.letsGoButtonText.tr(), fontSize: FontSizes.s16, - height: 50, - borderRadius: Corners.s10Border, + padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 12.0), onPressed: onPressed, + fillColor: Theme.of(context).colorScheme.primary, + fontColor: Theme.of(context).colorScheme.onPrimary, + hoverColor: Theme.of(context).colorScheme.primaryContainer, ); } } + +class _SkipLoginMoveWindow extends StatelessWidget + implements PreferredSizeWidget { + const _SkipLoginMoveWindow(); + + @override + Widget build(BuildContext context) { + return Row( + children: const [ + Expanded( + child: MoveWindowDetector(), + ), + ], + ); + } + + @override + Size get preferredSize => const Size.fromHeight(55.0); +}