Merge pull request #1 from spaduret/my-own-css

Improve UI look

angular.json

@@ -23,6 +23,7 @@
             "assets": [
               "src/favicon.ico",
               "src/background.png",
+              "src/bitbucket512_rounded.png",
               "src/IcoMoon.ttf",
               "src/manifest.json"
             ],

src/app/components/home/home.component.scss

@@ -17,11 +17,14 @@
   height: 25px;
   background-color: $background-color;
   padding-left: 3px;
-  color: #CDD9E5B2;
+  color: $role-title-color;
 }
 
-.list {
-}
+//.list {
+//  & > div:nth-child(even):not(hover) {
+//    background-color: #1c202559;
+//  }
+//}
 
 .summary {
   display: flex;

src/app/components/pull-request-view/pull-request.component.html

@@ -1,12 +1,11 @@
-<div class="container" *ngIf="pullRequest" data-id="{{pullRequest.id}}">
+<div class="container" *ngIf="pullRequest" data-id="{{pullRequest.id}}" (click)="navigateTo(selfUrl)">
   <div class="content">
     <div class="data">
       <span class="self-url">
-        <app-user *ngIf="showAuthorAvatar" [user]="pullRequest.author.user" [size]="14"></app-user>
-        <a href="{{selfUrl}}" target="_blank">{{pullRequest.title}}</a>
+        <app-user class="user" *ngIf="showAuthorAvatar" [user]="pullRequest.author.user" [size]="14"></app-user>
+        <span class="title" [ngClass]="{'conflicts': hasConflicts, 'can-be-merged': canBeMerged}">{{pullRequest.title}}</span>
       </span>
       <div class="status-bar">
-
         <span class="pr-status"
               [class.pr-can-be-merged]="canBeMerged"
               [attr.title]="hasConflicts ? 'code conflicts' : ''"

src/app/components/pull-request-view/pull-request.component.scss

@@ -1,53 +1,77 @@
 @import "src/variables";
 
 .container {
-  padding: $pr-control-distance 0;
+  padding: $pr-control-distance 3px;
   border-top: 1px solid $border-color;
+  cursor: pointer;
 
   &:hover {
-    background-color: $background-color;
+    background-color: $background-color-hover;
   }
-}
 
-.content {
-  display: flex;
-  //align-items: flex-start; /* vertical alignment */
-  flex-flow: row nowrap;
-  justify-content: flex-start; /* horizontal alignment */
-  margin: 0 $pr-control-distance;
-}
+  .content {
+    display: flex;
+    //align-items: flex-start; /* vertical alignment */
+    flex-flow: row nowrap;
+    justify-content: space-between; /* horizontal alignment */
+    margin: 0 $pr-control-distance;
 
-.data {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: left;
-  margin-right: $pr-control-distance;
-  max-width: 400px;
-}
+    .data {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: left;
+      margin-right: $pr-control-distance;
+      overflow: hidden;
 
-.self-url {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  margin-bottom: $pr-control-distance;
-  overflow-x: hidden;
-}
+      .self-url {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        margin-bottom: $pr-control-distance;
+        overflow-x: hidden;
 
-.status-bar {
-  display: flex;
-  flex-flow: row nowrap;
+        .user {
+          margin-right: 5px;
+        }
 
-  & > * {
-    padding: 2px 3px;
-  }
-}
+        .title {
+          color: #adbac7;
+          font-weight: bold;
+          text-decoration: none;
+          font-size: 1.2em;
+          display: inline-block;
+          padding: 3px 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
 
-.reviewers {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center; /* vertical alignment */
-}
+          &.conflicts {
+            color: rgb(255, 139, 0);
+          }
+
+          &.can-be-merged {
+            color: rgb(0, 135, 90);
+          }
+        }
+      }
+
+      .status-bar {
+        display: flex;
+        flex-flow: row nowrap;
 
+        & > * {
+          padding: 2px 3px;
+        }
+      }
+    }
+
+    .reviewers {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center; /* vertical alignment */
+      max-width: max-content;
+    }
+  }
+}
 
 .pr-status {
   background-color: #0052CC;
@@ -77,6 +101,6 @@
   border: 1px solid $border-color;
   border-radius: $pr-control-border-radius;
   color: orange;
-  background-color: $background-color;
+  background-color: $background-color-hover;
   margin-right: $pr-control-distance;
 }

src/app/components/pull-request-view/pull-request.component.ts

@@ -29,4 +29,8 @@ export class PullRequestComponent implements OnInit {
 
     this.commentsCount = this.pullRequest.properties.commentCount || 0;
   }
+
+  navigateTo(url: string) {
+    window.open(url);
+  }
 }

src/manifest.json

@@ -4,7 +4,7 @@
   "version": "1.0",
   "description": "Bitbucket Notifications",
   "browser_action": {
-    "default_icon": "assets/bitbucket512_rounded.png",
+    "default_icon": "/bitbucket512_rounded.png",
     "default_popup": "/index.html"
   },
   "options_ui": {

src/styles.scss

@@ -9,6 +9,7 @@ body {
   padding: 0;
   color: rgb(173, 186, 199);
   font-family: sans-serif;
+  max-width: 600px;
 }
 
 a {

src/variables.scss

@@ -1,4 +1,6 @@
 $border-color: #444c56;
-$background-color: #2D333B;
+$background-color: #353e48;
+$background-color-hover: #2D333B;
+$role-title-color: #ffffffe0;
 $pr-control-distance: 5px;
 $pr-control-border-radius: 3px;