Skip to content

Commit 193c824

Browse files
XazinXazin
authored
fix: mobile media cleanup (#6733)
1 parent 59eda5e commit 193c824

File tree

1 file changed

+107
-73
lines changed

1 file changed

+107
-73
lines changed

‎frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_media_cell_editor.dart‎

Lines changed: 107 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import 'package:appflowy/core/helpers/url_launcher.dart';
12
import 'package:appflowy/generated/flowy_svgs.g.dart';
23
import 'package:appflowy/generated/locale_keys.g.dart';
4+
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_media_upload.dart';
35
import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
46
import 'package:appflowy/mobile/presentation/widgets/flowy_option_tile.dart';
57
import 'package:appflowy/plugins/base/drag_handler.dart';
@@ -10,7 +12,9 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/file/file_
1012
import 'package:appflowy/plugins/document/presentation/editor_plugins/image/common.dart';
1113
import 'package:appflowy/plugins/document/presentation/editor_plugins/image/multi_image_block_component/image_render.dart';
1214
import 'package:appflowy/workspace/presentation/widgets/image_viewer/interactive_image_viewer.dart';
15+
import 'package:appflowy_backend/protobuf/flowy-database2/file_entities.pbenum.dart';
1316
import 'package:appflowy_backend/protobuf/flowy-database2/media_entities.pb.dart';
17+
import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
1418
import 'package:easy_localization/easy_localization.dart';
1519
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
1620
import 'package:flutter/material.dart';
@@ -25,10 +29,6 @@ class MobileMediaCellEditor extends StatelessWidget {
2529
@override
2630
Widget build(BuildContext context) {
2731
return Container(
28-
decoration: BoxDecoration(
29-
color: Theme.of(context).colorScheme.primaryContainer,
30-
borderRadius: BorderRadius.circular(12),
31-
),
3232
constraints: const BoxConstraints.tightFor(height: 420),
3333
child: BlocProvider.value(
3434
value: context.read<MediaCellBloc>(),
@@ -47,10 +47,28 @@ class MobileMediaCellEditor extends StatelessWidget {
4747
fontSize: 18,
4848
),
4949
),
50-
const Positioned(
50+
Positioned(
5151
top: 8,
5252
right: 18,
53-
child: FlowySvg(FlowySvgs.add_m, size: Size.square(28)),
53+
child: GestureDetector(
54+
onTap: () => showMobileBottomSheet(
55+
context,
56+
title: LocaleKeys.grid_media_addFileMobile.tr(),
57+
showHeader: true,
58+
showCloseButton: true,
59+
showDragHandle: true,
60+
builder: (dContext) => BlocProvider.value(
61+
value: context.read<MediaCellBloc>(),
62+
child: MobileMediaUploadSheetContent(
63+
dialogContext: dContext,
64+
),
65+
),
66+
),
67+
child: const FlowySvg(
68+
FlowySvgs.add_m,
69+
size: Size.square(28),
70+
),
71+
),
5472
),
5573
],
5674
),
@@ -60,33 +78,6 @@ class MobileMediaCellEditor extends StatelessWidget {
6078
child: SingleChildScrollView(
6179
child: Column(
6280
children: [
63-
// Padding(
64-
// padding: const EdgeInsets.all(8),
65-
// child: FlowyButton(
66-
// margin: const EdgeInsets.all(12),
67-
// onTap: () => showMobileBottomSheet(
68-
// context,
69-
// title: LocaleKeys.grid_media_addFileMobile.tr(),
70-
// showHeader: true,
71-
// showCloseButton: true,
72-
// showDragHandle: true,
73-
// builder: (dContext) =>
74-
// MobileMediaUploadSheetContent(
75-
// dialogContext: dContext,
76-
// ),
77-
// ),
78-
// text: const Row(
79-
// children: [
80-
// FlowySvg(
81-
// FlowySvgs.add_s,
82-
// size: Size.square(20),
83-
// ),
84-
// HSpace(8),
85-
// FlowyText('Add a file or image', fontSize: 15),
86-
// ],
87-
// ),
88-
// ),
89-
// ),
9081
if (state.files.isNotEmpty) const Divider(height: .5),
9182
...state.files.map(
9283
(file) => Padding(
@@ -115,27 +106,41 @@ class _FileItem extends StatelessWidget {
115106
Widget build(BuildContext context) {
116107
return DecoratedBox(
117108
decoration: BoxDecoration(
118-
color: Theme.of(context).colorScheme.secondaryContainer,
109+
color: Theme.of(context).scaffoldBackgroundColor,
119110
),
120111
child: ListTile(
112+
contentPadding: const EdgeInsets.symmetric(
113+
vertical: 12,
114+
horizontal: 16,
115+
),
121116
title: Row(
122-
crossAxisAlignment: CrossAxisAlignment.start,
117+
crossAxisAlignment: file.fileType == MediaFileTypePB.Image
118+
? CrossAxisAlignment.start
119+
: CrossAxisAlignment.center,
123120
children: [
124121
if (file.fileType != MediaFileTypePB.Image) ...[
125-
FlowySvg(file.fileType.icon, size: const Size.square(24)),
126-
const HSpace(12),
127-
Expanded(
128-
child: FlowyText(
129-
file.name,
130-
overflow: TextOverflow.ellipsis,
122+
Flexible(
123+
child: GestureDetector(
124+
onTap: () => afLaunchUrlString(file.url),
125+
child: Row(
126+
children: [
127+
FlowySvg(file.fileType.icon, size: const Size.square(24)),
128+
const HSpace(12),
129+
Expanded(
130+
child: FlowyText(
131+
file.name,
132+
overflow: TextOverflow.ellipsis,
133+
),
134+
),
135+
],
136+
),
131137
),
132138
),
133139
] else ...[
134140
Expanded(
135141
child: Container(
136-
margin: const EdgeInsets.symmetric(vertical: 12),
137142
alignment: Alignment.centerLeft,
138-
constraints: const BoxConstraints(maxHeight: 125),
143+
constraints: const BoxConstraints(maxHeight: 96),
139144
child: GestureDetector(
140145
onTap: () => openInteractiveViewer(context),
141146
child: ImageRender(
@@ -153,13 +158,14 @@ class _FileItem extends StatelessWidget {
153158
),
154159
],
155160
FlowyIconButton(
156-
width: 40,
161+
width: 20,
157162
icon: const FlowySvg(
158163
FlowySvgs.three_dots_s,
159164
size: Size.square(20),
160165
),
161166
onPressed: () => showMobileBottomSheet(
162167
context,
168+
backgroundColor: Theme.of(context).colorScheme.surface,
163169
showDragHandle: true,
164170
builder: (_) => BlocProvider.value(
165171
value: context.read<MediaCellBloc>(),
@@ -189,10 +195,10 @@ class _EditFileSheet extends StatefulWidget {
189195
final MediaFilePB file;
190196

191197
@override
192-
State<_EditFileSheet> createState() => __EditFileSheetState();
198+
State<_EditFileSheet> createState() => _EditFileSheetState();
193199
}
194200

195-
class __EditFileSheetState extends State<_EditFileSheet> {
201+
class _EditFileSheetState extends State<_EditFileSheet> {
196202
late final controller = TextEditingController(text: widget.file.name);
197203
Loading? loader;
198204

@@ -211,44 +217,72 @@ class __EditFileSheetState extends State<_EditFileSheet> {
211217
child: Column(
212218
children: [
213219
const VSpace(16),
214-
// _FileTextField(
215-
// file: file,
216-
// controller: controller,
217-
// onChanged: (name) =>
218-
// context.read<MediaCellBloc>().renameFile(file.id, name),
219-
// ),
220-
const VSpace(20),
221-
if (file.fileType == MediaFileTypePB.Image)
220+
if (file.fileType == MediaFileTypePB.Image) ...[
222221
FlowyOptionTile.text(
222+
showTopBorder: false,
223223
text: LocaleKeys.grid_media_expand.tr(),
224224
leftIcon: const FlowySvg(
225225
FlowySvgs.full_view_s,
226226
size: Size.square(20),
227227
),
228228
onTap: () => openInteractiveViewer(context),
229229
),
230-
FlowyOptionTile.text(
231-
text: file.fileType == MediaFileTypePB.Link
232-
? LocaleKeys.grid_media_expand.tr()
233-
: LocaleKeys.grid_media_download.tr(),
234-
leftIcon: FlowySvg(
235-
file.fileType == MediaFileTypePB.Link
236-
? FlowySvgs.m_link_m
237-
: FlowySvgs.import_s,
238-
size: const Size.square(20),
230+
FlowyOptionTile.text(
231+
showTopBorder: false,
232+
text: LocaleKeys.grid_media_setAsCover.tr(),
233+
leftIcon: const FlowySvg(
234+
FlowySvgs.cover_s,
235+
size: Size.square(20),
236+
),
237+
onTap: () => context.read<MediaCellBloc>().add(
238+
MediaCellEvent.setCover(
239+
RowCoverPB(
240+
data: file.url,
241+
uploadType: file.uploadType,
242+
coverType: CoverTypePB.FileCover,
243+
),
244+
),
245+
),
239246
),
240-
onTap: () async => downloadMediaFile(
241-
context,
242-
widget.file,
243-
userProfile: context.read<MediaCellBloc>().state.userProfile,
244-
onDownloadBegin: () {
245-
loader?.stop();
246-
loader = Loading(context);
247-
loader?.start();
248-
},
249-
onDownloadEnd: () => loader?.stop(),
247+
],
248+
FlowyOptionTile.text(
249+
showTopBorder: file.fileType == MediaFileTypePB.Image,
250+
text: LocaleKeys.grid_media_openInBrowser.tr(),
251+
leftIcon: const FlowySvg(
252+
FlowySvgs.open_in_browser_s,
253+
size: Size.square(20),
250254
),
255+
onTap: () => afLaunchUrlString(file.url),
251256
),
257+
// TODO(Mathias): Rename interaction need design
258+
// FlowyOptionTile.text(
259+
// text: LocaleKeys.grid_media_rename.tr(),
260+
// leftIcon: const FlowySvg(
261+
// FlowySvgs.rename_s,
262+
// size: Size.square(20),
263+
// ),
264+
// onTap: () {},
265+
// ),
266+
if (widget.file.uploadType == FileUploadTypePB.CloudFile) ...[
267+
FlowyOptionTile.text(
268+
onTap: () async => downloadMediaFile(
269+
context,
270+
file,
271+
userProfile: context.read<MediaCellBloc>().state.userProfile,
272+
onDownloadBegin: () {
273+
loader?.stop();
274+
loader = Loading(context);
275+
loader?.start();
276+
},
277+
onDownloadEnd: () => loader?.stop(),
278+
),
279+
text: LocaleKeys.button_download.tr(),
280+
leftIcon: const FlowySvg(
281+
FlowySvgs.save_as_s,
282+
size: Size.square(20),
283+
),
284+
),
285+
],
252286
FlowyOptionTile.text(
253287
text: LocaleKeys.grid_media_delete.tr(),
254288
textColor: Theme.of(context).colorScheme.error,

0 commit comments

Comments
 (0)