fix(Desktop): Small improvement to padding and titlebar

This commit is contained in:
PartyDonut 2025-02-08 19:22:15 +01:00
parent 3b4b8a9101
commit 4371368fda
3 changed files with 125 additions and 109 deletions

View file

@ -106,8 +106,8 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
child: HomeBannerWidget(posters: homeCarouselItems), child: HomeBannerWidget(posters: homeCarouselItems),
), ),
), ),
} else if (AdaptiveLayout.of(context).isDesktop) },
const DefaultSliverTopBadding(), const DefaultSliverTopBadding(),
if (AdaptiveLayout.of(context).isDesktop) if (AdaptiveLayout.of(context).isDesktop)
const SliverToBoxAdapter( const SliverToBoxAdapter(
child: Row( child: Row(

View file

@ -16,6 +16,8 @@ class DefaultTitleBar extends ConsumerStatefulWidget {
} }
class _DefaultTitleBarState extends ConsumerState<DefaultTitleBar> with WindowListener { class _DefaultTitleBarState extends ConsumerState<DefaultTitleBar> with WindowListener {
bool hovering = false;
@override @override
void initState() { void initState() {
windowManager.addListener(this); windowManager.addListener(this);
@ -40,135 +42,149 @@ class _DefaultTitleBarState extends ConsumerState<DefaultTitleBar> with WindowLi
] ]
: <BoxShadow>[]; : <BoxShadow>[];
final iconColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.65); final iconColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.65);
return SizedBox( return MouseRegion(
height: widget.height, onEnter: (event) => setState(() => hovering = true),
child: switch (AdaptiveLayout.of(context).platform) { onExit: (event) => setState(() => hovering = false),
TargetPlatform.android || TargetPlatform.iOS => SizedBox(height: MediaQuery.paddingOf(context).top), child: AnimatedContainer(
TargetPlatform.windows || TargetPlatform.linux => Row( duration: const Duration(milliseconds: 250),
children: [ decoration: BoxDecoration(
Expanded( color: hovering ? Colors.black.withValues(alpha: 0.15) : Colors.transparent,
child: Container( ),
color: Colors.black.withValues(alpha: 0), height: widget.height,
child: DragToMoveArea( child: switch (AdaptiveLayout.of(context).platform) {
child: Row( TargetPlatform.android || TargetPlatform.iOS => SizedBox(height: MediaQuery.paddingOf(context).top),
crossAxisAlignment: CrossAxisAlignment.stretch, TargetPlatform.windows || TargetPlatform.linux => Row(
mainAxisSize: MainAxisSize.max, children: [
children: [ Expanded(
Container( child: Container(
padding: const EdgeInsets.only(left: 16), color: Colors.black.withValues(alpha: 0),
child: DefaultTextStyle( child: DragToMoveArea(
style: TextStyle( child: Row(
color: iconColor, crossAxisAlignment: CrossAxisAlignment.stretch,
fontSize: 14, mainAxisSize: MainAxisSize.max,
children: [
Container(
padding: const EdgeInsets.only(left: 16),
child: DefaultTextStyle(
style: TextStyle(
color: iconColor,
fontSize: 14,
),
child: Text(widget.label ?? ""),
), ),
child: Text(widget.label ?? ""),
), ),
), ],
], ),
), ),
), ),
), ),
), Row(
Row( children: [
children: [ FutureBuilder<List<bool>>(future: Future.microtask(() async {
FutureBuilder( final isMinimized = await windowManager.isMinimized();
future: windowManager.isMinimizable(),
builder: (context, data) {
final isMinimized = !(data.data ?? false);
return IconButton(
style: IconButton.styleFrom(
hoverColor: brightness == Brightness.light
? Colors.black.withValues(alpha: 0.1)
: Colors.white.withValues(alpha: 0.2),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2))),
onPressed: () async {
if (isMinimized) {
windowManager.restore();
} else {
windowManager.minimize();
}
},
icon: Transform.translate(
offset: const Offset(0, -2),
child: Icon(
Icons.minimize_rounded,
color: iconColor,
size: 20,
shadows: shadows,
),
),
);
}),
FutureBuilder<List<bool>>(
future: Future.microtask(() async {
final isMaximized = await windowManager.isMaximized();
final isFullScreen = await windowManager.isFullScreen(); final isFullScreen = await windowManager.isFullScreen();
return [isMaximized, isFullScreen]; return [isMinimized, isFullScreen];
}), }), builder: (context, snapshot) {
builder: (BuildContext context, AsyncSnapshot<List<bool>> snapshot) { final isMinimized = snapshot.data?.firstOrNull ?? false;
final maximized = snapshot.data?.firstOrNull ?? false;
final fullScreen = snapshot.data?.lastOrNull ?? false; final fullScreen = snapshot.data?.lastOrNull ?? false;
return IconButton( return IconButton(
style: IconButton.styleFrom( style: IconButton.styleFrom(
hoverColor: brightness == Brightness.light hoverColor: brightness == Brightness.light
? Colors.black.withValues(alpha: 0.1) ? Colors.black.withValues(alpha: 0.1)
: Colors.white.withValues(alpha: 0.2), : Colors.white.withValues(alpha: 0.2),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2))),
),
onPressed: () async { onPressed: () async {
if (fullScreen && maximized) {
await windowManager.setFullScreen(false);
await windowManager.unmaximize();
return;
}
if (fullScreen) { if (fullScreen) {
await windowManager.setFullScreen(false); await windowManager.setFullScreen(false);
} else if (!maximized) { }
await windowManager.maximize(); if (isMinimized) {
windowManager.restore();
} else { } else {
await windowManager.unmaximize(); windowManager.minimize();
} }
}, },
icon: Transform.translate( icon: Transform.translate(
offset: const Offset(0, 0), offset: const Offset(0, -2),
child: Icon( child: Icon(
maximized ? Icons.maximize_rounded : Icons.crop_square_rounded, Icons.minimize_rounded,
color: iconColor, color: iconColor,
size: 19, size: 20,
shadows: shadows, shadows: shadows,
), ),
), ),
); );
}, }),
), FutureBuilder<List<bool>>(
IconButton( future: Future.microtask(() async {
style: IconButton.styleFrom( final isMaximized = await windowManager.isMaximized();
hoverColor: Colors.red, final isFullScreen = await windowManager.isFullScreen();
shape: RoundedRectangleBorder( return [isMaximized, isFullScreen];
borderRadius: BorderRadius.circular(2), }),
builder: (BuildContext context, AsyncSnapshot<List<bool>> snapshot) {
final maximized = snapshot.data?.firstOrNull ?? false;
final fullScreen = snapshot.data?.lastOrNull ?? false;
return IconButton(
style: IconButton.styleFrom(
hoverColor: brightness == Brightness.light
? Colors.black.withValues(alpha: 0.1)
: Colors.white.withValues(alpha: 0.2),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
onPressed: () async {
if (fullScreen && maximized) {
await windowManager.setFullScreen(false);
await windowManager.unmaximize();
return;
}
if (fullScreen) {
await windowManager.setFullScreen(false);
} else if (!maximized) {
await windowManager.maximize();
} else {
await windowManager.unmaximize();
}
},
icon: Transform.translate(
offset: const Offset(0, 0),
child: Icon(
maximized ? Icons.maximize_rounded : Icons.crop_square_rounded,
color: iconColor,
size: 19,
shadows: shadows,
),
),
);
},
),
IconButton(
style: IconButton.styleFrom(
hoverColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2),
),
),
onPressed: () async {
windowManager.close();
},
icon: Transform.translate(
offset: const Offset(0, -2),
child: Icon(
Icons.close_rounded,
color: iconColor,
size: 23,
shadows: shadows,
),
), ),
), ),
onPressed: () async { ],
windowManager.close(); ),
}, ],
icon: Transform.translate( ),
offset: const Offset(0, -2), TargetPlatform.macOS => const SizedBox.shrink(),
child: Icon( _ => Text(widget.label ?? "Fladder"),
Icons.close_rounded, },
color: iconColor, ),
size: 23,
shadows: shadows,
),
),
),
],
),
],
),
TargetPlatform.macOS => const SizedBox.shrink(),
_ => Text(widget.label ?? "Fladder"),
},
); );
} }
} }

View file

@ -19,8 +19,8 @@ class DefaultSliverTopBadding extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return (AdaptiveLayout.viewSizeOf(context) != ViewSize.phone) return (AdaptiveLayout.viewSizeOf(context) == ViewSize.phone)
? const SliverPadding(padding: EdgeInsets.only(top: 35)) ? const SliverToBoxAdapter()
: SliverPadding(padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top)); : SliverPadding(padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top));
} }
} }