opt.: simplify settings page (#488)

2024-07-24 00:30:17 +08:00
parent e4dbc3ba12
commit 287869ed45
18 changed files with 181 additions and 111 deletions
--- a/lib/view/page/server/edit.dart
+++ b/lib/view/page/server/edit.dart
@@ -203,7 +203,7 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
      _buildMore(),
    ];
    return SingleChildScrollView(
-      padding: const EdgeInsets.fromLTRB(17, 17, 17, 47),
+      padding: const EdgeInsets.fromLTRB(17, 7, 17, 47),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
@@ -303,9 +303,8 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {

  Widget _buildEnvs() {
    return _env.listenVal((val) {
-      final subtitle = val.isEmpty
-          ? null
-          : Text(val.keys.join(','), style: UIs.textGrey);
+      final subtitle =
+          val.isEmpty ? null : Text(val.keys.join(','), style: UIs.textGrey);
      return ListTile(
        leading: const Padding(
          padding: EdgeInsets.only(left: 10),
@@ -622,18 +621,26 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
  }

  Widget _buildWriteScriptTip() {
-    return ListTile(
-      leading: const Icon(Icons.tips_and_updates).paddingOnly(left: 13),
-      title: Text(l10n.attention),
-      onTap: () {
-        context.showRoundDialog(
-          title: l10n.attention,
-          child: SimpleMarkdown(data: l10n.writeScriptTip),
-          actions: Btns.oks(onTap: () => context.pop(true)),
-        );
-      },
-      trailing: const Icon(Icons.keyboard_arrow_right),
-    ).cardx;
+    return Center(
+      child: InkWell(
+        borderRadius: BorderRadius.circular(10),
+        onTap: () {
+          context.showRoundDialog(
+            title: l10n.attention,
+            child: SimpleMarkdown(data: l10n.writeScriptTip),
+            actions: Btns.oks(onTap: () => context.pop(true)),
+          );
+        },
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Icon(Icons.tips_and_updates, size: 15, color: Colors.grey),
+            UIs.width13,
+            Text(l10n.attention, style: UIs.textGrey)
+          ],
+        ).paddingSymmetric(horizontal: 13, vertical: 3),
+      ),
+    ).paddingOnly(bottom: 13);
  }

  @override
--- a/lib/view/page/server/tab.dart
+++ b/lib/view/page/server/tab.dart
@@ -289,7 +289,8 @@ class _ServerPageState extends State<ServerPage>
          }
        },
        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 7),
+          padding:
+              const EdgeInsets.only(left: 13, right: 3, top: 13, bottom: 13),
          child: _buildRealServerCard(srv),
        ),
      ),
