AppFlowy-IO/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-09-11 19:17:43 +03:00
Code Issues Projects Releases Wiki Activity

feat: improve upgrade space toast (#5543)

Browse Source 
* fix: divider color

* feat: improve upgrade space toast
This commit is contained in:
Lucas.Xu 2024-06-15 09:03:09 +08:00 committed by GitHub
parent ce1a6e4fca
commit 13107b63e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 217 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/appflowy_flutter/lib/mobile/presentation/home/favorite_folder/favorite_space.dart
View File

@ -1,6 +1,7 @@
import 'package:appflowy/mobile/application/mobile_router.dart';
import 'package:appflowy/mobile/presentation/home/shared/empty_placeholder.dart';
import 'package:appflowy/mobile/presentation/home/shared/mobile_view_card.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
import 'package:appflowy/workspace/application/user/prelude.dart';
@ -92,6 +93,9 @@ class _FavoriteViews extends StatelessWidget {
@override
Widget build(BuildContext context) {
final borderColor = Theme.of(context).isLightMode
? const Color(0xFFE9E9EC)
: const Color(0x1AFFFFFF);
return Scrollbar(
child: ListView.separated(
key: const PageStorageKey('favorite_views_page_storage_key'),
@ -108,7 +112,7 @@ class _FavoriteViews extends StatelessWidget {
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
color: borderColor,
width: 0.5,
),
),

2
frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/recent_space.dart
View File

@ -65,7 +65,7 @@ class _RecentViews extends StatelessWidget {
@override
Widget build(BuildContext context) {
final borderColor = Theme.of(context).isLightMode
? const Color(0x00e2e2e4)
? const Color(0xFFE9E9EC)
: const Color(0x1AFFFFFF);
return SlidableAutoCloseBehavior(
child: Scrollbar(

6
frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart
View File

@ -52,15 +52,15 @@ class MobileBottomNavigationBar extends StatelessWidget {
final isLightMode = Theme.of(context).isLightMode;
final backgroundColor = isLightMode
? Colors.white.withOpacity(0.95)
: const Color(0x0023262b).withOpacity(0.95);
: const Color(0xFF23262B).withOpacity(0.95);
return Scaffold(
body: navigationShell,
extendBody: true,
bottomNavigationBar: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 2,
sigmaY: 2,
sigmaX: 3,
sigmaY: 3,
),
child: DecoratedBox(
decoration: BoxDecoration(

2
frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart
View File

@ -82,7 +82,7 @@ class SpaceBloc extends Bloc<SpaceEvent, SpaceState> {
);
if (shouldShowUpgradeDialog) {
add(const SpaceEvent.migrate());
// add(const SpaceEvent.migrate());
}
},
create: (name, icon, iconColor, permission) async {

31
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
View File

@ -23,6 +23,7 @@ import 'package:appflowy/workspace/presentation/home/menu/sidebar/header/sidebar
import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_migration.dart';
import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/workspace.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'
@ -304,8 +305,6 @@ class _SidebarState extends State<_Sidebar> {
_renderFolderOrSpace(menuHorizontalInset),
_renderUpgradeSpaceButton(menuHorizontalInset),
// trash
Padding(
padding: menuHorizontalInset +
@ -313,6 +312,8 @@ class _SidebarState extends State<_Sidebar> {
child: const Divider(height: 0.5, color: Color(0x141F2329)),
),
const VSpace(8),
_renderUpgradeSpaceButton(menuHorizontalInset),
const VSpace(8),
Padding(
padding: menuHorizontalInset +
const EdgeInsets.symmetric(horizontal: 4.0),
@ -368,24 +369,14 @@ class _SidebarState extends State<_Sidebar> {
return !spaceState.shouldShowUpgradeDialog ||
!workspaceState.isCollabWorkspaceOn
? const SizedBox.shrink()
: Container(
height: 40,
padding: menuHorizontalInset,
child: FlowyButton(
onTap: () {
context.read<SpaceBloc>().add(const SpaceEvent.migrate());
},
leftIcon: const Icon(
Icons.upgrade_rounded,
color: Colors.red,
),
leftIconSize: const Size.square(20),
iconPadding: 12.0,
text: FlowyText.regular(
LocaleKeys.space_enableSpacesForYourWorkspace.tr(),
overflow: TextOverflow.ellipsis,
),
),
: Padding(
padding: menuHorizontalInset +
const EdgeInsets.only(
left: 4.0,
right: 4.0,
top: 8.0,
),
child: const SpaceMigration(),
);
}

169
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/space_migration.dart Normal file
View File

@ -0,0 +1,169 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class SpaceMigration extends StatefulWidget {
const SpaceMigration({super.key});
@override
State<SpaceMigration> createState() => _SpaceMigrationState();
}
class _SpaceMigrationState extends State<SpaceMigration> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(12),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: const Color(0x66F5EAFF),
shape: RoundedRectangleBorder(
side: const BorderSide(
strokeAlign: BorderSide.strokeAlignOutside,
color: Color(0x339327FF),
),
borderRadius: BorderRadius.circular(10),
),
),
child: _isExpanded
? _buildExpandedMigrationContent()
: _buildCollapsedMigrationContent(),
);
}
Widget _buildExpandedMigrationContent() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_MigrationTitle(
onClose: () => setState(() => _isExpanded = false),
),
const VSpace(6.0),
Opacity(
opacity: 0.7,
child: FlowyText.regular(
LocaleKeys.space_upgradeSpaceDescription.tr(),
maxLines: null,
fontSize: 13.0,
lineHeight: 1.3,
),
),
const VSpace(12.0),
_ExpandedUpgradeButton(
onUpgrade: () =>
context.read<SpaceBloc>().add(const SpaceEvent.migrate()),
),
],
);
}
Widget _buildCollapsedMigrationContent() {
const linearGradient = LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF8032FF),
Color(0xFFEF35FF),
],
stops: [
0.1545,
0.8225,
],
);
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => setState(() => _isExpanded = true),
child: Row(
children: [
const FlowySvg(
FlowySvgs.upgrade_s,
blendMode: null,
),
const HSpace(8.0),
Expanded(
child: ShaderMask(
shaderCallback: (Rect bounds) =>
linearGradient.createShader(bounds),
blendMode: BlendMode.srcIn,
child: FlowyText(
LocaleKeys.space_upgradeYourSpace.tr(),
),
),
),
const FlowySvg(
FlowySvgs.space_arrow_right_s,
blendMode: null,
),
],
),
);
}
}
class _MigrationTitle extends StatelessWidget {
const _MigrationTitle({required this.onClose});
final VoidCallback? onClose;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const FlowySvg(
FlowySvgs.upgrade_s,
blendMode: null,
),
const HSpace(8.0),
Expanded(
child: FlowyText(
LocaleKeys.space_upgradeSpaceTitle.tr(),
maxLines: 3,
lineHeight: 1.2,
),
),
GestureDetector(
onTap: onClose,
child: const Padding(
padding: EdgeInsets.only(top: 3.0),
child: FlowySvg(FlowySvgs.upgrade_close_s),
),
),
],
);
}
}
class _ExpandedUpgradeButton extends StatelessWidget {
const _ExpandedUpgradeButton({required this.onUpgrade});
final VoidCallback? onUpgrade;
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: onUpgrade,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
decoration: ShapeDecoration(
color: const Color(0xFFA44AFD),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
),
child: FlowyText(
LocaleKeys.space_upgrade.tr(),
color: Colors.white,
fontSize: 12.0,
strutStyle: const StrutStyle(forceStrutHeight: true),
),
),
);
}
}

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

