mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 07:55:18 +00:00
refactor: connected device button
This commit is contained in:
parent
418a0d29bd
commit
7ee071f2e3
@ -1,6 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:shadcn_flutter/shadcn_flutter.dart';
|
||||
import 'package:spotube/collections/spotube_icons.dart';
|
||||
import 'package:spotube/extensions/context.dart';
|
||||
import 'package:spotube/pages/connect/connect.dart';
|
||||
@ -14,110 +13,55 @@ class ConnectDeviceButton extends HookConsumerWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, ref) {
|
||||
final ThemeData(:colorScheme) = Theme.of(context);
|
||||
final pixelRatio = MediaQuery.of(context).devicePixelRatio;
|
||||
final connectClients = ref.watch(connectClientsProvider);
|
||||
|
||||
final hasServices =
|
||||
connectClients.asData?.value.services.isNotEmpty == true;
|
||||
|
||||
if (_sidebar) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: TextButton(
|
||||
child: Button.primary(
|
||||
onPressed: () {
|
||||
ServiceUtils.pushNamed(context, ConnectPage.name);
|
||||
},
|
||||
style: FilledButton.styleFrom(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.all(5),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(context.l10n.devices),
|
||||
if (connectClients.asData?.value.services.isNotEmpty == true)
|
||||
Text(
|
||||
" (${connectClients.asData?.value.services.length})",
|
||||
),
|
||||
const Spacer(),
|
||||
const Icon(SpotubeIcons.speaker),
|
||||
const Gap(5),
|
||||
],
|
||||
trailing: const Icon(SpotubeIcons.speaker),
|
||||
child: Text(
|
||||
"${context.l10n.devices}"
|
||||
"${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return SizedBox(
|
||||
height: 40 * pixelRatio,
|
||||
child: Stack(
|
||||
alignment: Alignment.centerRight,
|
||||
fit: StackFit.loose,
|
||||
children: [
|
||||
Material(
|
||||
type: MaterialType.transparency,
|
||||
child: Center(
|
||||
child: ClipRect(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
ServiceUtils.pushNamed(context, ConnectPage.name);
|
||||
},
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: Ink(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
color: colorScheme.primaryContainer,
|
||||
),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (connectClients.asData?.value.resolvedService !=
|
||||
null) ...[
|
||||
Container(
|
||||
width: 7,
|
||||
height: 7,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.greenAccent,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
),
|
||||
const Gap(5),
|
||||
],
|
||||
Text(context.l10n.devices),
|
||||
if (connectClients.asData?.value.services.isNotEmpty ==
|
||||
true)
|
||||
Text(
|
||||
" (${connectClients.asData?.value.services.length})",
|
||||
style: TextStyle(
|
||||
color: colorScheme.onPrimaryContainer
|
||||
.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
const Gap(35),
|
||||
],
|
||||
),
|
||||
return Row(
|
||||
children: [
|
||||
SecondaryBadge(
|
||||
onPressed: () {
|
||||
ServiceUtils.pushNamed(context, ConnectPage.name);
|
||||
},
|
||||
style: const ButtonStyle.secondary(size: ButtonSize(.8)),
|
||||
leading: connectClients.asData?.value.resolvedService != null
|
||||
? const Center(
|
||||
child: DotItem(
|
||||
size: 6,
|
||||
borderRadius: 10,
|
||||
color: Colors.green,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
child: Text(
|
||||
"${context.l10n.devices}"
|
||||
"${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
|
||||
),
|
||||
Positioned(
|
||||
right: -3,
|
||||
child: IconButton.filled(
|
||||
icon: const Icon(SpotubeIcons.speaker),
|
||||
style: IconButton.styleFrom(
|
||||
visualDensity: VisualDensity.standard,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
),
|
||||
onPressed: () {
|
||||
ServiceUtils.pushNamed(context, ConnectPage.name);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton.primary(
|
||||
icon: const Icon(SpotubeIcons.speaker),
|
||||
onPressed: () {
|
||||
ServiceUtils.pushNamed(context, ConnectPage.name);
|
||||
},
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,6 @@ import 'package:shadcn_flutter/shadcn_flutter.dart';
|
||||
import 'package:spotube/collections/side_bar_tiles.dart';
|
||||
import 'package:spotube/extensions/constrains.dart';
|
||||
import 'package:spotube/extensions/context.dart';
|
||||
import 'package:spotube/hooks/utils/use_brightness_value.dart';
|
||||
import 'package:spotube/models/database/database.dart';
|
||||
import 'package:spotube/provider/download_manager_provider.dart';
|
||||
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
|
||||
@ -61,6 +60,9 @@ class SpotubeNavigationBar extends HookConsumerWidget {
|
||||
children: [
|
||||
for (final tile in navbarTileList)
|
||||
NavigationButton(
|
||||
style: const ButtonStyle.muted(density: ButtonDensity.icon),
|
||||
selectedStyle:
|
||||
const ButtonStyle.fixed(density: ButtonDensity.icon),
|
||||
child: Badge(
|
||||
isLabelVisible: tile.id == "library" && downloadCount > 0,
|
||||
label: Text(downloadCount.toString()),
|
||||
|
@ -11,6 +11,7 @@ import 'package:spotube/modules/library/user_downloads.dart';
|
||||
import 'package:spotube/modules/library/user_playlists.dart';
|
||||
import 'package:spotube/extensions/context.dart';
|
||||
import 'package:spotube/provider/download_manager_provider.dart';
|
||||
import 'package:spotube/utils/platform.dart';
|
||||
|
||||
class LibraryPage extends HookConsumerWidget {
|
||||
static const name = "library";
|
||||
@ -37,22 +38,23 @@ class LibraryPage extends HookConsumerWidget {
|
||||
bottom: false,
|
||||
child: Scaffold(
|
||||
headers: [
|
||||
TitleBar(
|
||||
leading: [
|
||||
TabList(
|
||||
index: index.value,
|
||||
children: [
|
||||
for (final child in children)
|
||||
TabButton(
|
||||
child: child,
|
||||
onPressed: () {
|
||||
index.value = children.indexOf(child);
|
||||
},
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
)
|
||||
if (kIsWindows || kIsLinux) const TitleBar(),
|
||||
SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: TabList(
|
||||
index: index.value,
|
||||
children: [
|
||||
for (final child in children)
|
||||
TabButton(
|
||||
child: child,
|
||||
onPressed: () {
|
||||
index.value = children.indexOf(child);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Gap(10),
|
||||
],
|
||||
child: IndexedStack(
|
||||
index: index.value,
|
||||
|
Loading…
Reference in New Issue
Block a user