Improve UI. Rounded Card.
This commit is contained in:
Junyuan Feng
@@ -1,5 +1,6 @@
|
||||
import 'package:after_layout/after_layout.dart';
|
||||
import 'package:circle_chart/circle_chart.dart';
|
||||
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get_it/get_it.dart';
|
||||
import 'package:marquee/marquee.dart';
|
||||
@@ -8,6 +9,7 @@ import 'package:pull_to_refresh/pull_to_refresh.dart';
|
||||
import 'package:toolbox/core/route.dart';
|
||||
import 'package:toolbox/data/model/server/server.dart';
|
||||
import 'package:toolbox/data/model/server/server_connection_state.dart';
|
||||
import 'package:toolbox/data/model/server/server_private_info.dart';
|
||||
import 'package:toolbox/data/model/server/server_status.dart';
|
||||
import 'package:toolbox/data/provider/server.dart';
|
||||
import 'package:toolbox/data/res/color.dart';
|
||||
@@ -15,6 +17,8 @@ import 'package:toolbox/data/store/setting.dart';
|
||||
import 'package:toolbox/locator.dart';
|
||||
import 'package:toolbox/view/page/server/detail.dart';
|
||||
import 'package:toolbox/view/page/server/edit.dart';
|
||||
import 'package:toolbox/view/page/snippet/list.dart';
|
||||
import 'package:toolbox/view/widget/round_rect_card.dart';
|
||||
|
||||
class ServerPage extends StatefulWidget {
|
||||
final TabController tabController;
|
||||
@@ -47,8 +51,8 @@ class _ServerPageState extends State<ServerPage>
|
||||
_theme = Theme.of(context);
|
||||
_primaryColor = primaryColor;
|
||||
if (widget.tabController.index == 0) {
|
||||
FocusScope.of(context).unfocus();
|
||||
}
|
||||
FocusScope.of(context).unfocus();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -65,15 +69,19 @@ class _ServerPageState extends State<ServerPage>
|
||||
),
|
||||
);
|
||||
}
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 7),
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 13),
|
||||
...pro.servers.map((e) => _buildEachServerCard(e)),
|
||||
SizedBox(height: _media.padding.bottom),
|
||||
],
|
||||
));
|
||||
return ListView.separated(
|
||||
padding: const EdgeInsets.all(7),
|
||||
itemBuilder: (ctx, idx) {
|
||||
if (idx == pro.servers.length) {
|
||||
return SizedBox(height: _media.padding.bottom);
|
||||
}
|
||||
return _buildEachServerCard(pro.servers[idx]);
|
||||
},
|
||||
itemCount: pro.servers.length + 1,
|
||||
separatorBuilder: (_, __) => const SizedBox(
|
||||
height: 3,
|
||||
),
|
||||
);
|
||||
});
|
||||
return Scaffold(
|
||||
body: autoUpdate
|
||||
@@ -98,8 +106,8 @@ class _ServerPageState extends State<ServerPage>
|
||||
}
|
||||
|
||||
Widget _buildEachServerCard(ServerInfo si) {
|
||||
return Card(
|
||||
child: InkWell(
|
||||
return RoundRectCard(
|
||||
InkWell(
|
||||
onLongPress: () => AppRoute(
|
||||
ServerEditPage(
|
||||
spi: si.info,
|
||||
@@ -109,7 +117,7 @@ class _ServerPageState extends State<ServerPage>
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(13),
|
||||
child: _buildRealServerCard(
|
||||
si.status, si.info.name, si.connectionState)),
|
||||
si.status, si.info.name, si.connectionState, si.info)),
|
||||
onTap: () => AppRoute(ServerDetailPage('${si.info.ip}:${si.info.port}'),
|
||||
'server detail page')
|
||||
.go(context),
|
||||
@@ -117,8 +125,8 @@ class _ServerPageState extends State<ServerPage>
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildRealServerCard(
|
||||
ServerStatus ss, String serverName, ServerConnectionState cs) {
|
||||
Widget _buildRealServerCard(ServerStatus ss, String serverName,
|
||||
ServerConnectionState cs, ServerPrivateInfo spi) {
|
||||
final rootDisk =
|
||||
ss.disk.firstWhere((element) => element.mountLocation == '/');
|
||||
|
||||
@@ -132,29 +140,112 @@ class _ServerPageState extends State<ServerPage>
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
serverName,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
|
||||
textScaleFactor: 1.0,
|
||||
),
|
||||
hasError
|
||||
? ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: _media.size.width * 0.57, maxHeight: 15),
|
||||
child: Marquee(
|
||||
accelerationDuration: const Duration(seconds: 3),
|
||||
accelerationCurve: Curves.linear,
|
||||
decelerationDuration: const Duration(seconds: 3),
|
||||
decelerationCurve: Curves.linear,
|
||||
text: topRightStr,
|
||||
textScaleFactor: 1.0,
|
||||
style: style),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 11),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
serverName,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold, fontSize: 12),
|
||||
textScaleFactor: 1.0,
|
||||
),
|
||||
const Icon(
|
||||
Icons.keyboard_arrow_right,
|
||||
size: 17,
|
||||
color: Colors.grey,
|
||||
)
|
||||
: Text(topRightStr, style: style, textScaleFactor: 1.0),
|
||||
],
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
hasError
|
||||
? ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: _media.size.width * 0.57,
|
||||
maxHeight: 15),
|
||||
child: Marquee(
|
||||
accelerationDuration: const Duration(seconds: 3),
|
||||
accelerationCurve: Curves.linear,
|
||||
decelerationDuration: const Duration(seconds: 3),
|
||||
decelerationCurve: Curves.linear,
|
||||
text: topRightStr,
|
||||
textScaleFactor: 1.0,
|
||||
style: style),
|
||||
)
|
||||
: Text(topRightStr, style: style, textScaleFactor: 1.0),
|
||||
const SizedBox(
|
||||
width: 13,
|
||||
),
|
||||
DropdownButtonHideUnderline(
|
||||
child: DropdownButton2(
|
||||
customButton: const Icon(
|
||||
Icons.list_alt,
|
||||
size: 19,
|
||||
),
|
||||
customItemsIndexes: const [3],
|
||||
customItemsHeight: 8,
|
||||
items: [
|
||||
...MenuItems.firstItems.map(
|
||||
(item) => DropdownMenuItem<MenuItem>(
|
||||
value: item,
|
||||
child: MenuItems.buildItem(item),
|
||||
),
|
||||
),
|
||||
const DropdownMenuItem<Divider>(
|
||||
enabled: false, child: Divider()),
|
||||
...MenuItems.secondItems.map(
|
||||
(item) => DropdownMenuItem<MenuItem>(
|
||||
value: item,
|
||||
child: MenuItems.buildItem(item),
|
||||
),
|
||||
),
|
||||
],
|
||||
onChanged: (value) {
|
||||
final item = value as MenuItem;
|
||||
switch (item) {
|
||||
case MenuItems.sftp:
|
||||
//Do something
|
||||
break;
|
||||
case MenuItems.apt:
|
||||
//Do something
|
||||
break;
|
||||
case MenuItems.snippet:
|
||||
AppRoute(
|
||||
SnippetListPage(
|
||||
spi: spi,
|
||||
),
|
||||
'snippet list')
|
||||
.go(context);
|
||||
break;
|
||||
case MenuItems.edit:
|
||||
AppRoute(
|
||||
ServerEditPage(
|
||||
spi: spi,
|
||||
),
|
||||
'Edit server info page')
|
||||
.go(context);
|
||||
break;
|
||||
}
|
||||
},
|
||||
itemHeight: 37,
|
||||
itemPadding: const EdgeInsets.only(left: 17, right: 17),
|
||||
dropdownWidth: 160,
|
||||
dropdownPadding: const EdgeInsets.symmetric(vertical: 7),
|
||||
dropdownDecoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
dropdownElevation: 8,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 17,
|
||||
@@ -286,3 +377,54 @@ class _ServerPageState extends State<ServerPage>
|
||||
_serverProvider.startAutoRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
class MenuItem {
|
||||
final String text;
|
||||
final IconData icon;
|
||||
|
||||
const MenuItem({
|
||||
required this.text,
|
||||
required this.icon,
|
||||
});
|
||||
}
|
||||
|
||||
class MenuItems {
|
||||
static const List<MenuItem> firstItems = [sftp, snippet, apt];
|
||||
static const List<MenuItem> secondItems = [edit];
|
||||
|
||||
static const sftp = MenuItem(text: 'SFTP', icon: Icons.home);
|
||||
static const snippet = MenuItem(text: 'Snippet', icon: Icons.label);
|
||||
static const apt = MenuItem(text: 'Apt', icon: Icons.system_security_update);
|
||||
static const edit = MenuItem(text: 'Edit', icon: Icons.settings);
|
||||
|
||||
static Widget buildItem(MenuItem item) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(item.icon),
|
||||
const SizedBox(
|
||||
width: 10,
|
||||
),
|
||||
Text(
|
||||
item.text,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static onChanged(BuildContext context, MenuItem item) {
|
||||
switch (item) {
|
||||
case MenuItems.sftp:
|
||||
//Do something
|
||||
break;
|
||||
case MenuItems.apt:
|
||||
//Do something
|
||||
break;
|
||||
case MenuItems.snippet:
|
||||
//Do something
|
||||
break;
|
||||
case MenuItems.edit:
|
||||
//Do something
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user