Styling changes

- add and use yaru and yaru_icons
- remove the pink accent colors
- add padding to the download options list
This commit is contained in:
Feichtmeier 2021-11-07 19:32:33 +01:00
parent d38146736c
commit b666c6bd4b
10 changed files with 83 additions and 36 deletions

View File

@ -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'));
}
}

View File

@ -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(

View File

@ -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<MainPage> {
onPressed: () {
exit(0);
},
icon: const Icon(Icons.exit_to_app),
icon: const Icon(YaruIcons.pan_start),
),
),
body: Column(

View File

@ -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<Manager> 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<Manager> with PreferencesMixin {
List<String> currentVms = [];
Map<String, VmInfo> 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<Manager> with PreferencesMixin {
mainAxisSize: MainAxisSize.min,
children: <Widget>[
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<Manager> 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<Manager> 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<Manager> 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: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, false),
@ -236,6 +244,10 @@ class _ManagerState extends State<Manager> 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(),

View File

@ -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<OperatingSystemSelection> createState() => _OperatingSystemSelectionState();
State<OperatingSystemSelection> createState() =>
_OperatingSystemSelectionState();
}
class _OperatingSystemSelectionState extends State<OperatingSystemSelection> {
@ -20,9 +22,15 @@ class _OperatingSystemSelectionState extends State<OperatingSystemSelection> {
@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<OperatingSystemSelection> {
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<OperatingSystemSelection> {
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
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<OperatingSystemSelection> {
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);
},
),
),
);
},

View File

@ -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<OptionSelection> {
@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<OptionSelection> {
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
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;

View File

@ -24,12 +24,12 @@ class _DownloaderMenuState extends State<DownloaderMenu> 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<DownloaderMenu> 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<DownloaderMenu> 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),
),
),
],

View File

@ -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),

View File

@ -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,
),
);

View File

@ -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: