kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-15 00:25:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: macos title bar spacing and lyrics page margin separate

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-03-11 10:50:52 +06:00
parent 4ba1e70636
commit a0b377104f
3 changed files with 125 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
lib/components/root/sidebar.dart
View File

@ -41,8 +41,6 @@ class Sidebar extends HookConsumerWidget {
); );
} }
static Widget macSpacer = const SizedBox(height: 25);
static void goToSettings(BuildContext context) { static void goToSettings(BuildContext context) {
GoRouter.of(context).go("/settings"); GoRouter.of(context).go("/settings");
} }
@ -93,61 +91,76 @@ class Sidebar extends HookConsumerWidget {
return Row( return Row(
children: [ children: [
SidebarX( SafeArea(
controller: controller, child: SidebarX(
items: sidebarTileList.map( controller: controller,
(e) { items: sidebarTileList.map(
return SidebarXItem( (e) {
// iconWidget: Badge( return SidebarXItem(
// backgroundColor: Theme.of(context).primaryColor, // iconWidget: Badge(
// isLabelVisible: e.title == "Library" && downloadCount > 0, // backgroundColor: Theme.of(context).primaryColor,
// label: Text( // isLabelVisible: e.title == "Library" && downloadCount > 0,
// downloadCount.toString(), // label: Text(
// style: const TextStyle( // downloadCount.toString(),
// color: Colors.white, // style: const TextStyle(
// fontSize: 10, // color: Colors.white,
// ), // fontSize: 10,
// ), // ),
// child: Icon(e.icon), // ),
// ), // child: Icon(e.icon),
icon: e.icon, // ),
label: e.title, icon: e.icon,
); label: e.title,
}, );
).toList(), },
headerBuilder: (_, __) => const SidebarHeader(), ).toList(),
footerBuilder: (_, __) => const Padding( headerBuilder: (_, __) => const SidebarHeader(),
padding: EdgeInsets.only(bottom: 5), footerBuilder: (_, __) => const Padding(
child: SidebarFooter(), padding: EdgeInsets.only(bottom: 5),
), child: SidebarFooter(),
showToggleButton: false, ),
theme: SidebarXTheme( showToggleButton: false,
width: 60, theme: SidebarXTheme(
margin: const EdgeInsets.all(10).copyWith(bottom: 122), width: 50,
), margin: EdgeInsets.only(bottom: 10, top: kIsMacOS ? 35 : 5),
extendedTheme: SidebarXTheme( selectedItemDecoration: BoxDecoration(
width: 250, borderRadius: BorderRadius.circular(10),
margin: const EdgeInsets.all(10).copyWith(bottom: 122, left: 0), color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
padding: const EdgeInsets.symmetric(horizontal: 6), ),
decoration: BoxDecoration( 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), color: bgColor?.withOpacity(0.8),
borderRadius: const BorderRadius.only( borderRadius: const BorderRadius.only(
topRight: Radius.circular(10), topRight: Radius.circular(10),
bottomRight: 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) Expanded(child: child)
@ -164,7 +177,12 @@ class SidebarHeader extends HookWidget {
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
if (breakpoint <= Breakpoints.md) { if (breakpoint <= Breakpoints.md) {
return Sidebar.brandLogo(); return Container(
height: 40,
width: 40,
margin: const EdgeInsets.only(bottom: 5),
child: Sidebar.brandLogo(),
);
} }
return Padding( return Padding(

22
lib/components/shared/themed_button_tab_bar.dart
View File

@ -1,6 +1,9 @@
import 'package:buttons_tabbar/buttons_tabbar.dart'; import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.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 { class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
final List<String> tabs; final List<String> tabs;
@ -8,12 +11,27 @@ class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
@override @override
Widget build(BuildContext context) { 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( return Padding(
padding: const EdgeInsets.symmetric(vertical: 8), padding: EdgeInsets.only(
left: kIsMacOS ? breakpoint : 0,
top: 8,
bottom: 8,
),
child: ButtonsTabBar( child: ButtonsTabBar(
radius: 100, radius: 100,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceVariant, color: bgColor,
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(15),
), ),
labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith( labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(

60
lib/pages/lyrics/lyrics.dart
View File

@ -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/page_window_title_bar.dart';
import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/components/shared/image/universal_image.dart';
import 'package:spotube/components/shared/themed_button_tab_bar.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_custom_status_bar_color.dart';
import 'package:spotube/hooks/use_palette_color.dart'; import 'package:spotube/hooks/use_palette_color.dart';
import 'package:spotube/pages/lyrics/plain_lyrics.dart'; import 'package:spotube/pages/lyrics/plain_lyrics.dart';
@ -32,6 +33,7 @@ class LyricsPage extends HookConsumerWidget {
[playlist?.activeTrack.album?.images], [playlist?.activeTrack.album?.images],
); );
final palette = usePaletteColor(albumArt, ref); final palette = usePaletteColor(albumArt, ref);
final breakpoint = useBreakpoints();
useCustomStatusBarColor( useCustomStatusBarColor(
palette.color, palette.color,
@ -102,33 +104,39 @@ class LyricsPage extends HookConsumerWidget {
} }
return DefaultTabController( return DefaultTabController(
length: 2, length: 2,
child: Scaffold( child: SafeArea(
extendBodyBehindAppBar: true, bottom: breakpoint > Breakpoints.md,
appBar: !kIsMacOS child: Scaffold(
? const PageWindowTitleBar( extendBodyBehindAppBar: true,
backgroundColor: Colors.transparent, appBar: !kIsMacOS
title: tabbar, ? const PageWindowTitleBar(
) backgroundColor: Colors.transparent,
: tabbar, title: tabbar,
body: Container( )
clipBehavior: Clip.hardEdge, : tabbar,
decoration: BoxDecoration( body: Container(
image: DecorationImage( clipBehavior: Clip.hardEdge,
image: UniversalImage.imageProvider(albumArt), decoration: BoxDecoration(
fit: BoxFit.cover, image: DecorationImage(
image: UniversalImage.imageProvider(albumArt),
fit: BoxFit.cover,
),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(10),
),
), ),
borderRadius: BorderRadius.circular(8), margin: const EdgeInsets.only(bottom: 10),
), child: BackdropFilter(
child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: ColoredBox(
child: ColoredBox( color: palette.color.withOpacity(.7),
color: palette.color.withOpacity(.7), child: SafeArea(
child: SafeArea( child: TabBarView(
child: TabBarView( children: [
children: [ SyncedLyrics(palette: palette, isModal: isModal),
SyncedLyrics(palette: palette, isModal: isModal), PlainLyrics(palette: palette, isModal: isModal),
PlainLyrics(palette: palette, isModal: isModal), ],
], ),
), ),
), ),
), ),