mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 09:05:10 +00:00
Merge pull request #841 from krille-chan/krille/new-wallpaper
feat: New account data wallpaper feature
This commit is contained in:
commit
21af30e4c5
11 changed files with 262 additions and 34 deletions
|
@ -2462,5 +2462,6 @@
|
|||
"placeholders": {
|
||||
"sender": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"transparent": "Transparent"
|
||||
}
|
|
@ -21,6 +21,6 @@
|
|||
<key>CFBundleVersion</key>
|
||||
<string>1.0</string>
|
||||
<key>MinimumOSVersion</key>
|
||||
<string>11.0</string>
|
||||
<string>12.0</string>
|
||||
</dict>
|
||||
</plist>
|
||||
|
|
|
@ -457,7 +457,7 @@
|
|||
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 12.0;
|
||||
MTL_ENABLE_DEBUG_INFO = NO;
|
||||
SDKROOT = iphoneos;
|
||||
SUPPORTED_PLATFORMS = iphoneos;
|
||||
|
@ -546,7 +546,7 @@
|
|||
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 12.0;
|
||||
MTL_ENABLE_DEBUG_INFO = YES;
|
||||
ONLY_ACTIVE_ARCH = YES;
|
||||
SDKROOT = iphoneos;
|
||||
|
@ -595,7 +595,7 @@
|
|||
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 12.0;
|
||||
MTL_ENABLE_DEBUG_INFO = NO;
|
||||
SDKROOT = iphoneos;
|
||||
SUPPORTED_PLATFORMS = iphoneos;
|
||||
|
|
|
@ -37,7 +37,6 @@ class ChatAppBarTitle extends StatelessWidget {
|
|||
MatrixLocals(L10n.of(context)!),
|
||||
),
|
||||
size: 32,
|
||||
presenceUserId: room.directChatMatrixID,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
|
|
|
@ -9,6 +9,7 @@ import 'package:fluffychat/pages/chat/events/message.dart';
|
|||
import 'package:fluffychat/pages/chat/seen_by_row.dart';
|
||||
import 'package:fluffychat/pages/chat/typing_indicators.dart';
|
||||
import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
|
||||
import 'package:fluffychat/utils/account_config.dart';
|
||||
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
|
||||
import 'package:fluffychat/utils/platform_infos.dart';
|
||||
|
@ -36,6 +37,9 @@ class ChatEventList extends StatelessWidget {
|
|||
thisEventsKeyMap[events[i].eventId] = i;
|
||||
}
|
||||
|
||||
final hasWallpaper =
|
||||
controller.room.client.applicationAccountConfig.wallpaperUrl != null;
|
||||
|
||||
return SelectionArea(
|
||||
child: ListView.custom(
|
||||
padding: EdgeInsets.only(
|
||||
|
@ -140,6 +144,8 @@ class ChatEventList extends StatelessWidget {
|
|||
controller.readMarkerEventId == event.eventId &&
|
||||
controller.timeline?.allowNewEvent == false,
|
||||
nextEvent: i + 1 < events.length ? events[i + 1] : null,
|
||||
avatarPresenceBackgroundColor:
|
||||
hasWallpaper ? Colors.transparent : null,
|
||||
),
|
||||
);
|
||||
},
|
||||
|
|
|
@ -16,9 +16,11 @@ import 'package:fluffychat/pages/chat/pinned_events.dart';
|
|||
import 'package:fluffychat/pages/chat/reactions_picker.dart';
|
||||
import 'package:fluffychat/pages/chat/reply_display.dart';
|
||||
import 'package:fluffychat/pages/chat/tombstone_display.dart';
|
||||
import 'package:fluffychat/utils/account_config.dart';
|
||||
import 'package:fluffychat/widgets/chat_settings_popup_menu.dart';
|
||||
import 'package:fluffychat/widgets/connection_status_header.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
import 'package:fluffychat/widgets/mxc_image.dart';
|
||||
import 'package:fluffychat/widgets/unread_rooms_badge.dart';
|
||||
import '../../utils/stream_extension.dart';
|
||||
import 'chat_emoji_picker.dart';
|
||||
|
@ -136,6 +138,8 @@ class ChatView extends StatelessWidget {
|
|||
final bottomSheetPadding = FluffyThemes.isColumnMode(context) ? 16.0 : 8.0;
|
||||
final scrollUpBannerEventId = controller.scrollUpBannerEventId;
|
||||
|
||||
final accountConfig = Matrix.of(context).client.applicationAccountConfig;
|
||||
|
||||
return PopScope(
|
||||
canPop: controller.selectedEvents.isEmpty && !controller.showEmojiPicker,
|
||||
onPopInvoked: (pop) async {
|
||||
|
@ -198,6 +202,18 @@ class ChatView extends StatelessWidget {
|
|||
onDragExited: controller.onDragExited,
|
||||
child: Stack(
|
||||
children: <Widget>[
|
||||
if (accountConfig.wallpaperUrl != null)
|
||||
Opacity(
|
||||
opacity: accountConfig.wallpaperOpacity ?? 1,
|
||||
child: MxcImage(
|
||||
uri: accountConfig.wallpaperUrl,
|
||||
fit: BoxFit.cover,
|
||||
isThumbnail: true,
|
||||
width: FluffyThemes.columnWidth * 2,
|
||||
height: MediaQuery.of(context).size.height,
|
||||
placeholder: (_) => Container(),
|
||||
),
|
||||
),
|
||||
SafeArea(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
|
@ -300,8 +316,9 @@ class ChatView extends StatelessWidget {
|
|||
children: [
|
||||
TextButton.icon(
|
||||
style: TextButton.styleFrom(
|
||||
padding:
|
||||
const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(
|
||||
16,
|
||||
),
|
||||
foregroundColor:
|
||||
Theme.of(context)
|
||||
.colorScheme
|
||||
|
@ -317,8 +334,9 @@ class ChatView extends StatelessWidget {
|
|||
),
|
||||
TextButton.icon(
|
||||
style: TextButton.styleFrom(
|
||||
padding:
|
||||
const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(
|
||||
16,
|
||||
),
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.forum_outlined,
|
||||
|
|
|
@ -33,6 +33,7 @@ class Message extends StatelessWidget {
|
|||
final bool highlightMarker;
|
||||
final bool animateIn;
|
||||
final void Function()? resetAnimateIn;
|
||||
final Color? avatarPresenceBackgroundColor;
|
||||
|
||||
const Message(
|
||||
this.event, {
|
||||
|
@ -49,6 +50,7 @@ class Message extends StatelessWidget {
|
|||
this.highlightMarker = false,
|
||||
this.animateIn = false,
|
||||
this.resetAnimateIn,
|
||||
this.avatarPresenceBackgroundColor,
|
||||
super.key,
|
||||
});
|
||||
|
||||
|
@ -177,6 +179,7 @@ class Message extends StatelessWidget {
|
|||
mxContent: user.avatarUrl,
|
||||
name: user.calcDisplayname(),
|
||||
presenceUserId: user.stateKey,
|
||||
presenceBackgroundColor: avatarPresenceBackgroundColor,
|
||||
onTap: () => onAvatarTab(event),
|
||||
);
|
||||
},
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:file_picker/file_picker.dart';
|
||||
import 'package:future_loading_dialog/future_loading_dialog.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/config/setting_keys.dart';
|
||||
import 'package:fluffychat/utils/account_config.dart';
|
||||
import 'package:fluffychat/widgets/app_lock.dart';
|
||||
import 'package:fluffychat/widgets/theme_builder.dart';
|
||||
import '../../widgets/matrix.dart';
|
||||
import 'settings_style_view.dart';
|
||||
|
@ -19,6 +24,51 @@ class SettingsStyleController extends State<SettingsStyle> {
|
|||
ThemeController.of(context).setPrimaryColor(color);
|
||||
}
|
||||
|
||||
void setWallpaper() async {
|
||||
final client = Matrix.of(context).client;
|
||||
final picked = await AppLock.of(context).pauseWhile(
|
||||
FilePicker.platform.pickFiles(
|
||||
type: FileType.image,
|
||||
withData: true,
|
||||
),
|
||||
);
|
||||
final pickedFile = picked?.files.firstOrNull;
|
||||
if (pickedFile == null) return;
|
||||
|
||||
await showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () async {
|
||||
final url = await client.uploadContent(
|
||||
pickedFile.bytes!,
|
||||
filename: pickedFile.name,
|
||||
);
|
||||
await client.updateApplicationAccountConfig(
|
||||
ApplicationAccountConfig(wallpaperUrl: url),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void setChatWallpaperOpacity(double opacity) {
|
||||
final client = Matrix.of(context).client;
|
||||
showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () => client.updateApplicationAccountConfig(
|
||||
ApplicationAccountConfig(wallpaperOpacity: opacity),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void deleteChatWallpaper() => showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () => Matrix.of(context).client.setApplicationAccountConfig(
|
||||
const ApplicationAccountConfig(
|
||||
wallpaperUrl: null,
|
||||
wallpaperOpacity: null,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
ThemeMode get currentTheme => ThemeController.of(context).themeMode;
|
||||
Color? get currentColor => ThemeController.of(context).primaryColor;
|
||||
|
||||
|
|
|
@ -3,7 +3,11 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/utils/account_config.dart';
|
||||
import 'package:fluffychat/widgets/avatar.dart';
|
||||
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
import 'package:fluffychat/widgets/mxc_image.dart';
|
||||
import '../../config/app_config.dart';
|
||||
import 'settings_style.dart';
|
||||
|
||||
|
@ -15,6 +19,7 @@ class SettingsStyleView extends StatelessWidget {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
const colorPickerSize = 32.0;
|
||||
final client = Matrix.of(context).client;
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: const Center(child: BackButton()),
|
||||
|
@ -166,27 +171,104 @@ class SettingsStyleView extends StatelessWidget {
|
|||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Material(
|
||||
color: Theme.of(context).colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
child: Text(
|
||||
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||
fontSize:
|
||||
AppConfig.messageFontSize * AppConfig.fontSizeFactor,
|
||||
),
|
||||
),
|
||||
),
|
||||
StreamBuilder(
|
||||
stream: client.onAccountData.stream.where(
|
||||
(data) =>
|
||||
data.type ==
|
||||
ApplicationAccountConfigExtension.accountDataKey,
|
||||
),
|
||||
builder: (context, snapshot) {
|
||||
final accountConfig = client.applicationAccountConfig;
|
||||
final wallpaperOpacity = accountConfig.wallpaperOpacity ?? 1;
|
||||
final wallpaperOpacityIsDefault = wallpaperOpacity == 1;
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: const BoxDecoration(),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: Stack(
|
||||
children: [
|
||||
if (accountConfig.wallpaperUrl != null)
|
||||
Opacity(
|
||||
opacity: wallpaperOpacity,
|
||||
child: MxcImage(
|
||||
uri: accountConfig.wallpaperUrl,
|
||||
fit: BoxFit.cover,
|
||||
isThumbnail: true,
|
||||
width: FluffyThemes.columnWidth * 2,
|
||||
height: 156,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 12 + 12 + Avatar.defaultSize,
|
||||
right: 12,
|
||||
top: accountConfig.wallpaperUrl == null ? 0 : 12,
|
||||
bottom: 12,
|
||||
),
|
||||
child: Material(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
child: Text(
|
||||
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onPrimaryContainer,
|
||||
fontSize: AppConfig.messageFontSize *
|
||||
AppConfig.fontSizeFactor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
ListTile(
|
||||
title: Text(L10n.of(context)!.wallpaper),
|
||||
leading: const Icon(Icons.photo_outlined),
|
||||
trailing: accountConfig.wallpaperUrl == null
|
||||
? null
|
||||
: IconButton(
|
||||
icon: const Icon(Icons.delete_outlined),
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
onPressed: controller.deleteChatWallpaper,
|
||||
),
|
||||
onTap: controller.setWallpaper,
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
child: accountConfig.wallpaperUrl != null
|
||||
? SwitchListTile.adaptive(
|
||||
title: Text(L10n.of(context)!.transparent),
|
||||
secondary: const Icon(Icons.blur_linear_outlined),
|
||||
value: !wallpaperOpacityIsDefault,
|
||||
onChanged: (_) =>
|
||||
controller.setChatWallpaperOpacity(
|
||||
wallpaperOpacityIsDefault ? 0.4 : 1,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
ListTile(
|
||||
title: Text(L10n.of(context)!.fontSize),
|
||||
|
|
65
lib/utils/account_config.dart
Normal file
65
lib/utils/account_config.dart
Normal file
|
@ -0,0 +1,65 @@
|
|||
import 'package:matrix/matrix.dart';
|
||||
|
||||
extension ApplicationAccountConfigExtension on Client {
|
||||
static const String accountDataKey = 'im.fluffychat.account_config';
|
||||
|
||||
ApplicationAccountConfig get applicationAccountConfig =>
|
||||
ApplicationAccountConfig.fromJson(
|
||||
accountData[accountDataKey]?.content ?? {},
|
||||
);
|
||||
|
||||
Future<void> setApplicationAccountConfig(
|
||||
ApplicationAccountConfig config,
|
||||
) =>
|
||||
setAccountData(
|
||||
userID!,
|
||||
accountDataKey,
|
||||
config.toJson(),
|
||||
);
|
||||
|
||||
/// Only updates the specified values in ApplicationAccountConfig
|
||||
Future<void> updateApplicationAccountConfig(
|
||||
ApplicationAccountConfig config,
|
||||
) {
|
||||
final currentConfig = applicationAccountConfig;
|
||||
return setAccountData(
|
||||
userID!,
|
||||
accountDataKey,
|
||||
ApplicationAccountConfig(
|
||||
wallpaperUrl: config.wallpaperUrl ?? currentConfig.wallpaperUrl,
|
||||
wallpaperOpacity:
|
||||
config.wallpaperOpacity ?? currentConfig.wallpaperOpacity,
|
||||
).toJson(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ApplicationAccountConfig {
|
||||
final Uri? wallpaperUrl;
|
||||
final double? wallpaperOpacity;
|
||||
|
||||
const ApplicationAccountConfig({
|
||||
this.wallpaperUrl,
|
||||
this.wallpaperOpacity,
|
||||
});
|
||||
|
||||
static double _sanitizedOpacity(double? opacity) {
|
||||
if (opacity == null) return 1;
|
||||
if (opacity > 1 || opacity < 0) return 1;
|
||||
return opacity;
|
||||
}
|
||||
|
||||
factory ApplicationAccountConfig.fromJson(Map<String, dynamic> json) =>
|
||||
ApplicationAccountConfig(
|
||||
wallpaperUrl: json['wallpaper_url'] is String
|
||||
? Uri.tryParse(json['wallpaper_url'])
|
||||
: null,
|
||||
wallpaperOpacity:
|
||||
_sanitizedOpacity(json.tryGet<double>('wallpaper_opacity')),
|
||||
);
|
||||
|
||||
Map<String, dynamic> toJson() => {
|
||||
'wallpaper_url': wallpaperUrl?.toString(),
|
||||
'wallpaper_opacity': wallpaperOpacity,
|
||||
};
|
||||
}
|
|
@ -92,8 +92,8 @@ class Avatar extends StatelessWidget {
|
|||
? Colors.orange
|
||||
: Colors.grey;
|
||||
return Positioned(
|
||||
bottom: -4,
|
||||
right: -4,
|
||||
bottom: -3,
|
||||
right: -3,
|
||||
child: Container(
|
||||
width: 16,
|
||||
height: 16,
|
||||
|
@ -104,11 +104,15 @@ class Avatar extends StatelessWidget {
|
|||
),
|
||||
alignment: Alignment.center,
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
width: 10,
|
||||
height: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: dotColor,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
width: 1,
|
||||
color: Theme.of(context).colorScheme.background,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue