fix: padding issues (#47)

## Pull Request Description

This fixes a bunch of padding issues, and also improves padding in other
areas.

Issue Number: #29

---------

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
PartyDonut 2024-10-19 15:25:32 +02:00 committed by GitHub
parent f5343be4e7
commit 6669a06e53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 926 additions and 877 deletions

View file

@ -1,14 +1,16 @@
import 'package:ficonsax/ficonsax.dart';
import 'package:fladder/providers/collections_provider.dart';
import 'package:fladder/screens/shared/adaptive_dialog.dart';
import 'package:fladder/screens/shared/fladder_snackbar.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart'; import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/providers/collections_provider.dart';
import 'package:fladder/screens/shared/adaptive_dialog.dart';
import 'package:fladder/screens/shared/fladder_snackbar.dart';
import 'package:fladder/screens/shared/outlined_text_field.dart'; import 'package:fladder/screens/shared/outlined_text_field.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/alert_content.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
Future<void> addItemToCollection(BuildContext context, List<ItemBaseModel> item) { Future<void> addItemToCollection(BuildContext context, List<ItemBaseModel> item) {
return showDialogAdaptive( return showDialogAdaptive(
@ -40,71 +42,62 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final collectonOptions = ref.watch(provider); final collectonOptions = ref.watch(provider);
return Card( return ActionContent(
color: Theme.of(context).colorScheme.surface, title: Container(
child: Column( color: Theme.of(context).colorScheme.surface,
mainAxisSize: MainAxisSize.min, child: Column(
children: [ children: [
SizedBox(height: MediaQuery.paddingOf(context).top), Row(
Container( mainAxisAlignment: MainAxisAlignment.spaceBetween,
color: Theme.of(context).colorScheme.surface,
child: Column(
children: [ children: [
Padding( if (widget.items.length == 1)
padding: const EdgeInsets.symmetric(horizontal: 16), Text(
child: Row( 'Add to collection',
mainAxisAlignment: MainAxisAlignment.spaceBetween, style: Theme.of(context).textTheme.titleLarge,
children: [ )
if (widget.items.length == 1) else
Text( Text(
'Add to collection', 'Add ${widget.items.length} item(s) to collection',
style: Theme.of(context).textTheme.titleLarge, style: Theme.of(context).textTheme.titleLarge,
)
else
Text(
'Add ${widget.items.length} item(s) to collection',
style: Theme.of(context).textTheme.titleLarge,
),
IconButton(
onPressed: () => ref.read(provider.notifier).setItems(widget.items),
icon: const Icon(IconsaxOutline.refresh),
)
],
), ),
),
if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
Flexible(
child: OutlinedTextField(
label: 'New collection',
controller: controller,
onChanged: (value) => setState(() {}),
),
),
const SizedBox(width: 32),
IconButton( IconButton(
onPressed: controller.text.isNotEmpty onPressed: () => ref.read(provider.notifier).setItems(widget.items),
? () async { icon: const Icon(IconsaxOutline.refresh),
await ref.read(provider.notifier).addToNewCollection( )
name: controller.text,
);
setState(() => controller.text = '');
}
: null,
icon: const Icon(Icons.add_rounded)),
const SizedBox(width: 4),
], ],
), ),
if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
],
),
),
child: Column(
children: [
Row(
children: [
Flexible(
child: OutlinedTextField(
label: 'New collection',
controller: controller,
onChanged: (value) => setState(() {}),
),
),
const SizedBox(width: 32),
IconButton(
onPressed: controller.text.isNotEmpty
? () async {
await ref.read(provider.notifier).addToNewCollection(
name: controller.text,
);
setState(() => controller.text = '');
}
: null,
icon: const Icon(Icons.add_rounded)),
],
), ),
Flexible( Flexible(
child: ListView( child: ListView(
shrinkWrap: true, shrinkWrap: true,
padding: const EdgeInsets.symmetric(vertical: 12),
children: [ children: [
...collectonOptions.collections.entries.map( ...collectonOptions.collections.entries.map(
(e) { (e) {
@ -125,25 +118,37 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
}, },
); );
} else { } else {
return ListTile( return Container(
title: Text(e.key.name), margin: const EdgeInsets.all(8),
trailing: Row( child: Card(
mainAxisSize: MainAxisSize.min, elevation: 0,
children: [ child: Padding(
ElevatedButton( padding: const EdgeInsets.all(8),
onPressed: () async { child: Row(
final response = mainAxisSize: MainAxisSize.min,
await ref.read(provider.notifier).addToCollection(boxSet: e.key, add: true); children: [
if (context.mounted) { Expanded(
fladderSnackbar(context, child: Text(
title: response.isSuccessful e.key.name,
? "Added to ${e.key.name} collection" style: Theme.of(context).textTheme.bodyLarge,
: 'Unable to add to ${e.key.name} collection - (${response.statusCode}) - ${response.base.reasonPhrase}'); ),
} ),
}, ElevatedButton(
child: Icon(Icons.add_rounded, color: Theme.of(context).colorScheme.primary), onPressed: () async {
final response =
await ref.read(provider.notifier).addToCollection(boxSet: e.key, add: true);
if (context.mounted) {
fladderSnackbar(context,
title: response.isSuccessful
? "Added to ${e.key.name} collection"
: 'Unable to add to ${e.key.name} collection - (${response.statusCode}) - ${response.base.reasonPhrase}');
}
},
child: Icon(Icons.add_rounded, color: Theme.of(context).colorScheme.primary),
),
],
), ),
], ),
), ),
); );
} }
@ -152,23 +157,14 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
], ],
), ),
), ),
Container(
color: Theme.of(context).colorScheme.surface,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FilledButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(context.localized.close),
)
],
),
),
),
], ],
), ),
actions: [
FilledButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(context.localized.close),
)
],
); );
} }
} }

View file

