Skip to content

Commit

Permalink
feat(demo-page): redesign demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Aug 6, 2017
1 parent 72e1731 commit 207fe19
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 282 deletions.
110 changes: 33 additions & 77 deletions src/components/app-home/app-home.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,41 @@
<div class="hero is-fullheight">
<div class="container">
<div class="columns is-multiline">
<div class="column is-6 is-offset-3">
<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
<svg width="121px" height="61px" viewBox="0 0 121 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Source-Sans---Dark-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="11---Dark---Upload-Center" transform="translate(-429.000000, -354.000000)">
<g id="Step-3" transform="translate(280.000000, 171.000000)">
<g id="Item-1" transform="translate(134.000000, 183.000000)">
<g id="Illustration---Upload" transform="translate(15.000000, 0.000000)">
<path d="M53.96875,8 L69,23.0625 C69,23.0625 69,23.6105 69,24.139 L69,50 C69,51.1045 68.1045,52 67,52 L37,52 C35.8955,52 35,51.1045 35,50 L35,10 C35,8.8955 35.8955,8 37,8 L53.089,8 L53.96875,8 Z M37,50 L67,50 L67,26 L52.953,26 C51.8485,26 51,25.0645 51,23.96 L51,10 L37,10 L37,50 Z M66.9955,24 L53.089,10 L53,10 L53,24 L66.9955,24 Z M35,18 L35,24 L37,24 L37,18 L35,18 Z M35,20 L37,20 L37,22 L35,22 L35,20 Z" id="File-Icon" fill="#000000"></path>
<path d="M55.9994705,39.1247502 C55.9994705,39.7095768 55.5255495,40.183739 54.9406938,40.183739 C54.3558382,40.183739 53.8819172,39.7095768 53.8819172,39.1244855 L53.8819172,37.6156526 L49.8081808,41.6897163 C49.6011382,41.8964838 49.3300236,42 49.058909,42 C48.7880592,42 48.5169446,41.8964838 48.3101667,41.6897163 C47.8966111,41.2761811 47.8966111,40.6058412 48.3101667,40.1923061 L52.3841679,36.1179776 L50.8747306,36.1179776 C50.289875,36.1179776 49.8156892,35.6438154 49.8156892,35.0589888 C49.8156892,34.4741622 50.289875,34 50.8747306,34 L54.9409586,34 C55.2218693,34 55.4911306,34.1114586 55.6899656,34.310019 C55.8885359,34.5085794 56,34.778092 56,35.0589888 L55.9994705,39.1247502 Z" id="Arrow" fill="#000000" transform="translate(52.000000, 38.000000) rotate(-45.000000) translate(-52.000000, -38.000000) "></path>
<g id="Cloud">
<path d="M37.8972124,51.9980018 C37.8409423,51.9993317 37.7845693,52 37.7281043,52 L17.987462,52 C14.4453919,52 11.298506,49.388477 11.0929572,45.912962 C10.9391271,43.3222895 12.3448157,41.0574058 14.4666099,39.8975976 C14.9784927,39.6174193 15.3033924,39.0766098 15.2291296,38.5058279 C15.0633645,37.2430705 15.2211729,35.7040442 16.8881074,33.998214 C17.8681111,32.9934814 19.342758,32.4539751 20.7590556,32.4539751 C21.9141073,32.4552783 22.9776566,32.8084333 23.8608534,33.4052784 C24.4668909,33.813166 25.3129563,33.7193388 25.7160972,33.1159779 C27.3047906,30.7416292 30.1811477,29.2755796 33.3717957,29.682164 C33.9330957,29.7540002 34.4783528,29.8893726 35,30.0807311 L35,48.9925801 C35,50.6173799 36.2872703,51.9397978 37.8972124,51.9980018 Z" fill="#48556B"></path>
<path d="M114.399595,11.5509785 C114.648296,9.82515917 114.445588,7.95872988 113.486558,5.99688672 C112.011389,2.98381701 109.088307,0.764188992 105.713816,0.332315667 C101.615368,-0.189949749 97.9206324,1.69321882 95.8799256,4.74311493 C95.3620835,5.51814342 94.2752964,5.63866621 93.4968298,5.11472686 C92.3623467,4.34806802 90.9961974,3.89443363 89.5125115,3.8927597 C87.6932504,3.8927597 85.7990384,4.58576574 84.5402051,5.87636393 C82.398996,8.06753518 82.1962881,10.0444437 82.4092166,11.6664795 C82.5046085,12.3996598 82.0872687,13.0943398 81.4297454,13.4542342 C78.7042606,14.9440298 76.8986268,17.853316 77.0962245,21.1810841 C77.3602558,25.6454491 81.4024906,29 85.9523469,29 L111.309577,29 C115.50512,29 119.305468,26.1275402 119.969805,22.0565483 C120.59837,18.1931233 118.509967,14.7665935 115.300709,13.2433194 C114.653406,12.9353167 114.299093,12.2523542 114.399595,11.5509785 Z" fill="#8D9AB0"></path>
<path d="M17.4340999,9.04117149 C17.5464115,8.26180245 17.4548699,7.41893486 17.021778,6.53297897 C16.3556012,5.17229586 15.0355558,4.16992598 13.5116571,3.97489473 C11.6608241,3.73904299 9.99230513,4.58946993 9.07073492,5.96678361 C8.83688071,6.31678154 8.34609457,6.37120887 7.994544,6.13460119 C7.48221866,5.78838294 6.86527433,5.58352454 6.19525125,5.5827686 C5.37368449,5.5827686 4.51827041,5.89572571 3.94978929,6.47855164 C2.9828329,7.46807064 2.89129129,8.36082994 2.98744845,9.09333101 C3.03052685,9.42443057 2.84205882,9.73814362 2.54512552,9.90066965 C1.31431389,10.5734519 0.498901186,11.887267 0.58813503,13.3900659 C0.707369906,15.4061447 2.5328174,16.9210385 4.58750356,16.9210385 L16.0386672,16.9210385 C17.9333479,16.9210385 19.6495609,15.623854 19.9495712,13.7854199 C20.2334271,12.0407218 19.2903177,10.4933227 17.841037,9.80542184 C17.5487193,9.66632978 17.3887138,9.35790828 17.4340999,9.04117149 Z" fill="#606E84"></path>
<path d="M85.0358989,48.8634013 C85.2094109,47.6630144 85.0679867,46.3648268 84.398896,45.0002745 C83.3697086,42.9045456 81.3303487,41.360692 78.9760526,41.0603042 C76.1166704,40.6970445 73.538948,42.0068751 72.115199,44.1282184 C71.7539138,44.6672864 70.9956903,44.7511156 70.452574,44.3866916 C69.6610742,43.8534451 68.7079468,43.5379214 67.6728171,43.5367571 C66.4035652,43.5367571 65.0820219,44.0187748 64.2037661,44.9164453 C62.7098993,46.4405059 62.5684752,47.8155369 62.7170299,48.9437376 C62.7835825,49.4536983 62.4924151,49.9368802 62.033678,50.1872034 C60.1321769,51.2234249 58.8724325,53.2469675 59.0102913,55.5615836 C59.1944992,58.6667552 62.014663,61 65.1889814,61 L82.880072,61 C85.8071953,61 88.4586008,59.0020718 88.9220917,56.1705093 C89.3606254,53.4833192 87.9036002,51.1000097 85.6645827,50.0405024 C85.2129762,49.8262723 84.965781,49.3512404 85.0358989,48.8634013 Z" fill="#77859D"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h1>Drag & Drop</h1>
</div>
</div>
<div class="column is-10 is-offset-1">
<label class="upload-button">
<input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
or choose file(s)
</label>
</div>
<div class="column is-10 is-offset-1">
<div class="columns is-multiline">
<div class="column is-4 is-offset-4">
<div class="flex-center">
<label class="label">Concurrent Uploads</label>
<input class="input input-field" type="text" name="concurrency" [(ngModel)]="formData.concurrency">
</div>
</div>
<div class="column is-2 is-offset-5">
<div class="checkbox">
<input type="checkbox" value="None" id="autoUpload" name="autoUpload" [(ngModel)]="formData.autoUpload" />
<label for="autoUpload"></label>
</div>
<label class="label">Auto Upload</label>
</div>
<div class="column is-2 is-offset-5">
<div class="checkbox">
<input type="checkbox" value="None" id="verbose" name="verbose" [(ngModel)]="formData.verbose" />
<label for="verbose"></label>
</div>
<label class="label">Verbose</label>
</div>
</div>
</div>
<div class="column is-10 is-offset-1" *ngIf="files && files.length">
<div class="upload-file" *ngFor="let f of files; let i = index;">
<div class="columns">
<div class="column is-10">
<div class="progress-bar-container">
<div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-6 is-offset-3">
<div class="upload-popup">
<div class="popup-container">
<h1>My Uploads</h1>

<div class="uploads" *ngIf="files?.length">
<div class="upload-item" *ngFor="let f of files; let i = index;">
<div class="upload-item-top">
<span class="filename">{{ f.name }}</span>
<span class="progress">
{{ f.progress.data.percentage }}% at {{ f.progress.data.speedHuman }} eta {{ f.progress.data.eta }}s
</span>
<span class="x" (click)="removeFile(f.id)">x</span>
</div>
<div class="progress-bar-container">
<div class="bar" [style.width]="f.progress.data.percentage + '%'" [class.green]="f.progress.data.percentage === 100"></div>
</div>
</div>
</div>

<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
<h1>Drag & Drop</h1>
<p>
<span>your files here or</span>
<label class="upload-button">
<input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
browse
</label>
</p>
</div>
</div>
<div class="column is-1 centered">
<button type="button" class="button small-button" (click)="cancelUpload(f.id)">Cancel</button>
</div>
<div class="column is-1 centered">
<button type="button" class="button small-button" (click)="removeFile(f.id)">Remove</button>
</div>
</div>
</div>
</div>
<div class="column is-10 is-offset-1" *ngIf="files.length">
<button type="button" class="start-upload-btn" (click)="startUpload()">
Start Upload
</button>
</div>
<div class="column is-10 is-offset-1" *ngIf="formData.verbose">
<div class="verbose-data"><pre><code>{{ files | json }}</code></pre></div>
</div>
</div>
</div>
</div>
20 changes: 10 additions & 10 deletions src/components/app-home/app-home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
Loading

0 comments on commit 207fe19

Please sign in to comment.