mirror of
https://github.com/lollipopkit/flutter_server_box.git
synced 2025-12-17 07:14:28 +01:00
rm: fullscreen mode (#271)
This commit is contained in:
@@ -9,7 +9,6 @@ import 'package:toolbox/data/res/build_data.dart';
|
||||
import 'package:toolbox/data/res/color.dart';
|
||||
import 'package:toolbox/data/res/rebuild.dart';
|
||||
import 'package:toolbox/data/res/store.dart';
|
||||
import 'package:toolbox/view/page/full_screen.dart';
|
||||
import 'package:toolbox/view/page/home.dart';
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
@@ -76,9 +75,7 @@ class MyApp extends StatelessWidget {
|
||||
themeMode: themeMode,
|
||||
theme: light,
|
||||
darkTheme: tMode < 3 ? dark : _getAmoledTheme(dark),
|
||||
home: Stores.setting.fullScreen.fetch()
|
||||
? const FullScreenPage()
|
||||
: const HomePage(),
|
||||
home: const HomePage(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,6 @@ import 'package:toolbox/view/page/storage/local.dart';
|
||||
import '../data/model/server/snippet.dart';
|
||||
import '../view/page/debug.dart';
|
||||
import '../view/page/editor.dart';
|
||||
import '../view/page/full_screen.dart';
|
||||
import '../view/page/process.dart';
|
||||
import '../view/page/server/edit.dart';
|
||||
import '../view/page/server/tab.dart';
|
||||
@@ -175,9 +174,9 @@ class AppRoute {
|
||||
'editor');
|
||||
}
|
||||
|
||||
static AppRoute fullscreen({Key? key}) {
|
||||
return AppRoute(FullScreenPage(key: key), 'fullscreen');
|
||||
}
|
||||
// static AppRoute fullscreen({Key? key}) {
|
||||
// return AppRoute(FullScreenPage(key: key), 'fullscreen');
|
||||
// }
|
||||
|
||||
static AppRoute home({Key? key}) {
|
||||
return AppRoute(HomePage(key: key), 'home');
|
||||
|
||||
@@ -118,20 +118,20 @@ class SettingStore extends PersistentStore {
|
||||
Defaults.editorDarkTheme,
|
||||
);
|
||||
|
||||
late final fullScreen = property(
|
||||
'fullScreen',
|
||||
false,
|
||||
);
|
||||
// late final fullScreen = property(
|
||||
// 'fullScreen',
|
||||
// false,
|
||||
// );
|
||||
|
||||
late final fullScreenJitter = property(
|
||||
'fullScreenJitter',
|
||||
true,
|
||||
);
|
||||
// late final fullScreenJitter = property(
|
||||
// 'fullScreenJitter',
|
||||
// true,
|
||||
// );
|
||||
|
||||
late final fullScreenRotateQuarter = property(
|
||||
'fullScreenRotateQuarter',
|
||||
1,
|
||||
);
|
||||
// late final fullScreenRotateQuarter = property(
|
||||
// 'fullScreenRotateQuarter',
|
||||
// 1,
|
||||
// );
|
||||
|
||||
late final keyboardType = property(
|
||||
'keyboardType',
|
||||
|
||||
@@ -1,373 +0,0 @@
|
||||
import 'dart:async';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:after_layout/after_layout.dart';
|
||||
import 'package:circle_chart/circle_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get_it/get_it.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:toolbox/core/extension/context/locale.dart';
|
||||
import 'package:toolbox/core/route.dart';
|
||||
import 'package:toolbox/data/model/app/shell_func.dart';
|
||||
import 'package:toolbox/data/model/server/disk.dart';
|
||||
import 'package:toolbox/data/provider/server.dart';
|
||||
import 'package:toolbox/data/res/provider.dart';
|
||||
import 'package:toolbox/data/res/store.dart';
|
||||
import 'package:toolbox/data/res/ui.dart';
|
||||
|
||||
import '../../core/analysis.dart';
|
||||
import '../../core/update.dart';
|
||||
import '../../core/utils/ui.dart';
|
||||
import '../../data/model/app/net_view.dart';
|
||||
import '../../data/model/server/server.dart';
|
||||
import '../../data/model/server/server_private_info.dart';
|
||||
import '../../data/res/color.dart';
|
||||
|
||||
class FullScreenPage extends StatefulWidget {
|
||||
const FullScreenPage({super.key});
|
||||
|
||||
@override
|
||||
_FullScreenPageState createState() => _FullScreenPageState();
|
||||
}
|
||||
|
||||
class _FullScreenPageState extends State<FullScreenPage> with AfterLayoutMixin {
|
||||
late MediaQueryData _media;
|
||||
late ThemeData _theme;
|
||||
late Timer _timer;
|
||||
late int _rotateQuarter;
|
||||
|
||||
final _pageController = PageController(initialPage: 0);
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
switchStatusBar(hide: true);
|
||||
_rotateQuarter = Stores.setting.fullScreenRotateQuarter.fetch();
|
||||
_timer = Timer.periodic(const Duration(minutes: 1), (_) {
|
||||
if (mounted) {
|
||||
setState(() {});
|
||||
} else {
|
||||
_timer.cancel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
_timer.cancel();
|
||||
_pageController.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
_media = MediaQuery.of(context);
|
||||
_theme = Theme.of(context);
|
||||
}
|
||||
|
||||
double get _offset {
|
||||
// based on screen width
|
||||
final x = _screenWidth * 0.03;
|
||||
final r = Random().nextDouble();
|
||||
final n = Random().nextBool() ? -1 : 1;
|
||||
return n * x * r;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final offset = Offset(_offset, _offset);
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
// Avoid display cutout
|
||||
// `_screenWidth * 0.03` is the offset value
|
||||
padding: EdgeInsets.all(_screenWidth * 0.03),
|
||||
child: ValueListenableBuilder<int>(
|
||||
valueListenable:
|
||||
Stores.setting.fullScreenRotateQuarter.listenable(),
|
||||
builder: (_, val, __) {
|
||||
_rotateQuarter = val;
|
||||
return RotatedBox(
|
||||
quarterTurns: val,
|
||||
child: Transform.translate(
|
||||
offset: offset,
|
||||
child: Stack(
|
||||
children: [
|
||||
_buildMain(),
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
child: _buildSettingBtn(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
double get _screenWidth =>
|
||||
_rotateQuarter % 2 == 0 ? _media.size.width : _media.size.height;
|
||||
double get _screenHeight =>
|
||||
_rotateQuarter % 2 == 0 ? _media.size.height : _media.size.width;
|
||||
|
||||
Widget _buildSettingBtn() {
|
||||
return IconButton(
|
||||
onPressed: () => AppRoute.settings().go(context),
|
||||
icon: const Icon(Icons.settings, color: Colors.grey));
|
||||
}
|
||||
|
||||
Widget _buildMain() {
|
||||
return Consumer<ServerProvider>(builder: (_, pro, __) {
|
||||
if (pro.serverOrder.isEmpty) {
|
||||
return Center(
|
||||
child: TextButton(
|
||||
onPressed: () => AppRoute.serverEdit().go(context),
|
||||
child: Text(
|
||||
l10n.addAServer,
|
||||
style: const TextStyle(fontSize: 27),
|
||||
)),
|
||||
);
|
||||
}
|
||||
return PageView.builder(
|
||||
controller: _pageController,
|
||||
itemCount: pro.serverOrder.length,
|
||||
itemBuilder: (_, idx) {
|
||||
final s = pro.pick(id: pro.serverOrder[idx]);
|
||||
if (s == null) {
|
||||
return Center(child: Text(l10n.noClient));
|
||||
}
|
||||
return _buildRealServerCard(s.status, s.state, s.spi);
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildRealServerCard(
|
||||
ServerStatus ss,
|
||||
ServerState cs,
|
||||
ServerPrivateInfo spi,
|
||||
) {
|
||||
final rootDisk = findRootDisk(ss.disk);
|
||||
|
||||
return InkWell(
|
||||
onTap: () => AppRoute.serverDetail(spi: spi).go(context),
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: _buildServerCardTitle(ss, cs, spi)),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(height: _screenWidth * 0.1),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildPercentCircle(ss.cpu.usedPercent()),
|
||||
_buildPercentCircle(ss.mem.usedPercent * 100),
|
||||
_buildNet(ss),
|
||||
_buildIOData(
|
||||
'Total:\n${rootDisk?.size}',
|
||||
'Used:\n${rootDisk?.usedPercent}%',
|
||||
)
|
||||
],
|
||||
),
|
||||
SizedBox(height: _screenWidth * 0.1),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildExplainText('CPU'),
|
||||
_buildExplainText('Mem'),
|
||||
_buildExplainText('Net'),
|
||||
_buildExplainText('Disk'),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildServerCardTitle(
|
||||
ServerStatus ss,
|
||||
ServerState cs,
|
||||
ServerPrivateInfo spi,
|
||||
) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: _screenWidth * 0.05),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
UIs.height13,
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
spi.name,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 19,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const Icon(
|
||||
Icons.keyboard_arrow_right,
|
||||
size: 21,
|
||||
color: Colors.grey,
|
||||
)
|
||||
],
|
||||
),
|
||||
UIs.height13,
|
||||
_buildTopRightText(ss, cs),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTopRightText(ServerStatus ss, ServerState cs) {
|
||||
final topRightStr = _getTopRightStr(
|
||||
cs,
|
||||
ss.temps.first,
|
||||
ss.more[StatusCmdType.uptime] ?? '',
|
||||
ss.err,
|
||||
);
|
||||
return Text(
|
||||
topRightStr,
|
||||
style: UIs.text11Grey,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildExplainText(String text) {
|
||||
return SizedBox(
|
||||
width: _screenHeight * 0.2,
|
||||
child: Text(
|
||||
text,
|
||||
style: const TextStyle(fontSize: 13),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _getTopRightStr(
|
||||
ServerState cs,
|
||||
double? temp,
|
||||
String upTime,
|
||||
String? failedInfo,
|
||||
) {
|
||||
switch (cs) {
|
||||
case ServerState.disconnected:
|
||||
return l10n.disconnected;
|
||||
case ServerState.connected:
|
||||
final tempStr = temp == null ? '' : '${temp.toStringAsFixed(1)}°C';
|
||||
final items = [tempStr, upTime];
|
||||
final str = items.where((element) => element.isNotEmpty).join(' | ');
|
||||
if (str.isEmpty) return l10n.serverTabLoading;
|
||||
return str;
|
||||
case ServerState.connecting:
|
||||
return l10n.serverTabConnecting;
|
||||
case ServerState.failed:
|
||||
if (failedInfo == null) {
|
||||
return l10n.serverTabFailed;
|
||||
}
|
||||
if (failedInfo.contains('encypted')) {
|
||||
return l10n.serverTabPlzSave;
|
||||
}
|
||||
return failedInfo;
|
||||
default:
|
||||
return l10n.serverTabUnkown;
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildNet(ServerStatus ss) {
|
||||
return ValueListenableBuilder<NetViewType>(
|
||||
valueListenable: Stores.setting.netViewType.listenable(),
|
||||
builder: (_, val, __) {
|
||||
final (a, b) = val.build(ss);
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 177),
|
||||
child: _buildIOData(a, b),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIOData(String up, String down) {
|
||||
final statusTextStyle = TextStyle(
|
||||
fontSize: 13, color: _theme.textTheme.bodyLarge!.color!.withAlpha(177));
|
||||
return SizedBox(
|
||||
width: _screenHeight * 0.23,
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 5),
|
||||
Text(
|
||||
up,
|
||||
style: statusTextStyle,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
down,
|
||||
style: statusTextStyle,
|
||||
textAlign: TextAlign.center,
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPercentCircle(double percent) {
|
||||
if (percent <= 0) percent = 0.01;
|
||||
if (percent >= 100) percent = 99.9;
|
||||
return SizedBox(
|
||||
width: _screenHeight * 0.23,
|
||||
child: Stack(
|
||||
children: [
|
||||
Center(
|
||||
child: CircleChart(
|
||||
progressColor: primaryColor,
|
||||
progressNumber: percent,
|
||||
animationDuration: const Duration(milliseconds: 377),
|
||||
maxNumber: 100,
|
||||
width: _screenWidth * 0.22,
|
||||
height: _screenWidth * 0.22,
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${percent.toStringAsFixed(1)}%',
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(fontSize: 15),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> afterFirstLayout(BuildContext context) async {
|
||||
if (Stores.setting.autoCheckAppUpdate.fetch()) {
|
||||
doUpdate(context);
|
||||
}
|
||||
await GetIt.I.allReady();
|
||||
await Pros.server.load();
|
||||
await Pros.server.refresh();
|
||||
if (!Analysis.enabled) {
|
||||
await Analysis.init();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,7 +51,7 @@ class _SettingPageState extends State<SettingPage> {
|
||||
final _editorThemeKey = GlobalKey<PopupMenuButtonState<String>>();
|
||||
final _editorDarkThemeKey = GlobalKey<PopupMenuButtonState<String>>();
|
||||
final _keyboardTypeKey = GlobalKey<PopupMenuButtonState<int>>();
|
||||
final _rotateQuarterKey = GlobalKey<PopupMenuButtonState<int>>();
|
||||
//final _rotateQuarterKey = GlobalKey<PopupMenuButtonState<int>>();
|
||||
final _netViewTypeKey = GlobalKey<PopupMenuButtonState<NetViewType>>();
|
||||
final _setting = Stores.setting;
|
||||
|
||||
@@ -66,8 +66,8 @@ class _SettingPageState extends State<SettingPage> {
|
||||
late final _editorTheme = ValueNotifier(_setting.editorTheme.fetch());
|
||||
late final _editorDarkTheme = ValueNotifier(_setting.editorDarkTheme.fetch());
|
||||
late final _keyboardType = ValueNotifier(_setting.keyboardType.fetch());
|
||||
late final _rotateQuarter =
|
||||
ValueNotifier(_setting.fullScreenRotateQuarter.fetch());
|
||||
// late final _rotateQuarter =
|
||||
// ValueNotifier(_setting.fullScreenRotateQuarter.fetch());
|
||||
late final _netViewType = ValueNotifier(_setting.netViewType.fetch());
|
||||
late final _textScaler = ValueNotifier(_setting.textFactor.fetch());
|
||||
|
||||
@@ -153,8 +153,8 @@ class _SettingPageState extends State<SettingPage> {
|
||||
|
||||
/// Fullscreen Mode is designed for old mobile phone which can be
|
||||
/// used as a status screen, so it's only available on mobile phone.
|
||||
if (!isDesktop) _buildTitle(l10n.fullScreen),
|
||||
if (!isDesktop) _buildFullScreen(),
|
||||
// if (!isDesktop) _buildTitle(l10n.fullScreen),
|
||||
// if (!isDesktop) _buildFullScreen(),
|
||||
const SizedBox(height: 37),
|
||||
],
|
||||
),
|
||||
@@ -191,15 +191,15 @@ class _SettingPageState extends State<SettingPage> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFullScreen() {
|
||||
return Column(
|
||||
children: [
|
||||
_buildFullScreenSwitch(),
|
||||
_buildFullScreenJitter(),
|
||||
_buildFulScreenRotateQuarter(),
|
||||
].map((e) => CardX(child: e)).toList(),
|
||||
);
|
||||
}
|
||||
// Widget _buildFullScreen() {
|
||||
// return Column(
|
||||
// children: [
|
||||
// _buildFullScreenSwitch(),
|
||||
// _buildFullScreenJitter(),
|
||||
// _buildFulScreenRotateQuarter(),
|
||||
// ].map((e) => CardX(child: e)).toList(),
|
||||
// );
|
||||
// }
|
||||
|
||||
Widget _buildServer() {
|
||||
return Column(
|
||||
@@ -740,56 +740,56 @@ class _SettingPageState extends State<SettingPage> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFullScreenSwitch() {
|
||||
return ListTile(
|
||||
title: Text(l10n.fullScreen),
|
||||
trailing: StoreSwitch(
|
||||
prop: _setting.fullScreen,
|
||||
callback: (_) => RebuildNodes.app.rebuild(),
|
||||
),
|
||||
);
|
||||
}
|
||||
// Widget _buildFullScreenSwitch() {
|
||||
// return ListTile(
|
||||
// title: Text(l10n.fullScreen),
|
||||
// trailing: StoreSwitch(
|
||||
// prop: _setting.fullScreen,
|
||||
// callback: (_) => RebuildNodes.app.rebuild(),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
Widget _buildFullScreenJitter() {
|
||||
return ListTile(
|
||||
title: Text(l10n.fullScreenJitter),
|
||||
subtitle: Text(l10n.fullScreenJitterHelp, style: UIs.textGrey),
|
||||
trailing: StoreSwitch(prop: _setting.fullScreenJitter),
|
||||
);
|
||||
}
|
||||
// Widget _buildFullScreenJitter() {
|
||||
// return ListTile(
|
||||
// title: Text(l10n.fullScreenJitter),
|
||||
// subtitle: Text(l10n.fullScreenJitterHelp, style: UIs.textGrey),
|
||||
// trailing: StoreSwitch(prop: _setting.fullScreenJitter),
|
||||
// );
|
||||
// }
|
||||
|
||||
Widget _buildFulScreenRotateQuarter() {
|
||||
final degrees = List.generate(4, (idx) => '${idx * 90}°').toList();
|
||||
final items = List.generate(4, (idx) {
|
||||
return PopupMenuItem<int>(
|
||||
value: idx,
|
||||
child: Text(degrees[idx]),
|
||||
);
|
||||
}).toList();
|
||||
// Widget _buildFulScreenRotateQuarter() {
|
||||
// final degrees = List.generate(4, (idx) => '${idx * 90}°').toList();
|
||||
// final items = List.generate(4, (idx) {
|
||||
// return PopupMenuItem<int>(
|
||||
// value: idx,
|
||||
// child: Text(degrees[idx]),
|
||||
// );
|
||||
// }).toList();
|
||||
|
||||
return ListTile(
|
||||
title: Text(l10n.rotateAngel),
|
||||
onTap: () {
|
||||
_rotateQuarterKey.currentState?.showButtonMenu();
|
||||
},
|
||||
trailing: ListenableBuilder(
|
||||
listenable: _rotateQuarter,
|
||||
builder: (_, __) => PopupMenuButton(
|
||||
key: _rotateQuarterKey,
|
||||
itemBuilder: (BuildContext context) => items,
|
||||
initialValue: _rotateQuarter.value,
|
||||
onSelected: (int idx) {
|
||||
_rotateQuarter.value = idx;
|
||||
_setting.fullScreenRotateQuarter.put(idx);
|
||||
},
|
||||
child: Text(
|
||||
degrees[_rotateQuarter.value],
|
||||
style: UIs.text15,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
// return ListTile(
|
||||
// title: Text(l10n.rotateAngel),
|
||||
// onTap: () {
|
||||
// _rotateQuarterKey.currentState?.showButtonMenu();
|
||||
// },
|
||||
// trailing: ListenableBuilder(
|
||||
// listenable: _rotateQuarter,
|
||||
// builder: (_, __) => PopupMenuButton(
|
||||
// key: _rotateQuarterKey,
|
||||
// itemBuilder: (BuildContext context) => items,
|
||||
// initialValue: _rotateQuarter.value,
|
||||
// onSelected: (int idx) {
|
||||
// _rotateQuarter.value = idx;
|
||||
// _setting.fullScreenRotateQuarter.put(idx);
|
||||
// },
|
||||
// child: Text(
|
||||
// degrees[_rotateQuarter.value],
|
||||
// style: UIs.text15,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
Widget _buildKeyboardType() {
|
||||
const List<String> names = <String>[
|
||||
|
||||
Reference in New Issue
Block a user