Skip to content

Commit

Permalink
feat: improve upgrade space toast (#5543)
Browse files Browse the repository at this point in the history
* fix: divider color

* feat: improve upgrade space toast
  • Loading branch information
LucasXu0 authored Jun 15, 2024
1 parent ce1a6e4 commit 13107b6
Show file tree
Hide file tree
Showing 10 changed files with 217 additions and 27 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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'),
Expand All @@ -108,7 +112,7 @@ class _FavoriteViews extends StatelessWidget {
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
color: borderColor,
width: 0.5,
),
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -304,15 +305,15 @@ class _SidebarState extends State<_Sidebar> {

_renderFolderOrSpace(menuHorizontalInset),

_renderUpgradeSpaceButton(menuHorizontalInset),

// trash
Padding(
padding: menuHorizontalInset +
const EdgeInsets.symmetric(horizontal: 4.0),
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),
Expand Down Expand Up @@ -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(),
);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 0 deletions frontend/resources/flowy_icons/16x/space_arrow_right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions frontend/resources/flowy_icons/16x/upgrade.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions frontend/resources/flowy_icons/16x/upgrade_close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion frontend/resources/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}

0 comments on commit 13107b6

Please sign in to comment.