2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Improved design and UX for sticker editor

Browse source
This commit is contained in:
krille-chan 2025-11-20 18:13:06 +01:00
commit 1d92e07c47
No known key found for this signature in database
4 changed files with 180 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

5
lib/l10n/intl_en.arb
View file

@ -3452,5 +3452,8 @@
} }
}, },
"thread": "Thread", "thread": "Thread",
"backToMainChat": "Back to main chat" "backToMainChat": "Back to main chat",
"saveChanges": "Save changes",
"add": "Add",
"newSticker": "New sticker"
} }

74
lib/pages/settings_emotes/settings_emotes.dart
View file

@ -38,6 +38,7 @@ class EmotesSettingsController extends State<EmotesSettings> {
bool showSave = false; bool showSave = false;
TextEditingController newImageCodeController = TextEditingController(); TextEditingController newImageCodeController = TextEditingController();
ValueNotifier<ImagePackImageContent?> newImageController = ValueNotifier<ImagePackImageContent?> newImageController =
ValueNotifier<ImagePackImageContent?>(null); ValueNotifier<ImagePackImageContent?>(null);
@ -69,25 +70,25 @@ class EmotesSettingsController extends State<EmotesSettings> {
return; return;
} }
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
if (room != null) { final result = await showFutureLoadingDialog(
await showFutureLoadingDialog( context: context,
context: context, future: () => room != null
future: () => client.setRoomStateWithKey( ? client.setRoomStateWithKey(
room!.id, room!.id,
'im.ponies.room_emotes', 'im.ponies.room_emotes',
stateKey ?? '', stateKey ?? '',
pack!.toJson(), pack!.toJson(),
), )
); : client.setAccountData(
} else { client.userID!,
await showFutureLoadingDialog( 'im.ponies.user_emotes',
context: context, pack!.toJson(),
future: () => client.setAccountData( ),
client.userID!, );
'im.ponies.user_emotes', if (!result.isError) {
pack!.toJson(), setState(() {
), showSave = false;
); });
} }
} }
@ -172,6 +173,13 @@ class EmotesSettingsController extends State<EmotesSettings> {
bool get readonly => bool get readonly =>
room == null ? false : !(room!.canSendEvent('im.ponies.room_emotes')); room == null ? false : !(room!.canSendEvent('im.ponies.room_emotes'));
void resetAction() {
setState(() {
_pack = _getPack();
showSave = false;
});
}
void saveAction() async { void saveAction() async {
await save(context); await save(context);
setState(() { setState(() {
@ -227,24 +235,25 @@ class EmotesSettingsController extends State<EmotesSettings> {
); );
final pickedFile = result.firstOrNull; final pickedFile = result.firstOrNull;
if (pickedFile == null) return; if (pickedFile == null) return;
var file = MatrixImageFile( var file = MatrixImageFile(
bytes: await pickedFile.readAsBytes(), bytes: await pickedFile.readAsBytes(),
name: pickedFile.name, name: pickedFile.name,
); );
try {
file = (await file.generateThumbnail(
nativeImplementations: ClientManager.nativeImplementations,
))!;
} catch (e, s) {
Logs().w('Unable to create thumbnail', e, s);
}
final uploadResp = await showFutureLoadingDialog( final uploadResp = await showFutureLoadingDialog(
context: context, context: context,
future: () => Matrix.of(context).client.uploadContent( future: () async {
file.bytes, file = await file.generateThumbnail(
filename: file.name, nativeImplementations: ClientManager.nativeImplementations,
contentType: file.mimeType, ) ??
), file;
return Matrix.of(context).client.uploadContent(
file.bytes,
filename: file.name,
contentType: file.mimeType,
);
},
); );
if (uploadResp.error == null) { if (uploadResp.error == null) {
setState(() { setState(() {
@ -266,6 +275,9 @@ class EmotesSettingsController extends State<EmotesSettings> {
'url': uploadResp.result.toString(), 'url': uploadResp.result.toString(),
'info': info, 'info': info,
}); });
if (newImageCodeController.text.isEmpty) {
newImageCodeController.text = pickedFile.name.split('.').first;
}
}); });
} }
} }

257
lib/pages/settings_emotes/settings_emotes_view.dart
View file

@ -25,91 +25,92 @@ class EmotesSettingsView extends StatelessWidget {
final imageKeys = controller.pack!.images.keys.toList(); final imageKeys = controller.pack!.images.keys.toList();
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
leading: const Center(child: BackButton()), automaticallyImplyLeading: !controller.showSave,
title: Text(L10n.of(context).customEmojisAndStickers), title: controller.showSave
? TextButton(
onPressed: controller.resetAction,
child: Text(L10n.of(context).cancel),
)
: Text(L10n.of(context).customEmojisAndStickers),
actions: [ actions: [
PopupMenuButton<PopupMenuEmojiActions>( if (controller.showSave)
useRootNavigator: true, ElevatedButton(
onSelected: (value) { onPressed: () => controller.save(context),
switch (value) { style: ElevatedButton.styleFrom(
case PopupMenuEmojiActions.export: backgroundColor: theme.colorScheme.primary,
controller.exportAsZip(); foregroundColor: theme.colorScheme.onPrimary,
break;
case PopupMenuEmojiActions.import:
controller.importEmojiZip();
break;
}
},
enabled: !controller.readonly,
itemBuilder: (context) => [
PopupMenuItem(
value: PopupMenuEmojiActions.import,
child: Text(L10n.of(context).importFromZipFile),
), ),
PopupMenuItem( child: Text(L10n.of(context).saveChanges),
value: PopupMenuEmojiActions.export, )
child: Text(L10n.of(context).exportEmotePack), else
), PopupMenuButton<PopupMenuEmojiActions>(
], useRootNavigator: true,
), onSelected: (value) {
switch (value) {
case PopupMenuEmojiActions.export:
controller.exportAsZip();
break;
case PopupMenuEmojiActions.import:
controller.importEmojiZip();
break;
}
},
enabled: !controller.readonly,
itemBuilder: (context) => [
PopupMenuItem(
value: PopupMenuEmojiActions.import,
child: Text(L10n.of(context).importFromZipFile),
),
PopupMenuItem(
value: PopupMenuEmojiActions.export,
child: Text(L10n.of(context).exportEmotePack),
),
],
),
], ],
), ),
floatingActionButton: controller.showSave
? FloatingActionButton(
onPressed: controller.saveAction,
child: const Icon(Icons.save_outlined, color: Colors.white),
)
: null,
body: MaxWidthBody( body: MaxWidthBody(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
if (!controller.readonly) if (!controller.readonly)
Container( Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 8.0, vertical: 8.0,
), ),
child: ListTile( child: ListTile(
leading: Container( title: TextField(
width: 180.0, controller: controller.newImageCodeController,
height: 38, autocorrect: false,
padding: const EdgeInsets.symmetric(horizontal: 8), minLines: 1,
decoration: BoxDecoration( maxLines: 1,
borderRadius: const BorderRadius.all(Radius.circular(10)), readOnly: controller.showSave,
color: theme.secondaryHeaderColor, decoration: InputDecoration(
), hintText: L10n.of(context).newSticker,
child: TextField( prefixText: ': ',
controller: controller.newImageCodeController, suffixText: ':',
autocorrect: false, prefixStyle: TextStyle(
minLines: 1, color: theme.colorScheme.secondary,
maxLines: 1, fontWeight: FontWeight.bold,
decoration: InputDecoration(
hintText: L10n.of(context).emoteShortcode,
prefixText: ': ',
suffixText: ':',
prefixStyle: TextStyle(
color: theme.colorScheme.secondary,
fontWeight: FontWeight.bold,
),
suffixStyle: TextStyle(
color: theme.colorScheme.secondary,
fontWeight: FontWeight.bold,
),
border: InputBorder.none,
), ),
suffixStyle: TextStyle(
color: theme.colorScheme.secondary,
fontWeight: FontWeight.bold,
),
border: InputBorder.none,
), ),
), ),
title: _ImagePicker( leading: _ImagePicker(
readOnly: controller.showSave,
controller: controller.newImageController, controller: controller.newImageController,
onPressed: controller.imagePickerAction, onPressed: controller.imagePickerAction,
), ),
trailing: InkWell( trailing: TextButton(
onTap: controller.addImageAction, onPressed: controller.showSave ||
child: const Icon( controller.newImageController.value == null
Icons.add_outlined, ? null
color: Colors.green, : controller.addImageAction,
size: 32.0, child: Text(L10n.of(context).add),
),
), ),
), ),
), ),
@ -148,80 +149,65 @@ class EmotesSettingsView extends StatelessWidget {
final useShortCuts = final useShortCuts =
(PlatformInfos.isWeb || PlatformInfos.isDesktop); (PlatformInfos.isWeb || PlatformInfos.isDesktop);
return ListTile( return ListTile(
leading: Container( title: Shortcuts(
width: 180.0, shortcuts: !useShortCuts
height: 38, ? {}
padding: const EdgeInsets.symmetric(horizontal: 8), : {
decoration: BoxDecoration( LogicalKeySet(LogicalKeyboardKey.enter):
borderRadius: SubmitLineIntent(),
const BorderRadius.all(Radius.circular(10)), },
color: theme.secondaryHeaderColor, child: Actions(
), actions: !useShortCuts
child: Shortcuts(
shortcuts: !useShortCuts
? {} ? {}
: { : {
LogicalKeySet(LogicalKeyboardKey.enter): SubmitLineIntent: CallbackAction(
SubmitLineIntent(), onInvoke: (i) {
controller.submitImageAction(
imageCode,
textEditingController.text,
image,
textEditingController,
);
return null;
},
),
}, },
child: Actions( child: TextField(
actions: !useShortCuts readOnly: controller.readonly,
? {} controller: textEditingController,
: { autocorrect: false,
SubmitLineIntent: CallbackAction( minLines: 1,
onInvoke: (i) { maxLines: 1,
controller.submitImageAction( maxLength: 128,
imageCode, decoration: InputDecoration(
textEditingController.text, hintText: L10n.of(context).emoteShortcode,
image, prefixText: ': ',
textEditingController, suffixText: ':',
); counter: const SizedBox.shrink(),
return null; filled: false,
}, enabledBorder: const OutlineInputBorder(
), borderSide: BorderSide(
}, color: Colors.transparent,
child: TextField(
readOnly: controller.readonly,
controller: textEditingController,
autocorrect: false,
minLines: 1,
maxLines: 1,
decoration: InputDecoration(
hintText: L10n.of(context).emoteShortcode,
prefixText: ': ',
suffixText: ':',
prefixStyle: TextStyle(
color: theme.colorScheme.secondary,
fontWeight: FontWeight.bold,
), ),
suffixStyle: TextStyle(
color: theme.colorScheme.secondary,
fontWeight: FontWeight.bold,
),
border: InputBorder.none,
),
onSubmitted: (s) =>
controller.submitImageAction(
imageCode,
s,
image,
textEditingController,
), ),
), ),
onSubmitted: (s) => controller.submitImageAction(
imageCode,
s,
image,
textEditingController,
),
), ),
), ),
), ),
title: _EmoteImage(image.url), leading: _EmoteImage(image.url),
trailing: controller.readonly trailing: controller.readonly
? null ? null
: InkWell( : IconButton(
onTap: () => tooltip: L10n.of(context).delete,
onPressed: () =>
controller.removeImageAction(imageCode), controller.removeImageAction(imageCode),
child: const Icon( icon: const Icon(Icons.delete_outlined),
Icons.delete_outlined,
color: Colors.red,
size: 32.0,
),
), ),
); );
}, },
@ -256,10 +242,15 @@ class _EmoteImage extends StatelessWidget {
class _ImagePicker extends StatefulWidget { class _ImagePicker extends StatefulWidget {
final ValueNotifier<ImagePackImageContent?> controller; final ValueNotifier<ImagePackImageContent?> controller;
final bool readOnly;
final void Function(ValueNotifier<ImagePackImageContent?>) onPressed; final void Function(ValueNotifier<ImagePackImageContent?>) onPressed;
const _ImagePicker({required this.controller, required this.onPressed}); const _ImagePicker({
required this.controller,
this.readOnly = false,
required this.onPressed,
});
@override @override
_ImagePickerState createState() => _ImagePickerState(); _ImagePickerState createState() => _ImagePickerState();
@ -269,9 +260,11 @@ class _ImagePickerState extends State<_ImagePicker> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (widget.controller.value == null) { if (widget.controller.value == null) {
return ElevatedButton( return IconButton(
onPressed: () => widget.onPressed(widget.controller), tooltip: L10n.of(context).select,
child: Text(L10n.of(context).pickImage), onPressed:
widget.readOnly ? null : () => widget.onPressed(widget.controller),
icon: const Icon(Icons.upload_outlined),
); );
} else { } else {
return _EmoteImage(widget.controller.value!.url); return _EmoteImage(widget.controller.value!.url);

16
pubspec.lock
View file

@ -1096,10 +1096,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: meta name: meta
sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394" sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.17.0" version: "1.16.0"
mgrs_dart: mgrs_dart:
dependency: transitive dependency: transitive
description: description:
@ -1821,26 +1821,26 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: test name: test
sha256: "75906bf273541b676716d1ca7627a17e4c4070a3a16272b7a3dc7da3b9f3f6b7" sha256: "65e29d831719be0591f7b3b1a32a3cda258ec98c58c7b25f7b84241bc31215bb"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.26.3" version: "1.26.2"
test_api: test_api:
dependency: transitive dependency: transitive
description: description:
name: test_api name: test_api
sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55 sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.7.7" version: "0.7.6"
test_core: test_core:
dependency: transitive dependency: transitive
description: description:
name: test_core name: test_core
sha256: "0cc24b5ff94b38d2ae73e1eb43cc302b77964fbf67abad1e296025b78deb53d0" sha256: "80bf5a02b60af04b09e14f6fe68b921aad119493e26e490deaca5993fef1b05a"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.6.12" version: "0.6.11"
timezone: timezone:
dependency: transitive dependency: transitive
description: description: