Display the number of open PRs for each team

Closes #5

src/paths/index/components/prs/PullRequestItem.js

@@ -10,10 +10,7 @@ export default class PullRequestItem extends LitElement {
             --draft-font-color: #ffcc31;
             --draft-background-color: #9db3c0;
             --stats-background-color: #f9fafa;
-            --meta-font-color: #535c5f;
             
-            --review-team-color: #6b7893;
-
             --stat-temp0-color: #000000;
             --stat-temp1-color: #383824;
             --stat-temp2-color: #645b2c;
@@ -31,10 +28,7 @@ export default class PullRequestItem extends LitElement {
               --draft-font-color: #e0c537;
               --draft-background-color: #1e313c;
               --stats-background-color: #0f1316;
-              --meta-font-color: #929da0;
 
-              --review-team-color: #8491ab;
-              
               --stat-temp0-color: #ffffff;
               --stat-temp1-color: #f0ed7e;
               --stat-temp2-color: #f5d94a;
@@ -83,7 +77,7 @@ export default class PullRequestItem extends LitElement {
           }
           
           :host .pr-meta {
-            color: var(--meta-font-color);
+            color: var(--dimmed-font-color);
             display: flex;
             flex-direction: row;
             justify-content: space-between;
@@ -179,7 +173,7 @@ export default class PullRequestItem extends LitElement {
           }
           
           :host .pr-review-team {
-            color: var(--review-team-color);
+            color: var(--light-font-color);
             white-space: nowrap;
           }
           :host .pr-review-team + .pr-review-team:before {

src/paths/index/components/teams/TeamItem.js

@@ -25,6 +25,7 @@ export default class TeamItem extends LitElement {
           
           :host .team-item {
             border-left: 5px solid transparent;
+            color: var(--g-font-color);
             cursor: pointer;
             display: flex;
             flex-direction: row;
@@ -47,11 +48,22 @@ export default class TeamItem extends LitElement {
           }
           
           :host .team-title {
-            color: var(--g-font-color);
             font-size: 13px;
             padding-left: 12px;
             white-space: nowrap;
           }
+          
+          :host .team-pull-count {
+            color: var(--dimmed-font-color);
+            flex-grow: 1;
+            font-size: 13px;
+            padding-left: 6px;
+            text-align: right;
+          }
+          :host .team-pull-count--hot {
+            color: var(--g-font-color);
+            font-weight: 700;
+          }
         `;
     }
 
@@ -59,6 +71,7 @@ export default class TeamItem extends LitElement {
     @property({ type: String, reflect: true }) name = '';
     @property({ type: String, reflect: true }) avatar = '';
     @property({ type: Boolean, reflect: true }) active = false;
+    @property({ type: Number }) pull_count = 0;
 
     render(){
         const classList = [ "team-item" ];
@@ -66,17 +79,23 @@ export default class TeamItem extends LitElement {
             classList.push("team-item--active");
         }
 
+        const countClassList = [ "team-pull-count" ];
+        if (this.pull_count > 50) {
+            countClassList.push("team-pull-count--hot");
+        }
+
         return html`
             <div class="${classList.join(" ")}">
                 <div 
                     class="team-icon"
                     style="background-image: url('${this.avatar}')"
                 ></div>
-                <span
+                <span class="team-title">
-                    class="team-title"
-                >
                     ${this.name}
                 </span>
+                <span class="${countClassList.join(" ")}">
+                    ${this.pull_count}
+                </span>
             </div>
         `;
     }

src/paths/index/components/teams/TeamList.js

@@ -53,11 +53,12 @@ export default class TeamList extends LitElement {
                     this.teams.map((item) => {
                         return html`
                             <gr-team-item
-                                    .id="${item.id}"
+                                .id="${item.id}"
-                                    .name="${item.name}"
+                                .name="${item.name}"
-                                    .avatar="${item.avatar}"
+                                .avatar="${item.avatar}"
-                                    ?active="${this.selected_team === item.id}"
+                                .pull_count="${item.pull_count}"
-                                    @click="${this.onTabClicked.bind(this, item.id)}"
+                                ?active="${this.selected_team === item.id}"
+                                @click="${this.onTabClicked.bind(this, item.id)}"
                             />
                         `;
                     }) : html`

src/shared/styles/global.css

@@ -9,6 +9,9 @@
   --link-font-color: #1d6dff;
   --link-font-color-hover: #1051c9;
   --link-font-color-inactive: #35496f;
+
+  --dimmed-font-color: #535c5f;
+  --light-font-color: #6b7893;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,6 +22,9 @@
     --link-font-color: #367df7;
     --link-font-color-hover: #6391ec;
     --link-font-color-inactive: #abbdcc;
+
+    --dimmed-font-color: #929da0;
+    --light-font-color: #8491ab;
   }
 }