theming

2022-12-10 17:07:52 -05:00
parent 572f0f23ed
commit 36b6e7446f
10 changed files with 151 additions and 127 deletions
--- a/veilid-flutter/example/lib/app.dart
+++ b/veilid-flutter/example/lib/app.dart
@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:veilid/veilid.dart';
 import 'package:loggy/loggy.dart';
+import 'package:veilid_example/veilid_theme.dart';

 import 'log_terminal.dart';
 import 'config.dart';
@@ -18,6 +19,7 @@ class MyApp extends StatefulWidget {

 class _MyAppState extends State<MyApp> with UiLoggy {
  String _veilidVersion = 'Unknown';
+  bool _startedUp = false;
  Stream<VeilidUpdate>? _updateStream;
  Future<void>? _updateProcessor;

@@ -102,11 +104,31 @@ class _MyAppState extends State<MyApp> with UiLoggy {
    }
  }

+  Future<void> toggleStartup(bool startup) async {
+    if (startup && !_startedUp) {
+      var updateStream = await Veilid.instance
+          .startupVeilidCore(await getDefaultVeilidConfig());
+      setState(() {
+        _updateStream = updateStream;
+        _updateProcessor = processUpdates();
+        _startedUp = true;
+      });
+      await Veilid.instance.attach();
+    } else if (!startup && _startedUp) {
+      await Veilid.instance.shutdownVeilidCore();
+      if (_updateProcessor != null) {
+        await _updateProcessor;
+      }
+      setState(() {
+        _updateProcessor = null;
+        _updateStream = null;
+        _startedUp = false;
+      });
+    }
+  }
+
  @override
  Widget build(BuildContext context) {
-    final ButtonStyle buttonStyle =
-        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));
-
    return Scaffold(
        appBar: AppBar(
          title: Text('Veilid Plugin Version $_veilidVersion'),
@@ -114,73 +136,53 @@ class _MyAppState extends State<MyApp> with UiLoggy {
        body: Column(children: [
          const Expanded(child: LogTerminal()),
          Container(
-              padding: const EdgeInsets.fromLTRB(8, 8, 8, 12),
-              child: Row(children: [
-                ElevatedButton(
-                  style: buttonStyle,
-                  onPressed: _updateStream != null
-                      ? null
-                      : () async {
-                          var updateStream = await Veilid.instance
-                              .startupVeilidCore(
-                                  await getDefaultVeilidConfig());
-                          setState(() {
-                            _updateStream = updateStream;
-                            _updateProcessor = processUpdates();
-                          });
-                          await Veilid.instance.attach();
-                        },
-                  child: const Text('Startup'),
-                ),
-                ElevatedButton(
-                  style: buttonStyle,
-                  onPressed: _updateStream == null
-                      ? null
-                      : () async {
-                          await Veilid.instance.shutdownVeilidCore();
-                          if (_updateProcessor != null) {
-                            await _updateProcessor;
-                          }
-                          setState(() {
-                            _updateProcessor = null;
-                            _updateStream = null;
-                          });
-                        },
-                  child: const Text('Shutdown'),
-                ),
-              ])),
-          Row(children: [
-            Expanded(
-                child: TextField(
-                    decoration: const InputDecoration(
-                        border: OutlineInputBorder(),
-                        labelText: 'Debug Command'),
-                    textInputAction: TextInputAction.send,
-                    onSubmitted: (String v) async {
-                      loggy.info(await Veilid.instance.debug(v));
-                    })),
-            DropdownButton<LogLevel>(
-                value: loggy.level.logLevel,
-                onChanged: (LogLevel? newLevel) {
-                  setState(() {
-                    setRootLogLevel(newLevel);
-                  });
-                },
-                items: const [
-                  DropdownMenuItem<LogLevel>(
-                      value: LogLevel.error, child: Text("Error")),
-                  DropdownMenuItem<LogLevel>(
-                      value: LogLevel.warning, child: Text("Warning")),
-                  DropdownMenuItem<LogLevel>(
-                      value: LogLevel.info, child: Text("Info")),
-                  DropdownMenuItem<LogLevel>(
-                      value: LogLevel.debug, child: Text("Debug")),
-                  DropdownMenuItem<LogLevel>(
-                      value: traceLevel, child: Text("Trace")),
-                  DropdownMenuItem<LogLevel>(
-                      value: LogLevel.all, child: Text("All")),
-                ])
-          ]),
+            decoration: BoxDecoration(color: materialPrimaryColor, boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.15),
+                spreadRadius: 4,
+                blurRadius: 4,
+              )
+            ]),
+            padding: const EdgeInsets.all(5.0),
+            child: Row(children: [
+              Expanded(
+                  child: pad(TextField(
+                      decoration:
+                          newInputDecoration('Debug Command', _startedUp),
+                      textInputAction: TextInputAction.send,
+                      enabled: _startedUp,
+                      onSubmitted: (String v) async {
+                        loggy.info(await Veilid.instance.debug(v));
+                      }))),
+              pad(const Text('Startup')),
+              pad(Switch(
+                  value: _startedUp,
+                  onChanged: (bool value) async {
+                    await toggleStartup(value);
+                  })),
+              pad(DropdownButton<LogLevel>(
+                  value: loggy.level.logLevel,
+                  onChanged: (LogLevel? newLevel) {
+                    setState(() {
+                      setRootLogLevel(newLevel);
+                    });
+                  },
+                  items: const [
+                    DropdownMenuItem<LogLevel>(
+                        value: LogLevel.error, child: Text("Error")),
+                    DropdownMenuItem<LogLevel>(
+                        value: LogLevel.warning, child: Text("Warning")),
+                    DropdownMenuItem<LogLevel>(
+                        value: LogLevel.info, child: Text("Info")),
+                    DropdownMenuItem<LogLevel>(
+                        value: LogLevel.debug, child: Text("Debug")),
+                    DropdownMenuItem<LogLevel>(
+                        value: traceLevel, child: Text("Trace")),
+                    DropdownMenuItem<LogLevel>(
+                        value: LogLevel.all, child: Text("All")),
+                  ])),
+            ]),
+          ),
        ]));
  }
 }