@ -13,6 +13,7 @@ import 'package:fladder/screens/shared/focused_outlined_text_field.dart';
import 'package:fladder/screens/shared/media/external_urls.dart'; import 'package:fladder/screens/shared/media/external_urls.dart';
import 'package:fladder/util/localization_helper.dart'; import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/util/string_extensions.dart'; import 'package:fladder/util/string_extensions.dart';
import 'package:fladder/widgets/shared/alert_content.dart';
Future<void> showIdentifyScreen(BuildContext context, ItemBaseModel item) async { Future<void> showIdentifyScreen(BuildContext context, ItemBaseModel item) async {
return showDialogAdaptive( return showDialogAdaptive(
@ -50,215 +51,181 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
final state = ref.watch(provider); final state = ref.watch(provider);
final posters = state.results; final posters = state.results;
final processing = state.processing; final processing = state.processing;
return MediaQuery.removePadding( return ActionContent(
context: context, showDividers: false,
child: Card( title: Container(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surface,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Container( Row(
color: Theme.of(context).colorScheme.surface, children: [
child: Column( Text(
mainAxisSize: MainAxisSize.min, widget.item.detailedName(context) ?? widget.item.name,
children: [ style: Theme.of(context).textTheme.titleLarge,
SizedBox(height: MediaQuery.paddingOf(context).top),
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Text(
widget.item.detailedName(context) ?? widget.item.name,
style: Theme.of(context).textTheme.titleLarge,
),
const Spacer(),
IconButton(
onPressed: () async => await ref.read(provider.notifier).fetchInformation(),
icon: const Icon(IconsaxOutline.refresh)),
],
),
),
TabBar(
isScrollable: true,
controller: tabController,
onTap: (value) {
setState(() {
currentTab = value;
});
},
tabs: [
Tab(
text: context.localized.search,
),
Tab(
text: context.localized.result,
)
],
)
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16),
child: TabBarView(
controller: tabController,
children: [
inputFields(state),
if (posters.isEmpty)
Center(
child: processing
? const CircularProgressIndicator.adaptive(strokeCap: StrokeCap.round)
: Text(context.localized.noResults),
)
else
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(context.localized.replaceAllImages),
const SizedBox(width: 16),
Switch.adaptive(
value: state.replaceAllImages,
onChanged: (value) {
ref
.read(provider.notifier)
.update((state) => state.copyWith(replaceAllImages: value));
},
),
],
),
Flexible(
child: ListView(
shrinkWrap: true,
children: posters
.map((result) => ListTile(
title: Row(
children: [
SizedBox(
width: 75,
child: Card(
child: CachedNetworkImage(
imageUrl: result.imageUrl ?? "",
errorWidget: (context, url, error) => SizedBox(
height: 75,
child: Card(
child: Center(
child: Text(result.name?.getInitials() ?? ""),
),
),
),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${result.name ?? ""}${result.productionYear != null ? "(${result.productionYear})" : ""}"),
Opacity(
opacity: 0.65,
child: Text(result.providerIds?.keys.join(',') ?? ""))
],
),
),
Tooltip(
message: context.localized.openWebLink,
child: IconButton(
onPressed: () {
final providerKeyEntry = result.providerIds?.entries.first;
final providerKey = providerKeyEntry?.key;
final providerValue = providerKeyEntry?.value;
final externalId = state.externalIds
.firstWhereOrNull((element) => element.key == providerKey)
?.urlFormatString;
final url =
externalId?.replaceAll("{0}", providerValue?.toString() ?? "");
launchUrl(context, url ?? "");
},
icon: const Icon(Icons.launch_rounded)),
),
Tooltip(
message: "Select result",
child: IconButton(
onPressed: !processing
? () async {
final response =
await ref.read(provider.notifier).setIdentity(result);
if (response?.isSuccessful == true) {
fladderSnackbar(context,
title:
context.localized.setIdentityTo(result.name ?? ""));
} else {
fladderSnackbarResponse(context, response,
altTitle: context.localized.somethingWentWrong);
}
Navigator.of(context).pop();
}
: null,
icon: const Icon(Icons.save_alt_rounded),
),
)
],
),
))
.toList(),
),
),
],
)
],
), ),
), const Spacer(),
IconButton(
onPressed: () async => await ref.read(provider.notifier).fetchInformation(),
icon: const Icon(IconsaxOutline.refresh)),
],
), ),
Container( TabBar(
color: Theme.of(context).colorScheme.surface, isScrollable: true,
child: Padding( controller: tabController,
padding: const EdgeInsets.all(16), onTap: (value) {
child: Row( setState(() {
mainAxisSize: MainAxisSize.max, currentTab = value;
mainAxisAlignment: MainAxisAlignment.end, });
children: [ },
ElevatedButton(onPressed: () => Navigator.of(context).pop(), child: Text(context.localized.cancel)), tabs: [
const SizedBox(width: 16), Tab(
FilledButton( text: context.localized.search,
onPressed: !processing
? () async {
await ref.read(provider.notifier).remoteSearch();
tabController.animateTo(1);
}
: null,
child: processing
? SizedBox(
width: 21,
height: 21,
child: CircularProgressIndicator.adaptive(
backgroundColor: Theme.of(context).colorScheme.onPrimary, strokeCap: StrokeCap.round),
)
: Text(context.localized.search),
),
SizedBox(height: MediaQuery.paddingOf(context).bottom),
],
), ),
), Tab(
), text: context.localized.result,
)
],
)
], ],
), ),
), ),
child: TabBarView(
controller: tabController,
children: [
inputFields(state),
if (posters.isEmpty)
Center(
child: processing
? const CircularProgressIndicator.adaptive(strokeCap: StrokeCap.round)
: Text(context.localized.noResults),
)
else
Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(context.localized.replaceAllImages),
const SizedBox(width: 16),
Switch.adaptive(
value: state.replaceAllImages,
onChanged: (value) {
ref.read(provider.notifier).update((state) => state.copyWith(replaceAllImages: value));
},
),
],
),
Flexible(
child: ListView(
shrinkWrap: true,
children: posters
.map((result) => ListTile(
title: Row(
children: [
SizedBox(
width: 75,
child: Card(
child: CachedNetworkImage(
imageUrl: result.imageUrl ?? "",
errorWidget: (context, url, error) => SizedBox(
height: 75,
child: Card(
child: Center(
child: Text(result.name?.getInitials() ?? ""),
),
),
),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${result.name ?? ""}${result.productionYear != null ? "(${result.productionYear})" : ""}"),
Opacity(opacity: 0.65, child: Text(result.providerIds?.keys.join(',') ?? ""))
],
),
),
Tooltip(
message: context.localized.openWebLink,
child: IconButton(
onPressed: () {
final providerKeyEntry = result.providerIds?.entries.first;
final providerKey = providerKeyEntry?.key;
final providerValue = providerKeyEntry?.value;
final externalId = state.externalIds
.firstWhereOrNull((element) => element.key == providerKey)
?.urlFormatString;
final url = externalId?.replaceAll("{0}", providerValue?.toString() ?? "");
launchUrl(context, url ?? "");
},
icon: const Icon(Icons.launch_rounded)),
),
Tooltip(
message: "Select result",
child: IconButton(
onPressed: !processing
? () async {
final response = await ref.read(provider.notifier).setIdentity(result);
if (response?.isSuccessful == true) {
fladderSnackbar(context,
title: context.localized.setIdentityTo(result.name ?? ""));
} else {
fladderSnackbarResponse(context, response,
altTitle: context.localized.somethingWentWrong);
}
Navigator.of(context).pop();
}
: null,
icon: const Icon(Icons.save_alt_rounded),
),
)
],
),
))
.toList(),
),
),
],
)
],
),
actions: [
ElevatedButton(onPressed: () => Navigator.of(context).pop(), child: Text(context.localized.cancel)),
const SizedBox(width: 16),
FilledButton(
onPressed: !processing
? () async {
await ref.read(provider.notifier).remoteSearch();
tabController.animateTo(1);
}
: null,
child: processing
? SizedBox(
width: 21,
height: 21,
child: CircularProgressIndicator.adaptive(
backgroundColor: Theme.of(context).colorScheme.onPrimary, strokeCap: StrokeCap.round),
)
: Text(context.localized.search),
),
],
); );
} }
ListView inputFields(IdentifyModel state) { ListView inputFields(IdentifyModel state) {
return ListView( return ListView(
shrinkWrap: true, shrinkWrap: true,
padding: EdgeInsets.zero,
children: [ children: [
Row( Row(
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,

View file

@ -1,3 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/jellyfin/enum_models.dart'; import 'package:fladder/jellyfin/enum_models.dart';
import 'package:fladder/providers/user_provider.dart'; import 'package:fladder/providers/user_provider.dart';
import 'package:fladder/screens/settings/settings_list_tile.dart'; import 'package:fladder/screens/settings/settings_list_tile.dart';
@ -5,8 +9,6 @@ import 'package:fladder/screens/shared/fladder_snackbar.dart';
import 'package:fladder/util/adaptive_layout.dart'; import 'package:fladder/util/adaptive_layout.dart';
import 'package:fladder/util/localization_helper.dart'; import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/enum_selection.dart'; import 'package:fladder/widgets/shared/enum_selection.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
Future<void> showRefreshPopup(BuildContext context, String itemId, String itemName) async { Future<void> showRefreshPopup(BuildContext context, String itemId, String itemName) async {
return showDialog( return showDialog(
@ -60,18 +62,22 @@ class _RefreshPopupDialogState extends ConsumerState<RefreshPopupDialog> {
), ),
), ),
), ),
const Divider(),
const SizedBox(height: 16), const SizedBox(height: 16),
EnumBox( Padding(
current: refreshMode.label(context), padding: const EdgeInsets.symmetric(horizontal: 16),
itemBuilder: (context) => MetadataRefresh.values child: EnumBox(
.map((value) => PopupMenuItem( current: refreshMode.label(context),
value: value, itemBuilder: (context) => MetadataRefresh.values
child: Text(value.label(context)), .map((value) => PopupMenuItem(
onTap: () => setState(() { value: value,
refreshMode = value; child: Text(value.label(context)),
}), onTap: () => setState(() {
)) refreshMode = value;
.toList(), }),
))
.toList(),
),
), ),
if (refreshMode != MetadataRefresh.defaultRefresh) if (refreshMode != MetadataRefresh.defaultRefresh)
SettingsListTile( SettingsListTile(
@ -87,7 +93,7 @@ class _RefreshPopupDialogState extends ConsumerState<RefreshPopupDialog> {
style: Theme.of(context).textTheme.bodyLarge, style: Theme.of(context).textTheme.bodyLarge,
), ),
), ),
const SizedBox(height: 16), const Divider(),
Container( Container(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surface,
child: Padding( child: Padding(

View file

@ -1,14 +1,16 @@
import 'package:ficonsax/ficonsax.dart';
import 'package:fladder/providers/playlist_provider.dart';
import 'package:fladder/screens/shared/adaptive_dialog.dart';
import 'package:fladder/screens/shared/fladder_snackbar.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart'; import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/providers/playlist_provider.dart';
import 'package:fladder/screens/shared/adaptive_dialog.dart';
import 'package:fladder/screens/shared/fladder_snackbar.dart';
import 'package:fladder/screens/shared/outlined_text_field.dart'; import 'package:fladder/screens/shared/outlined_text_field.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/alert_content.dart';
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
Future<void> addItemToPlaylist(BuildContext context, List<ItemBaseModel> item) { Future<void> addItemToPlaylist(BuildContext context, List<ItemBaseModel> item) {
return showDialogAdaptive(context: context, builder: (context) => AddToPlaylist(items: item)); return showDialogAdaptive(context: context, builder: (context) => AddToPlaylist(items: item));
@ -35,125 +37,117 @@ class _AddToPlaylistState extends ConsumerState<AddToPlaylist> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final collectonOptions = ref.watch(provider); final collectonOptions = ref.watch(provider);
return Card( return ActionContent(
color: Theme.of(context).colorScheme.surface, title: Container(
child: Column( color: Theme.of(context).colorScheme.surface,
mainAxisSize: MainAxisSize.min, child: Column(
children: [ children: [
SizedBox(height: MediaQuery.paddingOf(context).top), Row(
Container( mainAxisAlignment: MainAxisAlignment.spaceBetween,
color: Theme.of(context).colorScheme.surface,
child: Column(
children: [ children: [
Padding( if (widget.items.length == 1)
padding: const EdgeInsets.symmetric(horizontal: 16), Text(
child: Row( 'Add to collection',
mainAxisAlignment: MainAxisAlignment.spaceBetween, style: Theme.of(context).textTheme.titleLarge,
children: [ )
if (widget.items.length == 1) else
Text( Text(
'Add to collection', 'Add ${widget.items.length} item(s) to collection',
style: Theme.of(context).textTheme.titleLarge, style: Theme.of(context).textTheme.titleLarge,
)
else
Text(
'Add ${widget.items.length} item(s) to collection',
style: Theme.of(context).textTheme.titleLarge,
),
IconButton(
onPressed: () => ref.read(provider.notifier).setItems(widget.items),
icon: const Icon(IconsaxOutline.refresh),
)
],
), ),
),
if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
Flexible(
child: OutlinedTextField(
label: 'New Playlist',
controller: controller,
onChanged: (value) => setState(() {}),
),
),
const SizedBox(width: 32),
IconButton( IconButton(
onPressed: controller.text.isNotEmpty onPressed: () => ref.read(provider.notifier).setItems(widget.items),
? () async { icon: const Icon(IconsaxOutline.refresh),
final response = await ref.read(provider.notifier).addToNewPlaylist( )
name: controller.text,
);
if (context.mounted) {
fladderSnackbar(context,
title: response.isSuccessful
? "Added to new ${controller.text} playlist"
: 'Unable to create new playlist - (${response.statusCode}) - ${response.base.reasonPhrase}');
}
setState(() => controller.text = '');
}
: null,
icon: const Icon(Icons.add_rounded)),
const SizedBox(width: 8),
], ],
), ),
if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
],
),
),
child: Column(
children: [
Row(
children: [
Flexible(
child: OutlinedTextField(
label: 'New Playlist',
controller: controller,
onChanged: (value) => setState(() {}),
),
),
const SizedBox(width: 32),
IconButton(
onPressed: controller.text.isNotEmpty
? () async {
final response = await ref.read(provider.notifier).addToNewPlaylist(
name: controller.text,
);
if (context.mounted) {
fladderSnackbar(context,
title: response.isSuccessful
? "Added to new ${controller.text} playlist"
: 'Unable to create new playlist - (${response.statusCode}) - ${response.base.reasonPhrase}');
}
setState(() => controller.text = '');
}
: null,
icon: const Icon(Icons.add_rounded)),
],
), ),
Flexible( Flexible(
child: ListView( child: ListView(
shrinkWrap: true, shrinkWrap: true,
padding: const EdgeInsets.symmetric(vertical: 12),
children: [ children: [
...collectonOptions.collections.entries.map( ...collectonOptions.collections.entries.map(
(e) { (e) {
return ListTile( return Container(
title: Text(e.key.name), margin: const EdgeInsets.symmetric(vertical: 8),
trailing: Row( child: Card(
mainAxisSize: MainAxisSize.min, elevation: 0,
children: [ child: Padding(
IconButton.filledTonal( padding: const EdgeInsets.all(10),
style: IconButton.styleFrom( child: Row(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))), mainAxisSize: MainAxisSize.min,
onPressed: () async { children: [
final response = await ref.read(provider.notifier).addToPlaylist(playlist: e.key); Expanded(
if (context.mounted) { child: Text(
fladderSnackbar(context, e.key.name,
title: response.isSuccessful style: Theme.of(context).textTheme.bodyLarge,
? "Added to ${e.key.name} playlist" )),
: 'Unable to add to playlist - (${response.statusCode}) - ${response.base.reasonPhrase}'); IconButton.filledTonal(
} style: IconButton.styleFrom(
}, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
icon: Icon(Icons.add_rounded, color: Theme.of(context).colorScheme.primary), onPressed: () async {
final response = await ref.read(provider.notifier).addToPlaylist(playlist: e.key);
if (context.mounted) {
fladderSnackbar(context,
title: response.isSuccessful
? "Added to ${e.key.name} playlist"
: 'Unable to add to playlist - (${response.statusCode}) - ${response.base.reasonPhrase}');
}
},
icon: Icon(Icons.add_rounded, color: Theme.of(context).colorScheme.primary),
),
],
), ),
], ),
), ),
); );
}, },
), ),
const SizedBox(height: 8),
], ],
), ),
), ),
Container(
color: Theme.of(context).colorScheme.surface,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FilledButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(context.localized.close),
)
],
),
),
),
], ],
), ),
actions: [
FilledButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(context.localized.close),
)
],
); );
} }
} }

View file

@ -31,41 +31,44 @@ class SettingsListTile extends StatelessWidget {
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(8), bottomLeft: Radius.circular(8))), borderRadius: BorderRadius.only(topLeft: Radius.circular(8), bottomLeft: Radius.circular(8))),
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
child: ListTile( child: MediaQuery(
minVerticalPadding: 12, data: const MediaQueryData(padding: EdgeInsets.zero),
minLeadingWidth: 16, child: ListTile(
minTileHeight: 75, minVerticalPadding: 12,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), minLeadingWidth: 16,
horizontalTitleGap: 0, minTileHeight: 75,
titleAlignment: ListTileTitleAlignment.center, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
contentPadding: const EdgeInsets.only(right: 12), horizontalTitleGap: 0,
leading: (suffix ?? iconWidget) != null titleAlignment: ListTileTitleAlignment.center,
? Padding( contentPadding: const EdgeInsets.only(right: 12, left: 2),
padding: const EdgeInsets.only(left: 8.0, right: 16.0), leading: (suffix ?? iconWidget) != null
child: AnimatedContainer( ? Padding(
duration: const Duration(milliseconds: 125), padding: const EdgeInsets.only(left: 8.0, right: 16.0),
decoration: BoxDecoration( child: AnimatedContainer(
color: Theme.of(context).colorScheme.primaryContainer.withOpacity(selected ? 1 : 0), duration: const Duration(milliseconds: 125),
borderRadius: BorderRadius.circular(selected ? 5 : 20), decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer.withOpacity(selected ? 1 : 0),
borderRadius: BorderRadius.circular(selected ? 5 : 20),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12),
child: (suffix ?? iconWidget),
),
), ),
child: Padding( )
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12), : suffix ?? const SizedBox(),
child: (suffix ?? iconWidget), title: label,
), titleTextStyle: Theme.of(context).textTheme.titleLarge,
), trailing: Padding(
) padding: const EdgeInsets.only(left: 16),
: suffix ?? const SizedBox(), child: trailing,
title: label, ),
titleTextStyle: Theme.of(context).textTheme.titleLarge, selected: selected,
trailing: Padding( textColor: contentColor,
padding: const EdgeInsets.only(left: 16), iconColor: contentColor,
child: trailing, subtitle: subLabel,
onTap: onTap,
), ),
selected: selected,
textColor: contentColor,
iconColor: contentColor,
subtitle: subLabel,
onTap: onTap,
), ),
); );
} }

