From b666c6bd4be7f8b7de44c666b5032bf84d5f37a9 Mon Sep 17 00:00:00 2001 From: Feichtmeier Date: Sun, 7 Nov 2021 19:32:33 +0100 Subject: [PATCH] Styling changes - add and use yaru and yaru_icons - remove the pink accent colors - add padding to the download options list --- lib/src/app.dart | 9 ++--- lib/src/pages/downloader_page.dart | 5 +++ lib/src/pages/main_page.dart | 3 +- lib/src/pages/manager.dart | 24 ++++++++++---- lib/src/pages/operating_system_selection.dart | 33 +++++++++++++------ lib/src/pages/option_selection.dart | 10 ++++-- .../widgets/home_page/downloader_menu.dart | 12 ++++--- .../widgets/home_page/home_page_button.dart | 13 +++++--- lib/src/widgets/home_page/main_menu.dart | 8 +++-- pubspec.yaml | 2 ++ 10 files changed, 83 insertions(+), 36 deletions(-) diff --git a/lib/src/app.dart b/lib/src/app.dart index 83688aa..c446b87 100644 --- a/lib/src/app.dart +++ b/lib/src/app.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:quickgui/src/pages/main_page.dart'; +import 'package:yaru/yaru.dart' as yaru; class App extends StatelessWidget { const App({Key? key}) : super(key: key); @@ -7,9 +8,9 @@ class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( - theme: ThemeData( - primarySwatch: Colors.pink, - ), - home: const MainPage(title: 'Quickgui - A Flutter frontend for Quickget and Quickemu')); + theme: yaru.lightTheme, + darkTheme: yaru.darkTheme, + home: const MainPage( + title: 'Quickgui - A Flutter frontend for Quickget and Quickemu')); } } diff --git a/lib/src/pages/downloader_page.dart b/lib/src/pages/downloader_page.dart index a6ee7e3..248000a 100644 --- a/lib/src/pages/downloader_page.dart +++ b/lib/src/pages/downloader_page.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:quickgui/src/widgets/home_page/downloader_menu.dart'; import 'package:quickgui/src/widgets/home_page/logo.dart'; +import 'package:yaru_icons/widgets/yaru_icons.dart'; class DownloaderPage extends StatelessWidget { const DownloaderPage({Key? key}) : super(key: key); @@ -9,6 +10,10 @@ class DownloaderPage extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar( + leading: IconButton( + icon: const Icon(YaruIcons.window_close), + onPressed: () => Navigator.of(context).pop(), + ), title: const Text('Downloader'), ), body: Column( diff --git a/lib/src/pages/main_page.dart b/lib/src/pages/main_page.dart index 097e493..353c9fb 100644 --- a/lib/src/pages/main_page.dart +++ b/lib/src/pages/main_page.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:quickgui/src/widgets/home_page/logo.dart'; import 'package:quickgui/src/widgets/home_page/main_menu.dart'; +import 'package:yaru_icons/widgets/yaru_icons.dart'; class MainPage extends StatefulWidget { const MainPage({Key? key, required this.title}) : super(key: key); @@ -23,7 +24,7 @@ class _MainPageState extends State { onPressed: () { exit(0); }, - icon: const Icon(Icons.exit_to_app), + icon: const Icon(YaruIcons.pan_start), ), ), body: Column( diff --git a/lib/src/pages/manager.dart b/lib/src/pages/manager.dart index f721775..b098f07 100644 --- a/lib/src/pages/manager.dart +++ b/lib/src/pages/manager.dart @@ -7,6 +7,7 @@ import 'dart:io'; import 'package:quickgui/src/globals.dart'; import 'package:quickgui/src/model/vminfo.dart'; import 'package:quickgui/src/mixins/preferences_mixin.dart'; +import 'package:yaru_icons/widgets/yaru_icons.dart'; /// VM manager page. /// Displays a list of available VMs, running state and connection info, @@ -32,7 +33,8 @@ class _ManagerState extends State with PreferencesMixin { setState(() { Directory.current = pref; }); - Future.delayed(Duration.zero, () => _getVms(context)); // Reload VM list when we enter the page. + Future.delayed(Duration.zero, + () => _getVms(context)); // Reload VM list when we enter the page. } }); @@ -79,7 +81,8 @@ class _ManagerState extends State with PreferencesMixin { List currentVms = []; Map activeVms = {}; - await for (var entity in Directory.current.list(recursive: false, followLinks: true)) { + await for (var entity + in Directory.current.list(recursive: false, followLinks: true)) { if ((entity.path.endsWith('.conf')) && (_isValidConf(entity.path))) { String name = path.basenameWithoutExtension(entity.path); currentVms.add(name); @@ -152,7 +155,11 @@ class _ManagerState extends State with PreferencesMixin { mainAxisSize: MainAxisSize.min, children: [ IconButton( - icon: Icon(Icons.monitor, color: spicy ? Colors.red : null, semanticLabel: spicy ? 'Using SPICE display' : 'Click to use SPICE display'), + icon: Icon(YaruIcons.desktop_display, + color: spicy ? Colors.red : null, + semanticLabel: spicy + ? 'Using SPICE display' + : 'Click to use SPICE display'), tooltip: spicy ? 'Using SPICE display' : 'Use SPICE display', onPressed: () { if (spicy) { @@ -167,7 +174,7 @@ class _ManagerState extends State with PreferencesMixin { }), IconButton( icon: Icon( - active ? Icons.play_arrow : Icons.play_arrow_outlined, + YaruIcons.media_playback_start, color: active ? Colors.green : null, semanticLabel: active ? 'Running' : 'Run', ), @@ -188,7 +195,7 @@ class _ManagerState extends State with PreferencesMixin { }), IconButton( icon: Icon( - active ? Icons.stop : Icons.stop_outlined, + YaruIcons.media_playback_stop, color: active ? Colors.red : null, semanticLabel: active ? 'Stop' : 'Not running', ), @@ -198,7 +205,8 @@ class _ManagerState extends State with PreferencesMixin { context: context, builder: (BuildContext context) => AlertDialog( title: const Text('Stop The Virtual Machine?'), - content: Text('You are about to terminate the virtual machine $currentVm'), + content: Text( + 'You are about to terminate the virtual machine $currentVm'), actions: [ TextButton( onPressed: () => Navigator.pop(context, false), @@ -236,6 +244,10 @@ class _ManagerState extends State with PreferencesMixin { Widget build(BuildContext context) { return Scaffold( appBar: AppBar( + leading: IconButton( + icon: const Icon(YaruIcons.window_close), + onPressed: () => Navigator.of(context).pop(), + ), title: const Text('Manager'), ), body: _buildVmList(), diff --git a/lib/src/pages/operating_system_selection.dart b/lib/src/pages/operating_system_selection.dart index e225ae0..afb19bc 100644 --- a/lib/src/pages/operating_system_selection.dart +++ b/lib/src/pages/operating_system_selection.dart @@ -1,11 +1,13 @@ import 'package:flutter/material.dart'; import 'package:quickgui/src/model/operating_system.dart'; +import 'package:yaru_icons/widgets/yaru_icons.dart'; class OperatingSystemSelection extends StatefulWidget { const OperatingSystemSelection({Key? key}) : super(key: key); @override - State createState() => _OperatingSystemSelectionState(); + State createState() => + _OperatingSystemSelectionState(); } class _OperatingSystemSelectionState extends State { @@ -20,9 +22,15 @@ class _OperatingSystemSelectionState extends State { @override Widget build(BuildContext context) { - var list = gOperatingSystems.where((os) => os.name.toLowerCase().contains(term.toLowerCase())).toList(); + var list = gOperatingSystems + .where((os) => os.name.toLowerCase().contains(term.toLowerCase())) + .toList(); return Scaffold( appBar: AppBar( + leading: IconButton( + icon: const Icon(YaruIcons.window_close), + onPressed: () => Navigator.of(context).pop(), + ), title: const Text('Select operating system'), bottom: PreferredSize( preferredSize: const Size.fromHeight(kToolbarHeight), @@ -30,6 +38,7 @@ class _OperatingSystemSelectionState extends State { padding: const EdgeInsets.all(8.0), child: Container( decoration: BoxDecoration( + borderRadius: BorderRadius.circular(4), color: Theme.of(context).canvasColor, ), child: Padding( @@ -38,11 +47,12 @@ class _OperatingSystemSelectionState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - const Icon(Icons.search), + const Icon(YaruIcons.search), Expanded( child: TextField( focusNode: focusNode, - decoration: const InputDecoration.collapsed(hintText: 'Search operating system'), + decoration: const InputDecoration.collapsed( + hintText: 'Search operating system'), onChanged: (value) { setState(() { term = value; @@ -67,12 +77,15 @@ class _OperatingSystemSelectionState extends State { itemCount: list.length, itemBuilder: (context, index) { var item = list[index]; - return Card( - child: ListTile( - title: Text(item.name), - onTap: () { - Navigator.of(context).pop(item); - }, + return Padding( + padding: const EdgeInsets.only(left: 4, right: 4), + child: Card( + child: ListTile( + title: Text(item.name), + onTap: () { + Navigator.of(context).pop(item); + }, + ), ), ); }, diff --git a/lib/src/pages/option_selection.dart b/lib/src/pages/option_selection.dart index 70983f4..57904aa 100644 --- a/lib/src/pages/option_selection.dart +++ b/lib/src/pages/option_selection.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:quickgui/src/model/version.dart'; +import 'package:yaru_icons/widgets/yaru_icons.dart'; class OptionSelection extends StatefulWidget { const OptionSelection(this.version, {Key? key}) : super(key: key); @@ -22,7 +23,9 @@ class _OptionSelectionState extends State { @override Widget build(BuildContext context) { - var list = widget.version.options.where((e) => e.option.toLowerCase().contains(term.toLowerCase())).toList(); + var list = widget.version.options + .where((e) => e.option.toLowerCase().contains(term.toLowerCase())) + .toList(); return Scaffold( appBar: AppBar( @@ -43,11 +46,12 @@ class _OptionSelectionState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - const Icon(Icons.search), + const Icon(YaruIcons.search), Expanded( child: TextField( focusNode: focusNode, - decoration: const InputDecoration.collapsed(hintText: 'Search option'), + decoration: const InputDecoration.collapsed( + hintText: 'Search option'), onChanged: (value) { setState(() { term = value; diff --git a/lib/src/widgets/home_page/downloader_menu.dart b/lib/src/widgets/home_page/downloader_menu.dart index 8bab364..da29fd7 100644 --- a/lib/src/widgets/home_page/downloader_menu.dart +++ b/lib/src/widgets/home_page/downloader_menu.dart @@ -24,12 +24,12 @@ class _DownloaderMenuState extends State with PreferencesMixin { } }); } - + @override Widget build(BuildContext context) { return Expanded( child: Container( - color: Colors.pink, + // color: Colors.pink, child: Column( children: [ Row( @@ -49,7 +49,8 @@ class _DownloaderMenuState extends State with PreferencesMixin { ), InkWell( onTap: () async { - var folder = await FilePicker.platform.getDirectoryPath(dialogTitle: "Pick a folder"); + var folder = await FilePicker.platform + .getDirectoryPath(dialogTitle: "Pick a folder"); if (folder != null) { setState(() { Directory.current = folder; @@ -59,7 +60,10 @@ class _DownloaderMenuState extends State with PreferencesMixin { }, child: Text( "Working directory : ${Directory.current.path}", - style: Theme.of(context).textTheme.subtitle1!.copyWith(color: Colors.white), + style: Theme.of(context) + .textTheme + .subtitle1! + .copyWith(color: Colors.white), ), ), ], diff --git a/lib/src/widgets/home_page/home_page_button.dart b/lib/src/widgets/home_page/home_page_button.dart index 9df309d..3ea78b4 100644 --- a/lib/src/widgets/home_page/home_page_button.dart +++ b/lib/src/widgets/home_page/home_page_button.dart @@ -26,15 +26,18 @@ class HomePageButton extends StatelessWidget { child: Center( child: Text( label?.toUpperCase() ?? '', - style: Theme.of(context).textTheme.subtitle2?.copyWith(color: Colors.white), + style: Theme.of(context) + .textTheme + .subtitle2 + ?.copyWith(color: Colors.white), ), ), ), ElevatedButton( - style: ElevatedButton.styleFrom( - primary: Colors.white, - onPrimary: Colors.pink, - ), + // style: ElevatedButton.styleFrom( + // primary: Colors.white, + // onPrimary: Colors.pink, + // ), onPressed: onPressed, child: Padding( padding: const EdgeInsets.fromLTRB(0, 16, 0, 16), diff --git a/lib/src/widgets/home_page/main_menu.dart b/lib/src/widgets/home_page/main_menu.dart index 27b8020..6164fce 100644 --- a/lib/src/widgets/home_page/main_menu.dart +++ b/lib/src/widgets/home_page/main_menu.dart @@ -10,7 +10,7 @@ class MainMenu extends StatelessWidget { Widget build(BuildContext context) { return Expanded( child: Container( - color: Colors.pink, + // color: Colors.pink, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( @@ -21,7 +21,8 @@ class MainMenu extends StatelessWidget { Navigator.of(context).push( PageRouteBuilder( fullscreenDialog: true, - pageBuilder: (context, animation1, animation2) => const Manager(), + pageBuilder: (context, animation1, animation2) => + const Manager(), transitionDuration: Duration.zero, ), ); @@ -34,7 +35,8 @@ class MainMenu extends StatelessWidget { Navigator.of(context).push( PageRouteBuilder( fullscreenDialog: true, - pageBuilder: (context, animation1, animation2) => const DownloaderPage(), + pageBuilder: (context, animation1, animation2) => + const DownloaderPage(), transitionDuration: Duration.zero, ), ); diff --git a/pubspec.yaml b/pubspec.yaml index 0659e1c..0d41f6f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -43,6 +43,8 @@ dependencies: tuple: ^2.0.0 file_picker: ^4.1.6 shared_preferences: ^2.0.8 + yaru: ^0.1.7 + yaru_icons: ^0.0.6 dev_dependencies: flutter_test: