download page design
This commit is contained in:
parent
2905047311
commit
5d94f865ce
4
bin/www
4
bin/www
@ -35,8 +35,8 @@ var credentials = {
|
||||
passphrase: 'titi'
|
||||
};
|
||||
|
||||
var server = https.createServer(credentials, app);
|
||||
//var server = http.createServer(app);
|
||||
//var server = https.createServer(credentials, app);
|
||||
var server = http.createServer(app);
|
||||
|
||||
|
||||
|
||||
|
10
package-lock.json
generated
10
package-lock.json
generated
@ -3639,6 +3639,16 @@
|
||||
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
|
||||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
|
||||
},
|
||||
"angular-6-clipboard": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-6-clipboard/-/angular-6-clipboard-1.0.0.tgz",
|
||||
"integrity": "sha512-g8g99MpGH/r3DdZ6I0R99dCIaPI/U68cvWFgc/GRlHqdo3Gm/wsdRD2cPDRWymnHADSC9THr5jXz00OmWenjWQ=="
|
||||
},
|
||||
"angular-clipboard": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-clipboard/-/angular-clipboard-1.6.2.tgz",
|
||||
"integrity": "sha512-T5kK6X6fFigLPd2szxW8ETEOLNW9z/9RqdlXtLAY7nakrI62BH8FGOxIes36tvAP/9numwokEWKVLy0WpNkB7w=="
|
||||
},
|
||||
"ansi-align": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
|
||||
|
@ -31,6 +31,7 @@ import { DropzoneModule } from 'ngx-dropzone-wrapper';
|
||||
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
|
||||
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { DownloadLinkComponent } from './download-link/download-link.component';
|
||||
|
||||
|
||||
const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
|
||||
@ -66,6 +67,11 @@ const appRoutes: Routes = [
|
||||
component: SignupComponent,
|
||||
data: { title: 'Sign Up' }
|
||||
},
|
||||
{
|
||||
path: 'download',
|
||||
component: DownloadLinkComponent ,
|
||||
data: { title: 'download' }
|
||||
},
|
||||
{ path: '',
|
||||
redirectTo: '/home',
|
||||
pathMatch: 'full'
|
||||
@ -79,7 +85,8 @@ const appRoutes: Routes = [
|
||||
LoginComponent,
|
||||
SignupComponent,
|
||||
MainComponent,
|
||||
BookComponent
|
||||
BookComponent,
|
||||
DownloadLinkComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
@ -71,7 +71,7 @@
|
||||
|
||||
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@ -151,6 +151,7 @@
|
||||
<a class="dropdown-item" href="{{file.data}}" download="{{ file.name.toString()}}">Download</a>
|
||||
<a class="dropdown-item" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)">Delete</a>
|
||||
<a class="dropdown-item" (click)="basicModal.show()" mdbWavesEffect>Preview</a>
|
||||
<a class="dropdown-item" (click)="linkModal.show()" mdbWavesEffect>Download Link</a>
|
||||
<div class="divider dropdown-divider"></div>
|
||||
<h6 class="dropdown-header">Rename</h6>
|
||||
<div class="d-print-inline-flex text-center">
|
||||
@ -163,7 +164,7 @@
|
||||
</div>
|
||||
<!--/Modal-->
|
||||
<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
|
||||
<div class="modal-dialog modal-notify info" role="document">
|
||||
<div class="modal-dialog modal-notify info modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
|
||||
@ -171,7 +172,7 @@
|
||||
</button>
|
||||
<h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
|
||||
</div>
|
||||
<div class="modal-body img-fluid">
|
||||
<div class="modal-body img-fluid text-center">
|
||||
<div *ngIf="file.type === ('image/jpeg')">
|
||||
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
|
||||
</div>
|
||||
@ -244,6 +245,120 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--/Modal-->
|
||||
|
||||
<!--/Modal-->
|
||||
<div mdbModal #linkModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-notify modal-info" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title w-100 white-text" id="myModalLabel">Share Link</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="linkModal.hide()">
|
||||
<span aria-hidden="true" class="white-text">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<div class="container-fluid">
|
||||
<div class="col-md-12">
|
||||
<div class="col-md-12">
|
||||
<i class="fa file-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div *ngIf="file.type === ('image/jpeg')">
|
||||
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
|
||||
</div>
|
||||
<div *ngIf="file.type === ('image/png')">
|
||||
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
|
||||
</div>
|
||||
<div *ngIf="file.type === ('application/pdf')">
|
||||
<!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
|
||||
<object [data]=file.urlSafe type="application/pdf"
|
||||
width="350" height="200" typemustmatch>
|
||||
</object>
|
||||
|
||||
</div>
|
||||
<div *ngIf="file.type === ('video/mp4')">
|
||||
<!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
|
||||
<vg-player style="height: 200px; width: 350px">
|
||||
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
|
||||
<source [src]=file.urlSafe type="video/mp4">
|
||||
</video>
|
||||
</vg-player>
|
||||
</div>
|
||||
<div *ngIf="file.type === ('text/plain')">
|
||||
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
|
||||
<div>{{test}}</div>
|
||||
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
|
||||
<object [data]=file.urlSafe type="text/plain"
|
||||
width="350" height="200" typemustmatch>
|
||||
</object>
|
||||
</div>
|
||||
<div *ngIf="file.type === ''">
|
||||
<i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
|
||||
<!--<object [data]=file.url type="text/plain"
|
||||
width="350" height="200" typemustmatch>
|
||||
</object>-->
|
||||
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
|
||||
<div>{{test}}</div>
|
||||
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
|
||||
</div>
|
||||
<div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
|
||||
<!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
|
||||
<vg-player style="height: 50px; width: 350px">
|
||||
<vg-controls>
|
||||
<vg-play-pause></vg-play-pause>
|
||||
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
|
||||
|
||||
<vg-scrub-bar>
|
||||
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
|
||||
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
|
||||
</vg-scrub-bar>
|
||||
|
||||
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
|
||||
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
|
||||
|
||||
<vg-mute></vg-mute>
|
||||
|
||||
<vg-fullscreen></vg-fullscreen>
|
||||
</vg-controls>
|
||||
|
||||
<audio #media [vgMedia]="media" id="myAudio" preload="auto">
|
||||
<source [src]=file.urlSafe type="audio/mp3">
|
||||
</audio>
|
||||
</vg-player>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong> {{file.name}} </strong></p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong> {{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<i class="fa unlock-alt" aria-hidden="true"></i>
|
||||
<i class="fa unlock" aria-hidden="true"></i>
|
||||
<i class="fa unlock-alt" aria-hidden="true"></i>
|
||||
<i class="fa unlock" aria-hidden="true"></i>
|
||||
<div class="md-form">
|
||||
<input value="http://localhost:3000/{{file.url}}" disabled="disabled" type="text" id="shareLink" class="form-control" mdbInputDirective>
|
||||
<label for="shareLink">Link</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-center">
|
||||
<a type="button" class="btn btn-secondary waves-light" (click)="copyLink(file.url)" mdbWavesEffect>Copy Link <i class="fa fa-copy ml-1" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Modal-->
|
||||
|
||||
<!--/Dropdown primary-->
|
||||
|
||||
|
||||
|
@ -15,7 +15,6 @@ import { DropzoneComponent , DropzoneDirective,
|
||||
DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
|
||||
|
||||
|
||||
|
||||
import { CompleterService } from '../typescripts/pro';
|
||||
|
||||
|
||||
@ -87,6 +86,24 @@ export class BookComponent implements OnInit, OnDestroy {
|
||||
this.sizeFile = 0;
|
||||
|
||||
}
|
||||
copyLink(val) {
|
||||
|
||||
let selBox = document.createElement('textarea');
|
||||
|
||||
selBox.style.position = 'fixed';
|
||||
selBox.style.left = '0';
|
||||
selBox.style.top = '0';
|
||||
selBox.style.opacity = '0';
|
||||
selBox.value = 'http://localhost:3000/' + val;
|
||||
|
||||
document.body.appendChild(selBox);
|
||||
selBox.focus();
|
||||
selBox.select();
|
||||
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(selBox);
|
||||
}
|
||||
|
||||
sendMessage() {
|
||||
this.messageEvent.emit('caca')
|
||||
}
|
||||
|
56
src/app/download-link/download-link.component.html
Normal file
56
src/app/download-link/download-link.component.html
Normal file
@ -0,0 +1,56 @@
|
||||
<!--Navbar-->
|
||||
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
|
||||
<logo>
|
||||
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
|
||||
</logo>
|
||||
<links>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
</ul>
|
||||
</links>
|
||||
</mdb-navbar>
|
||||
|
||||
<section class="view intro-2 mask rgba-gradient">
|
||||
<div class="container-fluid full-bg-img mask rgba-gradient">
|
||||
<!--Grid column-->
|
||||
<div class="col-lg-6 col-md-8">
|
||||
|
||||
<!--Card-->
|
||||
<div class="card text-white card-cascade narrower card-image">
|
||||
|
||||
<div class="text-white text-center align-items-center">
|
||||
<!--Card image-->
|
||||
<div class="card-header text-center">
|
||||
<h2 class="h2-responsive">File Download</h2>
|
||||
</div>
|
||||
<!--/Card image-->
|
||||
|
||||
|
||||
<!--Card content-->
|
||||
<div class="card-body text-center">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<i class="fa fa-file fa-4x" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Name</strong></p>
|
||||
<p>Lenght</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="hr-light mb-3 mt-4">
|
||||
|
||||
<button class="btn btn-outline-white wow fadeInleft waves-light">Download</button>
|
||||
|
||||
</div>
|
||||
<!--/.Card content-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/.Card-->
|
||||
|
||||
</div>
|
||||
<!--Grid column-->
|
||||
</div>
|
||||
</section>
|
44
src/app/download-link/download-link.component.scss
Normal file
44
src/app/download-link/download-link.component.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.container-fluid {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.intro-2 {
|
||||
background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.view {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.full-height,
|
||||
.full-height body,
|
||||
.full-height header,
|
||||
.full-height header .view {
|
||||
height: 1040px;
|
||||
}
|
||||
}
|
||||
|
||||
.rgba-gradient .full-bg-img {
|
||||
background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
|
||||
}
|
||||
.card {
|
||||
background-color: rgba(229, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
.md-form .prefix {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.md-form label {
|
||||
color: #ffffff;
|
||||
}
|
25
src/app/download-link/download-link.component.spec.ts
Normal file
25
src/app/download-link/download-link.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DownloadLinkComponent } from './download-link.component';
|
||||
|
||||
describe('DownloadLinkComponent', () => {
|
||||
let component: DownloadLinkComponent;
|
||||
let fixture: ComponentFixture<DownloadLinkComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DownloadLinkComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DownloadLinkComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
15
src/app/download-link/download-link.component.ts
Normal file
15
src/app/download-link/download-link.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-download-link',
|
||||
templateUrl: './download-link.component.html',
|
||||
styleUrls: ['./download-link.component.scss']
|
||||
})
|
||||
export class DownloadLinkComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Loading…
Reference in New Issue
Block a user