download page design

This commit is contained in:
Viicious 2018-06-24 18:06:36 +02:00
parent 2905047311
commit 5d94f865ce
10 changed files with 296 additions and 7 deletions

View File

@ -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
View File

@ -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",

View File

@ -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,

View File

@ -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-->

View File

@ -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')
}

View 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>

View 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;
}

View 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();
});
});

View 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() {
}
}

View File

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB