Skip to content

Commit

Permalink
feat: tablet mode navigation bar & windows semi transparent bg,
Browse files Browse the repository at this point in the history
  • Loading branch information
@KRTirtho
KRTirtho committed Dec 9, 2022
1 parent 65cad07 commit 3282370
Show file tree
Hide file tree
Showing 18 changed files with 150 additions and 163 deletions.
3 changes: 2 additions & 1 deletion lib/components/player/player_queue.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ class PlayerQueue extends HookConsumerWidget {
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
);
final headlineColor = Theme.of(context).textTheme.headline4?.color;
final headlineColor =
PlatformTheme.of(context).textTheme?.subheading?.color;

useEffect(() {
if (playback.track == null || playback.playlist == null) return null;
Expand Down
3 changes: 1 addition & 2 deletions lib/components/playlist/playlist_genre_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ class PlaylistGenreView extends ConsumerWidget {
),
body: Column(
children: [
Text(
PlatformText.subheading(
genreName,
style: Theme.of(context).textTheme.headline4,
textAlign: TextAlign.center,
),
Consumer(
Expand Down
245 changes: 111 additions & 134 deletions lib/components/root/sidebar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,9 @@ import 'package:spotube/provider/spotify_provider.dart';

import 'package:spotube/provider/user_preferences_provider.dart';
import 'package:spotube/services/queries/queries.dart';
import 'package:spotube/utils/platform.dart';
import 'package:spotube/utils/type_conversion_utils.dart';
import 'package:fluent_ui/fluent_ui.dart' as fluent_ui;

final sidebarExtendedStateProvider = StateProvider<bool?>((ref) => null);

class Sidebar extends HookConsumerWidget {
final int selectedIndex;
final void Function(int) onSelectedIndexChanged;
Expand Down Expand Up @@ -48,41 +45,73 @@ class Sidebar extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final breakpoints = useBreakpoints();
final extended = useState(false);

final downloadCount = ref.watch(
downloaderProvider.select((s) => s.currentlyRunning),
);
final forceExtended = ref.watch(sidebarExtendedStateProvider);

useEffect(() {
if (forceExtended != null) {
if (extended.value != forceExtended) {
extended.value = forceExtended;
}
return;
}
if (breakpoints.isMd && extended.value) {
extended.value = false;
} else if (breakpoints.isMoreThanOrEqualTo(Breakpoints.lg) &&
!extended.value) {
extended.value = true;
}
return null;
});

final layoutMode =
ref.watch(userPreferencesProvider.select((s) => s.layoutMode));

if (breakpoints.isMd) {
return Row(
children: [
NavigationRail(
selectedIndex: selectedIndex,
onDestinationSelected: onSelectedIndexChanged,
labelType: NavigationRailLabelType.all,
extended: false,
backgroundColor: PlatformTheme.of(context).scaffoldBackgroundColor,
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: brandLogo(),
),
trailing: PlatformIconButton(
icon: const Icon(fluent_ui.FluentIcons.settings),
onPressed: () => goToSettings(context),
),
destinations: [
for (final e in sidebarTileList)
NavigationRailDestination(
icon: Badge(
badgeColor: PlatformTheme.of(context).primaryColor!,
showBadge: e.title == "Library" && downloadCount > 0,
badgeContent: Text(
downloadCount.toString(),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
),
child: Icon(e.icon),
),
label: PlatformText.label(
e.title,
style: selectedIndex == sidebarTileList.indexOf(e)
? TextStyle(
color: PlatformTheme.of(context).primaryColor,
fontWeight: FontWeight.bold,
)
: null,
),
),
],
),
Container(
width: 1,
height: double.infinity,
color: PlatformTheme.of(context).borderColor,
),
Expanded(child: child)
],
);
}

if (layoutMode == LayoutMode.compact ||
(breakpoints.isSm && layoutMode == LayoutMode.adaptive)) {
return PlatformScaffold(body: child);
}

void toggleExtended() =>
ref.read(sidebarExtendedStateProvider.notifier).state =
!(forceExtended ?? extended.value);

return SafeArea(
top: false,
child: PlatformSidebar(
Expand Down Expand Up @@ -119,76 +148,42 @@ class Sidebar extends HookConsumerWidget {
},
),
),
expanded: extended.value,
header: Column(
children: [
if (kIsMacOS)
SizedBox(
height: appWindow.titleBarHeight,
width: extended.value ? 256 : 80,
child: MoveWindow(
child: !extended.value
? Center(
child: PlatformIconButton(
icon: const Icon(Icons.menu_rounded),
onPressed: toggleExtended,
),
)
: null,
),
),
if (!kIsDesktop && !extended.value)
Center(
child: PlatformIconButton(
icon: const Icon(Icons.menu_rounded),
onPressed: toggleExtended,
),
expanded: true,
header: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
brandLogo(),
const SizedBox(
width: 10,
),
(extended.value)
? Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
brandLogo(),
const SizedBox(
width: 10,
),
PlatformText.headline("Spotube"),
PlatformIconButton(
icon: const Icon(Icons.menu_rounded),
onPressed: toggleExtended,
),
],
),
)
: brandLogo(),
],
PlatformText.headline("Spotube"),
],
),
),
windowsFooterItems: [
fluent_ui.PaneItemAction(
icon: const fluent_ui.Icon(fluent_ui.FluentIcons.settings),
onTap: () => goToSettings(context),
),
],
footer: SidebarFooter(extended: extended.value),
footer: const SidebarFooter(),
),
);
}
}

class SidebarFooter extends HookConsumerWidget {
final bool extended;
const SidebarFooter({
Key? key,
required this.extended,
}) : super(key: key);

@override
Widget build(BuildContext context, ref) {
final auth = ref.watch(authProvider);

return SizedBox(
width: extended ? 256 : 80,
width: 256,
child: HookBuilder(
builder: (context) {
final me = useQuery(
Expand All @@ -211,71 +206,53 @@ class SidebarFooter extends HookConsumerWidget {
return;
}, [auth.isLoggedIn, me.hasData]);

if (extended) {
return Padding(
padding: const EdgeInsets.all(16).copyWith(left: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (auth.isLoggedIn && data == null)
const Center(
child: PlatformCircularProgressIndicator(),
)
else if (data != null)
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
backgroundImage:
UniversalImage.imageProvider(avatarImg),
onBackgroundImageError: (exception, stackTrace) =>
Image.asset(
"assets/user-placeholder.png",
height: 16,
width: 16,
),
return Padding(
padding: const EdgeInsets.all(16).copyWith(left: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (auth.isLoggedIn && data == null)
const Center(
child: PlatformCircularProgressIndicator(),
)
else if (data != null)
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
CircleAvatar(
backgroundImage:
UniversalImage.imageProvider(avatarImg),
onBackgroundImageError: (exception, stackTrace) =>
Image.asset(
"assets/user-placeholder.png",
height: 16,
width: 16,
),
const SizedBox(
width: 10,
),
Flexible(
child: Text(
data.displayName ?? "Guest",
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
style: PlatformTheme.of(context)
.textTheme
?.body
?.copyWith(fontWeight: FontWeight.bold),
),
),
const SizedBox(
width: 10,
),
Flexible(
child: Text(
data.displayName ?? "Guest",
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
style: PlatformTheme.of(context)
.textTheme
?.body
?.copyWith(fontWeight: FontWeight.bold),
),
],
),
),
],
),
PlatformIconButton(
icon: const Icon(Icons.settings_outlined),
onPressed: () => Sidebar.goToSettings(context)),
],
));
} else {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () => Sidebar.goToSettings(context),
child: CircleAvatar(
backgroundImage: UniversalImage.imageProvider(avatarImg),
onBackgroundImageError: (exception, stackTrace) =>
Image.asset(
"assets/user-placeholder.png",
height: 16,
width: 16,
),
),
),
);
}
),
PlatformIconButton(
icon: const Icon(Icons.settings_outlined),
onPressed: () => Sidebar.goToSettings(context)),
],
));
},
),
);
Expand Down
5 changes: 3 additions & 2 deletions lib/components/shared/adaptive/adaptive_popup_menu_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class Action extends StatelessWidget {
}
return PlatformTextButton(
style: TextButton.styleFrom(
foregroundColor: Theme.of(context).textTheme.bodyMedium?.color,
foregroundColor: PlatformTextTheme.of(context).body?.color,
padding: const EdgeInsets.all(20),
),
onPressed: onPressed,
Expand Down Expand Up @@ -86,7 +86,8 @@ class AdaptiveActions extends HookWidget {
.toList(),
);
},
backgroundColor: Theme.of(context).cardColor,
backgroundColor:
PlatformTheme.of(context).secondaryBackgroundColor!,
);
},
);
Expand Down
8 changes: 4 additions & 4 deletions lib/components/shared/dialogs/replace_downloaded_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,25 @@ class ReplaceDownloadedDialog extends ConsumerWidget {
RadioListTile<bool>(
dense: true,
contentPadding: EdgeInsets.zero,
activeColor: Theme.of(context).primaryColor,
activeColor: PlatformTheme.of(context).primaryColor,
value: true,
groupValue: groupValue,
onChanged: (value) {
if (value != null) {
ref.read(replaceDownloadedFileState.state).state = value;
ref.read(replaceDownloadedFileState.notifier).state = value;
}
},
title: const Text("Replace all downloaded tracks"),
),
RadioListTile<bool>(
dense: true,
contentPadding: EdgeInsets.zero,
activeColor: Theme.of(context).primaryColor,
activeColor: PlatformTheme.of(context).primaryColor,
value: false,
groupValue: groupValue,
onChanged: (value) {
if (value != null) {
ref.read(replaceDownloadedFileState.state).state = value;
ref.read(replaceDownloadedFileState.notifier).state = value;
}
},
title: const Text("Skip downloading all downloaded tracks"),
Expand Down
Loading

0 comments on commit 3282370

Please sign in to comment.