2136 activity suggestions feedback (#2147)
* chore: some activity page styling * chore: add right padding to pressable button widget * chore: don't add to stream if closed
This commit is contained in:
parent
91000fd24b
commit
91699dda04
7 changed files with 108 additions and 54 deletions
|
|
@ -4812,5 +4812,6 @@
|
|||
"createOwnChat": "Create your own chat",
|
||||
"pleaseEnterInt": "Please enter a number",
|
||||
"home": "Home",
|
||||
"join": "Join"
|
||||
"join": "Join",
|
||||
"learnByTexting": "Learn by texting"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import 'package:fluffychat/pages/settings_password/settings_password.dart';
|
|||
import 'package:fluffychat/pages/settings_security/settings_security.dart';
|
||||
import 'package:fluffychat/pages/settings_style/settings_style.dart';
|
||||
import 'package:fluffychat/pangea/activity_planner/activity_planner_page.dart';
|
||||
import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_area.dart';
|
||||
import 'package:fluffychat/pangea/activity_suggestions/suggestions_page.dart';
|
||||
import 'package:fluffychat/pangea/guard/p_vguard.dart';
|
||||
import 'package:fluffychat/pangea/layouts/bottom_nav_layout.dart';
|
||||
|
|
@ -198,7 +197,7 @@ abstract class AppRoutes {
|
|||
FluffyThemes.isColumnMode(context)
|
||||
// #Pangea
|
||||
// ? const EmptyPage()
|
||||
? const ActivitySuggestionsArea()
|
||||
? const SuggestionsPage()
|
||||
// Pangea#
|
||||
: ChatList(
|
||||
activeChat: state.pathParameters['roomid'],
|
||||
|
|
@ -353,7 +352,7 @@ abstract class AppRoutes {
|
|||
FluffyThemes.isColumnMode(context)
|
||||
// #Pangea
|
||||
// ? const EmptyPage()
|
||||
? const ActivitySuggestionsArea()
|
||||
? const SuggestionsPage()
|
||||
// Pangea#
|
||||
: const Settings(),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -526,7 +526,7 @@ class ChatController extends State<ChatPageWithRoom>
|
|||
if (state == AppLifecycleState.paused) {
|
||||
clearSelectedEvents();
|
||||
}
|
||||
if (state == AppLifecycleState.hidden) {
|
||||
if (state == AppLifecycleState.hidden && !stopAudioStream.isClosed) {
|
||||
stopAudioStream.add(null);
|
||||
}
|
||||
// Pangea#
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ class ActivitySuggestionDialogState extends State<ActivitySuggestionDialog> {
|
|||
),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primary
|
||||
.withAlpha(50),
|
||||
.withAlpha(20),
|
||||
borderRadius:
|
||||
BorderRadius.circular(24.0),
|
||||
),
|
||||
|
|
@ -402,7 +402,7 @@ class ActivitySuggestionDialogState extends State<ActivitySuggestionDialog> {
|
|||
),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primary
|
||||
.withAlpha(50),
|
||||
.withAlpha(20),
|
||||
borderRadius:
|
||||
BorderRadius.circular(24.0),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -38,15 +38,17 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
super.dispose();
|
||||
}
|
||||
|
||||
bool get _isColumnMode => FluffyThemes.isColumnMode(context);
|
||||
|
||||
final List<ActivityPlanModel> _activityItems = [];
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
final double cardHeight = 235.0;
|
||||
final double cardPadding = 8.0;
|
||||
double get cardWidth => FluffyThemes.isColumnMode(context) ? 225.0 : 160.0;
|
||||
double get cardWidth => _isColumnMode ? 225.0 : 160.0;
|
||||
|
||||
void _scrollToItem(int index) {
|
||||
final viewportDimension = _scrollController.position.viewportDimension;
|
||||
final double scrollOffset = FluffyThemes.isColumnMode(context)
|
||||
final double scrollOffset = _isColumnMode
|
||||
? index * cardWidth - (viewportDimension / 2) + (cardWidth / 2)
|
||||
: (index + 1) * (cardHeight + 8.0);
|
||||
final maxScrollExtent = _scrollController.position.maxScrollExtent;
|
||||
|
|
@ -63,8 +65,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
|
||||
void _scrollToNextItem(AxisDirection direction) {
|
||||
final currentOffset = _scrollController.offset;
|
||||
final scrollAmount =
|
||||
FluffyThemes.isColumnMode(context) ? cardWidth : cardHeight;
|
||||
final scrollAmount = _isColumnMode ? cardWidth : cardHeight;
|
||||
|
||||
_scrollController.animateTo(
|
||||
(direction == AxisDirection.left
|
||||
|
|
@ -133,16 +134,13 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
alignment: Alignment.topCenter,
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: 16.0,
|
||||
horizontal: FluffyThemes.isColumnMode(context) ? 16.0 : 0.0,
|
||||
horizontal: _isColumnMode ? 16.0 : 0.0,
|
||||
),
|
||||
height: FluffyThemes.isColumnMode(context)
|
||||
? cardHeight + 2 * cardPadding + 16.0
|
||||
: null,
|
||||
child: FluffyThemes.isColumnMode(context)
|
||||
height: _isColumnMode ? cardHeight * 1.5 : null,
|
||||
child: _isColumnMode
|
||||
? Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
// Main content
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 45.0,
|
||||
|
|
@ -158,7 +156,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
// Left button
|
||||
Positioned(
|
||||
left: 0,
|
||||
top: cardHeight / 2 - 20.0,
|
||||
top: cardHeight / 1.5 - 20.0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
|
|
@ -179,7 +177,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
// Right button
|
||||
Positioned(
|
||||
right: 0,
|
||||
top: cardHeight / 2 - 20.0,
|
||||
top: cardHeight / 1.5 - 20.0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
|
|
@ -200,7 +198,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
|
|||
// Create Chat button
|
||||
Positioned(
|
||||
right: 0,
|
||||
top: cardHeight / 2 + 30.0,
|
||||
top: cardHeight / 1.5 + 30.0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
|
|
|
|||
|
|
@ -1,29 +1,77 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/pangea/activity_suggestions/activity_suggestions_area.dart';
|
||||
import 'package:fluffychat/pangea/analytics_summary/learning_progress_indicators.dart';
|
||||
import 'package:fluffychat/pangea/common/widgets/pangea_logo_svg.dart';
|
||||
|
||||
class SuggestionsPage extends StatelessWidget {
|
||||
const SuggestionsPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Scaffold(
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
final theme = Theme.of(context);
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 8.0,
|
||||
vertical: 24.0,
|
||||
),
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
automaticallyImplyLeading: false,
|
||||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
L10n.of(context).learnByTexting,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
child: LearningProgressIndicators(),
|
||||
),
|
||||
Expanded(
|
||||
child: ActivitySuggestionsArea(),
|
||||
),
|
||||
],
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(36.0),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8.0,
|
||||
horizontal: 16.0,
|
||||
),
|
||||
child: Row(
|
||||
spacing: 8.0,
|
||||
children: [
|
||||
PangeaLogoSvg(
|
||||
width: 24.0,
|
||||
forceColor: theme.colorScheme.primary,
|
||||
),
|
||||
Text(
|
||||
AppConfig.applicationName,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (!FluffyThemes.isColumnMode(context))
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(24.0),
|
||||
child: LearningProgressIndicators(),
|
||||
),
|
||||
const SizedBox(height: 16.0),
|
||||
const Flexible(
|
||||
child: ActivitySuggestionsArea(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -144,34 +144,42 @@ class PressableButtonState extends State<PressableButton>
|
|||
child: AnimatedBuilder(
|
||||
animation: _tweenAnimation,
|
||||
builder: (context, child) {
|
||||
return Column(
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizedBox(height: _tweenAnimation.value),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Color.alphaBlend(
|
||||
Colors.black.withAlpha(70),
|
||||
widget.color,
|
||||
),
|
||||
borderRadius: widget.borderRadius,
|
||||
Flexible(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizedBox(height: _tweenAnimation.value),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Color.alphaBlend(
|
||||
Colors.black.withAlpha(70),
|
||||
widget.color,
|
||||
),
|
||||
borderRadius: widget.borderRadius,
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
bottom: !_depressed
|
||||
? widget.buttonHeight - _tweenAnimation.value
|
||||
: 0,
|
||||
right: !_depressed
|
||||
? (widget.buttonHeight - _tweenAnimation.value) /
|
||||
2
|
||||
: 0,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
],
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
bottom: !_depressed
|
||||
? widget.buttonHeight - _tweenAnimation.value
|
||||
: 0,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
SizedBox(height: _tweenAnimation.value / 2),
|
||||
],
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
// color: Color.alphaBlend(
|
||||
// Colors.white.withAlpha(250),
|
||||
// widget.color,
|
||||
// ),
|
||||
borderRadius: widget.borderRadius,
|
||||
),
|
||||
child: widget.child,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue