Open gallery application template in github (#1252)

Azure · Apr 10, 2018 · cc19fbb · cc19fbb
1 parent 787955d
commit cc19fbb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/app/components/market/application-action/choose-action.component.ts b/app/components/market/application-action/choose-action.component.ts
@@ -49,6 +49,11 @@ export class ChooseActionComponent implements OnInit, OnDestroy {
         return action.id;
     }
 
+    public viewOnGithub(action: ApplicationAction) {
+        const link = `https://github.com/Azure/BatchLabs-data/tree/master/ncj/${this.application.id}/${action.id}`;
+        this.electronShell.openExternal(link);
+    }
+
     private _updateActions() {
         this.templateService.getApplication(this.applicationId).subscribe((application) => {
             this.application = application;

diff --git a/app/components/market/application-action/choose-action.html b/app/components/market/application-action/choose-action.html
@@ -2,13 +2,21 @@
     <div *ngIf="application">
         <h1>
             <img class="logo" [src]="application.icon" height="30" width="30" alt="logo" *ngIf="application?.icon">
-            <span>Action selection for <span [title]="application.description">{{application?.name}}</span></span>
-            <span>(<a (click)="openLink(application?.readme)" href="javascript:void(0)">view readme</a>)</span>
+            <span>Action selection for
+                <span [title]="application.description">{{application?.name}}</span>
+            </span>
+            <span>(
+                <a (click)="openLink(application?.readme)" href="javascript:void(0)">view readme</a>)</span>
         </h1>
         <div class="actions">
-            <bl-card *ngFor="let action of actions;trackBy: trackAction" class="action" [routerLink]="['/market', applicationId, 'actions', action.id, 'submit']">
-                <div class="name">{{action.name}}</div>
-                <div class="description">{{action.description}}</div>
+            <bl-card *ngFor="let action of actions;trackBy: trackAction" class="action">
+                <div class="action-link" [routerLink]="['/market', applicationId, 'actions', action.id, 'submit']">
+                    <div class="name">{{action.name}}</div>
+                    <div class="description">{{action.description}}</div>
+                </div>
+                <div class="view-on-github" (click)="viewOnGithub(action)" matTooltip="View template on github">
+                    <i class="fa fa-external-link"></i>
+                </div>
             </bl-card>
         </div>
 

diff --git a/app/components/market/application-action/choose-action.scss b/app/components/market/application-action/choose-action.scss
@@ -25,21 +25,39 @@ bl-choose-action {
         padding: 0;
         margin: 10px;
         display: flex;
+        align-items: stretch;
         cursor: pointer;
 
-        &:hover {
-            background: $whitesmoke-darker;
-        }
+        > .action-link {
+            display: flex;
+            &:hover {
+                background: $whitesmoke-darker;
+            }
+
+            > .name {
+                border-right: 1px solid $border-color;
+                padding: 10px;
+                width: 200px;
+            }
 
-        > .name {
-            border-right: 1px solid $border-color;
-            padding: 10px;
-            width: 200px;
+            > .description {
+                flex: 1;
+                padding: 10px;
+                border-right: 1px solid $border-color;
+            }
         }
 
-        > .description {
-            flex: 1;
-            padding: 10px;
+        > .view-on-github {
+            color: $secondary-text;
+            font-size: 20px;
+            flex: 0 0 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background: $whitesmoke-darker;
+            }
         }
     }