Updating design

This commit is contained in:
Hillel Coren 2020-05-04 15:11:12 +03:00
parent bbb4e46798
commit 1229bcfc09
4 changed files with 137 additions and 102 deletions

View File

@ -349,6 +349,7 @@ const String kExpenseStatusInvoiced = '3';
const String kDefaultCurrencyId = '1'; const String kDefaultCurrencyId = '1';
const String kDefaultDateFormat = '5'; const String kDefaultDateFormat = '5';
const String kDefaultAccentColor = '#0091EA'; const String kDefaultAccentColor = '#0091EA';
const String kDefaultSelectedColor = '#1E252F';
const String kReportGroupDay = 'day'; const String kReportGroupDay = 'day';
const String kReportGroupMonth = 'month'; const String kReportGroupMonth = 'month';

View File

@ -288,6 +288,10 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
accentColor: accentColor, accentColor: accentColor,
textSelectionHandleColor: accentColor, textSelectionHandleColor: accentColor,
fontFamily: fontFamily, fontFamily: fontFamily,
backgroundColor: Colors.black,
//canvasColor: const Color(0xFF1B1C1E),
canvasColor: Colors.black,
cardColor: const Color(0xFF1B1C1E),
) )
: ThemeData(fontFamily: fontFamily).copyWith( : ThemeData(fontFamily: fontFamily).copyWith(
pageTransitionsTheme: pageTransitionsTheme, pageTransitionsTheme: pageTransitionsTheme,

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart'; import 'package:invoiceninja_flutter/utils/platforms.dart';
import 'package:invoiceninja_flutter/utils/colors.dart';
class SelectedIndicator extends StatelessWidget { class SelectedIndicator extends StatelessWidget {
const SelectedIndicator({this.child, this.isSelected}); const SelectedIndicator({this.child, this.isSelected});
@ -10,7 +12,8 @@ class SelectedIndicator extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
color: null, color: isSelected ? convertHexStringToColor(kDefaultSelectedColor) : null,
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
Container( Container(

View File

@ -26,6 +26,7 @@ import 'package:invoiceninja_flutter/utils/icons.dart';
import 'package:invoiceninja_flutter/utils/localization.dart'; import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart'; import 'package:invoiceninja_flutter/utils/platforms.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'package:invoiceninja_flutter/utils/colors.dart';
// STARTER: import - do not remove comment // STARTER: import - do not remove comment
class MenuDrawer extends StatelessWidget { class MenuDrawer extends StatelessWidget {
@ -88,6 +89,7 @@ class MenuDrawer extends StatelessWidget {
width: double.infinity, width: double.infinity,
child: _companyLogo(viewModel.selectedCompany), child: _companyLogo(viewModel.selectedCompany),
), ),
color: Theme.of(context).cardColor,
itemBuilder: (BuildContext context) => [ itemBuilder: (BuildContext context) => [
...viewModel.state.companies ...viewModel.state.companies
.map((company) => PopupMenuItem<String>( .map((company) => PopupMenuItem<String>(
@ -207,107 +209,110 @@ class MenuDrawer extends StatelessWidget {
: Container( : Container(
padding: padding:
EdgeInsets.symmetric(horizontal: 14, vertical: 3), EdgeInsets.symmetric(horizontal: 14, vertical: 3),
color: enableDarkMode ? Colors.white10 : Colors.grey[200], color: enableDarkMode ? Colors.white10 : Theme.of(context).cardColor,
child: state.prefState.isMenuCollapsed child: state.prefState.isMenuCollapsed
? _collapsedCompanySelector ? _collapsedCompanySelector
: _expandedCompanySelector), : _expandedCompanySelector),
state.credentials.token.isEmpty state.credentials.token.isEmpty
? SizedBox() ? SizedBox()
: Expanded( : Expanded(
child: ListView( child: Container(
shrinkWrap: true, color: Theme.of(context).cardColor,
children: <Widget>[ child: ListView(
DrawerTile( shrinkWrap: true,
company: company, children: <Widget>[
icon: getEntityIcon(EntityType.dashboard), DrawerTile(
title: localization.dashboard, company: company,
onTap: () => store.dispatch( icon: getEntityIcon(EntityType.dashboard),
ViewDashboard(navigator: Navigator.of(context))), title: localization.dashboard,
onLongPress: () => store.dispatch(ViewDashboard( onTap: () => store.dispatch(
navigator: Navigator.of(context), filter: '')), ViewDashboard(navigator: Navigator.of(context))),
), onLongPress: () => store.dispatch(ViewDashboard(
DrawerTile( navigator: Navigator.of(context), filter: '')),
company: company, ),
entityType: EntityType.client, DrawerTile(
icon: getEntityIcon(EntityType.client), company: company,
title: localization.clients, entityType: EntityType.client,
), icon: getEntityIcon(EntityType.client),
DrawerTile( title: localization.clients,
company: company, ),
entityType: EntityType.product, DrawerTile(
icon: getEntityIcon(EntityType.product), company: company,
title: localization.products, entityType: EntityType.product,
), icon: getEntityIcon(EntityType.product),
DrawerTile( title: localization.products,
company: company, ),
entityType: EntityType.invoice, DrawerTile(
icon: getEntityIcon(EntityType.invoice), company: company,
title: localization.invoices, entityType: EntityType.invoice,
), icon: getEntityIcon(EntityType.invoice),
DrawerTile( title: localization.invoices,
company: company, ),
entityType: EntityType.payment, DrawerTile(
icon: getEntityIcon(EntityType.payment), company: company,
title: localization.payments, entityType: EntityType.payment,
), icon: getEntityIcon(EntityType.payment),
DrawerTile( title: localization.payments,
company: company, ),
entityType: EntityType.quote, DrawerTile(
icon: getEntityIcon(EntityType.quote), company: company,
title: localization.quotes, entityType: EntityType.quote,
), icon: getEntityIcon(EntityType.quote),
DrawerTile( title: localization.quotes,
company: company, ),
entityType: EntityType.credit, DrawerTile(
icon: getEntityIcon(EntityType.credit), company: company,
title: localization.credits, entityType: EntityType.credit,
), icon: getEntityIcon(EntityType.credit),
DrawerTile( title: localization.credits,
company: company, ),
entityType: EntityType.project, DrawerTile(
icon: getEntityIcon(EntityType.project), company: company,
title: localization.projects, entityType: EntityType.project,
), icon: getEntityIcon(EntityType.project),
DrawerTile( title: localization.projects,
company: company, ),
entityType: EntityType.task, DrawerTile(
icon: getEntityIcon(EntityType.task), company: company,
title: localization.tasks, entityType: EntityType.task,
), icon: getEntityIcon(EntityType.task),
DrawerTile( title: localization.tasks,
company: company, ),
entityType: EntityType.vendor, DrawerTile(
icon: getEntityIcon(EntityType.vendor), company: company,
title: localization.vendors, entityType: EntityType.vendor,
), icon: getEntityIcon(EntityType.vendor),
DrawerTile( title: localization.vendors,
company: company, ),
entityType: EntityType.expense, DrawerTile(
icon: getEntityIcon(EntityType.expense), company: company,
title: localization.expenses, entityType: EntityType.expense,
), icon: getEntityIcon(EntityType.expense),
// STARTER: menu - do not remove comment title: localization.expenses,
DrawerTile( ),
company: company, // STARTER: menu - do not remove comment
icon: getEntityIcon(EntityType.reports), DrawerTile(
title: localization.reports, company: company,
onTap: () { icon: getEntityIcon(EntityType.reports),
store.dispatch( title: localization.reports,
ViewReports(navigator: Navigator.of(context))); onTap: () {
}, store.dispatch(
), ViewReports(navigator: Navigator.of(context)));
DrawerTile( },
company: company, ),
icon: getEntityIcon(EntityType.settings), DrawerTile(
title: localization.settings, company: company,
onTap: () { icon: getEntityIcon(EntityType.settings),
store.dispatch(ViewSettings( title: localization.settings,
navigator: Navigator.of(context), onTap: () {
company: state.company)); store.dispatch(ViewSettings(
}, navigator: Navigator.of(context),
), company: state.company));
], },
)), ),
],
),
)),
Align( Align(
child: state.prefState.isMenuCollapsed child: state.prefState.isMenuCollapsed
? SidebarFooterCollapsed( ? SidebarFooterCollapsed(
@ -376,11 +381,17 @@ class _DrawerTileState extends State<DrawerTile> {
? kReports ? kReports
: widget.entityType.name; : widget.entityType.name;
final isSelected = uiState.currentRoute.startsWith('/$route');
final textColor = isSelected ? Colors.white : Colors.white.withOpacity(.6);
Widget trailingWidget; Widget trailingWidget;
if (!state.prefState.isMenuCollapsed) { if (!state.prefState.isMenuCollapsed) {
if (widget.title == localization.dashboard) { if (widget.title == localization.dashboard) {
trailingWidget = IconButton( trailingWidget = IconButton(
icon: Icon(Icons.search), icon: Icon(
Icons.search,
color: textColor,
),
onPressed: () { onPressed: () {
if (isMobile(context)) { if (isMobile(context)) {
navigator.pop(); navigator.pop();
@ -391,7 +402,10 @@ class _DrawerTileState extends State<DrawerTile> {
); );
} else if (userCompany.canCreate(widget.entityType)) { } else if (userCompany.canCreate(widget.entityType)) {
trailingWidget = IconButton( trailingWidget = IconButton(
icon: Icon(Icons.add_circle_outline), icon: Icon(
Icons.add_circle_outline,
color: textColor,
),
onPressed: () { onPressed: () {
if (isMobile(context)) { if (isMobile(context)) {
navigator.pop(); navigator.pop();
@ -402,12 +416,25 @@ class _DrawerTileState extends State<DrawerTile> {
} }
} }
Widget child = SelectedIndicator( Widget child = Container(
isSelected: uiState.currentRoute.startsWith('/$route'), color: isSelected ? convertHexStringToColor(kDefaultSelectedColor) : null,
child: ListTile( child: ListTile(
dense: true, dense: true,
leading: Icon(widget.icon, size: 22), leading: Icon(
title: state.prefState.isMenuCollapsed ? null : Text(widget.title), widget.icon,
size: 20,
color: isSelected ? Colors.white : Colors.white.withOpacity(.8),
),
title: state.prefState.isMenuCollapsed
? null
: Text(
widget.title,
style: Theme.of(context).textTheme.bodyText1.copyWith(
fontWeight: FontWeight.w100,
fontSize: 16,
color: textColor,
),
),
onTap: () => widget.entityType != null onTap: () => widget.entityType != null
? viewEntitiesByType( ? viewEntitiesByType(
context: context, entityType: widget.entityType) context: context, entityType: widget.entityType)