--- a/veilid-flutter/example/lib/log_terminal.dart
+++ b/veilid-flutter/example/lib/log_terminal.dart
@@ -5,6 +5,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:xterm/xterm.dart';
 import 'log.dart';
+import 'veilid_theme.dart';
+
+const kDefaultTerminalStyle = TerminalStyle(
+    fontSize: kDefaultMonoTerminalFontSize,
+    height: kDefaultMonoTerminalFontHeight,
+    fontFamily: kDefaultMonoTerminalFontFamily);

 class LogTerminal extends StatefulWidget {
  const LogTerminal({Key? key}) : super(key: key);
@@ -31,30 +37,26 @@ class _LogTerminalState extends State<LogTerminal> {

  @override
  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.transparent,
-      body: SafeArea(
-        child: TerminalView(
-          terminal,
-          controller: terminalController,
-          autofocus: true,
-          backgroundOpacity: 0.7,
-          onSecondaryTapDown: (details, offset) async {
-            final selection = terminalController.selection;
-            if (selection != null) {
-              final text = terminal.buffer.getText(selection);
-              terminalController.clearSelection();
-              await Clipboard.setData(ClipboardData(text: text));
-            } else {
-              final data = await Clipboard.getData('text/plain');
-              final text = data?.text;
-              if (text != null) {
-                terminal.paste(text);
-              }
-            }
-          },
-        ),
-      ),
+    return TerminalView(
+      terminal,
+      textStyle: kDefaultTerminalStyle,
+      controller: terminalController,
+      autofocus: true,
+      backgroundOpacity: 0.7,
+      onSecondaryTapDown: (details, offset) async {
+        final selection = terminalController.selection;
+        if (selection != null) {
+          final text = terminal.buffer.getText(selection);
+          terminalController.clearSelection();
+          await Clipboard.setData(ClipboardData(text: text));
+        } else {
+          final data = await Clipboard.getData('text/plain');
+          final text = data?.text;
+          if (text != null) {
+            terminal.paste(text);
+          }
+        }
+      },
    );
  }
 }
--- a/veilid-flutter/example/lib/main.dart
+++ b/veilid-flutter/example/lib/main.dart
@@ -5,7 +5,7 @@ import 'package:flutter/foundation.dart';
 import 'package:veilid/veilid.dart';
 import 'package:flutter_acrylic/flutter_acrylic.dart';

-import 'veilid_color.dart';
+import 'veilid_theme.dart';
 import 'log.dart';
 import 'app.dart';
 import 'veilid_init.dart';
--- a/veilid-flutter/example/lib/veilid_theme.dart
+++ b/veilid-flutter/example/lib/veilid_theme.dart
@@ -9,6 +9,9 @@

 import 'package:flutter/material.dart';

+/////////////////////////////////////////////////////////
+// Colors
+
 const Map<int, Color> primaryColorSwatch = {
  50: Color(0xffe9e9f3),
  100: Color(0xffc7c8e2),
@@ -233,10 +236,58 @@ const Map<int, Color> popComplentaryColorSwatch = {
 const MaterialColor materialPopComplementaryColor =
    MaterialColor(0xff59f282, popComplentaryColorSwatch);

+/////////////////////////////////////////////////////////
+// Spacing
+
+const kDefaultSpacingFactor = 4.0;
+
+const kDefaultMonoTerminalFontFamily = "CascadiaMonoPL.ttf";
+const kDefaultMonoTerminalFontHeight = 1.2;
+const kDefaultMonoTerminalFontSize = 12.0;
+
+double spacingFactor(double multiplier) {
+  return multiplier * kDefaultSpacingFactor;
+}
+
+Padding pad(Widget child) {
+  return Padding(
+      padding: const EdgeInsets.all(kDefaultSpacingFactor), child: child);
+}
+
+/////////////////////////////////////////////////////////
+// Theme
+
+InputDecoration newInputDecoration(String labelText, bool enabled) {
+  return InputDecoration(
+      labelText: labelText,
+      fillColor: enabled
+          ? materialPrimaryColor.shade200
+          : materialPrimaryColor.shade200.withOpacity(0.5));
+}
+
+InputDecorationTheme newInputDecorationTheme() {
+  return InputDecorationTheme(
+      border: const OutlineInputBorder(),
+      filled: true,
+      fillColor: materialPrimaryColor.shade200,
+      disabledBorder: const OutlineInputBorder(
+          borderSide:
+              BorderSide(color: Color.fromARGB(0, 0, 0, 0), width: 0.0)),
+      focusedBorder: OutlineInputBorder(
+          borderSide:
+              BorderSide(color: materialPrimaryColor.shade900, width: 0.0)),
+      floatingLabelBehavior: FloatingLabelBehavior.never,
+      floatingLabelStyle: TextStyle(
+        color: materialPrimaryColor.shade900,
+        letterSpacing: 1.2,
+      ));
+}
+
 ThemeData newVeilidTheme() {
  return ThemeData(
    primarySwatch: materialPrimaryColor,
    secondaryHeaderColor: materialSecondaryColor,
    visualDensity: VisualDensity.adaptivePlatformDensity,
+    inputDecorationTheme: newInputDecorationTheme(),
  );
 }