Skip to content

Commit

Permalink
start redesign with dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lukas-Heiligenbrunner
Lukas-Heiligenbrunner committed Dec 2, 2024
1 parent 8d5bdf5 commit f9f0bc6
Show file tree
Hide file tree
Showing 10 changed files with 332 additions and 113 deletions.
13 changes: 6 additions & 7 deletions frontend/lib/components/dashboard/header.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,37 @@ class Header extends StatelessWidget {
Widget build(BuildContext context) {
return Row(
children: [
if (!Responsive.isDesktop(context))
if (!context.desktop)
IconButton(
icon: const Icon(Icons.menu),
onPressed: () {},
),
if (!Responsive.isMobile(context))
if (!context.mobile)
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello, Arch User 👋",
"Hi, Arch User :)",
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(
height: 8,
),
Text(
"Welcome to your Build server",
"Welcome to your personal build server",
style: Theme.of(context).textTheme.titleSmall,
),
],
),
if (!Responsive.isMobile(context))
Spacer(flex: Responsive.isDesktop(context) ? 2 : 1),
if (!context.mobile) Spacer(flex: context.desktop ? 2 : 1),
Expanded(child: SearchField()),
ElevatedButton.icon(
style: TextButton.styleFrom(
backgroundColor: darkgreenColor,
padding: EdgeInsets.symmetric(
horizontal: defaultPadding * 1.5,
vertical: defaultPadding / (Responsive.isMobile(context) ? 2 : 1),
vertical: defaultPadding / (context.mobile ? 2 : 1),
),
),
onPressed: () {
Expand Down
16 changes: 7 additions & 9 deletions frontend/lib/components/dashboard/quick_info_banner.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,13 @@ class QuickInfoBanner extends StatelessWidget {
children: [
const SizedBox(height: defaultPadding),
Responsive(
mobile: _buildBanner(
crossAxisCount: _size.width < 650 ? 2 : 4,
childAspectRatio: _size.width < 650 ? 1.2 : 1,
),
tablet: _buildBanner(),
desktop: _buildBanner(
childAspectRatio: _size.width < 1400 ? 2.75 : 2.75,
),
),
mobileChild: _buildBanner(
crossAxisCount: _size.width < 650 ? 2 : 4,
childAspectRatio: _size.width < 650 ? 1.2 : 1,
),
desktopChild: _buildBanner(
childAspectRatio: _size.width < 1400 ? 2.75 : 2.75,
))
],
);
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/lib/components/routing/menu_shell.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ class MenuShell extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// We want this side menu only for large screen
if (Responsive.isDesktop(context))
if (context.desktop)
const Expanded(
// default flex = 1
// and it takes 1/6 part of the screen
child: SideMenu(),
),
Expanded(
// It takes 5/6 part of the screen
flex: 5,
flex: 7,
child: child,
),
],
Expand Down
196 changes: 149 additions & 47 deletions frontend/lib/components/routing/side_menu.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,84 +9,186 @@ class SideMenu extends StatelessWidget {

@override
Widget build(BuildContext context) {
final active_uri = GoRouterState.of(context).uri.toString();

return Drawer(
//backgroundColor: Color(0xff131418),
child: SingleChildScrollView(
// it enables scrolling
child: Column(
children: [
SizedBox(
height: 210,
child: DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
SvgPicture.asset(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: SvgPicture.asset(
'assets/icons/icon.svg',
height: 90,
width: 00,
height: 55,
),
SizedBox(
height: 15,
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"AURCache",
style: TextStyle(
fontWeight: FontWeight.w900, fontSize: 16),
),
const Text(
"The Archlinux AUR\nbuild server",
style: TextStyle(fontSize: 12),
)
],
),
const Text("AURCache")
],
)),
)
],
),
DrawerListTile(
title: "Dashboard",
svgSrc: "assets/icons/menu_dashbord.svg",
press: () {
context.go("/");
},
SizedBox(
height: 20,
),
DrawerListTile(
title: "Builds",
svgSrc: "assets/icons/menu_tran.svg",
press: () {
context.go("/builds");
},
DrawerSection(title: "General", children: [
DrawerListTile(
title: "Dashboard",
svgSrc: "assets/icons/menu_dashbord.svg",
active: active_uri == "/",
press: () {
context.go("/");
},
),
DrawerListTile(
title: "Builds",
svgSrc: "assets/icons/menu_tran.svg",
active: active_uri.startsWith("/builds"),
press: () {
context.go("/builds");
},
),
DrawerListTile(
title: "AUR",
svgSrc: "assets/icons/menu_task.svg",
active: active_uri.startsWith("/aur"),
press: () {
context.go("/aur");
},
)
]),
SizedBox(
height: 40,
),
DrawerListTile(
title: "AUR",
svgSrc: "assets/icons/menu_task.svg",
press: () {
context.go("/aur");
},
)
DrawerSection(title: "Settings", children: [
DrawerListTile(
title: "Settings",
svgSrc: "assets/icons/menu_dashbord.svg",
active: active_uri.startsWith("/settings"),
press: () {
context.go("/settings");
},
),
DrawerListTile(
title: "Help",
svgSrc: "assets/icons/menu_dashbord.svg",
active: active_uri.startsWith("/help"),
press: () {
context.go("/help");
},
),
]),
],
),
),
);
}
}

class DrawerSection extends StatelessWidget {
const DrawerSection({super.key, required this.title, required this.children});

final String title;
final List<Widget> children;

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
width: 20,
),
Text(
title,
style: TextStyle(fontSize: 12),
),
SizedBox(
width: 10,
),
Expanded(child: Divider()),
SizedBox(
width: 15,
),
],
),
SizedBox(
height: 10,
),
...children,
SizedBox(
height: 10,
)
],
);
}
}

class DrawerListTile extends StatelessWidget {
const DrawerListTile({
super.key,
required this.title,
required this.svgSrc,
required this.press,
this.active = false,
});

final String title, svgSrc;
final VoidCallback press;
final bool active;

@override
Widget build(BuildContext context) {
return ListTile(
onTap: press,
horizontalTitleGap: 0.0,
leading: SvgPicture.asset(
svgSrc,
color: Colors.white54,
height: 16,
),
title: Text(
title,
style: const TextStyle(color: Colors.white54),
return Material(
color: active ? Color(0xff0059FF) : Colors.transparent,
child: InkWell(
onTap: press,
child: Padding(
padding:
const EdgeInsets.only(left: 20, right: 15, bottom: 10, top: 10),
child: Row(
children: [
SvgPicture.asset(
svgSrc,
color: Colors.white,
height: 16,
),
SizedBox(
width: 20,
),
Text(
title,
style: TextStyle(
color: Colors.white,
fontWeight: active ? FontWeight.bold : FontWeight.normal),
),
],
),
),
),
);
}
Expand Down
6 changes: 3 additions & 3 deletions frontend/lib/constants/color_constants.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ const primaryColor = Color(0xFF2697FF);
//const secondaryColor = Color(0xFF2A2D3E);
//const bgColor = Color(0xFF212132);

const secondaryColor = Color(0xFF292929);
const bgColor = Color(0xFF212121);
const secondaryColor = Color(0xff1B1F26);
const bgColor = Color(0xff15171b);
const darkgreenColor = Color(0xff0a7005);
const greenColor = Color(0xFF6bab58);

Expand All @@ -18,5 +18,5 @@ class ColorConstants {

class Palette {
static const Color background = Color(0xFFEDEEF2);
static const Color wrapperBg = Color(0xFF212121);
static const Color wrapperBg = Color(0xff15171b);
}
28 changes: 18 additions & 10 deletions frontend/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import 'package:aurcache/components/routing/router.dart';
import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
Expand All @@ -7,7 +9,10 @@ import 'constants/color_constants.dart';

void main() {
GoRouter.optionURLReflectsImperativeAPIs = true;
runApp(const MyApp());
runApp(DevicePreview(
enabled: !kReleaseMode && !kIsWeb,
builder: (context) => const MyApp(), // Wrap your app
));
}

class MyApp extends StatelessWidget {
Expand All @@ -22,15 +27,18 @@ class MyApp extends StatelessWidget {
debugShowCheckedModeBanner: false,
title: 'AURCache',
theme: ThemeData.dark().copyWith(
appBarTheme:
const AppBarTheme(backgroundColor: bgColor, elevation: 0),
scaffoldBackgroundColor: bgColor,
primaryColor: greenColor,
dialogBackgroundColor: secondaryColor,
textTheme: GoogleFonts.openSansTextTheme(Theme.of(context).textTheme)
.apply(bodyColor: Colors.white),
canvasColor: secondaryColor,
),
appBarTheme:
const AppBarTheme(backgroundColor: bgColor, elevation: 0),
scaffoldBackgroundColor: bgColor,
primaryColor: greenColor,
dialogBackgroundColor: secondaryColor,
textTheme:
GoogleFonts.openSansTextTheme(Theme.of(context).textTheme)
.apply(bodyColor: Colors.white),
canvasColor: secondaryColor,
drawerTheme: ThemeData.dark()
.drawerTheme
.copyWith(backgroundColor: Color(0xff131418))),
),
);
}
Expand Down
Loading

0 comments on commit f9f0bc6

Please sign in to comment.