mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-24 00:36:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #312 from dewanhimanshu/feature-image-preview

Browse source 
file preview feature added
This commit is contained in:
RobinLinus 2021-06-04 19:11:50 +02:00 • committed by GitHub
commit 0aa27250a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/index.html
View file

@ -80,6 +80,10 @@
<h3>File Received</h3> <h3>File Received</h3>
<div class="font-subheading" id="fileName">Filename</div> <div class="font-subheading" id="fileName">Filename</div>
<div class="font-body2" id="fileSize"></div> <div class="font-body2" id="fileSize"></div>
<div class='preview' style="visibility: hidden;">
<img id='img-preview' src="">
</div>
<div>
<div class="row"> <div class="row">
<label for="autoDownload" class="grow">Ask to save each file before downloading</label> <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
<input type="checkbox" id="autoDownload" checked=""> <input type="checkbox" id="autoDownload" checked="">

7
client/scripts/ui.js
View file

@ -266,6 +266,11 @@ class ReceiveDialog extends Dialog {
$a.click() $a.click()
return return
} }
if(file.mime.split('/')[0] === 'image'){
console.log('the file is image');
this.$el.querySelector('.preview').style.visibility = 'inherit';
this.$el.querySelector("#img-preview").src = url;
}
this.$el.querySelector('#fileName').textContent = file.name; this.$el.querySelector('#fileName').textContent = file.name;
this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size); this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
@ -292,6 +297,8 @@ class ReceiveDialog extends Dialog {
} }
hide() { hide() {
this.$el.querySelector('.preview').style.visibility = 'hidden';
this.$el.querySelector("#img-preview").src = "";
super.hide(); super.hide();
this._dequeueFile(); this._dequeueFile();
} }

7
client/styles.css
View file

@ -716,6 +716,12 @@ x-dialog x-paper {
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color-secondary); background-color: var(--bg-color-secondary);
} }
/* Image Preview */
#img-preview{
max-width:100%;
max-height:100%;
}
/* Styles for users who prefer dark mode at the OS level */ /* Styles for users who prefer dark mode at the OS level */
@ -747,3 +753,4 @@ x-dialog x-paper {
overflow: hidden; overflow: hidden;
} }
} }