mirror of
https://github.com/lollipopkit/flutter_server_box.git
synced 2025-12-17 07:14:28 +01:00
optimization: desktop UI (#747)
This commit is contained in:
@@ -1,123 +1,164 @@
|
||||
import 'package:fl_lib/fl_lib.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:server_box/data/res/store.dart';
|
||||
import 'package:flutter_reorderable_grid_view/widgets/widgets.dart';
|
||||
|
||||
import 'package:server_box/data/model/server/snippet.dart';
|
||||
import 'package:server_box/core/route.dart';
|
||||
import 'package:server_box/data/provider/snippet.dart';
|
||||
import 'package:server_box/view/page/snippet/edit.dart';
|
||||
|
||||
class SnippetListPage extends StatefulWidget {
|
||||
const SnippetListPage({super.key});
|
||||
|
||||
@override
|
||||
State<SnippetListPage> createState() => _SnippetListPageState();
|
||||
|
||||
static const route = AppRouteNoArg(
|
||||
page: SnippetListPage.new,
|
||||
path: '/snippets',
|
||||
);
|
||||
}
|
||||
|
||||
class _SnippetListPageState extends State<SnippetListPage>
|
||||
with AutomaticKeepAliveClientMixin {
|
||||
class _SnippetListPageState extends State<SnippetListPage> with AutomaticKeepAliveClientMixin {
|
||||
final _tag = ''.vn;
|
||||
final _splitViewCtrl = SplitViewController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_tag.dispose();
|
||||
_splitViewCtrl.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return _buildBody();
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
return SnippetProvider.snippets.listenVal(
|
||||
(snippets) {
|
||||
return _tag.listenVal((tag) {
|
||||
final child = _buildScaffold(snippets, tag);
|
||||
// if (isMobile) {
|
||||
return child;
|
||||
// }
|
||||
|
||||
// return SplitView(
|
||||
// controller: _splitViewCtrl,
|
||||
// leftWeight: 1,
|
||||
// rightWeight: 1.3,
|
||||
// initialRight: Center(child: Text(libL10n.empty)),
|
||||
// leftBuilder: (_, __) => child,
|
||||
// );
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildScaffold(List<Snippet> snippets, String tag) {
|
||||
return Scaffold(
|
||||
appBar: TagSwitcher(
|
||||
tags: SnippetProvider.tags,
|
||||
onTagChanged: (tag) => _tag.value = tag,
|
||||
initTag: _tag.value,
|
||||
),
|
||||
body: _buildBody(),
|
||||
body: _buildSnippetList(snippets, tag),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
heroTag: 'snippetAdd',
|
||||
child: const Icon(Icons.add),
|
||||
onPressed: () => AppRoutes.snippetEdit().go(context),
|
||||
onPressed: () {
|
||||
// if (ResponsiveBreakpoints.of(context).isMobile) {
|
||||
SnippetEditPage.route.go(context);
|
||||
// } else {
|
||||
// _splitViewCtrl.replace(const SnippetEditPage());
|
||||
// }
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
return SnippetProvider.snippets.listenVal(
|
||||
(snippets) {
|
||||
if (snippets.isEmpty) return Center(child: Text(libL10n.empty));
|
||||
return _tag.listenVal((tag) => _buildSnippetList(snippets, tag));
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSnippetList(List<Snippet> snippets, String tag) {
|
||||
if (snippets.isEmpty) return Center(child: Text(libL10n.empty));
|
||||
|
||||
final filtered = tag == TagSwitcher.kDefaultTag
|
||||
? snippets
|
||||
: snippets.where((e) => e.tags?.contains(tag) ?? false).toList();
|
||||
|
||||
return ReorderableListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9),
|
||||
itemCount: filtered.length,
|
||||
onReorder: (oldIdx, newIdx) {
|
||||
snippets.moveByItem(
|
||||
oldIdx,
|
||||
newIdx,
|
||||
filtered: filtered,
|
||||
onMove: (p0) {
|
||||
Stores.setting.snippetOrder.put(p0.map((e) => e.name).toList());
|
||||
},
|
||||
);
|
||||
SnippetProvider.snippets.notify();
|
||||
},
|
||||
footer: UIs.height77,
|
||||
buildDefaultDragHandles: false,
|
||||
itemBuilder: (context, idx) {
|
||||
final snippet = filtered.elementAt(idx);
|
||||
return ReorderableDelayedDragStartListener(
|
||||
key: ValueKey(idx),
|
||||
index: idx,
|
||||
final generatedChildren = List.generate(
|
||||
filtered.length,
|
||||
(idx) {
|
||||
final snippet = filtered.elementAtOrNull(idx);
|
||||
if (snippet == null) return UIs.placeholder;
|
||||
return Container(
|
||||
key: ValueKey(snippet.name),
|
||||
child: _buildSnippetItem(snippet),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return ReorderableBuilder(
|
||||
children: generatedChildren,
|
||||
onReorder: (ReorderedListFunction reorderedListFunction) {
|
||||
setState(() {
|
||||
final newFiltered = reorderedListFunction(filtered) as List<Snippet>;
|
||||
snippets.moveByItem(
|
||||
0,
|
||||
0,
|
||||
filtered: filtered,
|
||||
onMove: (p0) {
|
||||
Stores.setting.snippetOrder.put(newFiltered.map((e) => e.name).toList());
|
||||
},
|
||||
);
|
||||
SnippetProvider.snippets.notify();
|
||||
});
|
||||
},
|
||||
builder: (children) {
|
||||
return GridView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9),
|
||||
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
maxCrossAxisExtent: 330,
|
||||
childAspectRatio: 3.4,
|
||||
),
|
||||
children: children,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSnippetItem(Snippet snippet) {
|
||||
return CardX(
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.only(left: 23, right: 17),
|
||||
title: Text(
|
||||
snippet.name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
subtitle: Text(
|
||||
snippet.note ?? snippet.script,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 3,
|
||||
style: UIs.textGrey,
|
||||
),
|
||||
trailing: const Icon(Icons.keyboard_arrow_right),
|
||||
onTap: () => AppRoutes.snippetEdit(snippet: snippet).go(context),
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.only(left: 23, right: 17),
|
||||
title: Text(
|
||||
snippet.name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
);
|
||||
subtitle: Text(
|
||||
snippet.note ?? snippet.script,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 3,
|
||||
style: UIs.textGrey,
|
||||
),
|
||||
trailing: const Icon(Icons.keyboard_arrow_right),
|
||||
onTap: () {
|
||||
// final isMobile = ResponsiveBreakpoints.of(context).isMobile;
|
||||
// if (isMobile) {
|
||||
SnippetEditPage.route.go(
|
||||
context,
|
||||
args: SnippetEditPageArgs(snippet: snippet),
|
||||
);
|
||||
// } else {
|
||||
// _splitViewCtrl.replace(SnippetEditPage(
|
||||
// args: SnippetEditPageArgs(snippet: snippet),
|
||||
// ));
|
||||
// }
|
||||
},
|
||||
).cardx;
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
|
||||
// Future<void> _runSnippet(Snippet snippet) async {
|
||||
// final servers = await context.showPickDialog<Server>(
|
||||
// items: Pros.server.servers.toList(),
|
||||
// name: (e) => e.spi.name,
|
||||
// );
|
||||
// if (servers == null) {
|
||||
// return;
|
||||
// }
|
||||
// final ids = servers.map((e) => e.spi.id).toList();
|
||||
// final results = await Pros.server.runSnippetsMulti(ids, snippet);
|
||||
// if (results.isNotEmpty) {
|
||||
// AppRoutes.snippetResult(results: results).go(context);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user