Skip to content

Commit

Permalink
feat: macos title bar spacing and lyrics page margin separate
Browse files Browse the repository at this point in the history
  • Loading branch information
@KRTirtho
KRTirtho committed Mar 11, 2023
1 parent 4ba1e70 commit a0b3771
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 81 deletions.
124 changes: 71 additions & 53 deletions lib/components/root/sidebar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@ class Sidebar extends HookConsumerWidget {
);
}

static Widget macSpacer = const SizedBox(height: 25);

static void goToSettings(BuildContext context) {
GoRouter.of(context).go("/settings");
}
Expand Down Expand Up @@ -93,61 +91,76 @@ class Sidebar extends HookConsumerWidget {

return Row(
children: [
SidebarX(
controller: controller,
items: sidebarTileList.map(
(e) {
return SidebarXItem(
// iconWidget: Badge(
// backgroundColor: Theme.of(context).primaryColor,
// isLabelVisible: e.title == "Library" && downloadCount > 0,
// label: Text(
// downloadCount.toString(),
// style: const TextStyle(
// color: Colors.white,
// fontSize: 10,
// ),
// ),
// child: Icon(e.icon),
// ),
icon: e.icon,
label: e.title,
);
},
).toList(),
headerBuilder: (_, __) => const SidebarHeader(),
footerBuilder: (_, __) => const Padding(
padding: EdgeInsets.only(bottom: 5),
child: SidebarFooter(),
),
showToggleButton: false,
theme: SidebarXTheme(
width: 60,
margin: const EdgeInsets.all(10).copyWith(bottom: 122),
),
extendedTheme: SidebarXTheme(
width: 250,
margin: const EdgeInsets.all(10).copyWith(bottom: 122, left: 0),
padding: const EdgeInsets.symmetric(horizontal: 6),
decoration: BoxDecoration(
SafeArea(
child: SidebarX(
controller: controller,
items: sidebarTileList.map(
(e) {
return SidebarXItem(
// iconWidget: Badge(
// backgroundColor: Theme.of(context).primaryColor,
// isLabelVisible: e.title == "Library" && downloadCount > 0,
// label: Text(
// downloadCount.toString(),
// style: const TextStyle(
// color: Colors.white,
// fontSize: 10,
// ),
// ),
// child: Icon(e.icon),
// ),
icon: e.icon,
label: e.title,
);
},
).toList(),
headerBuilder: (_, __) => const SidebarHeader(),
footerBuilder: (_, __) => const Padding(
padding: EdgeInsets.only(bottom: 5),
child: SidebarFooter(),
),
showToggleButton: false,
theme: SidebarXTheme(
width: 50,
margin: EdgeInsets.only(bottom: 10, top: kIsMacOS ? 35 : 5),
selectedItemDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
),
selectedIconTheme: IconThemeData(
color: Theme.of(context).colorScheme.primary,
),
),
extendedTheme: SidebarXTheme(
width: 250,
margin: EdgeInsets.only(
bottom: 10,
left: 0,
top: kIsMacOS ? 35 : 5,
),
padding: const EdgeInsets.symmetric(horizontal: 6),
decoration: BoxDecoration(
color: bgColor?.withOpacity(0.8),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
)),
selectedItemDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
),
selectedIconTheme: IconThemeData(
color: Theme.of(context).colorScheme.primary,
),
selectedTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w600,
),
itemTextPadding: const EdgeInsets.only(left: 10),
selectedItemTextPadding: const EdgeInsets.only(left: 10),
),
selectedItemDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
),
selectedIconTheme: IconThemeData(
color: Theme.of(context).colorScheme.primary,
),
selectedTextStyle:
Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w600,
),
itemTextPadding: const EdgeInsets.only(left: 10),
selectedItemTextPadding: const EdgeInsets.only(left: 10),
),
),
),
Expanded(child: child)
Expand All @@ -164,7 +177,12 @@ class SidebarHeader extends HookWidget {
final breakpoint = useBreakpoints();

if (breakpoint <= Breakpoints.md) {
return Sidebar.brandLogo();
return Container(
height: 40,
width: 40,
margin: const EdgeInsets.only(bottom: 5),
child: Sidebar.brandLogo(),
);
}

return Padding(
Expand Down
22 changes: 20 additions & 2 deletions lib/components/shared/themed_button_tab_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,37 @@
import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:spotube/hooks/use_breakpoint_value.dart';
import 'package:spotube/hooks/use_brightness_value.dart';
import 'package:spotube/utils/platform.dart';

class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
final List<String> tabs;
const ThemedButtonsTabBar({Key? key, required this.tabs}) : super(key: key);

@override
Widget build(BuildContext context) {
final bgColor = useBrightnessValue(
Theme.of(context).colorScheme.primaryContainer,
Color.lerp(Theme.of(context).colorScheme.primary, Colors.black, 0.7)!,
);

final breakpoint = useBreakpointValue(
sm: 85.0,
md: 35.0,
others: 0.0,
);

return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
padding: EdgeInsets.only(
left: kIsMacOS ? breakpoint : 0,
top: 8,
bottom: 8,
),
child: ButtonsTabBar(
radius: 100,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceVariant,
color: bgColor,
borderRadius: BorderRadius.circular(15),
),
labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
Expand Down
60 changes: 34 additions & 26 deletions lib/pages/lyrics/lyrics.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/page_window_title_bar.dart';
import 'package:spotube/components/shared/image/universal_image.dart';
import 'package:spotube/components/shared/themed_button_tab_bar.dart';
import 'package:spotube/hooks/use_breakpoints.dart';
import 'package:spotube/hooks/use_custom_status_bar_color.dart';
import 'package:spotube/hooks/use_palette_color.dart';
import 'package:spotube/pages/lyrics/plain_lyrics.dart';
Expand All @@ -32,6 +33,7 @@ class LyricsPage extends HookConsumerWidget {
[playlist?.activeTrack.album?.images],
);
final palette = usePaletteColor(albumArt, ref);
final breakpoint = useBreakpoints();

useCustomStatusBarColor(
palette.color,
Expand Down Expand Up @@ -102,33 +104,39 @@ class LyricsPage extends HookConsumerWidget {
}
return DefaultTabController(
length: 2,
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: !kIsMacOS
? const PageWindowTitleBar(
backgroundColor: Colors.transparent,
title: tabbar,
)
: tabbar,
body: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
image: DecorationImage(
image: UniversalImage.imageProvider(albumArt),
fit: BoxFit.cover,
child: SafeArea(
bottom: breakpoint > Breakpoints.md,
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: !kIsMacOS
? const PageWindowTitleBar(
backgroundColor: Colors.transparent,
title: tabbar,
)
: tabbar,
body: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
image: DecorationImage(
image: UniversalImage.imageProvider(albumArt),
fit: BoxFit.cover,
),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(10),
),
),
borderRadius: BorderRadius.circular(8),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: ColoredBox(
color: palette.color.withOpacity(.7),
child: SafeArea(
child: TabBarView(
children: [
SyncedLyrics(palette: palette, isModal: isModal),
PlainLyrics(palette: palette, isModal: isModal),
],
margin: const EdgeInsets.only(bottom: 10),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: ColoredBox(
color: palette.color.withOpacity(.7),
child: SafeArea(
child: TabBarView(
children: [
SyncedLyrics(palette: palette, isModal: isModal),
PlainLyrics(palette: palette, isModal: isModal),
],
),
),
),
),
Expand Down

0 comments on commit a0b3771

Please sign in to comment.