Skip to content
This repository was archived by the owner on Mar 8, 2020. It is now read-only.

Add new id card creation flow to identities #1689

Merged
merged 2 commits into from
Jul 28, 2017
Merged

Add new id card creation flow to identities #1689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5660be
add new id card creation flow
nklincoln Jul 19, 2017
db1153b
Merge branch 'identities' into new-id-cards
cazfletch Jul 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 42 additions & 37 deletions ...d/src/app/connection-profile/add-connection-profile/add-connection-profile.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,49 @@
<div class="import" fileDragDrop (fileDragDropFileAccepted)="fileAccepted($event)"
(fileDragDropFileRejected)="fileRejected($event)"
(fileDragDropDragOver)="fileDetected($event)" (fileDragDropDragLeave)="fileLeft($event)"
[maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes">
<div class="modal-header">
<h1>Import/Create a Connection Profile</h1>
<button class="icon modal-exit" (click)="activeModal.dismiss()">
<svg class="ibm-icon" aria-hidden="true">
<use xlink:href="#icon-close_new"></use>
</svg>
</button>
</div>
<section class="modal-body">
<span>Upload a Connection Profile from your computer</span>
<file-importer *ngIf="!currentFile" (fileAccepted)="fileAccepted($event)" (fileRejected)="fileRejected($event)" [expandInput]="expandInput"
[maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes" [ngClass]="{'expandFile': expandInput}" [svgName]="'#icon-CTO_JS_Upload'"></file-importer>
<span>Or create a connection profile, select your Blockchain platform:</span>
<form class="file-types-list" #f="ngForm" *ngIf="!expandInput">
<div class="file-types-list-item">
<input type="radio" id="file-type-v06" name="file-type" [(ngModel)]="version" value="v06"
(change)="changeCurrentFileType()">
<label class="radio-label" for="file-type-v06">Hyperledger Fabric v0.6</label>
<div class="description">
v0.6 Connection Profile.
</div>
</div>
<div class="file-types-list-item">
<input type="radio" id="file-type-v1" name="file-type" [(ngModel)]="version" value="v1"
(change)="changeCurrentFileType()">
<label class="radio-label" for="file-type-v1">Hyperledger Fabric v1.0</label>
<div class="description">
v1.0 Connection Profile.
</div>
</div>
</form>
<div class="add-connection">
<h1>Create ID Card</h1>
<section class="profiles">
<div class="description"><b>SELECT BLOCKCHAIN DEPLOYMENT</b></div>
<div>
<form #optionForm="ngForm">
<div class="create-route">
<p>Create ID for a Blockchain you already use with Composer:</p>
<div class="file-types-list">
<div class="file-types-list-item" *ngFor="let profile of connectionProfiles; let i=index" >
<input [checked]="connectionProfile && this.connectionProfile.name && this.connectionProfile.name.valueOf() === profile.name"
type="radio" id="{{ i }}" name="file-type"
(change)="setConnectionProfile(profile.name)"/>
<label class="radio-label" for="{{ i }}"><h3>{{profile.name === '$default' ? 'Web Browser' : profile.name }}</h3></label>
<div class="description"><p>{{ profile.description }}</p></div>
</div>
</div>
</div>
<div class="create-route">
<p>Or Create ID for Blockchain you have not connected to before:</p>
<div class="file-types-list">
<div class="file-types-list-item">
<input type="radio" id="new-v1" name="file-type"
(change)="setConnectionProfile('_$v1')">
<label class="radio-label" for="new-v1"><h3>Hyperledger Fabric v1.0</h3></label>
<div class="description"><p>Connect to a new v1.0 Blockchain</p></div>
</div>
<div class="file-types-list-item">
<input type="radio" id="new-v06" name="file-type"
(change)="setConnectionProfile('_$v06')">
<label class="radio-label" for="new-v06"><h3>Hyperledger Fabric v0.6</h3></label>
<div class="description"><p>Connect to a new v0.6 Blockchain</p></div>
</div>
</div>
</div>
</form>
</div>
</section>
<footer>
<button type="button" class="secondary" (click)="activeModal.dismiss();">
<button type="button" class="secondary" (click)="dismiss();">
<span>Cancel</span>
</button>
<button type="button" class="primary" (click)="addConnectionProfile()" [disabled]="!version">
<button *ngIf = "newDefault" type="button" class="primary" (click)="initiateAddWithProfile()" [disabled]="!connectionProfile">
<span>Add</span>
</button>
<button *ngIf = "!newDefault" type="button" class="primary" (click)="initiateAddToProfile()" [disabled]="!connectionProfile">
<span>Add</span>
</button>
</footer>
Expand Down
139 changes: 53 additions & 86 deletions ...d/src/app/connection-profile/add-connection-profile/add-connection-profile.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,71 @@
@import '../../../assets/styles/base/colors';
@import '../../../assets/styles/base/variables';

.import {
width: 660px;
height: 450px;

.add-connection {
display: flex;
flex-direction: column;
background-color: $white;
margin-bottom: $space-large;
margin-top: $space-large;
border:$border-width-small solid $keyline-highlight;
border-radius: $radius-medium;

.file-types-list {
max-height: 200px;
margin-top: 16px;
h1 {
margin-top: $space-medium;
margin-bottom: $space-large;
margin-left: $space-medium;
font-size: 20px;
color: $primary-text;
letter-spacing:0;
text-align:left;
}

.file-types-list-item {
background-color: $third-highlight;
padding: $space-medium;
&:nth-child(even) {
background-color: $white;
}
.profiles {
display: flex;
flex-direction: row;
margin-left: $space-medium;

.description {
font-style: italic;
padding-left: 2em;
margin-right: $space-xlarge;
margin-top: $space-small;
font-size: 0.7rem;
color:$tertiary-text;
}

label.radio-label {
font-weight: bold;
.create-route {
margin-bottom: $space-large;

&::before {
top: 8px;
}
p {
color:$primary-text;
margin-top: 0;
margin-bottom: 0;
font-weight: 300;
}

&::after {
top: 13px;
.file-types-list {
display: flex;
flex-direction: row;
margin-top: $space-large;
margin-bottom: $space-mlarge;
flex-wrap: wrap;

.file-types-list-item {
background-color: $white;
padding: $space-medium;
max-width: 25rem;
min-width: 22rem;

.description {
color:$primary-text;
margin-left: $space-large;
}

label.radio-label {
font-weight: 600;
}
}
}
}
}
}

section {
Expand All @@ -49,71 +79,8 @@
color: $secondary-text;
}

.chosen-file {
flex: 1;
display: flex;
flex-direction: column;
background-color: $third-highlight;
padding: $space-medium;

.title {
font-weight: bold;
}

.file-info {
display: flex;
justify-content: space-between;
border-bottom: 1px solid $fifth-highlight;
padding-bottom: $space-medium;
align-items: center;

svg {
fill: $first-highlight;
width: 76px;
height: 76px;
margin-right: $space-medium;
}

.file-title {
display: flex;
flex-direction: column;
justify-content: center;

span {
color: $primary-text;
font-style: italic;
}
}
}

.file-content {
margin-top: $space-medium;
flex: 1;
display: flex;
justify-content: space-between;

.network-part {
margin-bottom: $space-smedium;
}
}
}

.github-spinner {
height: 200px;
width: 465px;
display: flex;
align-items: center;
justify-content: center;

.circle-path {
stroke: $first-highlight;
}
}

form {
max-height: 200px;
overflow-y: auto;
margin-top: $space-medium;
}
}
}
Expand Down
Loading