Further KeyboardPage improvements (#225)

Feichtmeier · web-flow · commit d29d58d2d355 · 2022-01-05T14:48:01.000+01:00
*‌ re-style the re-orderable listview
*‌ add input source service
* add delete/add input source feature
diff --git a/lib/main.dart b/lib/main.dart
@@ -6,6 +6,7 @@ import 'package:settings/l10n/l10n.dart';
 import 'package:settings/schemas/schemas.dart';
 import 'package:settings/services/bluetooth_service.dart';
 import 'package:settings/services/hostname_service.dart';
+import 'package:settings/services/input_source_service.dart';
 import 'package:settings/services/power_profile_service.dart';
 import 'package:settings/services/power_settings_service.dart';
 import 'package:settings/services/settings_service.dart';
@@ -61,6 +62,9 @@ void main() async {
         Provider<BlueZClient>(
           create: (_) => BlueZClient(),
           dispose: (_, client) => client.close(),
+        ),
+        Provider<InputSourceService>(
+          create: (_) => InputSourceService(),
         )
       ],
       child: const UbuntuSettingsApp(),
diff --git a/lib/services/input_source_service.dart b/lib/services/input_source_service.dart
@@ -0,0 +1,62 @@
+import 'dart:io';
+
+import 'package:xml/xml.dart';
+
+class InputSourceService {
+  static const pathToXml = '/usr/share/X11/xkb/rules/base.xml';
+  late final List<InputSource> inputSources;
+
+  InputSourceService() {
+    inputSources = _loadInputSources();
+  }
+
+  List<InputSource> _loadInputSources() {
+    final document = XmlDocument.parse(File(pathToXml).readAsStringSync());
+
+    final layouts = document.findAllElements('layout');
+    return layouts
+        .map(
+          (layout) => InputSource(
+              variants: layout.getElement('variantList') != null
+                  ? layout
+                      .getElement('variantList')!
+                      .childElements
+                      .map((variant) => InputSourceVariant(
+                            name: variant
+                                .getElement('configItem')!
+                                .getElement('name')!
+                                .innerText,
+                            description: variant
+                                .getElement('configItem')!
+                                .getElement('description')!
+                                .innerText,
+                          ))
+                      .toList()
+                  : [],
+              description: layout
+                  .getElement('configItem')
+                  ?.getElement('description')
+                  ?.innerText,
+              name: layout
+                  .getElement('configItem')
+                  ?.getElement('name')
+                  ?.innerText),
+        )
+        .toList();
+  }
+}
+
+class InputSource {
+  final String? name;
+  final String? description;
+  final List<InputSourceVariant> variants;
+
+  InputSource({this.name, this.description, required this.variants});
+}
+
+class InputSourceVariant {
+  final String? name;
+  final String? description;
+
+  InputSourceVariant({this.name, this.description});
+}
diff --git a/lib/view/pages/keyboard/input_source_model.dart b/lib/view/pages/keyboard/input_source_model.dart
@@ -1,17 +1,23 @@
+import 'dart:io';
+
 import 'package:dbus/dbus.dart';
 import 'package:gsettings/gsettings.dart';
 import 'package:safe_change_notifier/safe_change_notifier.dart';
 import 'package:settings/schemas/schemas.dart';
+import 'package:settings/services/input_source_service.dart';
 import 'package:settings/services/settings_service.dart';
 
 class InputSourceModel extends SafeChangeNotifier {
   final Settings? _inputSourceSettings;
   static const _perWindowKey = 'per-window';
   static const _sourcesKey = 'sources';
   static const _mruSourcesKey = 'mru-sources';
+  final List<InputSource> inputSources;
 
-  InputSourceModel(SettingsService service)
-      : _inputSourceSettings = service.lookup(schemaInputSources) {
+  InputSourceModel(
+      SettingsService settingsService, InputSourceService inputSourceService)
+      : _inputSourceSettings = settingsService.lookup(schemaInputSources),
+        inputSources = inputSourceService.inputSources {
     _inputSourceSettings?.addListener(notifyListeners);
   }
 
@@ -44,7 +50,7 @@ class InputSourceModel extends SafeChangeNotifier {
     return inputTypes ?? [];
   }
 
-  setInputSources(List<String>? inputTypes) async {
+  Future<void> setInputSources(List<String>? inputTypes) async {
     final settings = GSettings(schemaInputSources);
 
     final DBusArray array = DBusArray(DBusSignature('(ss)'), [
@@ -59,4 +65,23 @@ class InputSourceModel extends SafeChangeNotifier {
 
     notifyListeners();
   }
+
+  Future<void> removeInputSource(String inputType) async {
+    final types = await getInputSources();
+    if (types!.length > 1) {
+      types.remove(inputType);
+      await setInputSources(types);
+    }
+  }
+
+  Future<void> addInputSource(String inputSource) async {
+    final sources = await getInputSources();
+    sources?.add(inputSource);
+    await setInputSources(sources);
+  }
+
+  Future<void> showKeyboardLayout(String inputType) async {
+    await Process.run('gkbd-keyboard-display',
+        ['-l', inputType.split('+').first, inputType.split('+').last, '&']);
+  }
 }
diff --git a/lib/view/pages/keyboard/input_source_section.dart b/lib/view/pages/keyboard/input_source_section.dart
@@ -13,11 +13,15 @@ class InputSourceSection extends StatelessWidget {
     return Column(children: [
       YaruSection(headline: 'Change input sources', children: [
         RadioListTile(
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
             title: const Text('Use the same input for all windows'),
             value: false,
             groupValue: inputSourceModel.perWindow,
             onChanged: (_) => inputSourceModel.perWindow = false),
         RadioListTile(
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
             title: const Text('Give each window its own input source'),
             value: true,
             groupValue: inputSourceModel.perWindow,
diff --git a/lib/view/pages/keyboard/input_source_selection_section.dart b/lib/view/pages/keyboard/input_source_selection_section.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/view/pages/keyboard/input_source_model.dart';
+import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 
 class InputSourceSelectionSection extends StatelessWidget {
@@ -18,28 +19,155 @@ class InputSourceSelectionSection extends StatelessWidget {
         if (!snapshot.hasData) {
           return const CircularProgressIndicator();
         }
-        return YaruSection(headline: 'Input Sources', children: [
-          ReorderableListView(
-            shrinkWrap: true,
-            children: <Widget>[
-              for (int index = 0; index < snapshot.data!.length; index++)
-                ListTile(
-                  key: Key('$index'),
-                  title: Text('${index + 1}. ${snapshot.data![index]}'),
-                ),
-            ],
-            onReorder: (int oldIndex, int newIndex) async {
-              final sources = snapshot.data!;
-              if (oldIndex < newIndex) {
-                newIndex -= 1;
-              }
-              final item = snapshot.data!.removeAt(oldIndex);
-              sources.insert(newIndex, item);
-              model.setInputSources(sources);
-            },
-          )
-        ]);
+        return YaruSection(
+            headline: 'Input Sources',
+            headerWidget: SizedBox(
+              height: 40,
+              width: 40,
+              child: TextButton(
+                  onPressed: () => showDialog(
+                      context: context,
+                      builder: (context) => ChangeNotifierProvider.value(
+                            value: model,
+                            child: const _AddKeymapDialog(),
+                          )),
+                  child: const Icon(YaruIcons.plus)),
+            ),
+            children: [
+              ReorderableListView(
+                buildDefaultDragHandles: false,
+                shrinkWrap: true,
+                children: <Widget>[
+                  for (int index = 0; index < snapshot.data!.length; index++)
+                    ReorderableDragStartListener(
+                      key: Key('$index'),
+                      index: index,
+                      child: ChangeNotifierProvider.value(
+                        value: model,
+                        child: _InputTypeRow(
+                          inputType: snapshot.data![index],
+                        ),
+                      ),
+                    ),
+                ],
+                onReorder: (int oldIndex, int newIndex) async {
+                  final sources = snapshot.data!;
+                  if (oldIndex < newIndex) {
+                    newIndex -= 1;
+                  }
+                  final item = snapshot.data!.removeAt(oldIndex);
+                  sources.insert(newIndex, item);
+                  model.setInputSources(sources);
+                },
+              ),
+            ]);
       },
     );
   }
 }
+
+class _InputTypeRow extends StatelessWidget {
+  const _InputTypeRow({
+    Key? key,
+    required this.inputType,
+  }) : super(key: key);
+
+  final String inputType;
+
+  @override
+  Widget build(BuildContext context) {
+    final model = context.watch<InputSourceModel>();
+    return YaruRow(
+        actionWidget: Row(
+          children: [
+            YaruOptionButton(
+                onPressed: () => model.showKeyboardLayout(inputType),
+                iconData: YaruIcons.input_keyboard),
+            const SizedBox(
+              width: 10,
+            ),
+            YaruOptionButton(
+                onPressed: () => model.removeInputSource(inputType),
+                iconData: YaruIcons.trash)
+          ],
+        ),
+        trailingWidget: Text(
+          inputType,
+          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
+        ),
+        leadingWidget: Icon(
+          YaruIcons.drag_handle,
+          color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
+        ));
+  }
+}
+
+class _AddKeymapDialog extends StatefulWidget {
+  const _AddKeymapDialog({Key? key}) : super(key: key);
+
+  @override
+  State<_AddKeymapDialog> createState() => _AddKeymapDialogState();
+}
+
+class _AddKeymapDialogState extends State<_AddKeymapDialog> {
+  int tabbedIndex = 0;
+  bool variantsLoad = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final model = context.watch<InputSourceModel>();
+    return variantsLoad == false
+        ? YaruSimpleDialog(
+            title: 'Add Keymap',
+            closeIconData: YaruIcons.window_close,
+            children: [
+                for (var i = 0; i < model.inputSources.length; i++)
+                  InkWell(
+                    borderRadius: BorderRadius.circular(4.0),
+                    onTap: () => setState(() {
+                      tabbedIndex = i;
+                      variantsLoad = true;
+                    }),
+                    child: YaruRow(
+                      width: 100,
+                      description: model.inputSources[i].name,
+                      actionWidget: const SizedBox(),
+                      trailingWidget: Text(model.inputSources[i].description!),
+                    ),
+                  ),
+              ])
+        : YaruSimpleDialog(
+            title: (model.inputSources[tabbedIndex].name ?? '') +
+                ': ' +
+                (model.inputSources[tabbedIndex].description ?? ''),
+            closeIconData: YaruIcons.window_close,
+            children: [
+                for (var variant in model.inputSources[tabbedIndex].variants)
+                  InkWell(
+                    onTap: () {
+                      if (model.inputSources[tabbedIndex].name != null &&
+                          variant.name != null) {
+                        model.addInputSource(
+                            model.inputSources[tabbedIndex].name! +
+                                '+' +
+                                variant.name!);
+                      }
+
+                      Navigator.of(context).pop();
+                      setState(() {});
+                    },
+                    borderRadius: BorderRadius.circular(4.0),
+                    child: YaruRow(
+                        width: 100,
+                        trailingWidget: Text(variant.description ?? ''),
+                        description: variant.name ?? '',
+                        actionWidget: const SizedBox()),
+                  ),
+                TextButton(
+                    onPressed: () => setState(() {
+                          variantsLoad = false;
+                        }),
+                    child: const Icon(YaruIcons.pan_start))
+              ]);
+  }
+}
diff --git a/lib/view/pages/keyboard/keyboard_settings_page.dart b/lib/view/pages/keyboard/keyboard_settings_page.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:settings/services/input_source_service.dart';
 import 'package:settings/services/settings_service.dart';
 import 'package:settings/view/pages/keyboard/input_source_model.dart';
 import 'package:settings/view/pages/keyboard/input_source_section.dart';
@@ -14,20 +15,23 @@ class KeyboardSettingsPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final service = Provider.of<SettingsService>(context, listen: false);
+    final settingsService =
+        Provider.of<SettingsService>(context, listen: false);
+    final inputSourceService =
+        Provider.of<InputSourceService>(context, listen: false);
 
     return Column(
       children: [
         ChangeNotifierProvider(
-          create: (_) => InputSourceModel(service),
+          create: (_) => InputSourceModel(settingsService, inputSourceService),
           child: const InputSourceSelectionSection(),
         ),
         ChangeNotifierProvider(
-          create: (_) => InputSourceModel(service),
+          create: (_) => InputSourceModel(settingsService, inputSourceService),
           child: const InputSourceSection(),
         ),
         ChangeNotifierProvider(
-          create: (_) => SpecialCharactersModel(service),
+          create: (_) => SpecialCharactersModel(settingsService),
           child: const SpecialCharactersSection(),
         ),
       ],
diff --git a/pubspec.lock b/pubspec.lock
@@ -859,7 +859,7 @@ packages:
     source: hosted
     version: "0.2.0"
   xml:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: xml
       url: "https://pub.dartlang.org"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -48,6 +48,7 @@ dependencies:
   flutter_svg: ^1.0.0
   flutter_spinbox: ^0.7.0
   http: ^0.13.4
+  xml: ^5.3.1
 
 dev_dependencies:
   build_runner: ^2.1.2
