feat: repo language ratio bar

Author: pd4d10

lib/screens/repo.dart

@@ -2,6 +2,9 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:git_touch/models/settings.dart';
+import 'package:git_touch/utils/utils.dart';
+import 'package:git_touch/widgets/table_view.dart';
+import 'package:primer/primer.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:git_touch/models/theme.dart';
@@ -21,6 +24,8 @@ class RepoScreen extends StatelessWidget {
   final String owner;
   final String name;
 
+  static const _languageBarPadding = 10.0;
+
   RepoScreen(this.owner, this.name);
   RepoScreen.fromFullName(String fullName)
       : owner = fullName.split('/')[0],
@@ -50,13 +55,23 @@ class RepoScreen extends StatelessWidget {
     primaryLanguage {
       color
       name
-    }    
+    }
     issues(states: OPEN) {
       totalCount
     }
     pullRequests(states: OPEN) {
       totalCount
     }
+    languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
+      totalSize
+      edges {
+        size
+        node {
+          name
+          color
+        }
+      }
+    }
     url
     defaultBranchRef {
       name
@@ -158,44 +173,73 @@ class RepoScreen extends StatelessWidget {
         var payload = data[0];
         var readme = data[1];
 
+        final langWidth =
+            MediaQuery.of(context).size.width - _languageBarPadding * 2;
+
         return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             RepoItem(payload, isLink: false),
-            Container(
-              decoration: BoxDecoration(
-                border: Border(
-                  bottom: BorderSide(color: Colors.black12),
-                  top: BorderSide(color: Colors.black12),
+            BorderView(),
+            Row(
+              children: <Widget>[
+                EntryItem(
+                  count: payload['issues']['totalCount'],
+                  text: 'Issues',
+                  screenBuilder: (context) =>
+                      IssuesScreen(owner: owner, name: name),
+                ),
+                EntryItem(
+                  count: payload['pullRequests']['totalCount'],
+                  text: 'Pull Requests',
+                  screenBuilder: (context) => IssuesScreen(
+                      owner: owner, name: name, isPullRequest: true),
+                ),
+                EntryItem(
+                  count: payload['defaultBranchRef']['target']['history']
+                      ['totalCount'],
+                  text: 'Commits',
+                  screenBuilder: (context) => CommitsScreen(owner, name),
+                ),
+              ],
+            ),
+            BorderView(height: 10),
+            Padding(
+              padding: const EdgeInsets.all(_languageBarPadding),
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(4),
+                child: Container(
+                  height: 10,
+                  child: Row(
+                      children: (payload['languages']['edges'] as List)
+                          .map((lang) => Container(
+                              color: convertColor(lang['node']['color']),
+                              width: langWidth *
+                                  lang['size'] /
+                                  payload['languages']['totalSize']))
+                          .toList()),
                 ),
-              ),
-              child: Row(
-                children: <Widget>[
-                  EntryItem(
-                    count: payload['issues']['totalCount'],
-                    text: 'Issues',
-                    screenBuilder: (context) =>
-                        IssuesScreen(owner: owner, name: name),
-                  ),
-                  EntryItem(
-                    count: payload['pullRequests']['totalCount'],
-                    text: 'Pull Requests',
-                    screenBuilder: (context) => IssuesScreen(
-                        owner: owner, name: name, isPullRequest: true),
-                  ),
-                  EntryItem(
-                    text: 'Files',
-                    screenBuilder: (context) =>
-                        ObjectScreen(owner: owner, name: name),
-                  ),
-                  EntryItem(
-                    count: payload['defaultBranchRef']['target']['history']
-                        ['totalCount'],
-                    text: 'Commits',
-                    screenBuilder: (context) => CommitsScreen(owner, name),
-                  ),
-                ],
               ),
             ),
+            TableView(items: [
+              TableViewItem(
+                leftWidget: Icon(Octicons.code,
+                    size: 20,
+                    color: convertColor(payload['primaryLanguage'] == null
+                        ? null
+                        : payload['primaryLanguage']['color'])),
+                text: Text(payload['primaryLanguage'] == null
+                    ? 'Unknown'
+                    : payload['primaryLanguage']['name']),
+                rightWidget: Icon(
+                  CupertinoIcons.right_chevron,
+                  size: 18,
+                  color: PrimerColors.gray300,
+                ),
+                screenBuilder: (_) => ObjectScreen(owner: owner, name: name),
+              )
+            ]),
+            BorderView(height: 10),
             Container(
               padding: EdgeInsets.all(16),
               child: MarkdownBody(data: readme),

lib/screens/user.dart

@@ -108,10 +108,8 @@ class _UserScreenState extends State<UserScreen> {
     var leftWidget = Icon(iconData, size: 20, color: PrimerColors.blue500);
     var usePlaceholder = text == null || text.isEmpty;
     var itemText = usePlaceholder
-        ? Text(placeholder,
-            style: TextStyle(color: PrimerColors.gray300, fontSize: 16))
-        : Text(text,
-            style: TextStyle(color: PrimerColors.gray900, fontSize: 16));
+        ? Text(placeholder, style: TextStyle(color: PrimerColors.gray300))
+        : Text(text);
 
     return TableViewItem(
       leftWidget: leftWidget,

lib/widgets/table_view.dart

@@ -53,7 +53,7 @@ class TableView extends StatelessWidget {
         Expanded(
           child: DefaultTextStyle(
             child: item.text,
-            style: TextStyle(fontSize: 18, color: PrimerColors.gray900),
+            style: TextStyle(fontSize: 16, color: PrimerColors.gray900),
           ),
         ),
         ...(item.rightWidget == null ? [] : [item.rightWidget]),