View file

@ -43,11 +43,11 @@ class SettingsScaffold extends ConsumerWidget {
backgroundColor: Theme.of(context).scaffoldBackgroundColor, backgroundColor: Theme.of(context).scaffoldBackgroundColor,
leading: context.router.backButton(), leading: context.router.backButton(),
flexibleSpace: FlexibleSpaceBar( flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16) titlePadding: const EdgeInsets.symmetric(horizontal: 16)
.add(EdgeInsets.only(left: padding.left, right: padding.right)), .add(EdgeInsets.only(left: padding.left, right: padding.right)),
title: Row( title: Row(
children: [ children: [
Text(label, style: Theme.of(context).textTheme.headlineSmall), Text(label, style: Theme.of(context).textTheme.headlineLarge),
const Spacer(), const Spacer(),
if (showUserIcon) if (showUserIcon)
SizedBox.fromSize( SizedBox.fromSize(
@ -73,8 +73,11 @@ class SettingsScaffold extends ConsumerWidget {
style: Theme.of(context).textTheme.headlineLarge), style: Theme.of(context).textTheme.headlineLarge),
), ),
), ),
SliverList( SliverPadding(
delegate: SliverChildListDelegate(items), padding: MediaQuery.paddingOf(context),
sliver: SliverList(
delegate: SliverChildListDelegate(items),
),
), ),
if (bottomActions.isEmpty) if (bottomActions.isEmpty)
const SliverToBoxAdapter(child: SizedBox(height: kBottomNavigationBarHeight + 40)), const SliverToBoxAdapter(child: SizedBox(height: kBottomNavigationBarHeight + 40)),

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
class SettingsLabelDivider extends ConsumerWidget { class SettingsLabelDivider extends ConsumerWidget {
@ -8,11 +9,7 @@ class SettingsLabelDivider extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8).add( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
EdgeInsets.symmetric(
horizontal: MediaQuery.paddingOf(context).horizontal,
),
),
child: Text( child: Text(
label, label,
style: Theme.of(context).textTheme.titleMedium?.copyWith( style: Theme.of(context).textTheme.titleMedium?.copyWith(

View file

@ -1,12 +1,13 @@
import 'package:fladder/util/adaptive_layout.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:fladder/util/adaptive_layout.dart';
Future<void> showDialogAdaptive( Future<void> showDialogAdaptive(
{required BuildContext context, bool useSafeArea = true, required Widget Function(BuildContext context) builder}) { {required BuildContext context, required Widget Function(BuildContext context) builder}) {
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) { if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) {
return showDialog( return showDialog(
context: context, context: context,
useSafeArea: useSafeArea, useSafeArea: false,
builder: (context) => Dialog( builder: (context) => Dialog(
child: builder(context), child: builder(context),
), ),
@ -14,7 +15,7 @@ Future<void> showDialogAdaptive(
} else { } else {
return showDialog( return showDialog(
context: context, context: context,
useSafeArea: useSafeArea, useSafeArea: false,
builder: (context) => Dialog.fullscreen( builder: (context) => Dialog.fullscreen(
child: builder(context), child: builder(context),
), ),

View file

@ -9,7 +9,7 @@ class DefaultTitleBar extends ConsumerStatefulWidget {
final String? label; final String? label;
final double? height; final double? height;
final Brightness? brightness; final Brightness? brightness;
const DefaultTitleBar({this.height = 35, this.label, this.brightness, super.key}); const DefaultTitleBar({this.height = defaultTitleBarHeight, this.label, this.brightness, super.key});
@override @override
ConsumerState<ConsumerStatefulWidget> createState() => _DefaultTitleBarState(); ConsumerState<ConsumerStatefulWidget> createState() => _DefaultTitleBarState();
@ -161,7 +161,13 @@ class _DefaultTitleBarState extends ConsumerState<DefaultTitleBar> with WindowLi
), ),
], ],
), ),
TargetPlatform.macOS => null, TargetPlatform.macOS => const Row(
children: [
Spacer(),
Text("Fladder"),
SizedBox(width: 16),
],
),
_ => Text(widget.label ?? "Fladder"), _ => Text(widget.label ?? "Fladder"),
}, },
); );

View file

@ -140,85 +140,87 @@ class _DetailScaffoldState extends ConsumerState<DetailScaffold> {
//Top row buttons //Top row buttons
IconTheme( IconTheme(
data: IconThemeData(color: Theme.of(context).colorScheme.onSurface), data: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
child: Transform.translate( child: Padding(
offset: const Offset(0, kToolbarHeight), padding: MediaQuery.paddingOf(context).add(
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
child: Row( child: Row(
children: [ children: [
Padding( IconButton.filledTonal(
padding: const EdgeInsets.only(left: 16), style: IconButton.styleFrom(
child: IconButton.filledTonal( backgroundColor: backGroundColor,
style: IconButton.styleFrom( ),
backgroundColor: backGroundColor, onPressed: () => context.router.popBack(),
), icon: Padding(
onPressed: () => context.router.popBack(), padding: EdgeInsets.all(AdaptiveLayout.of(context).inputDevice == InputDevice.pointer ? 0 : 4),
icon: Padding( child: const Icon(IconsaxOutline.arrow_left_2),
padding:
EdgeInsets.all(AdaptiveLayout.of(context).inputDevice == InputDevice.pointer ? 0 : 4),
child: const Icon(IconsaxOutline.arrow_left_2),
),
), ),
), ),
const Spacer(), const Spacer(),
Padding( AnimatedSize(
padding: const EdgeInsets.only(right: 16), duration: const Duration(milliseconds: 250),
child: AnimatedSize( child: Container(
duration: const Duration(milliseconds: 250), decoration:
child: Container( BoxDecoration(color: backGroundColor, borderRadius: FladderTheme.defaultShape.borderRadius),
decoration: BoxDecoration( child: Row(
color: backGroundColor, borderRadius: FladderTheme.defaultShape.borderRadius), mainAxisSize: MainAxisSize.min,
child: Row( children: [
mainAxisSize: MainAxisSize.min, if (widget.item != null) ...[
children: [ Builder(
if (widget.item != null) ...[ builder: (context) {
Builder( final newActions = widget.actions?.call(context);
builder: (context) { if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) {
final newActions = widget.actions?.call(context); return PopupMenuButton(
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) { tooltip: context.localized.moreOptions,
return PopupMenuButton( enabled: newActions?.isNotEmpty == true,
tooltip: context.localized.moreOptions, icon: Icon(widget.item!.type.icon),
enabled: newActions?.isNotEmpty == true, itemBuilder: (context) => newActions?.popupMenuItems(useIcons: true) ?? [],
icon: Icon(widget.item!.type.icon), );
itemBuilder: (context) => newActions?.popupMenuItems(useIcons: true) ?? [], } else {
); return IconButton(
} else { onPressed: () => showBottomSheetPill(
return IconButton( context: context,
onPressed: () => showBottomSheetPill( content: (context, scrollController) => ListView(
context: context, controller: scrollController,
content: (context, scrollController) => ListView( shrinkWrap: true,
controller: scrollController, children: newActions?.listTileItems(context, useIcons: true) ?? [],
shrinkWrap: true,
children: newActions?.listTileItems(context, useIcons: true) ?? [],
),
), ),
icon: Icon( ),
widget.item!.type.icon, icon: Icon(
), widget.item!.type.icon,
); ),
} );
}, }
), },
],
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer)
Builder(
builder: (context) => Tooltip(
message: context.localized.refresh,
child: IconButton(
onPressed: () => context.refreshData(),
icon: const Icon(IconsaxOutline.refresh),
),
),
),
if (AdaptiveLayout.of(context).size == ScreenLayout.single)
const SizedBox(height: 30, width: 30, child: SettingsUserIcon()),
Tooltip(
message: context.localized.home,
child: IconButton(
onPressed: () => context.router.navigate(const DashboardRoute()),
icon: const Icon(IconsaxOutline.home),
),
), ),
], ],
), if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer)
Builder(
builder: (context) => Tooltip(
message: context.localized.refresh,
child: IconButton(
onPressed: () => context.refreshData(),
icon: const Icon(IconsaxOutline.refresh),
),
),
),
if (AdaptiveLayout.of(context).size == ScreenLayout.single)
Container(
margin: const EdgeInsets.symmetric(horizontal: 6),
child: const SizedBox(
height: 30,
width: 30,
child: SettingsUserIcon(),
),
),
Tooltip(
message: context.localized.home,
child: IconButton(
onPressed: () => context.router.navigate(const DashboardRoute()),
icon: const Icon(IconsaxOutline.home),
),
),
],
), ),
), ),
), ),

View file

@ -1,5 +1,9 @@
import 'package:flutter/material.dart';
import 'package:background_downloader/background_downloader.dart'; import 'package:background_downloader/background_downloader.dart';
import 'package:ficonsax/ficonsax.dart'; import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/items/episode_model.dart'; import 'package:fladder/models/items/episode_model.dart';
import 'package:fladder/models/syncing/sync_item.dart'; import 'package:fladder/models/syncing/sync_item.dart';
import 'package:fladder/providers/settings/client_settings_provider.dart'; import 'package:fladder/providers/settings/client_settings_provider.dart';
@ -17,9 +21,8 @@ import 'package:fladder/util/adaptive_layout.dart';
import 'package:fladder/util/list_padding.dart'; import 'package:fladder/util/list_padding.dart';
import 'package:fladder/util/localization_helper.dart'; import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/util/size_formatting.dart'; import 'package:fladder/util/size_formatting.dart';
import 'package:fladder/widgets/shared/alert_content.dart';
import 'package:fladder/widgets/shared/icon_button_await.dart'; import 'package:fladder/widgets/shared/icon_button_await.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
Future<void> showSyncItemDetails( Future<void> showSyncItemDetails(
BuildContext context, BuildContext context,
@ -28,7 +31,6 @@ Future<void> showSyncItemDetails(
) { ) {
return showDialogAdaptive( return showDialogAdaptive(
context: context, context: context,
useSafeArea: false,
builder: (context) => SyncItemDetails( builder: (context) => SyncItemDetails(
syncItem: syncItem, syncItem: syncItem,
), ),
@ -54,144 +56,138 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
final downloadTask = ref.read(downloadTasksProvider(syncedItem.id)); final downloadTask = ref.read(downloadTasksProvider(syncedItem.id));
return SyncMarkedForDelete( return SyncMarkedForDelete(
syncedItem: syncedItem, syncedItem: syncedItem,
child: SafeArea( child: ActionContent(
child: Padding( title: Row(
padding: const EdgeInsets.all(16.0), mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Card(
elevation: 1,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Text(baseItem?.type.label(context) ?? ""),
)),
Text(
context.localized.navigationSync,
style: Theme.of(context).textTheme.titleMedium,
),
IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(IconsaxBold.close_circle),
)
],
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Card(
elevation: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(baseItem?.type.label(context) ?? ""),
)),
Text(
context.localized.navigationSync,
style: Theme.of(context).textTheme.titleMedium,
),
IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(IconsaxBold.close_circle),
)
],
),
if (baseItem != null) ...{ if (baseItem != null) ...{
const Divider(), Row(
Padding( mainAxisSize: MainAxisSize.min,
padding: const EdgeInsets.symmetric(vertical: 8), crossAxisAlignment: CrossAxisAlignment.center,
child: Row( children: [
mainAxisSize: MainAxisSize.min, SizedBox(
crossAxisAlignment: CrossAxisAlignment.center, height: (AdaptiveLayout.poster(context).size *
children: [ ref.watch(clientSettingsProvider.select((value) => value.posterSize))) *
SizedBox( 0.6,
height: (AdaptiveLayout.poster(context).size * child: IgnorePointer(
ref.watch(clientSettingsProvider.select((value) => value.posterSize))) * child: PosterWidget(
0.6, aspectRatio: 0.7,
child: IgnorePointer( poster: baseItem,
child: PosterWidget( inlineTitle: true,
aspectRatio: 0.7,
poster: baseItem,
inlineTitle: true,
),
), ),
), ),
Expanded( ),
child: SyncProgressBuilder( Expanded(
item: syncedItem, child: SyncProgressBuilder(
builder: (context, combinedStream) { item: syncedItem,
return Row( builder: (context, combinedStream) {
children: [ return Row(
Expanded( children: [
child: Column( Expanded(
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Text( children: [
baseItem.detailedName(context) ?? "", Text(
style: Theme.of(context).textTheme.titleMedium, baseItem.detailedName(context) ?? "",
), style: Theme.of(context).textTheme.titleMedium,
SyncSubtitle(syncItem: syncedItem), ),
SyncLabel( SyncSubtitle(syncItem: syncedItem),
label: context.localized SyncLabel(
.totalSize(ref.watch(syncSizeProvider(syncedItem)).byteFormat ?? '--'), label: context.localized
status: ref.watch(syncStatusesProvider(syncedItem)).value ?? SyncStatus.partially, .totalSize(ref.watch(syncSizeProvider(syncedItem)).byteFormat ?? '--'),
), status: ref.watch(syncStatusesProvider(syncedItem)).value ?? SyncStatus.partially,
].addInBetween(const SizedBox(height: 8)), ),
), ].addInBetween(const SizedBox(height: 8)),
), ),
if (combinedStream?.task != null) ...{ ),
if (combinedStream?.status != TaskStatus.paused) if (combinedStream?.task != null) ...{
IconButton( if (combinedStream?.status != TaskStatus.paused)
onPressed: () => IconButton(
ref.read(backgroundDownloaderProvider).pause(combinedStream!.task!), onPressed: () =>
icon: const Icon(IconsaxBold.pause), ref.read(backgroundDownloaderProvider).pause(combinedStream!.task!),
), icon: const Icon(IconsaxBold.pause),
if (combinedStream?.status == TaskStatus.paused) ...[ ),
IconButton( if (combinedStream?.status == TaskStatus.paused) ...[
onPressed: () => IconButton(
ref.read(backgroundDownloaderProvider).resume(combinedStream!.task!), onPressed: () =>
icon: const Icon(IconsaxBold.play), ref.read(backgroundDownloaderProvider).resume(combinedStream!.task!),
), icon: const Icon(IconsaxBold.play),
IconButton( ),
onPressed: () => ref.read(syncProvider.notifier).deleteFullSyncFiles(syncedItem), IconButton(
icon: const Icon(IconsaxBold.stop), onPressed: () => ref.read(syncProvider.notifier).deleteFullSyncFiles(syncedItem),
), icon: const Icon(IconsaxBold.stop),
], ),
const SizedBox(width: 16) ],
}, const SizedBox(width: 16)
if (combinedStream != null && combinedStream.hasDownload)
SizedBox.fromSize(
size: const Size.fromRadius(35),
child: Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: [
CircularProgressIndicator(
value: combinedStream.progress,
strokeWidth: 8,
backgroundColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
strokeCap: StrokeCap.round,
color: combinedStream.status.color(context),
),
Center(child: Text("${((combinedStream.progress) * 100).toStringAsFixed(0)}%"))
],
)),
],
);
},
),
),
if (!hasFile && !downloadTask.hasDownload && syncedItem.hasVideoFile)
IconButtonAwait(
onPressed: () async => await ref.read(syncProvider.notifier).syncVideoFile(syncedItem, false),
icon: const Icon(IconsaxOutline.cloud_change),
)
else if (hasFile)
IconButtonAwait(
color: Theme.of(context).colorScheme.error,
onPressed: () {
showDefaultAlertDialog(
context,
context.localized.syncRemoveDataTitle,
context.localized.syncRemoveDataDesc,
(context) {
ref.read(syncProvider.notifier).deleteFullSyncFiles(syncedItem);
Navigator.of(context).pop();
}, },
context.localized.delete, if (combinedStream != null && combinedStream.hasDownload)
(context) => Navigator.of(context).pop(), SizedBox.fromSize(
context.localized.cancel, size: const Size.fromRadius(35),
); child: Stack(
}, fit: StackFit.expand,
icon: const Icon(IconsaxOutline.trash), alignment: Alignment.center,
), children: [
].addInBetween(const SizedBox(width: 16)), CircularProgressIndicator(
), value: combinedStream.progress,
strokeWidth: 8,
backgroundColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
strokeCap: StrokeCap.round,
color: combinedStream.status.color(context),
),
Center(child: Text("${((combinedStream.progress) * 100).toStringAsFixed(0)}%"))
],
)),
],
);
},
),
),
if (!hasFile && !downloadTask.hasDownload && syncedItem.hasVideoFile)
IconButtonAwait(
onPressed: () async => await ref.read(syncProvider.notifier).syncVideoFile(syncedItem, false),
icon: const Icon(IconsaxOutline.cloud_change),
)
else if (hasFile)
IconButtonAwait(
color: Theme.of(context).colorScheme.error,
onPressed: () {
showDefaultAlertDialog(
context,
context.localized.syncRemoveDataTitle,
context.localized.syncRemoveDataDesc,
(context) {
ref.read(syncProvider.notifier).deleteFullSyncFiles(syncedItem);
Navigator.of(context).pop();
},
context.localized.delete,
(context) => Navigator.of(context).pop(),
context.localized.cancel,
);
},
icon: const Icon(IconsaxOutline.trash),
),
].addInBetween(const SizedBox(width: 16)),
), ),
}, },
const Divider(), const Divider(),
@ -206,53 +202,45 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
], ],
), ),
), ),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (baseItem is! EpisodeModel)
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.errorContainer,
foregroundColor: Theme.of(context).colorScheme.onErrorContainer,
),
onPressed: () {
showDefaultAlertDialog(
context,
context.localized.syncDeleteItemTitle,
context.localized.syncDeleteItemDesc(baseItem?.detailedName(context) ?? ""),
(context) async {
await ref.read(syncProvider.notifier).removeSync(syncedItem);
Navigator.pop(context);
Navigator.pop(context);
},
context.localized.delete,
(context) => Navigator.pop(context),
context.localized.cancel,
);
},
child: Text(context.localized.delete),
)
else if (syncedItem.parentId != null)
ElevatedButton(
onPressed: () {
final parentItem = ref.read(syncProvider.notifier).getParentItem(syncedItem.parentId!);
setState(() {
if (parentItem != null) {
syncedItem = parentItem;
}
});
},
child: Text(context.localized.syncOpenParent),
)
],
),
)
], ],
), ),
), actions: [
), if (baseItem is! EpisodeModel)
); ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.errorContainer,
foregroundColor: Theme.of(context).colorScheme.onErrorContainer,
),
onPressed: () {
showDefaultAlertDialog(
context,
context.localized.syncDeleteItemTitle,
context.localized.syncDeleteItemDesc(baseItem?.detailedName(context) ?? ""),
(context) async {
await ref.read(syncProvider.notifier).removeSync(syncedItem);
Navigator.pop(context);
Navigator.pop(context);
},
context.localized.delete,
(context) => Navigator.pop(context),
context.localized.cancel,
);
},
child: Text(context.localized.delete),
)
else if (syncedItem.parentId != null)
ElevatedButton(
onPressed: () {
final parentItem = ref.read(syncProvider.notifier).getParentItem(syncedItem.parentId!);
setState(() {
if (parentItem != null) {
syncedItem = parentItem;
}
});
},
child: Text(context.localized.syncOpenParent),
)
],
));
} }
} }

