Add info popup to custom icons dialog

Yubico · Jan 31, 2025 · 3968bd7 · 3968bd7
1 parent 42ed724
commit 3968bd7
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 45 deletions.
diff --git a/lib/app/icon_provider/icon_pack_dialog.dart b/lib/app/icon_provider/icon_pack_dialog.dart
@@ -22,9 +22,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-import '../../widgets/basic_dialog.dart';
 import '../../widgets/file_drop_overlay.dart';
 import '../../widgets/file_drop_target.dart';
+import '../../widgets/info_popup_button.dart';
+import '../../widgets/responsive_dialog.dart';
 import '../message.dart';
 import '../state.dart';
 import 'icon_pack.dart';
@@ -33,10 +34,16 @@ import 'icon_pack_manager.dart';
 class IconPackDialog extends ConsumerWidget {
   const IconPackDialog({super.key});
 
+  Uri get _downloadIconPacksUri => Uri.parse('https://aegis-icons.github.io');
+  Uri get _learnMoreAegisUri => Uri.parse(
+      'https://github.com/beemdevelopment/Aegis/blob/master/docs/iconpacks.md');
+
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final l10n = AppLocalizations.of(context)!;
     final iconPack = ref.watch(iconPackProvider);
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
     return FileDropTarget(
         onFileDropped: (file) async {
           final importStatus = await ref
@@ -63,21 +70,75 @@ class IconPackDialog extends ConsumerWidget {
                   l10n.s_load_icon_pack,
               loading: () => null),
         ),
-        child: BasicDialog(
+        child: ResponsiveDialog(
+          dialogMaxWidth: 400,
           title: Text(l10n.s_custom_icons),
-          content: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              _DialogDescription(),
-              const SizedBox(height: 4),
-              _action(iconPack, l10n),
-              _loadedIconPackRow(iconPack),
-            ]
-                .map((e) => Padding(
-                      padding: const EdgeInsets.symmetric(vertical: 8.0),
-                      child: e,
-                    ))
-                .toList(),
+          builder: (context, fullScreen) => Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 18),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _DialogDescription(),
+                const SizedBox(height: 4),
+                Row(
+                  children: [
+                    _action(iconPack, l10n),
+                    const SizedBox(width: 4.0),
+                    InfoPopupButton(
+                      size: 30,
+                      iconSize: 20,
+                      displayDialog: fullScreen,
+                      infoText: RichText(
+                        text: TextSpan(
+                          style: textTheme.bodySmall,
+                          children: [
+                            TextSpan(text: l10n.p_custom_icons_format_desc),
+                            TextSpan(text: '\n' * 2),
+                            TextSpan(
+                              text: l10n.s_download_icon_pack,
+                              style: theme.textTheme.bodySmall
+                                  ?.copyWith(color: theme.colorScheme.primary),
+                              recognizer: TapGestureRecognizer()
+                                ..onTap = () async {
+                                  await launchUrl(_downloadIconPacksUri,
+                                      mode: LaunchMode.externalApplication);
+                                },
+                              children: const [
+                                TextSpan(
+                                    text:
+                                        ' ') // without this the recognizer takes over whole row
+                              ],
+                            ),
+                            TextSpan(text: '\n'),
+                            TextSpan(
+                              text: l10n.s_learn_more,
+                              style: theme.textTheme.bodySmall
+                                  ?.copyWith(color: theme.colorScheme.primary),
+                              recognizer: TapGestureRecognizer()
+                                ..onTap = () async {
+                                  await launchUrl(_learnMoreAegisUri,
+                                      mode: LaunchMode.externalApplication);
+                                },
+                              children: const [
+                                TextSpan(
+                                    text:
+                                        ' ') // without this the recognizer takes over whole row
+                              ],
+                            ),
+                          ],
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+                _loadedIconPackRow(iconPack),
+              ]
+                  .map((e) => Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 8.0),
+                        child: e,
+                      ))
+                  .toList(),
+            ),
           ),
         ));
   }
@@ -94,16 +155,17 @@ class IconPackDialog extends ConsumerWidget {
             ));
   }
 
-  Widget? _action(AsyncValue<IconPack?> iconPack, AppLocalizations l10n) =>
+  Widget _action(AsyncValue<IconPack?> iconPack, AppLocalizations l10n) =>
       iconPack.when(
-          data: (IconPack? data) => _ImportActionChip(
-              data != null ? l10n.s_replace_icon_pack : l10n.s_load_icon_pack),
-          error: (Object error, StackTrace stackTrace) =>
-              _ImportActionChip(l10n.s_load_icon_pack),
-          loading: () => _ImportActionChip(
-                l10n.l_loading_icon_pack,
-                disabled: true,
-              ));
+        data: (IconPack? data) => _ImportActionChip(
+            data != null ? l10n.s_replace_icon_pack : l10n.s_load_icon_pack),
+        error: (Object error, StackTrace stackTrace) =>
+            _ImportActionChip(l10n.s_load_icon_pack),
+        loading: () => _ImportActionChip(
+          l10n.l_loading_icon_pack,
+          disabled: true,
+        ),
+      );
 }
 
 class _DialogDescription extends ConsumerWidget {
@@ -116,29 +178,9 @@ class _DialogDescription extends ConsumerWidget {
       text: TextSpan(
         text: l10n.p_custom_icons_description,
         style: theme.textTheme.bodyMedium,
-        children: [const TextSpan(text: ' '), _createLearnMoreLink(context)],
       ),
     );
   }
