fix: embed link button ui on mobile

This commit is contained in:
Lucas.Xu 2024-08-17 12:01:51 +08:00
parent 7c93a0ab14
commit cd45a09e83
4 changed files with 38 additions and 12 deletions

View File

@ -142,8 +142,10 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
); );
} else { } else {
child = Padding( child = Padding(
padding: padding: const EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0), horizontal: 8.0,
vertical: 12.0,
),
child: child, child: child,
); );
} }

View File

@ -1,5 +1,6 @@
import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/shared/patterns/common_patterns.dart'; import 'package:appflowy/shared/patterns/common_patterns.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -22,13 +23,26 @@ class _EmbedImageUrlWidgetState extends State<EmbedImageUrlWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( final textField = FlowyTextField(
children: [
const VSpace(12),
FlowyTextField(
hintText: LocaleKeys.document_imageBlock_embedLink_placeholder.tr(), hintText: LocaleKeys.document_imageBlock_embedLink_placeholder.tr(),
onChanged: (value) => inputText = value, onChanged: (value) => inputText = value,
onEditingComplete: submit, onEditingComplete: submit,
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 14,
),
hintStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).hintColor,
fontSize: 14,
),
);
return Column(
children: [
const VSpace(12),
PlatformExtension.isDesktop
? textField
: SizedBox(
height: 42,
child: textField,
), ),
if (!isUrlValid) ...[ if (!isUrlValid) ...[
const VSpace(12), const VSpace(12),
@ -39,18 +53,23 @@ class _EmbedImageUrlWidgetState extends State<EmbedImageUrlWidget> {
], ],
const VSpace(20), const VSpace(20),
SizedBox( SizedBox(
height: 32, height: PlatformExtension.isMobile ? 36 : 32,
width: 300, width: 300,
child: FlowyButton( child: FlowyButton(
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor: Theme.of(context).colorScheme.primary,
hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9), hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9),
showDefaultBoxDecorationOnMobile: true, showDefaultBoxDecorationOnMobile: true,
radius:
PlatformExtension.isMobile ? BorderRadius.circular(8) : null,
margin: const EdgeInsets.all(5), margin: const EdgeInsets.all(5),
text: FlowyText( text: FlowyText(
LocaleKeys.document_imageBlock_embedLink_label.tr(), LocaleKeys.document_imageBlock_embedLink_label.tr(),
lineHeight: 1, lineHeight: 1,
textAlign: TextAlign.center, textAlign: TextAlign.center,
color: Theme.of(context).colorScheme.onPrimary, color: PlatformExtension.isMobile
? null
: Theme.of(context).colorScheme.onPrimary,
fontSize: PlatformExtension.isMobile ? 14 : null,
), ),
onTap: submit, onTap: submit,
), ),

View File

@ -24,7 +24,7 @@ class UploadImageFileWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final child = FlowyButton( Widget child = FlowyButton(
showDefaultBoxDecorationOnMobile: true, showDefaultBoxDecorationOnMobile: true,
radius: PlatformExtension.isMobile ? BorderRadius.circular(8.0) : null, radius: PlatformExtension.isMobile ? BorderRadius.circular(8.0) : null,
text: Container( text: Container(
@ -38,7 +38,12 @@ class UploadImageFileWidget extends StatelessWidget {
); );
if (PlatformExtension.isDesktopOrWeb) { if (PlatformExtension.isDesktopOrWeb) {
return FlowyHover(child: child); child = FlowyHover(child: child);
} else {
child = Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: child,
);
} }
return child; return child;

View File

@ -264,7 +264,7 @@ class FlowyButton extends StatelessWidget {
? BoxDecoration( ? BoxDecoration(
border: Border.all( border: Border.all(
color: borderColor ?? color: borderColor ??
Theme.of(context).colorScheme.surfaceContainerHighest, Theme.of(context).colorScheme.outline,
width: 1.0, width: 1.0,
), ),
borderRadius: radius, borderRadius: radius,