@@ -458,13 +459,9 @@ class _ServerPageState extends State<ServerPage>
  }

  Widget _buildTopRightWidget(Server s) {
-    return switch (s.conn) {
-      ServerConn.connecting ||
-      ServerConn.loading ||
-      ServerConn.connected =>
-        Padding(
-          padding: const EdgeInsets.only(left: 11, right: 3),
-          child: SizedBox(
+    final (child, onTap) = switch (s.conn) {
+      ServerConn.connecting || ServerConn.loading || ServerConn.connected => (
+          SizedBox(
            width: 19,
            height: 19,
            child: CircularProgressIndicator(
@@ -472,46 +469,52 @@ class _ServerPageState extends State<ServerPage>
              valueColor: AlwaysStoppedAnimation(UIs.primaryColor),
            ),
          ),
+          null,
        ),
-      ServerConn.failed => InkWell(
-          onTap: () {
+      ServerConn.failed => (
+          const Icon(
+            Icons.refresh,
+            size: 21,
+            color: Colors.grey,
+          ),
+          () {
            TryLimiter.reset(s.spi.id);
            Pros.server.refresh(spi: s.spi);
          },
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              Icons.refresh,
-              size: 21,
-              color: Colors.grey,
-            ),
-          ),
        ),
-      ServerConn.disconnected => InkWell(
-          onTap: () => Pros.server.refresh(spi: s.spi),
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              BoxIcons.bx_link,
-              size: 21,
-              color: Colors.grey,
-            ),
+      ServerConn.disconnected => (
+          const Icon(
+            BoxIcons.bx_link,
+            size: 21,
+            color: Colors.grey,
          ),
+          () => Pros.server.refresh(spi: s.spi)
        ),
-      ServerConn.finished => InkWell(
-          onTap: () => Pros.server.closeServer(id: s.spi.id),
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              BoxIcons.bx_unlink,
-              size: 17,
-              color: Colors.grey,
-            ),
+      ServerConn.finished => (
+          const Icon(
+            BoxIcons.bx_unlink,
+            size: 17,
+            color: Colors.grey,
          ),
+          () => Pros.server.closeServer(id: s.spi.id),
+        ),
+      _ when Stores.setting.serverTabUseOldUI.fetch() => (
+          ServerFuncBtnsTopRight(spi: s.spi),
+          null,
        ),
-      _ when Stores.setting.serverTabUseOldUI.fetch() =>
-        ServerFuncBtnsTopRight(spi: s.spi),
    };
+
+    final wrapped = SizedBox(
+      height: _kCardHeightMin,
+      width: 27,
+      child: child,
+    );
+    if (onTap == null) return wrapped;
+    return InkWell(
+      borderRadius: BorderRadius.circular(7),
+      onTap: onTap,
+      child: wrapped,
+    ).paddingOnly(left: 10);
  }

  Widget _buildTopRightText(Server s) {
@@ -646,20 +649,25 @@ ${ss.err?.message ?? l10n.unknownError}
          _tag == null || (pro.pick(id: e)?.spi.tags?.contains(_tag) ?? false))
      .toList();

+  static const _kCardHeightMin = 23.0;
+  static const _kCardHeightFlip = 97.0;
+  static const _kCardHeightNormal = 106.0;
+  static const _kCardHeightMoveOutFuncs = 132.0;
+
  double? _calcCardHeight(ServerConn cs, bool flip) {
    if (_textFactorDouble != 1.0) return null;
    if (cs != ServerConn.finished) {
-      return 23.0;
+      return _kCardHeightMin;
    }
    if (flip) {
-      return 97.0;
+      return _kCardHeightFlip;
    }
    if (Stores.setting.moveOutServerTabFuncBtns.fetch() &&
        // Discussion #146
        !Stores.setting.serverTabUseOldUI.fetch()) {
-      return 132;
+      return _kCardHeightMoveOutFuncs;
    }
-    return 106;
+    return _kCardHeightNormal;
  }

  void _askFor({
--- a/lib/view/page/setting/entry.dart
+++ b/lib/view/page/setting/entry.dart
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_highlight/theme_map.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:icons_plus/icons_plus.dart';
+import 'package:locale_names/locale_names.dart';
 import 'package:server_box/core/extension/context/locale.dart';
 import 'package:server_box/data/res/rebuild.dart';
 import 'package:server_box/data/res/store.dart';
@@ -473,8 +474,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildTermFontSize() {
    return ListTile(
      leading: const Icon(MingCute.font_size_line),
-      title: Text(l10n.fontSize),
-      subtitle: Text(l10n.termFontSizeTip, style: UIs.textGrey),
+      // title: Text(l10n.fontSize),
+      // subtitle: Text(l10n.termFontSizeTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.termFontSizeTip,
+        text: l10n.fontSize,
+      ),
      trailing: ValBuilder(
        listenable: _setting.termFontSize.listenable(),
        builder: (val) => Text(
@@ -531,7 +536,7 @@ class _SettingPageState extends State<SettingPage> {
        final selected = await context.showPickSingleDialog(
          title: l10n.language,
          items: AppLocalizations.supportedLocales,
-          name: (p0) => p0.code,
+          name: (p0) => '${p0.nativeDisplayLanguage} (${p0.code})',
          initial: _setting.locale.fetch().toLocale,
        );
        if (selected != null) {
@@ -606,8 +611,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildFullScreenSwitch() {
    return ListTile(
      leading: const Icon(Bootstrap.phone_landscape_fill),
-      title: Text(l10n.fullScreen),
-      subtitle: Text(l10n.fullScreenTip, style: UIs.textGrey),
+      // title: Text(l10n.fullScreen),
+      // subtitle: Text(l10n.fullScreenTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.fullScreenTip,
+        text: l10n.fullScreen,
+      ),
      trailing: StoreSwitch(
        prop: _setting.fullScreen,
        callback: (_) => RNodes.app.notify(),
@@ -692,8 +701,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildSftpOpenLastPath() {
    return ListTile(
      leading: const Icon(MingCute.history_line),
-      title: Text(l10n.openLastPath),
-      subtitle: Text(l10n.openLastPathTip, style: UIs.textGrey),
+      // title: Text(l10n.openLastPath),
+      // subtitle: Text(l10n.openLastPathTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.openLastPathTip,
+        text: l10n.openLastPath,
+      ),
      trailing: StoreSwitch(prop: _setting.sftpOpenLastPath),
    );
  }
@@ -767,8 +780,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildTextScaler() {
    final ctrl = TextEditingController(text: _setting.textFactor.toString());
    return ListTile(
-      title: Text(l10n.textScaler),
-      subtitle: Text(l10n.textScalerTip, style: UIs.textGrey),
+      // title: Text(l10n.textScaler),
+      // subtitle: Text(l10n.textScalerTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.textScalerTip,
+        text: l10n.textScaler,
+      ),
      trailing: ValBuilder(
        listenable: _setting.textFactor.listenable(),
        builder: (val) => Text(
@@ -821,8 +838,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildServerFuncBtnsSwitch() {
    return ListTile(
-      title: Text(l10n.location),
-      subtitle: Text(l10n.moveOutServerFuncBtnsHelp, style: UIs.text13Grey),
+      // title: Text(l10n.location),
+      // subtitle: Text(l10n.moveOutServerFuncBtnsHelp, style: UIs.text13Grey),
+      title: TipText(
+        tip: l10n.moveOutServerFuncBtnsHelp,
+        text: l10n.location,
+      ),
      trailing: StoreSwitch(prop: _setting.moveOutServerTabFuncBtns),
    );
  }
@@ -913,8 +934,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildDoubleColumnServersPage() {
    return ListTile(
-      title: Text(l10n.doubleColumnMode),
-      subtitle: Text(l10n.doubleColumnTip, style: UIs.textGrey),
+      // title: Text(l10n.doubleColumnMode),
+      // subtitle: Text(l10n.doubleColumnTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.doubleColumnTip,
+        text: l10n.doubleColumnMode,
+      ),
      trailing: StoreSwitch(prop: _setting.doubleColumnServersPage),
    );
  }
@@ -937,8 +962,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildEditorHighlight() {
    return ListTile(
      leading: const Icon(MingCute.code_line, size: _kIconSize),
-      title: Text(l10n.highlight),
-      subtitle: Text(l10n.editorHighlightTip, style: UIs.textGrey),
+      // title: Text(l10n.highlight),
+      // subtitle: Text(l10n.editorHighlightTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.editorHighlightTip,
+        text: l10n.highlight,
+      ),
      trailing: StoreSwitch(prop: _setting.editorHighlight),
    );
  }
@@ -961,9 +990,11 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildContainerTrySudo() {
    return ListTile(
-      leading: const Icon(Clarity.administrator_solid),
-      title: Text(l10n.trySudo),
-      subtitle: Text(l10n.containerTrySudoTip, style: UIs.textGrey),
+      leading: const Icon(EvaIcons.person_done),
+      title: TipText(
+        tip: l10n.containerTrySudoTip,
+        text: l10n.trySudo,
+      ),
      trailing: StoreSwitch(prop: _setting.containerTrySudo),
    );
  }
@@ -978,9 +1009,13 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildContainerParseStat() {
    return ListTile(
-      leading: const Icon(IonIcons.stats_chart, size: _kIconSize),
-      title: Text(l10n.parseContainerStats),
-      subtitle: Text(l10n.parseContainerStatsTip, style: UIs.textGrey),
+      leading: const Icon(MingCute.chart_line_line, size: _kIconSize),
+      // title: Text(l10n.parseContainerStats),
+      // subtitle: Text(l10n.parseContainerStatsTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.parseContainerStatsTip,
+        text: l10n.stat,
+      ),
      trailing: StoreSwitch(prop: _setting.containerParseStat),
    );
  }
@@ -1002,8 +1037,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildRememberPwdInMem() {
    return ListTile(
-      title: Text(l10n.rememberPwdInMem),
-      subtitle: Text(l10n.rememberPwdInMemTip, style: UIs.textGrey),
+      // title: Text(l10n.rememberPwdInMem),
+      // subtitle: Text(l10n.rememberPwdInMemTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.rememberPwdInMemTip,
+        text: l10n.rememberPwdInMem,
+      ),
      trailing: StoreSwitch(prop: _setting.rememberPwdInMem),
    );
  }
@@ -1185,11 +1224,15 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildLetterCache() {
    return ListTile(
-      leading: const Icon(Bootstrap.input_cursor),
-      title: Text(l10n.letterCache),
-      subtitle: Text(
-        '${l10n.letterCacheTip}\n${l10n.needRestart}',
-        style: UIs.textGrey,
+      leading: const Icon(Bootstrap.alphabet),
+      // title: Text(l10n.letterCache),
+      // subtitle: Text(
+      //   '${l10n.letterCacheTip}\n${l10n.needRestart}',
+      //   style: UIs.textGrey,
+      // ),
+      title: TipText(
+        tip: '${l10n.letterCacheTip}\n${l10n.needRestart}',
+        text: l10n.letterCache,
      ),
      trailing: StoreSwitch(prop: _setting.letterCache),
    );