♻️ Refactored cloud file picker, stickers
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/models/sticker.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
import 'package:island/services/responsive.dart';
|
||||
import 'package:island/widgets/alert.dart';
|
||||
import 'package:island/widgets/app_scaffold.dart';
|
||||
import 'package:island/widgets/content/sheet.dart';
|
||||
import 'package:island/screens/creators/stickers/pack_detail.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
@@ -22,30 +24,50 @@ class StickersScreen extends HookConsumerWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final content = SliverStickerPacksList(pubName: pubName);
|
||||
|
||||
return AppScaffold(
|
||||
isNoBackground: false,
|
||||
appBar: AppBar(
|
||||
title: const Text('stickers').tr(),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
context
|
||||
.pushNamed(
|
||||
'creatorStickerPackNew',
|
||||
pathParameters: {'name': pubName},
|
||||
)
|
||||
.then((value) {
|
||||
if (value != null) {
|
||||
ref.invalidate(stickerPacksNotifierProvider(pubName));
|
||||
}
|
||||
});
|
||||
},
|
||||
icon: const Icon(Symbols.add_circle),
|
||||
),
|
||||
const Gap(8),
|
||||
],
|
||||
actions: [const Gap(8)],
|
||||
),
|
||||
body: SliverStickerPacksList(pubName: pubName),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: () {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => SheetScaffold(
|
||||
titleText: 'createStickerPack'.tr(),
|
||||
child: StickerPackForm(pubName: pubName),
|
||||
),
|
||||
).then((value) {
|
||||
if (value != null) {
|
||||
ref.invalidate(stickerPacksNotifierProvider(pubName));
|
||||
}
|
||||
});
|
||||
},
|
||||
child: const Icon(Symbols.add),
|
||||
),
|
||||
body:
|
||||
isWideScreen(context)
|
||||
? Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(maxWidth: 640),
|
||||
child: Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8),
|
||||
topRight: Radius.circular(8),
|
||||
),
|
||||
),
|
||||
margin: const EdgeInsets.only(top: 16),
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
)
|
||||
: content,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -71,13 +93,52 @@ class SliverStickerPacksList extends HookConsumerWidget {
|
||||
|
||||
final sticker = data.items[index];
|
||||
return ListTile(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
title: Text(sticker.name),
|
||||
subtitle: Text(sticker.description),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: () {
|
||||
context.pushNamed(
|
||||
'creatorStickerPackDetail',
|
||||
pathParameters: {'name': pubName, 'packId': sticker.id},
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => SheetScaffold(
|
||||
titleText: sticker.name,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.add_circle),
|
||||
onPressed: () {
|
||||
final id = sticker.id;
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => SheetScaffold(
|
||||
titleText: 'createSticker'.tr(),
|
||||
child: StickerForm(packId: id),
|
||||
),
|
||||
).then((value) {
|
||||
if (value != null) {
|
||||
ref.invalidate(
|
||||
stickerPackContentProvider(id),
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
StickerPackActionMenu(
|
||||
pubName: pubName,
|
||||
packId: sticker.id,
|
||||
iconShadow: Shadow(),
|
||||
),
|
||||
],
|
||||
child: StickerPackDetailContent(
|
||||
id: sticker.id,
|
||||
pubName: pubName,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -136,20 +197,10 @@ Future<SnStickerPack?> stickerPack(Ref ref, String? packId) async {
|
||||
return SnStickerPack.fromJson(resp.data);
|
||||
}
|
||||
|
||||
class NewStickerPacksScreen extends HookConsumerWidget {
|
||||
final String pubName;
|
||||
const NewStickerPacksScreen({super.key, required this.pubName});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return EditStickerPacksScreen(pubName: pubName);
|
||||
}
|
||||
}
|
||||
|
||||
class EditStickerPacksScreen extends HookConsumerWidget {
|
||||
class StickerPackForm extends HookConsumerWidget {
|
||||
final String pubName;
|
||||
final String? packId;
|
||||
const EditStickerPacksScreen({super.key, required this.pubName, this.packId});
|
||||
const StickerPackForm({super.key, required this.pubName, this.packId});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
@@ -188,7 +239,7 @@ class EditStickerPacksScreen extends HookConsumerWidget {
|
||||
options: Options(method: packId == null ? 'POST' : 'PATCH'),
|
||||
);
|
||||
if (!context.mounted) return;
|
||||
context.pop(SnStickerPack.fromJson(resp.data));
|
||||
Navigator.of(context).pop(SnStickerPack.fromJson(resp.data));
|
||||
} catch (err) {
|
||||
showErrorAlert(err);
|
||||
} finally {
|
||||
@@ -196,77 +247,76 @@ class EditStickerPacksScreen extends HookConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
return AppScaffold(
|
||||
isNoBackground: false,
|
||||
appBar: AppBar(
|
||||
title:
|
||||
Text(packId == null ? 'createStickerPack' : 'editStickerPack').tr(),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
spacing: 8,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
TextFormField(
|
||||
controller: nameController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'name'.tr(),
|
||||
border: const UnderlineInputBorder(),
|
||||
return Column(
|
||||
children: [
|
||||
Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: 16,
|
||||
children: [
|
||||
TextFormField(
|
||||
controller: nameController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'name'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'fieldCannotBeEmpty'.tr();
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
TextFormField(
|
||||
controller: descriptionController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'description'.tr(),
|
||||
border: const UnderlineInputBorder(),
|
||||
alignLabelWithHint: true,
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'fieldCannotBeEmpty'.tr();
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
TextFormField(
|
||||
controller: descriptionController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'description'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
),
|
||||
minLines: 3,
|
||||
maxLines: null,
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
alignLabelWithHint: true,
|
||||
),
|
||||
TextFormField(
|
||||
controller: prefixController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'stickerPackPrefix'.tr(),
|
||||
border: const UnderlineInputBorder(),
|
||||
helperText: 'deleteStickerHint'.tr(),
|
||||
minLines: 3,
|
||||
maxLines: null,
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
TextFormField(
|
||||
controller: prefixController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'stickerPackPrefix'.tr(),
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(12)),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'fieldCannotBeEmpty'.tr();
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
helperText: 'stickerPackPrefixHint'.tr(),
|
||||
),
|
||||
],
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'fieldCannotBeEmpty'.tr();
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onTapOutside:
|
||||
(_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Gap(12),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TextButton.icon(
|
||||
onPressed: submitting.value ? null : submit,
|
||||
icon: const Icon(Symbols.save),
|
||||
label: Text(packId == null ? 'create'.tr() : 'saveChanges'.tr()),
|
||||
),
|
||||
),
|
||||
const Gap(12),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TextButton.icon(
|
||||
onPressed: submitting.value ? null : submit,
|
||||
icon: const Icon(Symbols.save),
|
||||
label: Text(packId == null ? 'create'.tr() : 'saveChanges'.tr()),
|
||||
),
|
||||
],
|
||||
).padding(horizontal: 24, vertical: 16),
|
||||
);
|
||||
),
|
||||
],
|
||||
).padding(horizontal: 24, vertical: 16);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user