Merge pull request #81 from Yamazaki93/revert-80-patch

Revert "Patch"

app/frontend/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { ContextMenuModule } from 'ngx-contextmenu';
 import { ExternalFileViewerComponent } from './core/external-file-viewer/external-file-viewer.component';
 import { HotkeyModule } from 'angular2-hotkeys';
 import { ReleaseNoteComponent } from './infrastructure/release-note/release-note.component';
+import { AboutPageComponent } from './infrastructure/about-page/about-page.component';
 
 
 const appRoutes: Routes = [
@@ -44,6 +45,7 @@ const appRoutes: Routes = [
     path: 'file/:sha', component: ExternalFileViewerComponent
   },
   { path: 'release-note', component: ReleaseNoteComponent },
+  { path: 'about', component: AboutPageComponent },
   { path: '', redirectTo: 'git', pathMatch: 'full' }
 ];
 

app/frontend/src/app/core/branch-item/branch-item.component.html

@@ -8,6 +8,11 @@
   <span class="expand" [class.icon-chevron-up]="toggled" [class.icon-chevron-down]="!toggled" *ngIf="item.items"></span>
   <app-branch-item [collapse]="_collapse" [item]="subItem" *ngFor="let subItem of item.items; trackBy: trackBy"></app-branch-item>
 </div>
+<context-menu #branchMenu>
+  <ng-template contextMenuItem (execute)="onDeleteBranch($event.item)">
+    <span class="text-danger">Delete Branch</span>
+  </ng-template>
+</context-menu>
 <context-menu #tagMenu>
   <ng-template contextMenuItem (execute)="onDeleteTag($event.item.shorthand)">
     <span class="text-danger">Delete Tag</span>

app/frontend/src/app/core/branch-item/branch-item.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, HostBinding, ViewChild } from '@angular/core'
 import { D3Service } from '../d3/d3.service';
 import { ContextMenuService, ContextMenuComponent } from 'ngx-contextmenu';
 import { CommitSelectionService } from '../services/commit-selection.service';
+import { SubmodulesService } from '../services/submodules.service';
 
 @Component({
   selector: 'app-branch-item',
@@ -18,11 +19,13 @@ export class BranchItemComponent implements OnInit {
   }
   @HostBinding('class.toggled') toggled = true;
   @ViewChild('tagMenu') tagMenu: ContextMenuComponent;
+  @ViewChild('branchMenu') branchMenu: ContextMenuComponent;
   private _collapse = false;
   constructor(
     private d3: D3Service,
     private ctxService: ContextMenuService,
     private commitSelection: CommitSelectionService,
+    private submodules: SubmodulesService
   ) { }
 
   ngOnInit() {
@@ -31,6 +34,8 @@ export class BranchItemComponent implements OnInit {
   onClick($event) {
     if (this.item.items) {
       this.toggled = !this.toggled;
+    } else if (this.item.submodule) {
+      this.submodules.selectSubmodule(this.item.shorthand);
     } else {
       this.d3.scrollTo(this.item.target);
     }
@@ -47,11 +52,24 @@ export class BranchItemComponent implements OnInit {
         event: $event,
         item: item,
       });
+    } else if (item.isRemote || item.isBranch) {
+      this.ctxService.show.next({
+        contextMenu: this.branchMenu,
+        event: $event,
+        item: item
+      });
     }
     $event.preventDefault();
     $event.stopPropagation();
   }
   onDeleteTag(name) {
     this.commitSelection.deleteTag(name);
   }
+  onDeleteBranch(branch) {
+    if (branch.isRemote) {
+      this.commitSelection.deleteRemoteBranch(branch.name);
+    } else {
+      this.commitSelection.deleteBranch(branch.name);
+    }
+  }
 }

app/frontend/src/app/core/branch-list/branch-list.component.ts

@@ -19,11 +19,18 @@ export class BranchListComponent implements OnInit, AfterViewInit {
   }
   @Input() rootIcon = "";
   @Input() rootPath = "";
-  @Input() itemIcon = 'git-branch';
+  @Input() set itemIcon(icn) {
+    this._itemIcon = icn;
+    this.updateBranchVisual();
+  }
+  get itemIcon() {
+    return this._itemIcon;
+  }
   private _branches = [];
   private items = [];
   private basePad = 25;
   private baseCls = "mr-2";
+  private _itemIcon = 'git-branch';
   private _collapseAll = false;
   constructor(
     private d3: D3Service,

app/frontend/src/app/core/branch-viewer/branch-viewer.component.html

@@ -60,13 +60,26 @@ <h4>
         </a>
         <app-branch-list [branches]="tags" [itemIcon]="'tag'"></app-branch-list>
       </li>
+      <li *ngIf="repoName !== ''" class="expandable smooth" [class.toggled]="showSubmodules">
+        <a class="smooth-1 action-button" (click)="toggleSubm()">
+          <h4>
+            <span class="icon-box mr-3"></span>
+            <span class="nav-text">Submodules</span>
+          </h4>
+        </a>
+        <app-branch-list [branches]="submoduleNames" [itemIcon]="'box'"></app-branch-list>
+      </li>
     </ul>
   </div>
-  <div class="repo-info-container toggle-visible action-button smooth" (click)="goToSettings()">
+  <div class="repo-info-container toggle-visible action-button smooth" (click)="goToSettings()"  placement="right" [ngbTooltip]="updateAvailable? 'Update available' : ''" container="body">
     <h4>
-      <i class="icon-settings mr-3 text-primary"></i>
+      <i class="icon-settings mr-3"></i>
       <span class="nav-text">Settings</span>
     </h4>
+    <div class="badge bg-primary" *ngIf="updateAvailable">
+      !
+    </div>
   </div>
 </div>
-<app-open-repo-panel class="smooth" [class.toggled]="toggled" #openRepoPanel></app-open-repo-panel>
+<app-open-repo-panel class="smooth" [class.toggled]="toggled" #openRepoPanel></app-open-repo-panel>
+<app-submodule-details-panel class="smooth" [class.toggled]="toggled" #submodulePanel></app-submodule-details-panel>

app/frontend/src/app/core/branch-viewer/branch-viewer.component.scss

@@ -1,6 +1,8 @@
 $primary-color: #FFF;
 $item-height: 46px;
 $width: 400px;
+$badge-size: 20px;
+
 :host {
     z-index: 12;
 }
@@ -89,9 +91,22 @@ app-open-repo-panel {
 
 .action-button {
     cursor: pointer;
+    position: relative;
     &:hover {
         background: rgba(0, 0, 0, 0.2);
     }
+    .badge{
+        position: absolute;
+        border-radius: 50%;
+        width: $badge-size;
+        height: $badge-size;
+        top: 8px;
+        left: 13px;
+        font-size: 12px;
+        padding: 0.25em 0;
+        line-height: 14px;
+        color: #FFF !important;
+    }
 }
 
 @media (min-width: 768px) {

app/frontend/src/app/core/branch-viewer/branch-viewer.component.ts

@@ -5,7 +5,9 @@ import { RepoService } from '../services/repo.service';
 import { Router } from '@angular/router';
 import { LayoutService } from '../services/layout.service';
 import { D3Service } from '../d3/d3.service';
-
+import { SubmodulesService } from '../services/submodules.service';
+import { SubmoduleDetailsPanelComponent } from '../submodule-details-panel/submodule-details-panel.component';
+import { UpdaterService } from '../../infrastructure/updater.service';
 @Component({
   selector: 'app-branch-viewer',
   templateUrl: './branch-viewer.component.html',
@@ -18,20 +20,26 @@ export class BranchViewerComponent implements OnInit {
   remote = [];
   local = [];
   tags = [];
+  submoduleNames = [];
   repoName = "";
   branchName = "";
   branchTarget = "";
   showLocal = true;
   showRemote = true;
   showTags = true;
+  showSubmodules = true;
+  updateAvailable = false;
   private collapseRemote = false;
   private collapseLocal = false;
   @ViewChild('openRepoPanel') openRepoPanel: OpenRepoPanelComponent;
+  @ViewChild('submodulePanel') submodulePanel: SubmoduleDetailsPanelComponent;
   constructor(
     private repoService: RepoService,
     private route: Router,
     private layout: LayoutService,
     private d3: D3Service,
+    private submodules: SubmodulesService,
+    private updater: UpdaterService
   ) {
     this.repoService.repoChange.subscribe(info => {
       let that = this;
@@ -48,16 +56,29 @@ export class BranchViewerComponent implements OnInit {
       this.refs = data.references;
       this.updateReferences(data.references);
     });
+    this.submodules.submoduleChanged.subscribe(subm => {
+      this.submoduleNames = subm;
+    });
+    this.submodules.submoduleSelected.subscribe(name => {
+      this.submodulePanel.submoduleName = name;
+      this.submodulePanel.toggled = true;
+    });
+    this.updater.updateAvailableChange.subscribe(ava => {
+      this.updateAvailable = ava;
+    });
     if (this.repoService.hasRepository) {
       this.repoName = this.repoService.repoName;
       this.branchName = this.repoService.currentBranch.name;
       this.branchTarget = this.repoService.currentBranch.target;
       this.refs = this.repoService.refs;
       this.updateReferences(this.refs);
     }
+    this.submoduleNames = this.submodules.submodules;
     this.toggled = layout.isNavToggled;
     this.showLocal = layout.isLocalShown;
     this.showRemote = layout.isRemoteShown;
+    this.showTags = layout.isTagsShown;
+    this.showSubmodules = layout.isSubmoduleShown;
     layout.filePanelChanged.subscribe(filePanelOpen => {
       if (this.toggled && filePanelOpen) {
         this.toggleNavigation();
@@ -66,6 +87,7 @@ export class BranchViewerComponent implements OnInit {
     layout.navPanelChanged.subscribe(navOpen => {
       this.toggled = navOpen;
     });
+    this.updateAvailable = this.updater.isUpdateAvailable;
   }
 
   ngOnInit() {
@@ -91,7 +113,11 @@ export class BranchViewerComponent implements OnInit {
     this.layout.isTagsShown = this.showTags;
   }
   goToSettings(): void {
-    this.route.navigateByUrl('/settings');
+    if (this.updateAvailable) {
+      this.route.navigateByUrl('/settings/updater');
+    } else {
+      this.route.navigateByUrl('/settings');
+    }
   }
   goToCurrentBranch(): void {
     this.d3.scrollTo(this.branchTarget);
@@ -119,4 +145,8 @@ export class BranchViewerComponent implements OnInit {
     this.collapseLocal = !this.collapseLocal;
     $event.stopPropagation();
   }
+  toggleSubm() {
+    this.showSubmodules = !this.showSubmodules;
+    this.layout.isSubmoduleShown = this.showSubmodules;
+  }
 }

app/frontend/src/app/core/commit-detail-info/commit-detail-info.component.html

@@ -1,14 +1,8 @@
-<div class="commit-detail-info-container d-flex flex-column p-3">
+<div class="commit-detail-info-container d-flex flex-column p-3" *ngIf="commit">
   <div class="summary-container d-flex flex-column">
     <div class="summary-header d-flex" *ngIf="!commit.virtual">
-      <div class="committer-badge mr-3" [style.background]="getBadgeColor()">
-        {{getCommitter()}}
-      </div>
-      <div class="committer-info-container">
-        <h4>{{commit.author}}</h4>
-        <small>{{commit.email}}</small>
-        <small class="ml-1 mr-1">at</small>
-        <small> {{getDateTime()}}</small>
+      <div class="full-width">
+        <app-committer-card [author]="commit.author" [email]="commit.email" [time]="commit.date"></app-committer-card>
       </div>
       <div class="sha-container text-right">
         <small>
@@ -23,19 +17,22 @@ <h4>{{commit.author}}</h4>
       </div>
     </div>
     <div class="" *ngIf="commit.virtual">
-      <a class="btn btn-sm btn-danger" (click)="discardAll()"><i class="icon-trash-2 mr-2"></i>Discard All Changes</a>
+      <a class="btn btn-sm btn-danger" (click)="discardAll()">
+        <i class="icon-trash-2 mr-2"></i>Discard All Changes</a>
     </div>
     <div class="mt-3 d-flex flex-column message-container">
       <div class="message-title-container p-2">
         <h5 *ngIf="!commit.virtual">{{commit.message}}</h5>
         <div class="d-flex">
-          <input *ngIf="commit.virtual" (keydown)="onKeyDown($event)" [(ngModel)]="newCommitMessage" (focus)="fillKeyIfNeeded()" name="newMessage" type="text" placeholder="Commit Message...">
+          <input *ngIf="commit.virtual" (keydown)="onKeyDown($event)" [(ngModel)]="newCommitMessage" (focus)="fillKeyIfNeeded()" name="newMessage"
+            type="text" placeholder="Commit Message...">
           <h5 class="ml-1 word-count" *ngIf="newCommitMessage.length > 30" [class.text-warning]="newCommitMessage.length > 50">{{50 - newCommitMessage.length}}</h5>
         </div>
       </div>
       <div class="message-content-container p-2">
         <ng-container *ngIf="commit.detail && !commit.virtual">{{commit.detail}}</ng-container>
-        <textarea *ngIf="commit.virtual" (keydown)="onKeyDown($event)" [(ngModel)]="newCommitDetail" (change)="setCommitMessages()" name="newDetail"></textarea>
+        <textarea *ngIf="commit.virtual" (keydown)="onKeyDown($event)" [(ngModel)]="newCommitDetail" (change)="setCommitMessages()"
+          name="newDetail"></textarea>
       </div>
     </div>
   </div>
@@ -51,7 +48,6 @@ <h5>
         <i class="icon-file"></i>{{commit.fileSummary.renamed}}</span>
     </h5>
   </div>
-
   <div class="mt-2 file-details-container d-flex flex-column" *ngIf="!commit.virtual">
     <h5>File Details</h5>
     <div class="modified-file-list p-2">
@@ -91,7 +87,7 @@ <h5>Unstaged Files</h5>
       <a class="btn-success btn-sm btn" [class.disabled]="!commit.unstaged.length" (click)="stageAll()">Stage All</a>
     </div>
     <div class="modified-file-list p-2">
-      <div class="modified-file-entry p-1 d-flex" *ngFor="let file of commit.unstaged; trackBy: wipFileTrack"  (click)="openFileDetails(file.path, 'workdir')">
+      <div class="modified-file-entry p-1 d-flex" *ngFor="let file of commit.unstaged; trackBy: wipFileTrack" (click)="openFileDetails(file.path, 'workdir')">
         <div>
           <span class="mr-2 text-warning" *ngIf="file.isModified">
             <i class="icon-file-text"></i>
@@ -162,4 +158,9 @@ <h5>Staged Files</h5>
       <app-spinner [size]="20" [enabled]="committing"></app-spinner>
     </a>
   </div>
+</div>
+<div class="empty-container d-flex flex-column justify-content-center align-items-center" [class.hidden]="!commit">
+  <div>
+    <h4>Select a commit from the map to see details</h4>
+  </div>
 </div>

app/frontend/src/app/core/commit-detail-info/commit-detail-info.component.scss

@@ -117,4 +117,7 @@
             width: 100%;
         }
     }
+}
+.empty-container{
+    height: 100%;
 }

app/frontend/src/app/core/commit-detail-info/commit-detail-info.component.ts

@@ -16,6 +16,9 @@ import { CommitChangeService } from '../services/commit-change.service';
 })
 export class CommitDetailInfoComponent implements OnInit {
 
+  @Input() set fileViewMode(m: string) {
+    this._mode = m;
+  }
   @Input() commit: CommitDetail | WIPCommit;
   private committing = false;
   private set newCommitMessage(msg) {
@@ -34,6 +37,7 @@ export class CommitDetailInfoComponent implements OnInit {
   }
   private _message = "";
   private _detail = "";
+  private _mode = "";
   constructor(
     private d3: D3Service,
     private sanitize: DomSanitizer,
@@ -67,15 +71,7 @@ export class CommitDetailInfoComponent implements OnInit {
       return path;
     }
   }
-  getCommitter() {
-    return this.d3.getAuthor(this.commit);
-  }
-  getDateTime() {
-    return moment(this.commit.date).format('MM/DD/YYYY hh:mm a');
-  }
-  getBadgeColor() {
-    return this.sanitize.bypassSecurityTrustStyle(`${this.d3.getColorByAuthor(this.commit.email)}`);
-  }
+
   wipFileTrack(index, item) {
     return item.path;
   }
@@ -115,7 +111,7 @@ export class CommitDetailInfoComponent implements OnInit {
     }
   }
   openFileDetails(file, commit = null) {
-    this.selection.selectFileDetail(file, commit);
+    this.selection.selectFileDetail(file, commit, this._mode === 'file');
   }
   onKeyDown($event) {
     // keyboard code 83 = s;