💄 Optimized desktop experience

This commit is contained in:
LittleSheep 2025-06-23 02:23:04 +08:00
parent 4c0ad5ef32
commit 9367a515f4
10 changed files with 243 additions and 230 deletions

View File

@ -470,7 +470,7 @@ class AccountSettingsScreen extends HookConsumerWidget {
), ),
), ),
], ],
).padding(horizontal: 16); );
} else { } else {
// Single column layout for narrow screens // Single column layout for narrow screens
return Column( return Column(

View File

@ -85,52 +85,54 @@ class AccountConnectionSheet extends HookConsumerWidget {
return SheetScaffold( return SheetScaffold(
titleText: 'accountConnections'.tr(), titleText: 'accountConnections'.tr(),
child: Column( child: SingleChildScrollView(
crossAxisAlignment: CrossAxisAlignment.stretch, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.stretch,
Column( children: [
crossAxisAlignment: CrossAxisAlignment.start, Column(
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,
children: [ mainAxisAlignment: MainAxisAlignment.center,
getProviderIcon( children: [
connection.provider, getProviderIcon(
size: 32, connection.provider,
color: Theme.of(context).colorScheme.onSurface, size: 32,
), color: Theme.of(context).colorScheme.onSurface,
const Gap(8),
Text(getLocalizedProviderName(connection.provider)).tr(),
const Gap(4),
if (connection.meta.isNotEmpty)
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
for (final meta in connection.meta.entries)
Text(
'${meta.key.replaceAll('_', ' ').capitalizeEachWord()}: ${meta.value}',
style: const TextStyle(fontSize: 12),
),
],
), ),
Text( const Gap(8),
connection.providedIdentifier, Text(getLocalizedProviderName(connection.provider)).tr(),
style: Theme.of(context).textTheme.bodySmall, const Gap(4),
), if (connection.meta.isNotEmpty)
const Gap(8), Column(
Text( crossAxisAlignment: CrossAxisAlignment.stretch,
connection.lastUsedAt.formatSystem(), mainAxisSize: MainAxisSize.min,
style: Theme.of(context).textTheme.bodySmall, children: [
).opacity(0.85), for (final meta in connection.meta.entries)
], Text(
).padding(all: 20), '${meta.key.replaceAll('_', ' ').capitalizeEachWord()}: ${meta.value}',
const Divider(height: 1), style: const TextStyle(fontSize: 12),
ListTile( ),
leading: const Icon(Symbols.delete), ],
title: Text('accountConnectionDelete').tr(), ),
onTap: deleteConnection, Text(
contentPadding: const EdgeInsets.symmetric(horizontal: 20), connection.providedIdentifier,
), style: Theme.of(context).textTheme.bodySmall,
], ),
const Gap(8),
Text(
connection.lastUsedAt.formatSystem(),
style: Theme.of(context).textTheme.bodySmall,
).opacity(0.85),
],
).padding(all: 20),
const Divider(height: 1),
ListTile(
leading: const Icon(Symbols.delete),
title: Text('accountConnectionDelete').tr(),
onTap: deleteConnection,
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
),
],
),
), ),
); );
} }
@ -213,52 +215,56 @@ class AccountConnectionNewSheet extends HookConsumerWidget {
return SheetScaffold( return SheetScaffold(
titleText: 'accountConnectionAdd'.tr(), titleText: 'accountConnectionAdd'.tr(),
child: Column( child: SingleChildScrollView(
spacing: 16, child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, spacing: 16,
children: [ crossAxisAlignment: CrossAxisAlignment.stretch,
DropdownButtonFormField<String>( children: [
value: selectedProvider.value, DropdownButtonFormField<String>(
decoration: InputDecoration( value: selectedProvider.value,
prefixIcon: getProviderIcon( decoration: InputDecoration(
selectedProvider.value, prefixIcon: getProviderIcon(
size: 16, selectedProvider.value,
color: Theme.of(context).colorScheme.onSurface, size: 16,
).padding(all: 16), color: Theme.of(context).colorScheme.onSurface,
labelText: 'accountConnectionProvider'.tr(), ).padding(all: 16),
border: const OutlineInputBorder(), labelText: 'accountConnectionProvider'.tr(),
), border: const OutlineInputBorder(),
items:
providers.map((String provider) {
return DropdownMenuItem<String>(
value: provider,
child: Row(
children: [Text(getLocalizedProviderName(provider)).tr()],
),
);
}).toList(),
onChanged: (String? newValue) {
if (newValue != null) {
selectedProvider.value = newValue;
}
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text('accountConnectionDescription'.tr()),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton.icon(
onPressed: addConnection,
icon: const Icon(Symbols.add),
label: Text('next').tr(),
), ),
], items:
), providers.map((String provider) {
], return DropdownMenuItem<String>(
).padding(horizontal: 20, vertical: 24), value: provider,
child: Row(
children: [
Text(getLocalizedProviderName(provider)).tr(),
],
),
);
}).toList(),
onChanged: (String? newValue) {
if (newValue != null) {
selectedProvider.value = newValue;
}
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text('accountConnectionDescription'.tr()),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton.icon(
onPressed: addConnection,
icon: const Icon(Symbols.add),
label: Text('next').tr(),
),
],
),
],
).padding(horizontal: 20, vertical: 24),
),
); );
} }
} }

