Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile UI issues (#4020)

Browse Source 
* fix: color picker overflow

* fix: image picker overflow

* feat: expand list item to 48.0
This commit is contained in:
Lucas.Xu
2023-11-27 13:51:05 +08:00
committed by GitHub
parent cac3acd553
commit c659cf4ff2
10 changed files with 91 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
View File

@ -82,29 +82,32 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
} }
final fontFamilyName = availableFonts[index - 1]; final fontFamilyName = availableFonts[index - 1];
final displayName = parseFontFamilyName(fontFamilyName); final displayName = parseFontFamilyName(fontFamilyName);
return InkWell( return SizedBox(
onTap: () => context.pop(fontFamilyName), height: 48.0,
child: Padding( child: InkWell(
padding: const EdgeInsets.symmetric( onTap: () => context.pop(fontFamilyName),
horizontal: 4.0, child: Padding(
vertical: 12.0, padding: const EdgeInsets.symmetric(
), horizontal: 4.0,
child: Row( vertical: 12.0,
children: [ ),
const HSpace(12.0), child: Row(
FlowyText( children: [
displayName, const HSpace(12.0),
fontFamily: FlowyText(
GoogleFonts.getFont(fontFamilyName).fontFamily, displayName,
), fontFamily:
const Spacer(), GoogleFonts.getFont(fontFamilyName).fontFamily,
if (selectedFontFamilyName == fontFamilyName)
const Icon(
Icons.check,
size: 16,
), ),
const HSpace(12.0), const Spacer(),
], if (selectedFontFamilyName == fontFamilyName)
const Icon(
Icons.check,
size: 16,
),
const HSpace(12.0),
],
),
), ),
), ),
); );

43
frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
View File

@ -47,27 +47,30 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
child: ListView.separated( child: ListView.separated(
itemBuilder: (context, index) { itemBuilder: (context, index) {
final locale = supportedLocales[index]; final locale = supportedLocales[index];
return InkWell( return SizedBox(
onTap: () => context.pop(locale), height: 48.0,
child: Padding( child: InkWell(
padding: const EdgeInsets.symmetric( onTap: () => context.pop(locale),
horizontal: 4.0, child: Padding(
vertical: 12.0, padding: const EdgeInsets.symmetric(
), horizontal: 4.0,
child: Row( vertical: 12.0,
children: [ ),
const HSpace(12.0), child: Row(
FlowyText( children: [
languageFromLocale(locale), const HSpace(12.0),
), FlowyText(
const Spacer(), languageFromLocale(locale),
if (EasyLocalization.of(context)!.locale == locale)
const Icon(
Icons.check,
size: 16,
), ),
const HSpace(12.0), const Spacer(),
], if (EasyLocalization.of(context)!.locale == locale)
const Icon(
Icons.check,
size: 16,
),
const HSpace(12.0),
],
),
), ),
), ),
); );

2
frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart
View File

@ -11,7 +11,7 @@ Future<T?> showFlowyMobileBottomSheet<T>(
context: context, context: context,
isScrollControlled: isScrollControlled, isScrollControlled: isScrollControlled,
builder: (context) => Padding( builder: (context) => Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 32), padding: const EdgeInsets.all(16.0),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
View File

@ -274,8 +274,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
backgroundColor: theme.colorScheme.background, backgroundColor: theme.colorScheme.background,
foregroundColor: theme.colorScheme.onSurface, foregroundColor: theme.colorScheme.onSurface,
iconColor: theme.iconTheme.color ?? theme.colorScheme.onSurface, iconColor: theme.iconTheme.color ?? theme.colorScheme.onSurface,
tabBarSelectedBackgroundColor: theme.colorScheme.background, tabBarSelectedBackgroundColor: theme.colorScheme.onSurfaceVariant,
tabBarSelectedForegroundColor: theme.colorScheme.onSurface, tabBarSelectedForegroundColor: theme.colorScheme.onPrimary,
editorState: editorState, editorState: editorState,
toolbarItems: getMobileToolbarItems(), toolbarItems: getMobileToolbarItems(),
child: Column( child: Column(

15
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
View File

@ -31,13 +31,16 @@ class MobileCodeLanguagePickerScreen extends StatelessWidget {
child: ListView.separated( child: ListView.separated(
itemBuilder: (context, index) { itemBuilder: (context, index) {
final language = codeBlockSupportedLanguages[index]; final language = codeBlockSupportedLanguages[index];
return FlowyTextButton( return SizedBox(
language.capitalize(), height: 48,
padding: const EdgeInsets.symmetric( child: FlowyTextButton(
horizontal: 16.0, language.capitalize(),
vertical: 4.0, padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 4.0,
),
onPressed: () => context.pop(language),
), ),
onPressed: () => context.pop(language),
); );
}, },
separatorBuilder: (_, __) => const Divider(), separatorBuilder: (_, __) => const Divider(),

1
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
View File

@ -365,6 +365,7 @@ class _CoverColorPickerState extends State<CoverColorPicker> {
platform: TargetPlatform.windows, platform: TargetPlatform.windows,
), ),
child: SingleChildScrollView( child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: _buildColorItems( child: _buildColorItems(
widget.backgroundColorOptions, widget.backgroundColorOptions,
widget.selectedBackgroundColorHex, widget.selectedBackgroundColorHex,

1
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
View File

@ -431,6 +431,7 @@ class DocumentCoverState extends State<DocumentCover> {
context, context,
title: title:
LocaleKeys.document_plugins_cover_changeCover.tr(), LocaleKeys.document_plugins_cover_changeCover.tr(),
isScrollControlled: true,
builder: (context) { builder: (context) {
return ConstrainedBox( return ConstrainedBox(
constraints: const BoxConstraints( constraints: const BoxConstraints(

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart
View File

@ -83,7 +83,9 @@ class _UnsplashImageWidgetState extends State<UnsplashImageWidget> {
value.connectionState != ConnectionState.done || value.connectionState != ConnectionState.done ||
data == null || data == null ||
data.isEmpty) { data.isEmpty) {
return const CircularProgressIndicator.adaptive(); return const Center(
child: CircularProgressIndicator.adaptive(),
);
} }
return GridView.count( return GridView.count(
crossAxisCount: 3, crossAxisCount: 3,

5
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart
View File

@ -202,9 +202,12 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
); );
case UploadImageType.color: case UploadImageType.color:
final theme = Theme.of(context); final theme = Theme.of(context);
final padding = PlatformExtension.isMobile
? const EdgeInsets.all(16.0)
: const EdgeInsets.all(8.0);
return Container( return Container(
constraints: constraints, constraints: constraints,
padding: const EdgeInsets.all(8.0), padding: padding,
alignment: Alignment.center, alignment: Alignment.center,
child: CoverColorPicker( child: CoverColorPicker(
pickerBackgroundColor: theme.cardColor, pickerBackgroundColor: theme.cardColor,

36
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
View File

@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart'; import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
@ -52,6 +54,25 @@ class FlowyIconButton extends StatelessWidget {
assert(size.width > iconPadding.horizontal); assert(size.width > iconPadding.horizontal);
assert(size.height > iconPadding.vertical); assert(size.height > iconPadding.vertical);
child = Padding(
padding: iconPadding,
child: Center(child: child),
);
if (Platform.isMacOS || Platform.isWindows || Platform.isLinux) {
child = FlowyHover(
isSelected: isSelected != null ? () => isSelected! : null,
style: HoverStyle(
hoverColor: hoverColor,
foregroundColorOnHover:
iconColorOnHover ?? Theme.of(context).iconTheme.color,
//Do not set background here. Use [fillColor] instead.
),
resetHoverOnRebuild: false,
child: child,
);
}
return Container( return Container(
constraints: BoxConstraints.tightFor( constraints: BoxConstraints.tightFor(
width: size.width, width: size.width,
@ -76,20 +97,7 @@ class FlowyIconButton extends StatelessWidget {
highlightColor: Colors.transparent, highlightColor: Colors.transparent,
elevation: 0, elevation: 0,
onPressed: onPressed, onPressed: onPressed,
child: FlowyHover( child: child,
isSelected: isSelected != null ? () => isSelected! : null,
style: HoverStyle(
hoverColor: hoverColor,
foregroundColorOnHover:
iconColorOnHover ?? Theme.of(context).iconTheme.color,
//Do not set background here. Use [fillColor] instead.
),
resetHoverOnRebuild: false,
child: Padding(
padding: iconPadding,
child: Center(child: child),
),
),
), ),
), ),
); );