View file

@ -1,9 +1,12 @@
import 'package:ficonsax/ficonsax.dart';
import 'package:fladder/models/syncing/sync_item.dart';
import 'package:fladder/util/list_padding.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/syncing/sync_item.dart';
import 'package:fladder/util/list_padding.dart';
///This is a wrapper widget for marking a synced item as deleted (while it is being deleted)
class SyncMarkedForDelete extends ConsumerWidget { class SyncMarkedForDelete extends ConsumerWidget {
final SyncedItem syncedItem; final SyncedItem syncedItem;
final Widget child; final Widget child;

View file

@ -208,46 +208,51 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
Colors.black.withOpacity(0), Colors.black.withOpacity(0),
], ],
)), )),
child: Padding( child: Stack(
padding: children: [
EdgeInsets.only(top: topPadding + (AdaptiveLayout.of(context).platform == TargetPlatform.macOS ? 28 : 0.0)), if (AdaptiveLayout.of(context).isDesktop)
child: Container( const Flexible(
alignment: Alignment.topCenter, child: Align(
height: 80, alignment: Alignment.topRight,
child: Column( child: DefaultTitleBar(),
children: [ ),
if (AdaptiveLayout.of(context).isDesktop) ),
const Flexible( Flexible(
child: Align( child: Padding(
alignment: Alignment.topRight, padding: MediaQuery.paddingOf(context).copyWith(bottom: 0),
child: DefaultTitleBar(), child: Container(
), alignment: Alignment.topCenter,
), height: 80,
Padding( child: Column(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
IconButton( Padding(
onPressed: () => minimizePlayer(context), padding: const EdgeInsets.symmetric(horizontal: 12),
icon: const Icon( child: Row(
IconsaxOutline.arrow_down_1, crossAxisAlignment: CrossAxisAlignment.center,
size: 24, children: [
), IconButton(
), onPressed: () => minimizePlayer(context),
const SizedBox(width: 16), icon: const Icon(
Flexible( IconsaxOutline.arrow_down_1,
child: Text( size: 24,
currentItem?.title ?? "", ),
style: Theme.of(context).textTheme.titleLarge, ),
const SizedBox(width: 16),
Flexible(
child: Text(
currentItem?.title ?? "",
style: Theme.of(context).textTheme.titleLarge,
),
),
],
), ),
), ),
], ],
), ),
), ),
], ),
), ),
), ],
), ),
); );
} }
@ -264,10 +269,9 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
], ],
)), )),
child: Padding( child: Padding(
padding: EdgeInsets.only(bottom: bottomPadding) padding: MediaQuery.paddingOf(context).add(
.copyWith(bottom: 21) const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 12),
.add(const EdgeInsets.symmetric(vertical: 16)) ),
.add(EdgeInsets.symmetric(horizontal: AdaptiveLayout.of(context).isDesktop ? 32 : 0)),
child: Column( child: Column(
children: [ children: [
Padding( Padding(

View file

@ -121,6 +121,8 @@ class AdaptiveLayout extends InheritedWidget {
} }
} }
const defaultTitleBarHeight = 35.0;
class AdaptiveLayoutBuilder extends ConsumerStatefulWidget { class AdaptiveLayoutBuilder extends ConsumerStatefulWidget {
final List<LayoutPoints> layoutPoints; final List<LayoutPoints> layoutPoints;
final LayoutState fallBack; final LayoutState fallBack;
@ -182,20 +184,26 @@ class _AdaptiveLayoutBuilderState extends ConsumerState<AdaptiveLayoutBuilder> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AdaptiveLayout( return MediaQuery(
layout: layout, data: MediaQuery.of(context).copyWith(
controller: controller, padding: isDesktop || kIsWeb ? const EdgeInsets.only(top: defaultTitleBarHeight, bottom: 16) : null,
size: size, viewPadding: isDesktop || kIsWeb ? const EdgeInsets.only(top: defaultTitleBarHeight, bottom: 16) : null,
inputDevice: (isDesktop || kIsWeb) ? InputDevice.pointer : InputDevice.touch, ),
platform: currentPlatform, child: AdaptiveLayout(
isDesktop: isDesktop, layout: layout,
router: router, controller: controller,
posterDefaults: switch (layout) { size: size,
LayoutState.phone => const PosterDefaults(size: 300, ratio: 0.55), inputDevice: (isDesktop || kIsWeb) ? InputDevice.pointer : InputDevice.touch,
LayoutState.tablet => const PosterDefaults(size: 350, ratio: 0.55), platform: currentPlatform,
LayoutState.desktop => const PosterDefaults(size: 400, ratio: 0.55), isDesktop: isDesktop,
}, router: router,
child: widget.child, posterDefaults: switch (layout) {
LayoutState.phone => const PosterDefaults(size: 300, ratio: 0.55),
LayoutState.tablet => const PosterDefaults(size: 350, ratio: 0.55),
LayoutState.desktop => const PosterDefaults(size: 400, ratio: 0.55),
},
child: widget.child,
),
); );
} }
} }

View file

@ -111,76 +111,78 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
} }
Widget navigationRail(BuildContext context) { Widget navigationRail(BuildContext context) {
return Padding( return Column(
key: const Key('navigation_rail'), children: [
padding: AdaptiveLayout.of(context).isDesktop ? EdgeInsets.zero : MediaQuery.of(context).padding, if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{
child: Column( const SizedBox(height: 4),
children: [ Text(
if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{ "Fladder",
const SizedBox(height: 4), style: Theme.of(context).textTheme.titleSmall,
Text(
"Fladder",
style: Theme.of(context).textTheme.titleSmall,
),
},
if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS)
const SizedBox(height: 32)
else
const SizedBox(height: 16),
IconButton(
onPressed: () {
if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
widget.drawerKey.currentState?.openDrawer();
} else {
setState(() {
expandedSideBar = true;
});
}
},
icon: const Icon(IconsaxBold.menu),
), ),
if (AdaptiveLayout.of(context).size == ScreenLayout.dual) ...[ },
const SizedBox(height: 8), Flexible(
AnimatedFadeSize( child: Padding(
child: AnimatedSwitcher( key: const Key('navigation_rail'),
duration: const Duration(milliseconds: 250), padding: MediaQuery.paddingOf(context).copyWith(right: 0),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: actionButton()?.normal,
),
),
],
const Spacer(),
IconTheme(
data: const IconThemeData(size: 28),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
...widget.destinations.mapIndexed( IconButton(
(index, destination) => destination.toNavigationButton(widget.currentIndex == index, false), onPressed: () {
) if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
widget.drawerKey.currentState?.openDrawer();
} else {
setState(() {
expandedSideBar = true;
});
}
},
icon: const Icon(IconsaxBold.menu),
),
if (AdaptiveLayout.of(context).size == ScreenLayout.dual) ...[
const SizedBox(height: 8),
AnimatedFadeSize(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: actionButton()?.normal,
),
),
],
const Spacer(),
IconTheme(
data: const IconThemeData(size: 28),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
...widget.destinations.mapIndexed(
(index, destination) => destination.toNavigationButton(widget.currentIndex == index, false),
)
],
),
),
const Spacer(),
SizedBox(
height: 48,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: widget.currentLocation.contains(const SettingsRoute().routeName)
? Card(
color: Theme.of(context).colorScheme.primaryContainer,
child: const Padding(
padding: EdgeInsets.all(10),
child: Icon(IconsaxBold.setting_3),
),
)
: const SettingsUserIcon()),
),
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
], ],
), ),
), ),
const Spacer(), ),
SizedBox( ],
height: 48,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: widget.currentLocation.contains(const SettingsRoute().routeName)
? Card(
color: Theme.of(context).colorScheme.primaryContainer,
child: const Padding(
padding: EdgeInsets.all(10),
child: Icon(IconsaxBold.setting_3),
),
)
: const SettingsUserIcon()),
),
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
],
),
); );
} }
} }

