From a0b377104f9822561d3b46dbc6551bb561842480 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sat, 11 Mar 2023 10:50:52 +0600 Subject: [PATCH] feat: macos title bar spacing and lyrics page margin separate --- lib/components/root/sidebar.dart | 124 ++++++++++-------- .../shared/themed_button_tab_bar.dart | 22 +++- lib/pages/lyrics/lyrics.dart | 60 +++++---- 3 files changed, 125 insertions(+), 81 deletions(-) diff --git a/lib/components/root/sidebar.dart b/lib/components/root/sidebar.dart index 83fe94d85..6002ac0e5 100644 --- a/lib/components/root/sidebar.dart +++ b/lib/components/root/sidebar.dart @@ -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"); } @@ -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) @@ -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( diff --git a/lib/components/shared/themed_button_tab_bar.dart b/lib/components/shared/themed_button_tab_bar.dart index c968020b0..58c68fdda 100644 --- a/lib/components/shared/themed_button_tab_bar.dart +++ b/lib/components/shared/themed_button_tab_bar.dart @@ -1,6 +1,9 @@ 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 tabs; @@ -8,12 +11,27 @@ class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget { @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( diff --git a/lib/pages/lyrics/lyrics.dart b/lib/pages/lyrics/lyrics.dart index e5aecd5b9..a2c0c537f 100644 --- a/lib/pages/lyrics/lyrics.dart +++ b/lib/pages/lyrics/lyrics.dart @@ -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'; @@ -32,6 +33,7 @@ class LyricsPage extends HookConsumerWidget { [playlist?.activeTrack.album?.images], ); final palette = usePaletteColor(albumArt, ref); + final breakpoint = useBreakpoints(); useCustomStatusBarColor( palette.color, @@ -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), + ], + ), ), ), ),