[Gallery] Update desktop Rally for pages that did not have designs before (#314)

* Update desktop Rally for pages that did not have designs before

Author: perclasson

gallery/fonts/google_fonts/Eczar-Regular.ttf

@@ -171,6 +171,18 @@
   "@rallyAccountDetailDataAccountOwner": {
     "description": "Title for an account detail. Below the name of the account owner will be displayed."
   },
+  "rallyBillDetailTotalAmount": "Total Amount",
+  "@rallyBillDetailTotalAmount": {
+    "description": "Title for column where it displays the total dollar amount that the user has in bills."
+  },
+  "rallyBillDetailAmountPaid": "Amount Paid",
+  "@rallyBillDetailAmountPaid": {
+    "description": "Title for column where it displays the amount that the user has paid."
+  },
+  "rallyBillDetailAmountDue": "Amount Due",
+  "@rallyBillDetailAmountDue": {
+    "description": "Title for column where it displays the amount that the user has due."
+  },
   "rallyBudgetCategoryCoffeeShops": "Coffee Shops",
   "@rallyBudgetCategoryCoffeeShops": {
     "description": "Category for budget, to sort expenses / bills in."
@@ -187,6 +199,18 @@
   "@rallyBudgetCategoryClothing": {
     "description": "Category for budget, to sort expenses / bills in."
   },
+  "rallyBudgetDetailTotalCap": "Total Cap",
+  "@rallyBudgetDetailTotalCap": {
+    "description": "Title for column where it displays the total dollar cap that the user has for its budget."
+  },
+  "rallyBudgetDetailAmountUsed": "Amount Used",
+  "@rallyBudgetDetailAmountUsed": {
+    "description": "Title for column where it displays the dollar amount that the user has used in its budget."
+  },
+  "rallyBudgetDetailAmountLeft": "Amount Left",
+  "@rallyBudgetDetailAmountLeft": {
+    "description": "Title for column where it displays the dollar amount that the user has left in its budget."
+  },
   "rallySettingsManageAccounts": "Manage Accounts",
   "@rallySettingsManageAccounts": {
     "description": "Link to go to the page 'Manage Accounts."

gallery/fonts/google_fonts/Eczar-SemiBold.ttf

@@ -161,6 +161,18 @@
     name="rallyAccountDetailDataAccountOwner"
     description="Title for an account detail. Below the name of the account owner will be displayed."
     >Account Owner</string>
+  <string
+    name="rallyBillDetailTotalAmount"
+    description="Title for column where it displays the total dollar amount that the user has in bills."
+    >Total Amount</string>
+  <string
+    name="rallyBillDetailAmountPaid"
+    description="Title for column where it displays the amount that the user has paid."
+    >Amount Paid</string>
+  <string
+    name="rallyBillDetailAmountDue"
+    description="Title for column where it displays the amount that the user has due."
+    >Amount Due</string>
   <string
     name="rallyBudgetCategoryCoffeeShops"
     description="Category for budget, to sort expenses / bills in."
@@ -177,6 +189,18 @@
     name="rallyBudgetCategoryClothing"
     description="Category for budget, to sort expenses / bills in."
     >Clothing</string>
+  <string
+    name="rallyBudgetDetailTotalCap"
+    description="Title for column where it displays the total dollar cap that the user has for its budget."
+    >Total Cap</string>
+  <string
+    name="rallyBudgetDetailAmountUsed"
+    description="Title for column where it displays the dollar amount that the user has used in its budget."
+    >Amount Used</string>
+  <string
+    name="rallyBudgetDetailAmountLeft"
+    description="Title for column where it displays the dollar amount that the user has left in its budget."
+    >Amount Left</string>
   <string
     name="rallySettingsManageAccounts"
     description="Link to go to the page &apos;Manage Accounts."

gallery/lib/l10n/gallery_localizations.dart

@@ -995,6 +995,12 @@ class MessageLookup extends MessageLookupByLibrary {
         "rallyAlertsMessageSpentOnRestaurants": m24,
         "rallyAlertsMessageUnassignedTransactions": m25,
         "rallyBillAmount": m26,
+        "rallyBillDetailAmountDue":
+            MessageLookupByLibrary.simpleMessage("Amount Due"),
+        "rallyBillDetailAmountPaid":
+            MessageLookupByLibrary.simpleMessage("Amount Paid"),
+        "rallyBillDetailTotalAmount":
+            MessageLookupByLibrary.simpleMessage("Total Amount"),
         "rallyBills": MessageLookupByLibrary.simpleMessage("Bills"),
         "rallyBillsDue": MessageLookupByLibrary.simpleMessage("Due"),
         "rallyBudgetAmount": m27,
@@ -1006,6 +1012,12 @@ class MessageLookup extends MessageLookupByLibrary {
             MessageLookupByLibrary.simpleMessage("Groceries"),
         "rallyBudgetCategoryRestaurants":
             MessageLookupByLibrary.simpleMessage("Restaurants"),
+        "rallyBudgetDetailAmountLeft":
+            MessageLookupByLibrary.simpleMessage("Amount Left"),
+        "rallyBudgetDetailAmountUsed":
+            MessageLookupByLibrary.simpleMessage("Amount Used"),
+        "rallyBudgetDetailTotalCap":
+            MessageLookupByLibrary.simpleMessage("Total Cap"),
         "rallyBudgetLeft": MessageLookupByLibrary.simpleMessage("Left"),
         "rallyBudgets": MessageLookupByLibrary.simpleMessage("Budgets"),
         "rallyDescription":

gallery/lib/l10n/intl_en_US.arb

@@ -8,6 +8,7 @@ import 'package:flutter/semantics.dart';
 
 import 'package:gallery/data/gallery_options.dart';
 import 'package:gallery/layout/text_scale.dart';
+import 'package:gallery/layout/adaptive.dart';
 import 'package:gallery/studies/rally/colors.dart';
 import 'package:gallery/studies/rally/data.dart';
 import 'package:gallery/studies/rally/formatters.dart';
@@ -28,6 +29,9 @@ class RallyLineChart extends StatelessWidget {
         labelStyle: Theme.of(context).textTheme.body1,
         textDirection: GalleryOptions.of(context).textDirection(),
         textScaleFactor: reducedTextScale(context),
+        padding: isDisplayDesktop(context)
+            ? EdgeInsets.symmetric(vertical: 22)
+            : EdgeInsets.zero,
       ),
     );
   }
@@ -41,6 +45,7 @@ class RallyLineChartPainter extends CustomPainter {
     @required this.labelStyle,
     @required this.textDirection,
     @required this.textScaleFactor,
+    @required this.padding,
   });
 
   // The style for the labels.
@@ -52,6 +57,9 @@ class RallyLineChartPainter extends CustomPainter {
   // The text scale factor for the text.
   final double textScaleFactor;
 
+  // The padding around the text.
+  final EdgeInsets padding;
+
   // The format for the dates.
   final intl.DateFormat dateFormat;
 
@@ -253,7 +261,8 @@ class RallyLineChartPainter extends CustomPainter {
       textDirection: textDirection,
     );
     leftLabel.layout();
-    leftLabel.paint(canvas, Offset(rect.left + space / 2, rect.topCenter.dy));
+    leftLabel.paint(canvas,
+        Offset(rect.left + space / 2 + padding.vertical, rect.topCenter.dy));
 
     final centerLabel = TextPainter(
       text: TextSpan(
@@ -281,7 +290,8 @@ class RallyLineChartPainter extends CustomPainter {
     rightLabel.layout();
     rightLabel.paint(
       canvas,
-      Offset(rect.right - centerLabel.width - space / 2, rect.topCenter.dy),
+      Offset(rect.right - centerLabel.width - space / 2 - padding.vertical,
+          rect.topCenter.dy),
     );
   }
 }

gallery/lib/l10n/intl_en_US.xml

@@ -38,6 +38,7 @@ class RallyColors {
   static const Color cardBackground = Color(0x03FEFEFE);
   static const Color buttonColor = Color(0xFF09AF79);
   static const Color focusColor = Color(0xCCFFFFFF);
+  static const Color dividerColor = Color(0xAA282828);
 
   /// Convenience method to get a single account color with position i.
   static Color accountColor(int i) {

gallery/lib/l10n/messages_en_US.dart

@@ -15,6 +15,12 @@ double sumAccountDataPrimaryAmount(List<AccountData> items) =>
 double sumBillDataPrimaryAmount(List<BillData> items) =>
     sumOf<BillData>(items, (item) => item.primaryAmount);
 
+/// Calculates the sum of the primary amounts of a list of [BillData].
+double sumBillDataPaidAmount(List<BillData> items) => sumOf<BillData>(
+      items.where((item) => item.isPaid).toList(),
+      (item) => item.primaryAmount,
+    );
+
 /// Calculates the sum of the primary amounts of a list of [BudgetData].
 double sumBudgetDataPrimaryAmount(List<BudgetData> items) =>
     sumOf<BudgetData>(items, (item) => item.primaryAmount);
@@ -52,7 +58,12 @@ class AccountData {
 ///
 /// The [primaryAmount] is the amount due in USD.
 class BillData {
-  const BillData({this.name, this.primaryAmount, this.dueDate});
+  const BillData({
+    this.name,
+    this.primaryAmount,
+    this.dueDate,
+    this.isPaid = false,
+  });
 
   /// The display name of this entity.
   final String name;
@@ -62,6 +73,9 @@ class BillData {
 
   /// The due date of this bill.
   final String dueDate;
+
+  /// If this bill has been paid.
+  final bool isPaid;
 }
 
 /// A data model for a budget.
@@ -103,9 +117,9 @@ class DetailedEventData {
   final double amount;
 }
 
-/// A data model for account data.
-class AccountDetailData {
-  AccountDetailData({this.title, this.value});
+/// A data model for data displayed to the user.
+class UserDetailData {
+  UserDetailData({this.title, this.value});
 
   /// The display name of this entity.
   final String title;
@@ -143,34 +157,34 @@ class DummyDataService {
     ];
   }
 
-  static List<AccountDetailData> getAccountDetailList(BuildContext context) {
-    return <AccountDetailData>[
-      AccountDetailData(
+  static List<UserDetailData> getAccountDetailList(BuildContext context) {
+    return <UserDetailData>[
+      UserDetailData(
         title: GalleryLocalizations.of(context)
             .rallyAccountDetailDataAnnualPercentageYield,
         value: percentFormat(context).format(0.001),
       ),
-      AccountDetailData(
+      UserDetailData(
         title:
             GalleryLocalizations.of(context).rallyAccountDetailDataInterestRate,
         value: usdWithSignFormat(context).format(1676.14),
       ),
-      AccountDetailData(
+      UserDetailData(
         title:
             GalleryLocalizations.of(context).rallyAccountDetailDataInterestYtd,
         value: usdWithSignFormat(context).format(81.45),
       ),
-      AccountDetailData(
+      UserDetailData(
         title: GalleryLocalizations.of(context)
             .rallyAccountDetailDataInterestPaidLastYear,
         value: usdWithSignFormat(context).format(987.12),
       ),
-      AccountDetailData(
+      UserDetailData(
         title: GalleryLocalizations.of(context)
             .rallyAccountDetailDataNextStatement,
         value: shortDateFormat(context).format(DateTime.utc(2019, 12, 25)),
       ),
-      AccountDetailData(
+      UserDetailData(
         title:
             GalleryLocalizations.of(context).rallyAccountDetailDataAccountOwner,
         value: 'Philip Cao',
@@ -233,6 +247,7 @@ class DummyDataService {
         primaryAmount: 1200,
         dueDate: dateFormatAbbreviatedMonthDay(context)
             .format(DateTime.utc(2019, 2, 9)),
+        isPaid: true,
       ),
       BillData(
         name: 'TabFine Credit',
@@ -249,6 +264,24 @@ class DummyDataService {
     ];
   }
 
+  static List<UserDetailData> getBillDetailList(BuildContext context,
+      {double dueTotal, double paidTotal}) {
+    return <UserDetailData>[
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBillDetailTotalAmount,
+        value: usdWithSignFormat(context).format(paidTotal + dueTotal),
+      ),
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBillDetailAmountPaid,
+        value: usdWithSignFormat(context).format(paidTotal),
+      ),
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBillDetailAmountDue,
+        value: usdWithSignFormat(context).format(dueTotal),
+      ),
+    ];
+  }
+
   static List<BudgetData> getBudgetDataList(BuildContext context) {
     return <BudgetData>[
       BudgetData(
@@ -274,6 +307,24 @@ class DummyDataService {
     ];
   }
 
+  static List<UserDetailData> getBudgetDetailList(BuildContext context,
+      {double capTotal, double usedTotal}) {
+    return <UserDetailData>[
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBudgetDetailTotalCap,
+        value: usdWithSignFormat(context).format(capTotal),
+      ),
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBudgetDetailAmountUsed,
+        value: usdWithSignFormat(context).format(usedTotal),
+      ),
+      UserDetailData(
+        title: GalleryLocalizations.of(context).rallyBudgetDetailAmountLeft,
+        value: usdWithSignFormat(context).format(capTotal - usedTotal),
+      ),
+    ];
+  }
+
   static List<String> getSettingsTitles(BuildContext context) {
     return <String>[
       GalleryLocalizations.of(context).rallySettingsManageAccounts,