feat(mobile): mobile login, switch to desktop view

e2e/130_team.e2e.ts

@@ -101,8 +101,8 @@ describe('Teams', () => {
       .then(() => browser.wait(() => element.all(by.css('.list-item')).count().then(cnt => {
         return cnt > 0;
       })))
-      .then((): any => element.all(by.css('.restart-build')).first().isDisplayed())
-      .then(displayed => expect(displayed).to.equals(false));
+      .then((): any => element.all(by.css('.restart-build')).count())
+      .then(cnt => expect(cnt).to.equals(0));
   });
 
   it(`as annonymous can click on build but can't restart it`, () => {

src/app/components/app-build-details/app-build-details.component.html

@@ -80,7 +80,7 @@ <h1 class="bold">
                         <img *ngIf="authorAvatar && committerAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
                       </span>
 
-                      <span *ngIf="nameAuthor || nameCommitter === nameAuthor">
+                      <span *ngIf="nameAuthor && nameCommitter === nameAuthor">
                         {{ nameAuthor }} authored and commited
                       </span>
                       <span *ngIf="nameCommitter !== nameAuthor">

src/app/components/app-build-item/app-build-item.component.html

@@ -85,11 +85,13 @@
     <span class="build-time" *ngIf="build?.status === 'running' && build?.maxCompletedJobTime && build?.minRunningJobStartTime && build?.maxCompletedJobTime <= (currentTime - build?.minRunningJobStartTime)">{{ currentTime - build?.minRunningJobStartTime | toTime }} </span>
     <span class="build-time" *ngIf="build?.status !== 'running' && build?.maxCompletedJobTime">{{ build?.maxCompletedJobTime | toTime }}</span>
 
-    <span class="icon circle restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="processingRequest">
-      <i class="ionicon ion-refresh"></i>
-    </span>
-    <span class="icon circle stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="processingRequest" [class.is-hidden]="build.status === 'success' || build.status === 'failed'">
-      <i class="ionicon ion-stop"></i>
-    </span>
+    <div *ngIf="build?.userId && build?.hasPermission">
+      <span class="icon circle restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="processingRequest">
+        <i class="ionicon ion-refresh"></i>
+      </span>
+      <span class="icon circle stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="processingRequest" [class.is-hidden]="build.status === 'success' || build.status === 'failed'">
+        <i class="ionicon ion-stop"></i>
+      </span>
+    </div>
   </div>
 </div>

src/app/components/app-header/app-header.component.html

@@ -63,9 +63,20 @@
   </div>
 </header>
 
+<div class="mobile-switch-view is-hidden-tablet is-mobile is-mobile-only">
+  <button type="button" (click)="switchToDesktopView()" *ngIf="view === 'mobile'">
+    Switch to Desktop View
+    <i class="ionicon ion-monitor"></i>
+  </button>
+  <button type="button" (click)="switchToMobileView()" *ngIf="view === 'desktop'">Switch to Mobile View</button>
+</div>
+
 <div class="mobile-nav is-hidden-tablet is-mobile is-mobile-only">
   <a routerLink="/">
     <img class="mobile-nav-logo" src="images/abstruse-text-logo.svg">
   </a>
-  <i class="ionicon ion-ios-more"></i>
+  <a routerLink="/login" *ngIf="!user">
+    <i class="ionicon ion-log-in"></i>
+  </a>
+  <i class="ionicon ion-log-out" (click)="logout()" *ngIf="user"></i>
 </div>

src/app/components/app-header/app-header.component.ts

@@ -1,4 +1,5 @@
-import { Component, HostListener, ElementRef, OnInit } from '@angular/core';
+import { Component, HostListener, ElementRef, OnInit, Inject, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 import { ConfigService } from '../../services/config.service';
@@ -16,14 +17,18 @@ export class AppHeaderComponent implements OnInit {
   user: any;
   notifications: NotificationType[];
   version: string;
+  viewport: any;
+  view: 'mobile' | 'desktop';
 
   constructor(
     private authService: AuthService,
     private router: Router,
     private elementRef: ElementRef,
     private config: ConfigService,
     private notificationService: NotificationService,
-    private socketService: SocketService
+    private socketService: SocketService,
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: any
   ) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -59,6 +64,9 @@ export class AppHeaderComponent implements OnInit {
 
       this.notificationService.sub();
     }
+
+    this.viewport = this.document.querySelector('head > [name="viewport"]');
+    this.view = 'mobile';
   }
 
   toggleMenu() {
@@ -75,6 +83,16 @@ export class AppHeaderComponent implements OnInit {
     this.router.navigate(['/login']);
   }
 
+  switchToDesktopView(): void {
+    this.renderer.setAttribute(this.viewport, 'content', 'width=1024');
+    this.view = 'desktop';
+  }
+
+  switchToMobileView(): void {
+    this.renderer.setAttribute(this.viewport, 'content', 'width=device-width, initial-scale=1');
+    this.view = 'mobile';
+  }
+
   @HostListener('document:click', ['$event'])
   onBlur(e: MouseEvent) {
     if (!this.menuDropped || !this.notifyDropped) {

src/app/components/app-job/app-job.component.html

@@ -80,7 +80,7 @@ <h2 *ngIf="commitMessage">{{ commitMessage }}</h2>
                         <img *ngIf="authorAvatar && committerAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
                       </span>
 
-                      <span *ngIf="nameAuthor || nameCommitter === nameAuthor">
+                      <span *ngIf="nameAuthor && nameCommitter === nameAuthor">
                         {{ nameAuthor }} authored and commited
                       </span>
                       <span *ngIf="nameCommitter !== nameAuthor">

src/app/styles/mobile.sass

@@ -2,24 +2,25 @@
   height: 50px
   width: 100%
   background: $white
+  border-top: 1px solid $border
   border-bottom: 1px solid $border
-  display: block
+  display: flex
   position: relative
+  align-items: center
+  justify-content: center
   z-index: 99
-  box-shadow: 1px 2px 30px 0 rgba(#4259E7, 0.2)
 
   .mobile-nav-logo
     width: 120px
     height: auto
     margin: 0 auto
-    padding-top: 12px
-    display: block
+    padding-top: 5px
 
   i
     position: absolute
-    font-size: 30px
-    right: 15px
-    top: 4px
+    font-size: 26px
+    right: 22px
+    top: 6px
 
 .mobile-build-item, .mobile-build-top-container
 
@@ -129,3 +130,23 @@
 
       i
         margin: 1px 0 0 7px
+
+.mobile-switch-view
+  background: $white
+  display: flex
+  align-items: center
+  justify-content: center
+  height: 50px
+
+  button
+    height: 30px
+    display: block
+    width: 200px
+    margin: 10px auto
+    color: $color
+    font-size: 12px
+    border-radius: 4px
+    border: 1px solid $border
+    outline: none
+    font-weight: $weight-semibold
+    background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)

tests/dev-scripts/data/pull-request-images.json

@@ -0,0 +1,198 @@
+{
+  "ref": "refs/heads/master",
+  "before": "ee7609e713ec6c40bea1e1755f822ea1e7a2ce5b",
+  "after": "c3657e6eabc1f1ba9839e258902ce4f90681323f",
+  "created": false,
+  "deleted": false,
+  "forced": false,
+  "base_ref": null,
+  "compare": "https://github.com/bleenco/abstruse/compare/ee7609e713ec...c3657e6eabc1",
+  "commits": [
+    {
+      "id": "c3657e6eabc1f1ba9839e258902ce4f90681323f",
+      "tree_id": "51f0b23c6cb624e3b6c9962f94c1b508e12ac560",
+      "distinct": true,
+      "message": "fix(): times on mobile view",
+      "timestamp": "2017-10-03T17:02:55+02:00",
+      "url": "https://github.com/bleenco/abstruse/commit/c3657e6eabc1f1ba9839e258902ce4f90681323f",
+      "author": {
+        "name": "Izak Lipnik",
+        "email": "[email protected]",
+        "username": "Izak88"
+      },
+      "committer": {
+        "name": "Jan Kuri",
+        "email": "[email protected]",
+        "username": "jkuri"
+      },
+      "added": [
+
+      ],
+      "removed": [
+
+      ],
+      "modified": [
+        "src/app/components/app-build-details/app-build-details.component.html",
+        "src/app/components/app-build-item/app-build-item.component.html"
+      ]
+    }
+  ],
+  "head_commit": {
+    "id": "c3657e6eabc1f1ba9839e258902ce4f90681323f",
+    "tree_id": "51f0b23c6cb624e3b6c9962f94c1b508e12ac560",
+    "distinct": true,
+    "message": "fix(): times on mobile view",
+    "timestamp": "2017-10-03T17:02:55+02:00",
+    "url": "https://github.com/bleenco/abstruse/commit/c3657e6eabc1f1ba9839e258902ce4f90681323f",
+    "author": {
+      "name": "Izak Lipnik",
+      "email": "[email protected]",
+      "username": "Izak88"
+    },
+    "committer": {
+      "name": "Jan Kuri",
+      "email": "[email protected]",
+      "username": "jkuri"
+    },
+    "added": [
+
+    ],
+    "removed": [
+
+    ],
+    "modified": [
+      "src/app/components/app-build-details/app-build-details.component.html",
+      "src/app/components/app-build-item/app-build-item.component.html"
+    ]
+  },
+  "repository": {
+    "id": 84880847,
+    "name": "abstruse",
+    "full_name": "bleenco/abstruse",
+    "owner": {
+      "name": "bleenco",
+      "email": "[email protected]",
+      "login": "bleenco",
+      "id": 26046537,
+      "avatar_url": "https://avatars2.githubusercontent.com/u/26046537?v=4",
+      "gravatar_id": "",
+      "url": "https://api.github.com/users/bleenco",
+      "html_url": "https://github.com/bleenco",
+      "followers_url": "https://api.github.com/users/bleenco/followers",
+      "following_url": "https://api.github.com/users/bleenco/following{/other_user}",
+      "gists_url": "https://api.github.com/users/bleenco/gists{/gist_id}",
+      "starred_url": "https://api.github.com/users/bleenco/starred{/owner}{/repo}",
+      "subscriptions_url": "https://api.github.com/users/bleenco/subscriptions",
+      "organizations_url": "https://api.github.com/users/bleenco/orgs",
+      "repos_url": "https://api.github.com/users/bleenco/repos",
+      "events_url": "https://api.github.com/users/bleenco/events{/privacy}",
+      "received_events_url": "https://api.github.com/users/bleenco/received_events",
+      "type": "Organization",
+      "site_admin": false
+    },
+    "private": false,
+    "html_url": "https://github.com/bleenco/abstruse",
+    "description": "open source continuous integration platform",
+    "fork": false,
+    "url": "https://github.com/bleenco/abstruse",
+    "forks_url": "https://api.github.com/repos/bleenco/abstruse/forks",
+    "keys_url": "https://api.github.com/repos/bleenco/abstruse/keys{/key_id}",
+    "collaborators_url": "https://api.github.com/repos/bleenco/abstruse/collaborators{/collaborator}",
+    "teams_url": "https://api.github.com/repos/bleenco/abstruse/teams",
+    "hooks_url": "https://api.github.com/repos/bleenco/abstruse/hooks",
+    "issue_events_url": "https://api.github.com/repos/bleenco/abstruse/issues/events{/number}",
+    "events_url": "https://api.github.com/repos/bleenco/abstruse/events",
+    "assignees_url": "https://api.github.com/repos/bleenco/abstruse/assignees{/user}",
+    "branches_url": "https://api.github.com/repos/bleenco/abstruse/branches{/branch}",
+    "tags_url": "https://api.github.com/repos/bleenco/abstruse/tags",
+    "blobs_url": "https://api.github.com/repos/bleenco/abstruse/git/blobs{/sha}",
+    "git_tags_url": "https://api.github.com/repos/bleenco/abstruse/git/tags{/sha}",
+    "git_refs_url": "https://api.github.com/repos/bleenco/abstruse/git/refs{/sha}",
+    "trees_url": "https://api.github.com/repos/bleenco/abstruse/git/trees{/sha}",
+    "statuses_url": "https://api.github.com/repos/bleenco/abstruse/statuses/{sha}",
+    "languages_url": "https://api.github.com/repos/bleenco/abstruse/languages",
+    "stargazers_url": "https://api.github.com/repos/bleenco/abstruse/stargazers",
+    "contributors_url": "https://api.github.com/repos/bleenco/abstruse/contributors",
+    "subscribers_url": "https://api.github.com/repos/bleenco/abstruse/subscribers",
+    "subscription_url": "https://api.github.com/repos/bleenco/abstruse/subscription",
+    "commits_url": "https://api.github.com/repos/bleenco/abstruse/commits{/sha}",
+    "git_commits_url": "https://api.github.com/repos/bleenco/abstruse/git/commits{/sha}",
+    "comments_url": "https://api.github.com/repos/bleenco/abstruse/comments{/number}",
+    "issue_comment_url": "https://api.github.com/repos/bleenco/abstruse/issues/comments{/number}",
+    "contents_url": "https://api.github.com/repos/bleenco/abstruse/contents/{+path}",
+    "compare_url": "https://api.github.com/repos/bleenco/abstruse/compare/{base}...{head}",
+    "merges_url": "https://api.github.com/repos/bleenco/abstruse/merges",
+    "archive_url": "https://api.github.com/repos/bleenco/abstruse/{archive_format}{/ref}",
+    "downloads_url": "https://api.github.com/repos/bleenco/abstruse/downloads",
+    "issues_url": "https://api.github.com/repos/bleenco/abstruse/issues{/number}",
+    "pulls_url": "https://api.github.com/repos/bleenco/abstruse/pulls{/number}",
+    "milestones_url": "https://api.github.com/repos/bleenco/abstruse/milestones{/number}",
+    "notifications_url": "https://api.github.com/repos/bleenco/abstruse/notifications{?since,all,participating}",
+    "labels_url": "https://api.github.com/repos/bleenco/abstruse/labels{/name}",
+    "releases_url": "https://api.github.com/repos/bleenco/abstruse/releases{/id}",
+    "deployments_url": "https://api.github.com/repos/bleenco/abstruse/deployments",
+    "created_at": 1489444318,
+    "updated_at": "2017-09-29T08:19:39Z",
+    "pushed_at": 1507042976,
+    "git_url": "git://github.com/bleenco/abstruse.git",
+    "ssh_url": "[email protected]:bleenco/abstruse.git",
+    "clone_url": "https://github.com/bleenco/abstruse.git",
+    "svn_url": "https://github.com/bleenco/abstruse",
+    "homepage": "http://abstruse.bleenco.io",
+    "size": 5369,
+    "stargazers_count": 28,
+    "watchers_count": 28,
+    "language": "TypeScript",
+    "has_issues": true,
+    "has_projects": true,
+    "has_downloads": true,
+    "has_wiki": true,
+    "has_pages": false,
+    "forks_count": 5,
+    "mirror_url": null,
+    "open_issues_count": 2,
+    "forks": 5,
+    "open_issues": 2,
+    "watchers": 28,
+    "default_branch": "master",
+    "stargazers": 28,
+    "master_branch": "master",
+    "organization": "bleenco"
+  },
+  "pusher": {
+    "name": "jkuri",
+    "email": "[email protected]"
+  },
+  "organization": {
+    "login": "bleenco",
+    "id": 26046537,
+    "url": "https://api.github.com/orgs/bleenco",
+    "repos_url": "https://api.github.com/orgs/bleenco/repos",
+    "events_url": "https://api.github.com/orgs/bleenco/events",
+    "hooks_url": "https://api.github.com/orgs/bleenco/hooks",
+    "issues_url": "https://api.github.com/orgs/bleenco/issues",
+    "members_url": "https://api.github.com/orgs/bleenco/members{/member}",
+    "public_members_url": "https://api.github.com/orgs/bleenco/public_members{/member}",
+    "avatar_url": "https://avatars2.githubusercontent.com/u/26046537?v=4",
+    "description": ""
+  },
+  "sender": {
+    "login": "jkuri",
+    "id": 1796022,
+    "avatar_url": "https://avatars1.githubusercontent.com/u/1796022?v=4",
+    "gravatar_id": "",
+    "url": "https://api.github.com/users/jkuri",
+    "html_url": "https://github.com/jkuri",
+    "followers_url": "https://api.github.com/users/jkuri/followers",
+    "following_url": "https://api.github.com/users/jkuri/following{/other_user}",
+    "gists_url": "https://api.github.com/users/jkuri/gists{/gist_id}",
+    "starred_url": "https://api.github.com/users/jkuri/starred{/owner}{/repo}",
+    "subscriptions_url": "https://api.github.com/users/jkuri/subscriptions",
+    "organizations_url": "https://api.github.com/users/jkuri/orgs",
+    "repos_url": "https://api.github.com/users/jkuri/repos",
+    "events_url": "https://api.github.com/users/jkuri/events{/privacy}",
+    "received_events_url": "https://api.github.com/users/jkuri/received_events",
+    "type": "User",
+    "site_admin": false
+  }
+}