View file

@ -0,0 +1,49 @@
import 'package:flutter/material.dart';
import 'package:fladder/util/list_padding.dart';
class ActionContent extends StatelessWidget {
final Widget? title;
final Widget child;
final List<Widget> actions;
final bool showDividers;
final EdgeInsetsGeometry? padding;
const ActionContent({
this.title,
required this.child,
this.padding,
this.showDividers = true,
this.actions = const [],
super.key,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: padding ?? MediaQuery.paddingOf(context).add(const EdgeInsets.symmetric(horizontal: 16)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (title != null) ...[
title!,
if (showDividers)
const Divider(
height: 4,
),
],
Expanded(child: child),
if (actions.isNotEmpty) ...[
if (showDividers)
const Divider(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: actions,
)
],
].addInBetween(const SizedBox(height: 16)),
),
);
}
}

View file

@ -1,9 +1,10 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first // ignore_for_file: public_member_api_docs, sort_constructors_first
import 'dart:async'; import 'dart:async';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
abstract class ItemAction { abstract class ItemAction {
Widget toMenuItemButton(); Widget toMenuItemButton();
PopupMenuEntry toPopupMenuItem({bool useIcons = false}); PopupMenuEntry toPopupMenuItem({bool useIcons = false});
@ -67,7 +68,11 @@ class ItemActionButton extends ItemAction {
iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface), iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
), ),
child: Row( child: Row(
children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)], children: [
if (icon != null) icon!,
const SizedBox(width: 8),
if (label != null) Flexible(child: label!)
],
), ),
), ),
); );
@ -82,25 +87,38 @@ class ItemActionButton extends ItemAction {
} }
@override @override
ListTile toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) { Widget toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) {
return ListTile( return ElevatedButton(
onTap: () { style: ButtonStyle(
backgroundColor: const WidgetStatePropertyAll(Colors.transparent),
padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 12)),
minimumSize: const WidgetStatePropertyAll(Size(50, 50)),
elevation: const WidgetStatePropertyAll(0),
foregroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.onSurface),
),
onPressed: () {
if (shouldPop) { if (shouldPop) {
Navigator.of(context).pop(); Navigator.of(context).pop();
} }
action?.call(); action?.call();
}, },
title: useIcons child: useIcons
? Builder(builder: (context) { ? Builder(
return Theme( builder: (context) {
data: ThemeData( return Theme(
iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface), data: ThemeData(
), iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
child: Row( ),
children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)], child: Row(
), children: [
); if (icon != null) icon!,
}) const SizedBox(width: 8),
if (label != null) Flexible(child: label!)
],
),
);
},
)
: label, : label,
); );
} }

