Improve deploy new business network button (hyperledger-archives#2025)

There is now a card sized button to deploy new business networks which is replaced with information and a link to the documentation if there the required permissions are not available to deploy Contributes to #2009 Signed-off-by: James Taylor <[email protected]>
RajDkJangam · Aug 29, 2017 · 75e7c71 · 75e7c71
1 parent 3847615
commit 75e7c71
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 25 deletions.
diff --git a/packages/composer-playground/src/app/login/login.component.html b/packages/composer-playground/src/app/login/login.component.html
@@ -12,16 +12,7 @@ <h1 class="left-align">My Wallet</h1>
 <section *ngIf="!showSubScreen" class="main-view">
     <div class="connection-profile" *ngFor="let connectionProfileRef of connectionProfileRefs;">
         <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '$default' ? 'Web Browser' :
-            this.connectionProfileNames.get(connectionProfileRef) }}
-            <div class="connection-profile-buttons">
-                <button id="deployButton" type="button" class="action circular"
-                        [disabled]="!canDeploy(connectionProfileRef)" (click)="deployNetwork(connectionProfileRef)">
-                    <svg class="ibm-icon vertical-top">
-                        <use xlink:href="#icon-deploy_24"></use>
-                    </svg>
-                </button>
-            </div>
-        </h2>
+            this.connectionProfileNames.get(connectionProfileRef) }}</h2>
         <div class="identities">
             <identity-card *ngFor="let cardRef of idCardRefs.get(connectionProfileRef)"
                            [identity]="idCards.get(cardRef)"
@@ -30,6 +21,23 @@ <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '
                            (onExport)="exportIdentity(cardRef)"
                            (onDelete)="removeIdentity(cardRef)">
             </identity-card>
+            <button type="button" class="connection-profile-card"
+                    *ngIf="canDeploy(connectionProfileRef)"
+                    (click)="deployNetwork(connectionProfileRef)">
+                <span class="card-content">
+                    <svg class="ibm-icon" aria-hidden="true">
+                        <use xlink:href="#icon-Network_Create"></use>
+                    </svg>
+                    <p>Deploy new business network</p>
+                </span>
+            </button>
+            <div class="connection-profile-card card-content" *ngIf="!canDeploy(connectionProfileRef)">
+                <svg class="ibm-icon" aria-hidden="true">
+                    <use xlink:href="#icon-get-information_64"></use>
+                </svg>
+                <p>You must <a href="javascript:void(0);" (click)="importIdentity()">import</a> identity cards with the correct admin rights for deploying new business networks.</p>
+                <p><a href="https://hyperledger.github.io/composer/business-network/bnd-deploy.html" target="_blank">Learn more</a>.</p>
+            </div>
         </div>
     </div>
 </section>

diff --git a/packages/composer-playground/src/app/login/login.component.scss b/packages/composer-playground/src/app/login/login.component.scss
@@ -32,25 +32,55 @@ app-login {
             margin-top: $space-large;
             padding-left: $space-large;
 
-            .connection-profile-buttons {
-                display: inline-block;
-                margin-left: $space-medium;
-
-                button {
-                    &.action.circular:hover,
-                    &.action.circular:focus {
-                        background-color: $white;
-                        border-bottom: 2px solid transparent;
-                    }
-                }
-            }
-
             .identities {
                 display: flex;
                 flex-wrap: wrap;
-                margin-top: $space-smedium;
+                margin-top: $space-large;
+
+                .connection-profile-card {
+                    width: 275px;
+                    min-height: 325px;
+                    color: $fifth-highlight;
+                    background-color: $fourth-highlight;
+                }
+
+                button.connection-profile-card {
+                    border: 1px dashed $fifth-highlight;
+                    border-radius: 5px;
+
+                    &:hover, &:focus {
+                        background-color: rgba(255,255,255,0.30);
+                    }
+                }
+
+                .card-content {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+
+                    a {
+                        color: $secondary-text;
+                        text-decoration: none;
+
+                        &:hover, &:focus {
+                            text-decoration: underline;
+                            outline: none;
+                        }
+                    }
+
+                    p {
+                        text-align: center;
+                    }
+
+                    svg {
+                        fill: $fifth-highlight;
+                        width: 60px;
+                        height: 55px;
+                    }
+                }
 
-                identity-card {
+                identity-card, .connection-profile-card {
                     margin-left: $space-large;
                     margin-bottom: $space-large;
                 }

diff --git a/packages/composer-playground/src/assets/svg/other/Network_Create.svg b/packages/composer-playground/src/assets/svg/other/Network_Create.svg