Update the design of the asset page in the angular generator (hyperle…

…dger-archives#3440) * angular-nav Signed-off-by: K. L. Usher <[email protected]> * Assets almost complete Signed-off-by: K. L. Usher <[email protected]> * Angular Changes Signed-off-by: Ellis Henderson <[email protected]> * Removed non-functional tabs from view Signed-off-by: Ellis Henderson <[email protected]>
blackboxx · Feb 21, 2018 · ffe5640 · ffe5640
1 parent 6be84f8
commit ffe5640
Show file tree

Hide file tree

Showing 14 changed files with 445 additions and 37 deletions.
diff --git a/...ges/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.css b/...ges/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.css
@@ -0,0 +1,122 @@
+.container-fluid {
+    display: grid;
+    margin-left: 72px;
+    padding-left: 0px;
+}
+
+.navbar {
+    border-radius: 0px;
+    background: #F3F3F3;
+    border: none;
+}
+
+.navbar-header {
+    margin-top: 40px;
+    margin-bottom: 30px;
+}
+
+.navbar-brand {
+    height: 100%;
+    font-size: 32px;
+    letter-spacing: 0.28px;
+    padding: 0px;
+    margin-left: 0px !important;
+    color: #000;
+}
+
+.navbar-brand:hover {
+    color: #000;
+    letter-spacing: 5px;
+}
+
+.network-name {
+    font-size: 12px;
+    letter-spacing: 0.28px;
+    color: #5D636A;
+}
+.network-name:hover{
+    letter-spacing: 2px;
+}
+
+.navbar-nav > li {
+    margin-right: 12px;
+}
+
+.navbar-nav > a {
+    font-size: 14px;
+    color: #343C41;
+    letter-spacing: 0.2px;
+}
+
+.navbar-nav > li:hover {
+    background-color: #fff;
+    color: #000;
+}
+
+.navbar-nav > li > a {
+    color: #000;
+    padding: 10px;
+    font-weight: bold;
+}
+
+.navbar-nav > li > .active > a:hover {
+    color: #6C4CC4 !important;
+}
+
+.navbar-nav > li > a:hover {
+    color: #000;
+}
+
+.navbar-nav > .active > a {
+    background-color: #fff;
+    color: #6C4CC4 !important;
+}
+
+.dropdown-menu {
+    border-radius: 0px;
+    border: none;
+    padding: 0px;
+    box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.10);
+    max-height: 0;
+    display: block;
+    overflow: hidden;
+    opacity: 0;
+
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.dropdown-menu > li > a {
+    padding: 6px 12px;
+    font-size: 14px;
+    color: #343C41;
+    letter-spacing: 0.2px;
+    line-height: 30px;
+}
+
+.dropdown-menu > li > a:hover {
+    background-color: #F3ECFE;
+}
+
+.dropdown-menu > li > a:active {
+    background-color: #F3ECFE;
+}
+.dropdown-menu > li > a:focus {
+    background-color: #F3ECFE;
+}
+.dropdown-menu > li > a:visited {
+    background-color: #F3ECFE;
+}
+
+.dropdown:hover .dropdown-menu {
+    opacity: 1;
+}
+
+.scrollable-menu {
+    height: auto;
+    max-height: 200px;
+    overflow-x: hidden;
+}
diff --git a/...es/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.html b/...es/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.html
@@ -1,21 +1,20 @@
 <nav class="navbar navbar-inverse">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="#"><%=businessNetworkIdentifier%></a>
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <p class="network-name"><%=businessNetworkIdentifier%>.bna</p>
+        <p class="navbar-brand"><%=appName%></p>
+      </div>
+      <ul class="nav navbar-nav">
+        <li class="dropdown active">
+            <a class="dropdown-toggle" data-toggle="dropdown">Assets</a>
+            <ul class="dropdown-menu scrollable-menu">
+              <% for(var x=0;x<assetList.length;x++){ %>
+              <li><a [routerLink]="['/<%=assetList[x].name%>']"><%=assetList[x].name%></a></li>
+              <%}%>
+            </ul>
+        </li>
+      </ul>
     </div>
-    <ul class="nav navbar-nav navbar-right">
-      <li class=""><a [routerLink]="['/']">Home</a></li>
-      <li class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Assets
-          <span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <% for(var x=0;x<assetList.length;x++){ %>
-          <li><a [routerLink]="['/<%=assetList[x].name%>']"><%=assetList[x].name%></a></li>
-          <%}%>
-        </ul>
-      </li>
-    </ul>
-  </div>
-</nav>
-
-<router-outlet></router-outlet>
+  </nav>
+
+  <router-outlet></router-outlet>
diff --git a/...ages/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.ts b/...ages/generator-hyperledger-composer/generators/angular/templates/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import $ from 'jquery';
 
 @Component({
   selector: 'app-root',
@@ -7,5 +8,19 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app works!';
-}
 
+  ngAfterViewInit() {
+    $('.nav a').on('click', function(){
+      $(".nav").find(".active").removeClass("active");
+      $(this).parent().addClass("active");
+    });
+
+    $('.dropdown').on('show.bs.dropdown', function(e){
+      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
+    });
+
+    $('.dropdown').on('hide.bs.dropdown', function(e){
+      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
+    });
+  }
+}
diff --git a/...rator-hyperledger-composer/generators/angular/templates/src/app/asset/asset.component.css b/...rator-hyperledger-composer/generators/angular/templates/src/app/asset/asset.component.css
@@ -1 +1,164 @@
-<%= styling %>
+.container {
+    width: 100%;
+    padding-left: 72px;
+    padding-right: 72px;
+}
+
+.btn-primary {
+    background: #844AE4;
+    border-radius: 4px;
+    border: 0px;
+    font-size: 14px;
+    color: #FFFFFF;
+    letter-spacing: 0;
+    line-height: 10px;
+    height: 40px;
+    width: 153px;
+    float: right;
+    margin-top: 5%;
+}
+
+.table > thead > tr > th {
+    border-bottom: 1px solid #EAEAEA;
+}
+
+.table > thead > tr > th.info {
+    background: #FFF;
+}
+.modal-title {
+    font-family: inherit;
+    font-size: 24px;
+    color: #4E4E4E;
+    letter-spacing: 0.28px;
+    line-height: 28px;
+    padding-top: 15px;
+}
+.modal-intro {
+    font-family: inherit;
+    font-size: 14px;
+    color: #545454;
+    line-height: 20px;
+    padding-top: 15px;
+
+}
+.modal-header{
+    background: #F4F4F4;
+    border-radius: 5px;
+    border-bottom: 1px solid #F4F4F4;
+}
+.modal-body{
+    background: #F4F4F4;
+    border-radius: 5px;
+}
+.modal-footer{
+    background: #F4F4F4;
+    border-radius: 5px;
+    border-top: 1px solid #f4f4f4
+}
+.form-control{
+    color: #393939;
+    height: 42px;
+    border: 1px solid #ffffff;
+    box-shadow: inset 0 0px 0px rgba(0,0,0,.075); 
+    border-radius: 4px;
+    resize: none;
+
+}
+label {
+    color: #545454;
+}
+.modal-content{
+    margin-top: 15%;
+    margin-bottom: 15%;
+    box-shadow: 0 0px 0px;
+    border: 0px;
+
+}
+.btn-default {
+    color: #844EF4;
+    background-color: #ffffff;
+    border-color: #844EF4;
+    border-radius: 4px;
+    width: 76px;
+    height: 40px;
+}
+.btn-danger{
+    color: #ffffff;
+    background-color: #844AE4;
+    border-color: #844AE4;
+    border-radius: 4px;
+    width: 76px;
+    height: 40px;
+}
+.btn-danger:focus{
+    background-color: #4D21A8;
+    border-color: #4D21A8;
+}
+.btn-success {
+    color: #ffffff;
+    background-color: #844AE4;
+    border-color: #844AE4;
+    border-radius: 4px;
+    width: 76px;
+    height: 40px;
+}
+.btn-success:focus{
+    background-color: #4D21A8;
+    border-color: #4D21A8;
+}
+.btn-default:focus{
+    background-color: #fff;
+    border-color: #4d21a8;  
+    color: #4d21a8;      
+}
+.asset-title{
+    font-family: inherit;
+    font-size: 24px;
+    color: #4E4E4E;
+    letter-spacing: 0.28px;
+    line-height: 28px;
+}
+.info{
+    font-family: inherit;
+    font-size: 14px;
+    color: #343C41;
+    letter-spacing: 0.2px;
+    line-height: 24px;
+}
+.info-actions{
+    font-family: inherit;
+    font-size: 14px;
+    color: #343C41;
+    letter-spacing: 0.2px;
+    line-height: 24px;
+    padding-left: 24px;
+}
+.asset-properties{
+    font-family: inherit;
+    font-size: 14px;
+    color: #848484;
+    line-height: 42px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 250px;
+}
+.plus-svg{
+    color: #fff;
+    fill: currentColor;
+}
+
+/***.asset-properties:hover, .asset-properties:hover span{  
+overflow: visible;
+position: relative;
+ make readable design 
+background-color: #FFFFFF;
+border: 1px solid #FFFFFF;
+border-radius: 4px;
+padding: 3px;
+/* compensate padding and border size to avoid jerking 
+margin-left: -4px;
+}
+***/
+
+