View File

@ -213,6 +213,7 @@ class _OidcScreenState extends ConsumerState<OidcScreen> {
} }
}, },
), ),
const Gap(8),
], ],
), ),
), ),

View File

@ -123,6 +123,7 @@ class CreatorHubScreen extends HookConsumerWidget {
); );
return AppScaffold( return AppScaffold(
noBackground: false,
appBar: AppBar( appBar: AppBar(
leading: !isWide ? const PageBackButton() : null, leading: !isWide ? const PageBackButton() : null,
title: Text('creatorHub').tr(), title: Text('creatorHub').tr(),

View File

@ -96,6 +96,7 @@ class ExploreScreen extends HookConsumerWidget {
Tab( Tab(
child: Text( child: Text(
'explore'.tr(), 'explore'.tr(),
textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!, color: Theme.of(context).appBarTheme.foregroundColor!,
), ),
@ -104,6 +105,7 @@ class ExploreScreen extends HookConsumerWidget {
Tab( Tab(
child: Text( child: Text(
'exploreFilterSubscriptions'.tr(), 'exploreFilterSubscriptions'.tr(),
textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!, color: Theme.of(context).appBarTheme.foregroundColor!,
), ),
@ -112,6 +114,7 @@ class ExploreScreen extends HookConsumerWidget {
Tab( Tab(
child: Text( child: Text(
'exploreFilterFriends'.tr(), 'exploreFilterFriends'.tr(),
textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
color: Theme.of(context).appBarTheme.foregroundColor!, color: Theme.of(context).appBarTheme.foregroundColor!,
), ),

View File

@ -191,7 +191,8 @@ class PostComposeScreen extends HookConsumerWidget {
progress: progressMap[idx], progress: progressMap[idx],
onRequestUpload: onRequestUpload:
() => ComposeLogic.uploadAttachment(ref, state, idx), () => ComposeLogic.uploadAttachment(ref, state, idx),
onDelete: () => ComposeLogic.deleteAttachment(ref, state, idx), onDelete:
() => ComposeLogic.deleteAttachment(ref, state, idx),
onMove: (delta) { onMove: (delta) {
state.attachments.value = ComposeLogic.moveAttachment( state.attachments.value = ComposeLogic.moveAttachment(
state.attachments.value, state.attachments.value,
@ -209,12 +210,9 @@ class PostComposeScreen extends HookConsumerWidget {
// Build UI // Build UI
return AppScaffold( return AppScaffold(
noBackground: false,
appBar: AppBar( appBar: AppBar(
leading: const PageBackButton(), leading: const PageBackButton(),
title:
isWideScreen(context)
? Text(originalPost != null ? 'editPost'.tr() : 'newPost'.tr())
: null,
actions: [ actions: [
IconButton( IconButton(
icon: const Icon(Symbols.settings), icon: const Icon(Symbols.settings),
@ -272,93 +270,98 @@ class PostComposeScreen extends HookConsumerWidget {
// Main content area // Main content area
Expanded( Expanded(
child: Row( child: ConstrainedBox(
spacing: 12, constraints: const BoxConstraints(maxWidth: 480),
crossAxisAlignment: CrossAxisAlignment.start, child: Row(
children: [ spacing: 12,
// Publisher profile picture crossAxisAlignment: CrossAxisAlignment.start,
GestureDetector( children: [
child: ProfilePictureWidget( // Publisher profile picture
fileId: state.currentPublisher.value?.picture?.id, GestureDetector(
radius: 20, child: ProfilePictureWidget(
fallbackIcon: fileId: state.currentPublisher.value?.picture?.id,
state.currentPublisher.value == null radius: 20,
? Symbols.question_mark fallbackIcon:
: null, state.currentPublisher.value == null
), ? Symbols.question_mark
onTap: () { : null,
showModalBottomSheet( ),
isScrollControlled: true, onTap: () {
context: context, showModalBottomSheet(
builder: (context) => const PublisherModal(), isScrollControlled: true,
).then((value) { context: context,
if (value != null) { builder: (context) => const PublisherModal(),
state.currentPublisher.value = value; ).then((value) {
} if (value != null) {
}); state.currentPublisher.value = value;
}, }
).padding(top: 16), });
},
).padding(top: 16),
// Post content form // Post content form
Expanded( Expanded(
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 12), padding: const EdgeInsets.symmetric(vertical: 12),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Content field with borderless design // Content field with borderless design
RawKeyboardListener( RawKeyboardListener(
focusNode: FocusNode(), focusNode: FocusNode(),
onKey: onKey:
(event) => ComposeLogic.handleKeyPress( (event) => ComposeLogic.handleKeyPress(
event, event,
state, state,
ref, ref,
context, context,
originalPost: originalPost, originalPost: originalPost,
repliedPost: repliedPost, repliedPost: repliedPost,
forwardedPost: forwardedPost, forwardedPost: forwardedPost,
postType: 0, // Regular post type postType: 0, // Regular post type
),
child: TextField(
controller: state.contentController,
style: theme.textTheme.bodyMedium,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'postContent'.tr(),
contentPadding: const EdgeInsets.all(8),
), ),
child: TextField( maxLines: null,
controller: state.contentController, onTapOutside:
style: theme.textTheme.bodyMedium, (_) =>
decoration: InputDecoration( FocusManager.instance.primaryFocus
border: InputBorder.none, ?.unfocus(),
hintText: 'postContent'.tr(),
contentPadding: const EdgeInsets.all(8),
), ),
maxLines: null,
onTapOutside:
(_) =>
FocusManager.instance.primaryFocus
?.unfocus(),
), ),
),
const Gap(8), const Gap(8),
// Attachments preview // Attachments preview
ValueListenableBuilder<List<UniversalFile>>( ValueListenableBuilder<List<UniversalFile>>(
valueListenable: state.attachments, valueListenable: state.attachments,
builder: (context, attachments, _) { builder: (context, attachments, _) {
if (attachments.isEmpty) return const SizedBox.shrink(); if (attachments.isEmpty) {
return LayoutBuilder( return const SizedBox.shrink();
builder: (context, constraints) { }
final isWide = isWideScreen(context); return LayoutBuilder(
return isWide builder: (context, constraints) {
? buildWideAttachmentGrid() final isWide = isWideScreen(context);
: buildNarrowAttachmentList(); return isWide
}, ? buildWideAttachmentGrid()
); : buildNarrowAttachmentList();
}, },
), );
], },
),
],
),
), ),
), ),
), ],
], ).padding(horizontal: 16),
).padding(horizontal: 16), ).alignment(Alignment.topCenter),
), ),
// Bottom toolbar // Bottom toolbar
@ -409,11 +412,11 @@ class PostComposeScreen extends HookConsumerWidget {
), ),
const Gap(4), const Gap(4),
Text( Text(
'edit'.tr(), 'edit'.tr(),
style: Theme.of(context).textTheme.labelMedium?.copyWith( style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Theme.of(context).colorScheme.onPrimaryContainer, color: Theme.of(context).colorScheme.onPrimaryContainer,
), ),
), ),
], ],
).padding(all: 16), ).padding(all: 16),
), ),
@ -427,10 +430,7 @@ class PostComposeScreen extends HookConsumerWidget {
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(Symbols.reply, size: 16),
Symbols.reply,
size: 16,
),
const Gap(4), const Gap(4),
Text( Text(
'postReplyingTo'.tr(), 'postReplyingTo'.tr(),
@ -452,10 +452,7 @@ class PostComposeScreen extends HookConsumerWidget {
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(Symbols.forward, size: 16),
Symbols.forward,
size: 16,
),
const Gap(4), const Gap(4),
Text( Text(
'postForwardingTo'.tr(), 'postForwardingTo'.tr(),
@ -482,10 +479,7 @@ class PostComposeScreen extends HookConsumerWidget {
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(Symbols.reply, size: 16),
Symbols.reply,
size: 16,
),
const Gap(4), const Gap(4),
Text( Text(
'postReplyingTo'.tr(), 'postReplyingTo'.tr(),
@ -510,10 +504,7 @@ class PostComposeScreen extends HookConsumerWidget {
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(Symbols.forward, size: 16),
Symbols.forward,
size: 16,
),
const Gap(4), const Gap(4),
Text( Text(
'postForwardingTo'.tr(), 'postForwardingTo'.tr(),
@ -537,37 +528,41 @@ class PostComposeScreen extends HookConsumerWidget {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
builder: (context) => DraggableScrollableSheet( builder:
initialChildSize: 0.7, (context) => DraggableScrollableSheet(
maxChildSize: 0.9, initialChildSize: 0.7,
minChildSize: 0.5, maxChildSize: 0.9,
builder: (context, scrollController) => Container( minChildSize: 0.5,
decoration: BoxDecoration( builder:
color: Theme.of(context).scaffoldBackgroundColor, (context, scrollController) => Container(
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)), decoration: BoxDecoration(
), color: Theme.of(context).scaffoldBackgroundColor,
child: Column( borderRadius: const BorderRadius.vertical(
children: [ top: Radius.circular(16),
Container( ),
width: 40, ),
height: 4, child: Column(
margin: const EdgeInsets.symmetric(vertical: 8), children: [
decoration: BoxDecoration( Container(
color: Theme.of(context).colorScheme.outline, width: 40,
borderRadius: BorderRadius.circular(2), height: 4,
margin: const EdgeInsets.symmetric(vertical: 8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.outline,
borderRadius: BorderRadius.circular(2),
),
),
Expanded(
child: SingleChildScrollView(
controller: scrollController,
padding: const EdgeInsets.all(16),
child: PostItem(item: post, isOpenable: false),
),
),
],
),
), ),
),
Expanded(
child: SingleChildScrollView(
controller: scrollController,
padding: const EdgeInsets.all(16),
child: PostItem(item: post, isOpenable: false),
),
),
],
), ),
),
),
); );
}, },
child: Container( child: Container(

View File

@ -525,7 +525,7 @@ class SettingsScreen extends HookConsumerWidget {
), ),
), ),
], ],
).padding(horizontal: 16); );
} else { } else {
// Single column layout for narrow screens // Single column layout for narrow screens
return Column( return Column(

View File

@ -135,7 +135,7 @@ class TabbedFabLocation extends FloatingActionButtonLocation {
final double fabX = final double fabX =
scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.scaffoldSize.width -
scaffoldGeometry.floatingActionButtonSize.width - scaffoldGeometry.floatingActionButtonSize.width -
16.0 - 16 -
safeAreaPadding.right; safeAreaPadding.right;
// Use safe area bottom padding + navigation bar height (typically 80px) // Use safe area bottom padding + navigation bar height (typically 80px)
@ -144,7 +144,7 @@ class TabbedFabLocation extends FloatingActionButtonLocation {
scaffoldGeometry.floatingActionButtonSize.height - scaffoldGeometry.floatingActionButtonSize.height -
scaffoldGeometry.bottomSheetSize.height - scaffoldGeometry.bottomSheetSize.height -
safeAreaPadding.bottom - safeAreaPadding.bottom -
80.0 + (isWideScreen(context) ? 24 : 80) +
16; 16;
return Offset(fabX, fabY); return Offset(fabX, fabY);

View File

@ -88,14 +88,14 @@ class PostItemCreator extends HookConsumerWidget {
); );
}, },
child: Material( child: Material(
color: backgroundColor, color: Colors.transparent,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
elevation: 1, elevation: 1,
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
onTap: () { onTap: () {
if (isOpenable) { if (isOpenable) {
context.router.push(PostDetailRoute(id: item.id)); context.router.pushPath('/posts/${item.id}');
} }
}, },
child: Padding( child: Padding(

View File

@ -94,6 +94,9 @@ PODS:
- flutter_webrtc - flutter_webrtc
- FlutterMacOS - FlutterMacOS
- WebRTC-SDK (= 125.6422.07) - WebRTC-SDK (= 125.6422.07)
- local_auth_darwin (0.0.1):
- Flutter
- FlutterMacOS
- media_kit_libs_macos_video (1.0.4): - media_kit_libs_macos_video (1.0.4):
- FlutterMacOS - FlutterMacOS
- media_kit_video (0.0.1): - media_kit_video (0.0.1):
@ -173,6 +176,7 @@ DEPENDENCIES:
- gal (from `Flutter/ephemeral/.symlinks/plugins/gal/darwin`) - gal (from `Flutter/ephemeral/.symlinks/plugins/gal/darwin`)
- irondash_engine_context (from `Flutter/ephemeral/.symlinks/plugins/irondash_engine_context/macos`) - irondash_engine_context (from `Flutter/ephemeral/.symlinks/plugins/irondash_engine_context/macos`)
- livekit_client (from `Flutter/ephemeral/.symlinks/plugins/livekit_client/macos`) - livekit_client (from `Flutter/ephemeral/.symlinks/plugins/livekit_client/macos`)
- local_auth_darwin (from `Flutter/ephemeral/.symlinks/plugins/local_auth_darwin/darwin`)
- media_kit_libs_macos_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_libs_macos_video/macos`) - media_kit_libs_macos_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_libs_macos_video/macos`)
- media_kit_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_video/macos`) - media_kit_video (from `Flutter/ephemeral/.symlinks/plugins/media_kit_video/macos`)
- package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`) - package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`)
@ -239,6 +243,8 @@ EXTERNAL SOURCES:
:path: Flutter/ephemeral/.symlinks/plugins/irondash_engine_context/macos :path: Flutter/ephemeral/.symlinks/plugins/irondash_engine_context/macos
livekit_client: livekit_client:
:path: Flutter/ephemeral/.symlinks/plugins/livekit_client/macos :path: Flutter/ephemeral/.symlinks/plugins/livekit_client/macos
local_auth_darwin:
:path: Flutter/ephemeral/.symlinks/plugins/local_auth_darwin/darwin
media_kit_libs_macos_video: media_kit_libs_macos_video:
:path: Flutter/ephemeral/.symlinks/plugins/media_kit_libs_macos_video/macos :path: Flutter/ephemeral/.symlinks/plugins/media_kit_libs_macos_video/macos
media_kit_video: media_kit_video:
@ -293,6 +299,7 @@ SPEC CHECKSUMS:
GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1 GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
irondash_engine_context: 893c7d96d20ce361d7e996f39d360c4c2f9869ba irondash_engine_context: 893c7d96d20ce361d7e996f39d360c4c2f9869ba
livekit_client: 6a35243df3da61750c98e266e02dedcf5d25c888 livekit_client: 6a35243df3da61750c98e266e02dedcf5d25c888
local_auth_darwin: 553ce4f9b16d3fdfeafce9cf042e7c9f77c1c391
media_kit_libs_macos_video: 85a23e549b5f480e72cae3e5634b5514bc692f65 media_kit_libs_macos_video: 85a23e549b5f480e72cae3e5634b5514bc692f65
media_kit_video: fa6564e3799a0a28bff39442334817088b7ca758 media_kit_video: fa6564e3799a0a28bff39442334817088b7ca758
nanopb: fad817b59e0457d11a5dfbde799381cd727c1275 nanopb: fad817b59e0457d11a5dfbde799381cd727c1275