-
-  Uri get _learnMoreUri =>
-      Uri.parse('https://yubi.co/ya-custom-account-icons-doc');
-
-  TextSpan _createLearnMoreLink(BuildContext context) {
-    final theme = Theme.of(context);
-    return TextSpan(
-      text: AppLocalizations.of(context)!.s_learn_more,
-      style: theme.textTheme.bodyMedium
-          ?.copyWith(color: theme.colorScheme.primary),
-      recognizer: TapGestureRecognizer()
-        ..onTap = () async {
-          await launchUrl(_learnMoreUri, mode: LaunchMode.externalApplication);
-        },
-      children: const [
-        TextSpan(text: ' ') // without this the recognizer takes over whole row
-      ],
-    );
-  }
 }
 
 class _IconPackDescription extends ConsumerWidget {

diff --git a/lib/l10n/app_de.arb b/lib/l10n/app_de.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Eigene Icons",
     "l_set_icons_for_accounts": "Icons für Konten setzen",
     "p_custom_icons_description": "Icon-Pakete machen Ihre Konten mit bekannten Logos und Farben leichter unterscheidbar.",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "Icon-Paket ersetzen",
     "l_loading_icon_pack": "Lade Icon-Paket\u2026",
     "s_load_icon_pack": "Icon-Paket laden",

diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Custom icons",
     "l_set_icons_for_accounts": "Set icons for accounts",
     "p_custom_icons_description": "Icon packs can make your accounts more easily distinguishable with familiar logos and colors.",
+    "p_custom_icons_format_desc": "Icon packs must be in the Aegis Icon Pack format. Feel free to use a pre-built icon pack from Aegis or create your own.",
+    "s_download_icon_pack": "Download icon pack",
     "s_replace_icon_pack": "Replace icon pack",
     "l_loading_icon_pack": "Loading icon pack\u2026",
     "s_load_icon_pack": "Load icon pack",

diff --git a/lib/l10n/app_fr.arb b/lib/l10n/app_fr.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Icônes personnalisées",
     "l_set_icons_for_accounts": "Définir des icônes pour les comptes",
     "p_custom_icons_description": "Les packs d'icônes permettent de distinguer plus facilement vos comptes avec des logos et couleurs familiers.",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "Remplacer le pack d'icônes",
     "l_loading_icon_pack": "Chargement du pack d'icônes\u2026",
     "s_load_icon_pack": "Charger le pack d'icônes",

diff --git a/lib/l10n/app_ja.arb b/lib/l10n/app_ja.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "カスタムアイコン",
     "l_set_icons_for_accounts": "アカウントのアイコンを設定",
     "p_custom_icons_description": "アイコンパックを使用すると、見慣れたロゴや色によりアカウントを識別しやすくなります。",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "アイコンパックを交換",
     "l_loading_icon_pack": "アイコンパックをロードしています\u2026",
     "s_load_icon_pack": "アイコンパックをロード",

diff --git a/lib/l10n/app_pl.arb b/lib/l10n/app_pl.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Niestandardowe ikony",
     "l_set_icons_for_accounts": "Ustaw ikony dla kont",
     "p_custom_icons_description": "Pakiety ikon mogą sprawić, że Twoje konta będą łatwiejsze do rozróżnienia dzięki znanym logo i kolorom.",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "Zmień pakiet ikon",
     "l_loading_icon_pack": "Ładowanie pakietu ikon\u2026",
     "s_load_icon_pack": "Wybierz pakiet ikon",

diff --git a/lib/l10n/app_sk.arb b/lib/l10n/app_sk.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Vlastné ikony",
     "l_set_icons_for_accounts": "Nastaviť ikony pre účty",
     "p_custom_icons_description": "Vďaka balíkom ikon môžete svoje účty ľahšie rozlíšiť pomocou známych log a farieb.",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "Nahradiť balík ikon",
     "l_loading_icon_pack": "Načítanie balíka ikon\u2026",
     "s_load_icon_pack": "Načítať balík ikon",

diff --git a/lib/l10n/app_vi.arb b/lib/l10n/app_vi.arb
@@ -904,6 +904,8 @@
     "s_custom_icons": "Biểu tượng tùy chỉnh",
     "l_set_icons_for_accounts": "Đặt biểu tượng cho các tài khoản",
     "p_custom_icons_description": "Các gói biểu tượng có thể làm cho các tài khoản của bạn dễ phân biệt hơn với các logo và màu sắc quen thuộc.",
+    "p_custom_icons_format_desc": null,
+    "s_download_icon_pack": null,
     "s_replace_icon_pack": "Thay thế gói biểu tượng",
     "l_loading_icon_pack": "Đang tải gói biểu tượng\u2026",
     "s_load_icon_pack": "Tải gói biểu tượng",

diff --git a/lib/widgets/responsive_dialog.dart b/lib/widgets/responsive_dialog.dart
@@ -26,6 +26,7 @@ class ResponsiveDialog extends StatefulWidget {
   final List<Widget> actions;
   final Function()? onCancel;
   final bool allowCancel;
+  final double dialogMaxWidth;
 
   const ResponsiveDialog({
     super.key,
@@ -34,6 +35,7 @@ class ResponsiveDialog extends StatefulWidget {
     this.actions = const [],
     this.onCancel,
     this.allowCancel = true,
+    this.dialogMaxWidth = 600,
   });
 
   @override
@@ -88,7 +90,7 @@ class _ResponsiveDialogState extends State<ResponsiveDialog> {
         scrollable: true,
         contentPadding: const EdgeInsets.symmetric(vertical: 8),
         content: SizedBox(
-          width: 600,
+          width: widget.dialogMaxWidth,
           child:
               Container(key: _childKey, child: widget.builder(context, false)),
         ),