mirror of
https://github.com/gabehf/Fladder.git
synced 2026-03-08 23:18:16 -07:00
feat: Added option to use library posters instead of icons
This commit is contained in:
PartyDonut
parent
a9cdd5c506
commit
f0216fa799
10 changed files with 160 additions and 39 deletions
|
|
@ -1,9 +1,11 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import 'package:fladder/screens/shared/animated_fade_size.dart';
|
||||
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
|
||||
import 'package:fladder/widgets/shared/item_actions.dart';
|
||||
import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
class DrawerListButton extends ConsumerStatefulWidget {
|
||||
final String label;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ class NavigationButton extends ConsumerStatefulWidget {
|
|||
final Function()? onPressed;
|
||||
final Function()? onLongPress;
|
||||
final List<ItemAction> trailing;
|
||||
final Widget? customIcon;
|
||||
final bool selected;
|
||||
final Duration duration;
|
||||
const NavigationButton({
|
||||
|
|
@ -24,6 +25,7 @@ class NavigationButton extends ConsumerStatefulWidget {
|
|||
this.expanded = false,
|
||||
this.onPressed,
|
||||
this.onLongPress,
|
||||
this.customIcon,
|
||||
this.selected = false,
|
||||
this.trailing = const [],
|
||||
this.duration = const Duration(milliseconds: 125),
|
||||
|
|
@ -64,9 +66,11 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
|||
onLongPress: widget.onLongPress,
|
||||
child: widget.horizontal
|
||||
? Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
|
||||
padding: widget.customIcon != null
|
||||
? EdgeInsetsGeometry.zero
|
||||
: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
|
||||
child: SizedBox(
|
||||
height: 35,
|
||||
height: widget.customIcon != null ? 60 : 35,
|
||||
child: Row(
|
||||
spacing: 4,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
|
|
@ -85,10 +89,11 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
|||
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
|
||||
),
|
||||
),
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
widget.customIcon ??
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
if (widget.horizontal && widget.expanded) ...[
|
||||
if (widget.label != null)
|
||||
|
|
@ -119,17 +124,18 @@ class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
|||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
padding: widget.customIcon != null ? EdgeInsetsGeometry.zero : const EdgeInsets.all(8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
spacing: 8,
|
||||
children: [
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
widget.customIcon ??
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
if (widget.label != null && widget.horizontal && widget.expanded)
|
||||
Flexible(child: Text(widget.label!))
|
||||
],
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@ import 'package:iconsax_plus/iconsax_plus.dart';
|
|||
|
||||
import 'package:fladder/models/collection_types.dart';
|
||||
import 'package:fladder/models/view_model.dart';
|
||||
import 'package:fladder/providers/settings/client_settings_provider.dart';
|
||||
import 'package:fladder/routes/auto_router.gr.dart';
|
||||
import 'package:fladder/screens/metadata/refresh_metadata.dart';
|
||||
import 'package:fladder/screens/shared/animated_fade_size.dart';
|
||||
import 'package:fladder/theme.dart';
|
||||
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
|
||||
import 'package:fladder/util/fladder_image.dart';
|
||||
import 'package:fladder/util/localization_helper.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/adaptive_fab.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/destination_model.dart';
|
||||
|
|
@ -36,6 +39,7 @@ class NestedNavigationDrawer extends ConsumerWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final useLibraryPosters = ref.watch(clientSettingsProvider.select((value) => value.usePosterForLibrary));
|
||||
return NavigationDrawer(
|
||||
key: const Key('navigation_drawer'),
|
||||
backgroundColor: isExpanded ? Colors.transparent : null,
|
||||
|
|
@ -91,22 +95,41 @@ class NestedNavigationDrawer extends ConsumerWidget {
|
|||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
...views.map((library) => DrawerListButton(
|
||||
label: library.name,
|
||||
selected: context.router.currentUrl.contains(library.id),
|
||||
actions: [
|
||||
ItemActionButton(
|
||||
label: Text(context.localized.scanLibrary),
|
||||
icon: const Icon(IconsaxPlusLinear.refresh),
|
||||
action: () => showRefreshPopup(context, library.id, library.name),
|
||||
),
|
||||
],
|
||||
onPressed: () {
|
||||
context.router.push(LibrarySearchRoute(viewModelId: library.id));
|
||||
Scaffold.of(context).closeDrawer();
|
||||
},
|
||||
selectedIcon: Icon(library.collectionType.icon),
|
||||
icon: Icon(library.collectionType.iconOutlined))),
|
||||
...views.map((library) {
|
||||
var selected = context.router.currentUrl.contains(library.id);
|
||||
final Widget? posterIcon = useLibraryPosters
|
||||
? ClipRRect(
|
||||
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1.0,
|
||||
child: FladderImage(
|
||||
image: library.imageData?.primary,
|
||||
placeHolder: Card(
|
||||
child: Icon(
|
||||
selected ? library.collectionType.icon : library.collectionType.iconOutlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: null;
|
||||
return DrawerListButton(
|
||||
label: library.name,
|
||||
selected: selected,
|
||||
actions: [
|
||||
ItemActionButton(
|
||||
label: Text(context.localized.scanLibrary),
|
||||
icon: const Icon(IconsaxPlusLinear.refresh),
|
||||
action: () => showRefreshPopup(context, library.id, library.name),
|
||||
),
|
||||
],
|
||||
onPressed: () {
|
||||
context.router.push(LibrarySearchRoute(viewModelId: library.id));
|
||||
Scaffold.of(context).closeDrawer();
|
||||
},
|
||||
selectedIcon: posterIcon ?? Icon(library.collectionType.icon),
|
||||
icon: posterIcon ?? Icon(library.collectionType.iconOutlined));
|
||||
}),
|
||||
},
|
||||
const Divider(indent: 28, endIndent: 28),
|
||||
if (isExpanded)
|
||||
|
|
|
|||
|
|
@ -9,11 +9,14 @@ import 'package:iconsax_plus/iconsax_plus.dart';
|
|||
import 'package:overflow_view/overflow_view.dart';
|
||||
|
||||
import 'package:fladder/models/collection_types.dart';
|
||||
import 'package:fladder/providers/settings/client_settings_provider.dart';
|
||||
import 'package:fladder/providers/views_provider.dart';
|
||||
import 'package:fladder/routes/auto_router.gr.dart';
|
||||
import 'package:fladder/screens/metadata/refresh_metadata.dart';
|
||||
import 'package:fladder/screens/shared/animated_fade_size.dart';
|
||||
import 'package:fladder/theme.dart';
|
||||
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
|
||||
import 'package:fladder/util/fladder_image.dart';
|
||||
import 'package:fladder/util/localization_helper.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/adaptive_fab.dart';
|
||||
import 'package:fladder/widgets/navigation_scaffold/components/destination_model.dart';
|
||||
|
|
@ -68,14 +71,17 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final views = ref.watch(viewsProvider.select((value) => value.views));
|
||||
final usePostersForLibrary = ref.watch(clientSettingsProvider.select((value) => value.usePosterForLibrary));
|
||||
|
||||
final expandedWidth = 250.0;
|
||||
final padding = MediaQuery.paddingOf(context);
|
||||
|
||||
final collapsedWidth = 90.0 + padding.left;
|
||||
final collapsedWidth = 90 + padding.left;
|
||||
final largeBar = AdaptiveLayout.layoutModeOf(context) != LayoutMode.single;
|
||||
final fullyExpanded = largeBar ? expandedSideBar : false;
|
||||
final shouldExpand = showOnHover || fullyExpanded;
|
||||
final isDesktop = AdaptiveLayout.of(context).isDesktop;
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
AdaptiveLayoutBuilder(
|
||||
|
|
@ -85,11 +91,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
child: (context) => widget.child,
|
||||
),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12)
|
||||
.copyWith(topLeft: const Radius.circular(0), bottomLeft: const Radius.circular(0)),
|
||||
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
|
||||
),
|
||||
color: Theme.of(context).colorScheme.surface.withValues(alpha: shouldExpand ? 0.95 : 0.85),
|
||||
width: shouldExpand ? expandedWidth : collapsedWidth,
|
||||
child: MouseRegion(
|
||||
onEnter: (value) => startTimer(),
|
||||
|
|
@ -158,6 +160,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
spacing: 4,
|
||||
children: views.map(
|
||||
(view) {
|
||||
final selected = context.router.currentUrl.contains(view.id);
|
||||
final actions = [
|
||||
ItemActionButton(
|
||||
label: Text(context.localized.scanLibrary),
|
||||
|
|
@ -166,7 +169,7 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
)
|
||||
];
|
||||
return view.toNavigationButton(
|
||||
context.router.currentUrl.contains(view.id),
|
||||
selected,
|
||||
true,
|
||||
shouldExpand,
|
||||
() => context.pushRoute(LibrarySearchRoute(viewModelId: view.id)),
|
||||
|
|
@ -178,6 +181,24 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
children: actions.listTileItems(context, useIcons: true),
|
||||
),
|
||||
),
|
||||
customIcon: usePostersForLibrary
|
||||
? ClipRRect(
|
||||
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||
child: SizedBox.square(
|
||||
dimension: 50,
|
||||
child: FladderImage(
|
||||
image: view.imageData?.primary,
|
||||
placeHolder: Card(
|
||||
child: Icon(
|
||||
selected
|
||||
? view.collectionType.icon
|
||||
: view.collectionType.iconOutlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
trailing: actions,
|
||||
);
|
||||
},
|
||||
|
|
@ -191,6 +212,17 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
selectedIcon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
||||
icon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
||||
expanded: shouldExpand,
|
||||
customIcon: usePostersForLibrary
|
||||
? ClipRRect(
|
||||
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||
child: const SizedBox.square(
|
||||
dimension: 50,
|
||||
child: Card(
|
||||
child: Icon(IconsaxPlusLinear.arrow_square_down),
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
horizontal: true,
|
||||
),
|
||||
itemBuilder: (context) => views
|
||||
|
|
@ -201,7 +233,25 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
|||
child: Row(
|
||||
spacing: 8,
|
||||
children: [
|
||||
Icon(e.collectionType.iconOutlined),
|
||||
usePostersForLibrary
|
||||
? Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: ClipRRect(
|
||||
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||
child: SizedBox.square(
|
||||
dimension: 45,
|
||||
child: FladderImage(
|
||||
image: e.imageData?.primary,
|
||||
placeHolder: Card(
|
||||
child: Icon(
|
||||
e.collectionType.iconOutlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Icon(e.collectionType.iconOutlined),
|
||||
Text(e.name),
|
||||
],
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue