forked from fabric8-launcher/ngx-launcher
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(app-launcher): added cancel overlay
- Loading branch information
Showing
22 changed files
with
344 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
src/app/launcher/cancel-overlay/cancel-overlay.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
<div class="imports-dialog" *ngIf="launcherComponent.showCancelOverlay === true"> | ||
<div class="code-imports"> | ||
<form class="col-sm-8 col-sm-offset-2 code-imports--step active" role="form"> | ||
<section class="container-fluid"> | ||
<form class="form" #spaceForm="ngForm"> | ||
<div class="row"> | ||
<h1 class="code-imports--step_title">Getting Started</h1> | ||
<p> | ||
When getting started with setting up a application, there are two different set up paths you can take. You can either choose to import an existing project or create a new application. | ||
</p> | ||
</div> | ||
<div class="row row-cards-pf"> | ||
<div class="col-sm-6"> | ||
<div class="container-fluid container-cards-pf" (click)="cancelConfirmed()"> | ||
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select code-imports--step_content"> | ||
<div class="card-pf-body"> | ||
<h2 class="card-pf-title"> | ||
Import Existing Application | ||
</h2> | ||
<div class="card-pf-items"> | ||
<div class="card-pf-item"> | ||
I have an existing application that I would like to import to use as the base for my application. | ||
</div> | ||
</div> | ||
<p class="card-pf-info text-center"> | ||
<i class="pficon pficon-export"></i> | ||
</p> | ||
</div> | ||
<div class="card-pf-view-checkbox"> | ||
<input type="checkbox"> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-sm-6"> | ||
<div class="container-fluid container-cards-pf" (click)="cancelConfirmed()"> | ||
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select code-imports--step_content"> | ||
<div class="card-pf-body"> | ||
<h2 class="card-pf-title"> | ||
Create a New Application | ||
</h2> | ||
<div class="card-pf-items"> | ||
<div class="card-pf-item"> | ||
I want to create a new application from scratch. I would like to use the preset technologies and missions within OpenShift.io to help me create a new application. | ||
</div> | ||
</div> | ||
<p class="card-pf-info text-center"> | ||
<i class="pficon pficon-add-circle-o"></i> | ||
</p> | ||
</div> | ||
<div class="card-pf-view-checkbox"> | ||
<input type="checkbox"> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
</section> | ||
<footer class="container-fluid"> | ||
<div class="row"> | ||
<div class="col-sm-12 code-imports--step_tool-bar button-right"> | ||
<button id="cancelImportsButton" class="btn btn-link" aria-label="Cancel" (click)="cancelAborted()">Cancel</button> | ||
</div> | ||
</div> | ||
</footer> | ||
</form> | ||
</div> | ||
</div> |
56 changes: 56 additions & 0 deletions
56
src/app/launcher/cancel-overlay/cancel-overlay.component.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
@import (reference) '../../../assets/stylesheets/shared/main.less'; | ||
|
||
.imports-dialog { | ||
position: fixed; | ||
top: 0; | ||
right: 0; | ||
bottom: 0; | ||
left: 0; | ||
background-color: rgba(0, 0, 0, .8); | ||
z-index: 1200; | ||
.code-imports { | ||
color: @color-pf-white; | ||
.alert-danger { | ||
background-color: transparent; | ||
border: none; | ||
color: @color-pf-red-100; | ||
} | ||
&--step { | ||
margin-top: 5%; | ||
padding: 35px; | ||
&_title { | ||
font-size: 2em; // matches h4 | ||
} | ||
&_content { | ||
height: 350px; | ||
background-color: transparent; | ||
color: @color-pf-white; | ||
border: 0; | ||
&:hover { | ||
box-shadow: 0 1px 6px rgba(255, 255, 255, .35); | ||
} | ||
i { | ||
position: absolute; | ||
right: 0; | ||
bottom: 25px; | ||
left: 0; | ||
font-size: 8em; | ||
} | ||
} | ||
&_tool-bar { | ||
margin-top: 15px; | ||
text-align: center; | ||
color: @color-pf-black-700; | ||
.btn.disabled, .btn[disabled] { | ||
/* stylelint-disable */ | ||
background-color: transparent !important; | ||
background: transparent !important; | ||
/* stylelint-enable */ | ||
} | ||
.btn.btn-link { | ||
margin-left: 10px; | ||
} | ||
} | ||
} | ||
} | ||
} |
36 changes: 36 additions & 0 deletions
36
src/app/launcher/cancel-overlay/cancel-overlay.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { | ||
Component, | ||
Host, | ||
Input, | ||
OnInit | ||
} from '@angular/core'; | ||
|
||
import { LauncherComponent } from '../launcher.component'; | ||
|
||
@Component({ | ||
selector: 'f8launcher-cancel-overlay', | ||
styleUrls: ['./cancel-overlay.component.less'], | ||
templateUrl: './cancel-overlay.component.html' | ||
}) | ||
export class CancelOverlayComponent implements OnInit { | ||
|
||
constructor(@Host() public launcherComponent: LauncherComponent) { | ||
} | ||
|
||
ngOnInit(): void { | ||
} | ||
|
||
/** | ||
* Cancel aborted | ||
*/ | ||
cancelAborted(): void { | ||
this.launcherComponent.cancelAborted(); | ||
} | ||
|
||
/** | ||
* Cancel confirmed | ||
*/ | ||
cancelConfirmed(): void { | ||
this.launcherComponent.cancelConfirmed(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.