@ -0,0 +1,3 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 11.4375L9.1875 7.5L5.25 3.5625" stroke="#EF36FF" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

14
frontend/resources/flowy_icons/16x/upgrade.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_976_49073)">
<path d="M9.91623 15.7344L9.73114 15.955L7.60354 13.2904C6.97459 13.7044 5.9561 13.571 5.18287 12.9222C4.40883 12.2727 4.10131 11.2921 4.41484 10.5829L1.45567 8.94727L1.64075 8.7267C2.69183 7.47407 3.79922 6.8651 5.22414 6.77362C7.94561 2.9683 11.4489 2.0479 13.8059 2.45559L13.9445 2.47891L13.9907 2.61062C14.8023 4.86171 14.4847 8.45521 11.2286 11.8133C11.4055 13.2489 10.998 14.4452 9.91623 15.7344ZM10.3028 8.4636C11.1522 8.42323 11.8226 7.69864 11.7829 6.84839C11.7425 5.99896 11.0195 5.32841 10.1692 5.3681C9.31977 5.40848 8.64867 6.13388 8.68905 6.98332C8.72875 7.83357 9.45333 8.50398 10.3028 8.4636ZM4.76008 14.641C4.31206 15.1749 3.02602 15.5092 3.02602 15.5092C3.02602 15.5092 3.17912 14.13 3.58071 13.6514C3.92082 13.2461 4.45599 13.1306 4.78807 13.4093C5.12015 13.6879 5.10019 14.2357 4.76008 14.641Z" fill="url(#paint0_linear_976_49073)"/>
</g>
<defs>
<linearGradient id="paint0_linear_976_49073" x1="1.47153" y1="12.1874" x2="11.756" y2="15.6845" gradientUnits="userSpaceOnUse">
<stop stop-color="#8032FF"/>
<stop offset="1" stop-color="#EF35FF"/>
</linearGradient>
<clipPath id="clip0_976_49073">
<rect width="17" height="17" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
frontend/resources/flowy_icons/16x/upgrade_close.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon_close_outlined" opacity="0.8">
<path id="Union" d="M10.9708 11.4727C11.1824 11.2612 11.1839 10.9198 10.9724 10.7082L7.26476 7.00066L10.9723 3.29309C11.1839 3.08156 11.1823 2.74012 10.9708 2.52859C10.7593 2.31706 10.4178 2.31552 10.2063 2.52706C9.99476 2.73859 6.49873 6.23462 6.49873 6.23462L2.79113 2.52703C2.5796 2.31549 2.23817 2.31703 2.02663 2.52856C1.8151 2.74009 1.81357 3.08152 2.0251 3.29306L5.7327 7.00066L2.02507 10.7083C1.81354 10.9198 1.81507 11.2612 2.02661 11.4728C2.23814 11.6843 2.57957 11.6858 2.79111 11.4743L6.49873 7.76669L10.2063 11.4743C10.4179 11.6858 10.7593 11.6843 10.9708 11.4727Z" fill="#473E69"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

6
frontend/resources/translations/en.json
View File

@ -1914,6 +1914,10 @@
"unableToDeleteSpaceNotCreatedByYou": "Cannot delete a space created by others",
"enableSpacesForYourWorkspace": "Enable spaces for your workspace",
"title": "Spaces",
"defaultSpaceName": "General"
"defaultSpaceName": "General",
"upgradeSpaceTitle": "Enable Spaces for your workspace",
"upgradeSpaceDescription": "Create multiple public and private spaces to better organize your work.",
"upgrade": "Upgrade",
"upgradeYourSpace": "Upgrade your space"
}
}