View file

@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart'; import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/util/adaptive_layout.dart'; import 'package:fladder/util/adaptive_layout.dart';
import 'package:fladder/util/fladder_image.dart'; import 'package:fladder/util/fladder_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
Future<void> showBottomSheetPill({ Future<void> showBottomSheetPill({
ItemBaseModel? item, ItemBaseModel? item,
@ -32,7 +34,10 @@ Future<void> showBottomSheetPill({
controller: controller, controller: controller,
children: [ children: [
if (item != null) ...{ if (item != null) ...{
ItemBottomSheetPreview(item: item), Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: ItemBottomSheetPreview(item: item),
),
const Divider(), const Divider(),
}, },
content(context, controller), content(context, controller),
@ -51,49 +56,46 @@ class ItemBottomSheetPreview extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return Column( return Column(
children: [ children: [
Padding( Row(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), children: [
child: Row( Card(
children: [ child: SizedBox(
Card( height: 90,
child: SizedBox( child: AspectRatio(
height: 90, aspectRatio: 1,
child: AspectRatio( child: FladderImage(
aspectRatio: 1, image: item.images?.primary,
child: FladderImage( fit: BoxFit.contain,
image: item.images?.primary,
fit: BoxFit.contain,
),
), ),
), ),
), ),
const SizedBox(width: 16), ),
Flexible( const SizedBox(width: 16),
child: Column( Flexible(
mainAxisSize: MainAxisSize.max, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max,
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Text( children: [
item.title, Text(
maxLines: 2, item.title,
overflow: TextOverflow.ellipsis, maxLines: 2,
style: Theme.of(context).textTheme.titleLarge, overflow: TextOverflow.ellipsis,
), style: Theme.of(context).textTheme.titleLarge,
if (item.subText?.isNotEmpty ?? false) ),
Opacity( if (item.subText?.isNotEmpty ?? false)
opacity: 0.75, Opacity(
child: Text( opacity: 0.75,
item.subText!, child: Text(
overflow: TextOverflow.ellipsis, item.subText!,
maxLines: 2, overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleMedium, maxLines: 2,
), style: Theme.of(context).textTheme.titleMedium,
), ),
], ),
), ],
), ),
], ),
), ],
), ),
], ],
); );