Fix Drag and Drop (hyperledger-archives#1245)

Fixed dragging and dropping when adding a file
j-blandford · Jun 12, 2017 · a81d181 · a81d181
1 parent 301a3eb
commit a81d181
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 111 deletions.
diff --git a/packages/composer-playground/src/app/add-file/add-file.component.html b/packages/composer-playground/src/app/add-file/add-file.component.html
@@ -12,7 +12,7 @@ <h1>Add a file</h1>
   </div>
   <section class="modal-body">
     <span>Upload a file from your computer...</span>
-    <file-importer *ngIf="!expandInput" (dragFileAccepted)="fileAccepted($event)" [expandInput]="expandInput"
+    <file-importer *ngIf="!currentFile" (dragFileAccepted)="fileAccepted($event)" [expandInput]="expandInput"
                    [ngClass]="{'expandFile': expandInput}" [svgName]="'#icon-CTO_JS_Upload'"></file-importer>
     <div class="chosen-file" *ngIf="expandInput && currentFile">
       <div class="file-info">

diff --git a/packages/composer-playground/src/app/add-file/add-file.component.scss b/packages/composer-playground/src/app/add-file/add-file.component.scss
@@ -1,120 +1,122 @@
 @import '../../assets/styles/base/_colors.scss';
 @import '../../assets/styles/base/_variables.scss';
 
-.import {
-  width: 660px;
-  height: 450px;
-
-  display: flex;
-  flex-direction: column;
-
-  .file-types-list {
-    max-height: 200px;
-    margin-top: 16px;
-
-    .file-types-list-item {
-      background-color: $third-highlight;
-      padding: $space-medium;
-      &:nth-child(even) {
-        background-color: $white;
-      }
-
-      .description {
-        font-style: italic;
-        padding-left: 2em;
-      }
-
-      label.radio-label {
-        font-weight: bold;
-
-        &::before {
-          top: 8px;
-        }
-
-        &::after {
-          top: 13px;
-        }
-      }
-    }
-  }
-
-  section {
-    font-size: 0.9em;
-
-    file-importer {
-      margin-top: $space-medium;
-    }
-
-    span {
-      color: $secondary-text;
-    }
-
-    .chosen-file {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      background-color: $third-highlight;
-      padding: $space-medium;
-
-      .title {
-        font-weight: bold;
-      }
+add-file-modal {
+    .import {
+        width: 700px;
+        height: 475px;
 
-      .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;
+        flex-direction: column;
+
+        .file-types-list {
+            max-height: 200px;
+            margin-top: 16px;
+
+            .file-types-list-item {
+                background-color: $third-highlight;
+                padding: $space-medium;
+                &:nth-child(even) {
+                    background-color: $white;
+                }
+
+                .description {
+                    font-style: italic;
+                    padding-left: 2em;
+                }
+
+                label.radio-label {
+                    font-weight: bold;
+
+                    &::before {
+                        top: 8px;
+                    }
+
+                    &::after {
+                        top: 13px;
+                    }
+                }
+            }
         }
 
-        .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;
+        section {
+            font-size: 0.9em;
+
+            file-importer {
+                margin-top: $space-medium;
+            }
+
+            span {
+                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;
+            }
         }
-      }
-    }
-
-    .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;
     }
-  }
 }
 
diff --git a/packages/composer-playground/src/app/add-file/add-file.component.ts b/packages/composer-playground/src/app/add-file/add-file.component.ts
@@ -5,7 +5,7 @@ import { BusinessNetworkDefinition, ModelFile } from 'composer-common';
 import { AlertService } from '../services/alert.service';
 
 @Component({
-    selector: 'add-file-model',
+    selector: 'add-file-modal',
     templateUrl: './add-file.component.html',
     styleUrls: ['./add-file.component.scss'.toString()]
 })