diff --git a/src/components/app-home/app-home.component.html b/src/components/app-home/app-home.component.html index 4bdd77f1..def3cc9c 100644 --- a/src/components/app-home/app-home.component.html +++ b/src/components/app-home/app-home.component.html @@ -1,85 +1,41 @@
-
-
-
-
- - - - - - - - - - - - - - - - - - - - -

Drag & Drop

-
-
-
- -
-
-
-
-
- - -
-
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
-
-
-
-
+
+
+
+
+
+ -
- -
-
- -
+
-
- -
-
-
{{ files | json }}
-
diff --git a/src/components/app-home/app-home.component.ts b/src/components/app-home/app-home.component.ts index 4a53408e..52004aa7 100644 --- a/src/components/app-home/app-home.component.ts +++ b/src/components/app-home/app-home.component.ts @@ -31,18 +31,18 @@ export class AppHomeComponent { } onUploadOutput(output: UploadOutput): void { + console.log(output); + if (output.type === 'allAddedToQueue') { - if (this.formData.autoUpload) { - const event: UploadInput = { - type: 'uploadAll', - url: 'http://ngx-uploader.com/upload', - method: 'POST', - data: { foo: 'bar' }, - concurrency: this.formData.concurrency - }; + const event: UploadInput = { + type: 'uploadAll', + url: 'http://ngx-uploader.com/upload', + method: 'POST', + data: { foo: 'bar' }, + concurrency: this.formData.concurrency + }; - this.uploadInput.emit(event); - } + this.uploadInput.emit(event); } else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { this.files.push(output.file); } else if (output.type === 'uploading' && typeof output.file !== 'undefined') { diff --git a/src/styles/app.sass b/src/styles/app.sass index a3167853..cfbc0281 100644 --- a/src/styles/app.sass +++ b/src/styles/app.sass @@ -4,203 +4,132 @@ @import '../../node_modules/rash/rash' $blue: #1991EB +$purple: #65619C +$border: #EDEDED +$grey: #D7D8D7 +$green: #93E777 -html, body, .hero +html, body width: 100% - font-family: 'Open Sans', sans-serif - -webkit-font-smoothing: antialiased - background: $white + height: 100% -.drop-container - padding: 40px 0 - border-radius: 10px - margin-bottom: 10px - border: 1px solid #313D4F - margin-top: 20px - background: $white - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2) - - svg - width: 100px - margin: 20px auto - display: block - - h1 - display: block - color: $black - font-size: 22px - text-align: center - font-weight: 600 - - &.is-drop-over - background: lighten(#273142, 45) - -.upload-button, .start-upload-btn - width: 200px - display: block - margin: 10px auto - border-radius: 30px - background: $white - outline: none - font-size: 18px - text-align: center - padding: 10px 30px - cursor: pointer - color: $black - border: 1px solid $black - font-weight: 400 - transition: all 250ms ease - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2) - - input - display: none - - &:hover - background: $black - color: $white - - &.start-upload-btn - background: $white - padding: 10px - width: 200px - font-size: 18px - - &:hover - background: $black - color: $white - -.progress-bar-container - width: 100% - height: 8px - border-radius: 10px +body background: $white - margin: 30px 0 - position: relative - border: 1px solid $black - display: flex - justify-content: center - align-items: center - color: $black - font-size: 14px - text-align: center - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2) - - .bar - z-index: 1 - padding: 0 - margin: 0 - border-radius: 10px - position: absolute - top: 0 - left: 0 - height: 6px - background: #90DF39 - - &.green - background: #90DF39 - - span - z-index: 2 - -.verbose-data - color: $black - padding-bottom: 20px - - pre - code - background: $white - border: 1px solid #313D4F - box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2) - border-radius: 5px - font-size: 11px - color: $black - -.label - margin: 5px 10px 0 0 - color: $black - display: block - float: left - -.input-field - background: $white - width: 60px - height: 30px + font-family: 'Open Sans', sans-serif font-size: 12px - padding: 3px - text-align: center - border: 1px solid #313D4F - font-weight: $weight-semibold - color: $black - display: block - float: left - - &:hover, &:focus - border: 1px solid $black - -.checkbox - width: 25px - margin: 5px 10px 0 0 - position: relative - display: block - float: left - - label - cursor: pointer - position: absolute - width: 25px - height: 25px - top: 0 - left: 0 - background: $white - border: 1px solid #313D4F - border-radius: 4px - - &:after - opacity: 0 - content: '' - position: absolute - width: 12px - height: 7px - background: transparent - top: 7px - left: 6px - border: 3px solid $black - border-top: none - border-right: none - transform: rotate(-45deg) - - &:hover - &::after - opacity: 0.2 - - input[type="checkbox"]:checked + label:after - opacity: 1 - -.centered - display: flex - align-items: center - -.upload-file - - .button - background: $white - border: 1px solid $black - color: $black - outline: none - padding: 5x 20px - border-radius: 4px - display: block - font-size: 14px - - &:hover - background: $black - color: $white - -.small-button - padding: 5px 10px - font-size: 8px - -.flex-center - display: flex - align-items: center - justify-content: center + +.upload-popup + width: 100% + border-radius: 15px + box-shadow: 1px 2px 10px rgba($black, 0.2) + + .popup-container + padding: 20px + + h1 + color: $purple + font-size: 16px + font-weight: bold + margin: 5px 0 + + .drop-container + border: 3px dashed $border + width: 100% + padding: 50px 0 + border-radius: 10px + margin: 20px 0 0 0 + + h1 + width: 100% + display: block + color: $purple + font-weight: bold + font-size: 20px + text-align: center + + p + width: 100% + display: flex + justify-content: center + font-size: 14px + color: #CBCCD8 + font-weight: bold + + span + display: block + float: left + + &.is-drop-over + background: lighten(#273142, 20) + + .upload-button + display: block + float: left + text-decoration: underline + border: none + outline: none + cursor: pointer + margin-left: 4px + + input + display: none + + .uploads + + .upload-item + margin: 20px 0 + + .upload-item-top + font-size: 12px + font-weight: bold + display: inline-block + width: 100% + position: relative + + .filename + color: $purple + display: block + float: left + + .progress + color: lighten($purple, 20) + display: block + float: right + margin-right: 30px + + .x + display: block + width: 16px + height: 16px + color: $red + font-size: 16px + position: absolute + right: 0 + top: -5px + cursor: pointer + + .progress-bar-container + width: 100% + height: 5px + border-radius: 2px + background: $grey + margin: 3px 0 + position: relative + border: none + display: flex + justify-content: center + align-items: center + + .bar + z-index: 1 + padding: 0 + margin: 0 + border-radius: 2px + position: absolute + top: 0 + left: 0 + height: 6px + background: $purple + + &.green + background: $green