mirror of
https://github.com/gabehf/Fladder.git
synced 2026-03-14 01:37:07 -07:00
chore: Cleaned up side_navigaton_bar
This commit is contained in:
PartyDonut
parent
bfa7607681
commit
fefd2d9ad9
1 changed files with 198 additions and 207 deletions
|
|
@ -72,238 +72,229 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
|
||||||
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,
|
width: shouldExpand ? expandedWidth : collapsedWidth,
|
||||||
child: MouseRegion(
|
child: MouseRegion(
|
||||||
child: Column(
|
child: Padding(
|
||||||
children: [
|
key: const Key('navigation_rail'),
|
||||||
Expanded(
|
padding: padding.copyWith(right: 0, top: isDesktop ? padding.top : null),
|
||||||
child: Padding(
|
child: Column(
|
||||||
key: const Key('navigation_rail'),
|
spacing: 2,
|
||||||
padding: padding.copyWith(right: 0, top: isDesktop ? padding.top : null),
|
children: [
|
||||||
child: Column(
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
Padding(
|
if (expandedSideBar) ...[
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
Expanded(child: Text(context.localized.navigation)),
|
||||||
child: Row(
|
],
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
Opacity(
|
||||||
children: [
|
opacity: largeBar && expandedSideBar ? 0.65 : 1.0,
|
||||||
if (expandedSideBar) ...[
|
child: IconButton(
|
||||||
Expanded(child: Text(context.localized.navigation)),
|
onPressed: !largeBar
|
||||||
],
|
? () => widget.scaffoldKey.currentState?.openDrawer()
|
||||||
Opacity(
|
: () => setState(() => expandedSideBar = !expandedSideBar),
|
||||||
opacity: largeBar && expandedSideBar ? 0.65 : 1.0,
|
icon: Icon(
|
||||||
child: IconButton(
|
largeBar && expandedSideBar ? IconsaxPlusLinear.sidebar_left : IconsaxPlusLinear.menu,
|
||||||
onPressed: !largeBar
|
),
|
||||||
? () => widget.scaffoldKey.currentState?.openDrawer()
|
),
|
||||||
: () => setState(() => expandedSideBar = !expandedSideBar),
|
)
|
||||||
icon: Icon(
|
],
|
||||||
largeBar && expandedSideBar
|
),
|
||||||
? IconsaxPlusLinear.sidebar_left
|
),
|
||||||
: IconsaxPlusLinear.menu,
|
if (largeBar) ...[
|
||||||
|
AnimatedFadeSize(
|
||||||
|
duration: const Duration(milliseconds: 250),
|
||||||
|
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: !largeBar ? MainAxisAlignment.center : MainAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
...widget.destinations.mapIndexed(
|
||||||
|
(index, destination) => CustomTooltip(
|
||||||
|
tooltipContent: expandedSideBar
|
||||||
|
? null
|
||||||
|
: Card(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: Text(
|
||||||
|
destination.label,
|
||||||
|
style: Theme.of(context).textTheme.titleSmall,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
position: TooltipPosition.right,
|
||||||
)
|
child: destination.toNavigationButton(
|
||||||
],
|
widget.currentIndex == index,
|
||||||
|
true,
|
||||||
|
shouldExpand,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (largeBar) ...[
|
if (views.isNotEmpty && largeBar) ...[
|
||||||
AnimatedFadeSize(
|
const Divider(
|
||||||
duration: const Duration(milliseconds: 250),
|
indent: 32,
|
||||||
child: shouldExpand ? actionButton(context).extended : actionButton(context).normal,
|
endIndent: 32,
|
||||||
),
|
),
|
||||||
],
|
Flexible(
|
||||||
Expanded(
|
child: OverflowView.flexible(
|
||||||
child: Column(
|
direction: Axis.vertical,
|
||||||
spacing: 2,
|
spacing: 4,
|
||||||
mainAxisAlignment: !largeBar ? MainAxisAlignment.center : MainAxisAlignment.start,
|
children: views.map(
|
||||||
children: [
|
(view) {
|
||||||
const SizedBox(height: 8),
|
final selected = context.router.currentUrl.contains(view.id);
|
||||||
...widget.destinations.mapIndexed(
|
final actions = [
|
||||||
(index, destination) => CustomTooltip(
|
ItemActionButton(
|
||||||
|
label: Text(context.localized.scanLibrary),
|
||||||
|
icon: const Icon(IconsaxPlusLinear.refresh),
|
||||||
|
action: () => showRefreshPopup(context, view.id, view.name),
|
||||||
|
)
|
||||||
|
];
|
||||||
|
return CustomTooltip(
|
||||||
|
tooltipContent: expandedSideBar
|
||||||
|
? null
|
||||||
|
: Card(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
child: Text(
|
||||||
|
view.name,
|
||||||
|
style: Theme.of(context).textTheme.titleSmall,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
position: TooltipPosition.right,
|
||||||
|
child: view.toNavigationButton(
|
||||||
|
selected,
|
||||||
|
true,
|
||||||
|
shouldExpand,
|
||||||
|
() => context.pushRoute(LibrarySearchRoute(viewModelId: view.id)),
|
||||||
|
onLongPress: () => showBottomSheetPill(
|
||||||
|
context: context,
|
||||||
|
content: (context, scrollController) => ListView(
|
||||||
|
shrinkWrap: true,
|
||||||
|
controller: scrollController,
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
).toList(),
|
||||||
|
builder: (context, remaining) {
|
||||||
|
return CustomTooltip(
|
||||||
tooltipContent: expandedSideBar
|
tooltipContent: expandedSideBar
|
||||||
? null
|
? null
|
||||||
: Card(
|
: Card(
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.all(12),
|
padding: const EdgeInsets.all(12),
|
||||||
child: Text(
|
child: Text(
|
||||||
destination.label,
|
context.localized.moreOptions,
|
||||||
style: Theme.of(context).textTheme.titleSmall,
|
style: Theme.of(context).textTheme.titleSmall,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
position: TooltipPosition.right,
|
position: TooltipPosition.right,
|
||||||
child: destination.toNavigationButton(
|
child: PopupMenuButton(
|
||||||
widget.currentIndex == index,
|
iconColor: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45),
|
||||||
true,
|
padding: EdgeInsets.zero,
|
||||||
shouldExpand,
|
tooltip: "",
|
||||||
),
|
icon: NavigationButton(
|
||||||
),
|
label: context.localized.other,
|
||||||
),
|
selectedIcon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
||||||
if (views.isNotEmpty && largeBar) ...[
|
icon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
||||||
const Divider(
|
expanded: shouldExpand,
|
||||||
indent: 32,
|
customIcon: usePostersForLibrary
|
||||||
endIndent: 32,
|
? ClipRRect(
|
||||||
),
|
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||||
Flexible(
|
child: const SizedBox.square(
|
||||||
child: OverflowView.flexible(
|
dimension: 50,
|
||||||
direction: Axis.vertical,
|
child: Card(
|
||||||
spacing: 4,
|
child: Icon(IconsaxPlusLinear.arrow_square_down),
|
||||||
children: views.map(
|
|
||||||
(view) {
|
|
||||||
final selected = context.router.currentUrl.contains(view.id);
|
|
||||||
final actions = [
|
|
||||||
ItemActionButton(
|
|
||||||
label: Text(context.localized.scanLibrary),
|
|
||||||
icon: const Icon(IconsaxPlusLinear.refresh),
|
|
||||||
action: () => showRefreshPopup(context, view.id, view.name),
|
|
||||||
)
|
|
||||||
];
|
|
||||||
return CustomTooltip(
|
|
||||||
tooltipContent: expandedSideBar
|
|
||||||
? null
|
|
||||||
: Card(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(12),
|
|
||||||
child: Text(
|
|
||||||
view.name,
|
|
||||||
style: Theme.of(context).textTheme.titleSmall,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
position: TooltipPosition.right,
|
|
||||||
child: view.toNavigationButton(
|
|
||||||
selected,
|
|
||||||
true,
|
|
||||||
shouldExpand,
|
|
||||||
() => context.pushRoute(LibrarySearchRoute(viewModelId: view.id)),
|
|
||||||
onLongPress: () => showBottomSheetPill(
|
|
||||||
context: context,
|
|
||||||
content: (context, scrollController) => ListView(
|
|
||||||
shrinkWrap: true,
|
|
||||||
controller: scrollController,
|
|
||||||
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,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
).toList(),
|
|
||||||
builder: (context, remaining) {
|
|
||||||
return CustomTooltip(
|
|
||||||
tooltipContent: expandedSideBar
|
|
||||||
? null
|
|
||||||
: Card(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(12),
|
|
||||||
child: Text(
|
|
||||||
context.localized.moreOptions,
|
|
||||||
style: Theme.of(context).textTheme.titleSmall,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
position: TooltipPosition.right,
|
)
|
||||||
child: PopupMenuButton(
|
: null,
|
||||||
iconColor: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45),
|
horizontal: true,
|
||||||
padding: EdgeInsets.zero,
|
),
|
||||||
tooltip: "",
|
itemBuilder: (context) => views
|
||||||
icon: NavigationButton(
|
.sublist(views.length - remaining)
|
||||||
label: context.localized.other,
|
.map(
|
||||||
selectedIcon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
(e) => PopupMenuItem(
|
||||||
icon: const Icon(IconsaxPlusLinear.arrow_square_down),
|
onTap: () => context.pushRoute(LibrarySearchRoute(viewModelId: e.id)),
|
||||||
expanded: shouldExpand,
|
child: Row(
|
||||||
customIcon: usePostersForLibrary
|
spacing: 8,
|
||||||
? ClipRRect(
|
children: [
|
||||||
borderRadius: FladderTheme.smallShape.borderRadius,
|
usePostersForLibrary
|
||||||
child: const SizedBox.square(
|
? Padding(
|
||||||
dimension: 50,
|
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||||
child: Card(
|
child: ClipRRect(
|
||||||
child: Icon(IconsaxPlusLinear.arrow_square_down),
|
borderRadius: FladderTheme.smallShape.borderRadius,
|
||||||
),
|
child: SizedBox.square(
|
||||||
),
|
dimension: 45,
|
||||||
)
|
child: FladderImage(
|
||||||
: null,
|
image: e.imageData?.primary,
|
||||||
horizontal: true,
|
placeHolder: Card(
|
||||||
),
|
child: Icon(
|
||||||
itemBuilder: (context) => views
|
e.collectionType.iconOutlined,
|
||||||
.sublist(views.length - remaining)
|
|
||||||
.map(
|
|
||||||
(e) => PopupMenuItem(
|
|
||||||
onTap: () => context.pushRoute(LibrarySearchRoute(viewModelId: e.id)),
|
|
||||||
child: Row(
|
|
||||||
spacing: 8,
|
|
||||||
children: [
|
|
||||||
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),
|
),
|
||||||
],
|
)
|
||||||
),
|
: Icon(e.collectionType.iconOutlined),
|
||||||
),
|
Text(e.name),
|
||||||
)
|
],
|
||||||
.toList(),
|
),
|
||||||
),
|
),
|
||||||
);
|
)
|
||||||
},
|
.toList(),
|
||||||
),
|
),
|
||||||
),
|
);
|
||||||
],
|
},
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
NavigationButton(
|
|
||||||
label: context.localized.settings,
|
|
||||||
selected: widget.currentLocation.contains(const SettingsRoute().routeName),
|
|
||||||
selectedIcon: const Icon(IconsaxPlusBold.setting_3),
|
|
||||||
horizontal: true,
|
|
||||||
expanded: shouldExpand,
|
|
||||||
icon: const SettingsUserIcon(),
|
|
||||||
onPressed: () {
|
|
||||||
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.single) {
|
|
||||||
context.router.push(const SettingsRoute());
|
|
||||||
} else {
|
|
||||||
context.router.push(const ClientSettingsRoute());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
NavigationButton(
|
||||||
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
|
label: context.localized.settings,
|
||||||
],
|
selected: widget.currentLocation.contains(const SettingsRoute().routeName),
|
||||||
|
selectedIcon: const Icon(IconsaxPlusBold.setting_3),
|
||||||
|
horizontal: true,
|
||||||
|
expanded: shouldExpand,
|
||||||
|
icon: const SettingsUserIcon(),
|
||||||
|
onPressed: () {
|
||||||
|
if (AdaptiveLayout.layoutModeOf(context) == LayoutMode.single) {
|
||||||
|
context.router.push(const SettingsRoute());
|
||||||
|
} else {
|
||||||
|
context.router.push(const ClientSettingsRoute());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue