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 displayName = parseFontFamilyName(fontFamilyName);
return InkWell(
onTap: () => context.pop(fontFamilyName),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 12.0,
),
child: Row(
children: [
const HSpace(12.0),
FlowyText(
displayName,
fontFamily:
GoogleFonts.getFont(fontFamilyName).fontFamily,
),
const Spacer(),
if (selectedFontFamilyName == fontFamilyName)
const Icon(
Icons.check,
size: 16,
return SizedBox(
height: 48.0,
child: InkWell(
onTap: () => context.pop(fontFamilyName),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 12.0,
),
child: Row(
children: [
const HSpace(12.0),
FlowyText(
displayName,
fontFamily:
GoogleFonts.getFont(fontFamilyName).fontFamily,
),
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(
itemBuilder: (context, index) {
final locale = supportedLocales[index];
return InkWell(
onTap: () => context.pop(locale),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 12.0,
),
child: Row(
children: [
const HSpace(12.0),
FlowyText(
languageFromLocale(locale),
),
const Spacer(),
if (EasyLocalization.of(context)!.locale == locale)
const Icon(
Icons.check,
size: 16,
return SizedBox(
height: 48.0,
child: InkWell(
onTap: () => context.pop(locale),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 12.0,
),
child: Row(
children: [
const HSpace(12.0),
FlowyText(
languageFromLocale(locale),
),
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,
isScrollControlled: isScrollControlled,
builder: (context) => Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
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,
foregroundColor: theme.colorScheme.onSurface,
iconColor: theme.iconTheme.color ?? theme.colorScheme.onSurface,
tabBarSelectedBackgroundColor: theme.colorScheme.background,
tabBarSelectedForegroundColor: theme.colorScheme.onSurface,
tabBarSelectedBackgroundColor: theme.colorScheme.onSurfaceVariant,
tabBarSelectedForegroundColor: theme.colorScheme.onPrimary,
editorState: editorState,
toolbarItems: getMobileToolbarItems(),
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(
itemBuilder: (context, index) {
final language = codeBlockSupportedLanguages[index];
return FlowyTextButton(
language.capitalize(),
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 4.0,
return SizedBox(
height: 48,
child: FlowyTextButton(
language.capitalize(),
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 4.0,
),
onPressed: () => context.pop(language),
),
onPressed: () => context.pop(language),
);
},
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,
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: _buildColorItems(
widget.backgroundColorOptions,
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,
title:
LocaleKeys.document_plugins_cover_changeCover.tr(),
isScrollControlled: true,
builder: (context) {
return ConstrainedBox(
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 ||
data == null ||
data.isEmpty) {
return const CircularProgressIndicator.adaptive();
return const Center(
child: CircularProgressIndicator.adaptive(),
);
}
return GridView.count(
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:
final theme = Theme.of(context);
final padding = PlatformExtension.isMobile
? const EdgeInsets.all(16.0)
: const EdgeInsets.all(8.0);
return Container(
constraints: constraints,
padding: const EdgeInsets.all(8.0),
padding: padding,
alignment: Alignment.center,
child: CoverColorPicker(
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_ui/style_widget/hover.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.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(
constraints: BoxConstraints.tightFor(
width: size.width,
@ -76,20 +97,7 @@ class FlowyIconButton extends StatelessWidget {
highlightColor: Colors.transparent,
elevation: 0,
onPressed: onPressed,
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: Padding(
padding: iconPadding,
child: Center(child: child),
),
),
child: child,
),
),
);