github-mirrors/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-04-24 06:37:14 -04:00
Code Issues Projects Releases Packages Wiki Activity

chore(flutter_desktop): adjust toast style (#7083)

Browse source
This commit is contained in:
Richard Shiue 2024-12-30 16:35:41 +08:00 • committed by Lucas.Xu
parent 38c2937f64
commit 02eb0e0b83
7 changed files with 126 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/error_text_message.dart
View file

@ -58,7 +58,7 @@ class _ChatErrorMessageWidgetState extends State<ChatErrorMessageWidget> {
mainAxisSize: MainAxisSize.min,
children: [
const FlowySvg(
FlowySvgs.warning_filled_s,
FlowySvgs.toast_error_filled_s,
blendMode: null,
),
const HSpace(8.0),

159
frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart
View file

@ -1,6 +1,7 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/startup/tasks/app_widget.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/size.dart';
@ -364,71 +365,59 @@ class OkCancelButton extends StatelessWidget {
void showToastNotification(
BuildContext context, {
required String message,
String? message,
TextSpan? richMessage,
String? description,
ToastificationType type = ToastificationType.success,
ToastificationCallbacks? callbacks,
double bottomPadding = 100,
}) {
if (UniversalPlatform.isMobile) {
toastification.showCustom(
alignment: Alignment.bottomCenter,
autoCloseDuration: const Duration(milliseconds: 3000),
callbacks: callbacks ?? const ToastificationCallbacks(),
builder: (_, __) => _MToast(
message: message,
type: type,
bottomPadding: bottomPadding,
description: description,
),
);
return;
}
toastification.show(
context: context,
type: type,
style: ToastificationStyle.flat,
closeButtonShowType: CloseButtonShowType.onHover,
assert(
(message == null) != (richMessage == null),
"Exactly one of message or richMessage must be non-null.",
);
toastification.showCustom(
alignment: Alignment.bottomCenter,
autoCloseDuration: const Duration(milliseconds: 3000),
showProgressBar: false,
backgroundColor: Theme.of(context).colorScheme.surface,
borderSide: BorderSide(
color: Colors.grey.withOpacity(0.4),
),
title: FlowyText(
message,
maxLines: 3,
),
description: description != null
? FlowyText.regular(
description,
fontSize: 12,
lineHeight: 1.2,
maxLines: 3,
)
: null,
callbacks: callbacks ?? const ToastificationCallbacks(),
builder: (_, item) {
return UniversalPlatform.isMobile
? _MobileToast(
message: message,
type: type,
bottomPadding: bottomPadding,
description: description,
)
: _DesktopToast(
message: message,
richMessage: richMessage,
type: type,
onDismiss: () => toastification.dismiss(item),
);
},
);
}
class _MToast extends StatelessWidget {
const _MToast({
required this.message,
class _MobileToast extends StatelessWidget {
const _MobileToast({
this.message,
this.type = ToastificationType.success,
this.bottomPadding = 100,
this.description,
});
final String message;
final String? message;
final ToastificationType type;
final double bottomPadding;
final String? description;
@override
Widget build(BuildContext context) {
if (message == null) {
return const SizedBox.shrink();
}
final hintText = FlowyText.regular(
message,
message!,
fontSize: 16.0,
figmaLineHeight: 18.0,
color: Colors.white,
@ -498,6 +487,90 @@ class _MToast extends StatelessWidget {
}
}
class _DesktopToast extends StatelessWidget {
const _DesktopToast({
this.message,
this.richMessage,
required this.type,
this.onDismiss,
});
final String? message;
final TextSpan? richMessage;
final ToastificationType type;
final void Function()? onDismiss;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 360.0),
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
margin: const EdgeInsets.only(bottom: 32.0),
decoration: BoxDecoration(
color: Theme.of(context).isLightMode
? const Color(0xFF333333)
: const Color(0xFF363D49),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
// icon
FlowySvg(
switch (type) {
ToastificationType.warning => FlowySvgs.toast_warning_filled_s,
ToastificationType.success => FlowySvgs.toast_checked_filled_s,
ToastificationType.error => FlowySvgs.toast_error_filled_s,
_ => throw UnimplementedError(),
},
size: const Size.square(20.0),
blendMode: null,
),
const HSpace(8.0),
// text
Flexible(
child: message != null
? FlowyText(
message!,
maxLines: 2,
figmaLineHeight: 20.0,
overflow: TextOverflow.ellipsis,
color: const Color(0xFFFFFFFF),
)
: RichText(
text: richMessage!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
const HSpace(16.0),
// close
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onDismiss,
child: const SizedBox.square(
dimension: 24.0,
child: Center(
child: FlowySvg(
FlowySvgs.toast_close_s,
size: Size.square(16.0),
color: Color(0xFFBDBDBD),
),
),
),
),
),
],
),
),
);
}
}
Future<void> showConfirmDeletionDialog({
required BuildContext context,
required String name,

3
frontend/resources/flowy_icons/16x/toast_checked_filled.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#3AC25C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

0
frontend/resources/flowy_icons/16x/ai_close.svg → frontend/resources/flowy_icons/16x/toast_close.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 724 B

After

Width:  |  Height:  |  Size: 724 B

Before After
Before After

3
frontend/resources/flowy_icons/16x/toast_error_filled.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#FB006D"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
frontend/resources/flowy_icons/16x/toast_warning_filled.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.72503 21C2.5417 21 2.37503 20.9542 2.22503 20.8625C2.07503 20.7708 1.95837 20.65 1.87503 20.5C1.7917 20.35 1.74587 20.1875 1.73753 20.0125C1.7292 19.8375 1.77503 19.6667 1.87503 19.5L11.125 3.5C11.225 3.33333 11.3542 3.20833 11.5125 3.125C11.6709 3.04167 11.8334 3 12 3C12.1667 3 12.3292 3.04167 12.4875 3.125C12.6459 3.20833 12.775 3.33333 12.875 3.5L22.125 19.5C22.225 19.6667 22.2709 19.8375 22.2625 20.0125C22.2542 20.1875 22.2084 20.35 22.125 20.5C22.0417 20.65 21.925 20.7708 21.775 20.8625C21.625 20.9542 21.4584 21 21.275 21H2.72503ZM12 18C12.2834 18 12.5209 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5209 16.0958 12.2834 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0959 16.4792 11 16.7167 11 17C11 17.2833 11.0959 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM12 15C12.2834 15 12.5209 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14V11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5209 10.0958 12.2834 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0959 10.4792 11 10.7167 11 11V14C11 14.2833 11.0959 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15Z" fill="#FF7E1E"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
frontend/resources/flowy_icons/16x/warning_filled.svg
View file

@ -1,5 +0,0 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3327 8.12533C15.3327 12.1754 12.0494 15.4587 7.99935 15.4587C3.94926 15.4587 0.666016 12.1754 0.666016 8.12533C0.666016 4.07524 3.94926 0.791992 7.99935 0.791992C12.0494 0.791992 15.3327 4.07524 15.3327 8.12533Z" fill="#FB006D"/>
<path d="M8.00065 4.79199C7.63246 4.79199 7.33398 5.09047 7.33398 5.45866V8.79199C7.33398 9.16018 7.63246 9.45866 8.00065 9.45866C8.36884 9.45866 8.66732 9.16018 8.66732 8.79199V5.45866C8.66732 5.09047 8.36884 4.79199 8.00065 4.79199Z" fill="white"/>
<path d="M8.00065 10.1253C7.63246 10.1253 7.33398 10.4238 7.33398 10.792C7.33398 11.1602 7.63246 11.4587 8.00065 11.4587C8.36884 11.4587 8.66732 11.1602 8.66732 10.792C8.66732 10.4238 8.36884 10.1253 8.00065 10.1253Z" fill="white"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 830 B