Merge pull request #242 from mozilla/ui
Make only icons clickable in file list
This commit is contained in:
Erica
GitHub
commit
6e7283664c
17
README.md
17
README.md
|
|
@ -48,20 +48,3 @@ Pull requests are always welcome! Feel free to check out the list of ["good firs
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[Mozilla Public License Version 2.0](LICENSE)
|
[Mozilla Public License Version 2.0](LICENSE)
|
||||||
|
|
||||||
**Entypo**
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Daniel Bruce
|
|
||||||
|
|
||||||
Author: Daniel Bruce
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://www.entypo.com
|
|
||||||
|
|
||||||
|
|
||||||
**Font Awesome**
|
|
||||||
|
|
||||||
Copyright (C) 2016 by Dave Gandy
|
|
||||||
|
|
||||||
Author: Dave Gandy
|
|
||||||
License: SIL ()
|
|
||||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ $(document).ready(function() {
|
||||||
//disable button for 3s
|
//disable button for 3s
|
||||||
$copyBtn.attr('disabled', true);
|
$copyBtn.attr('disabled', true);
|
||||||
$('#link').attr('disabled', true);
|
$('#link').attr('disabled', true);
|
||||||
$copyBtn.html('<span class="icon-check"></span>');
|
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
$copyBtn.attr('disabled', false);
|
$copyBtn.attr('disabled', false);
|
||||||
$('#link').attr('disabled', false);
|
$('#link').attr('disabled', false);
|
||||||
|
|
@ -213,8 +213,10 @@ $(document).ready(function() {
|
||||||
const row = document.createElement('tr');
|
const row = document.createElement('tr');
|
||||||
const name = document.createElement('td');
|
const name = document.createElement('td');
|
||||||
const link = document.createElement('td');
|
const link = document.createElement('td');
|
||||||
|
const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', title: 'Copy URL' });
|
||||||
const expiry = document.createElement('td');
|
const expiry = document.createElement('td');
|
||||||
const del = document.createElement('td');
|
const del = document.createElement('td');
|
||||||
|
const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', title: 'Delete' });
|
||||||
const popupDiv = document.createElement('div');
|
const popupDiv = document.createElement('div');
|
||||||
const $popupText = $('<div>', { class: 'popuptext' });
|
const $popupText = $('<div>', { class: 'popuptext' });
|
||||||
const cellText = document.createTextNode(file.name);
|
const cellText = document.createTextNode(file.name);
|
||||||
|
|
@ -228,13 +230,10 @@ $(document).ready(function() {
|
||||||
|
|
||||||
name.appendChild(cellText);
|
name.appendChild(cellText);
|
||||||
|
|
||||||
// create delete button
|
link.style.color = '#0A8DFF'; //font colour
|
||||||
del.innerHTML = '<span class="icon-cancel-1" title="Delete"></span>';
|
|
||||||
|
|
||||||
link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>';
|
|
||||||
link.style.color = '#0A8DFF';
|
|
||||||
//copy link to clipboard when icon clicked
|
//copy link to clipboard when icon clicked
|
||||||
$(link).click(function() {
|
$copyIcon.click(function() {
|
||||||
const aux = document.createElement('input');
|
const aux = document.createElement('input');
|
||||||
aux.setAttribute('value', url);
|
aux.setAttribute('value', url);
|
||||||
document.body.appendChild(aux);
|
document.body.appendChild(aux);
|
||||||
|
|
@ -243,7 +242,7 @@ $(document).ready(function() {
|
||||||
document.body.removeChild(aux);
|
document.body.removeChild(aux);
|
||||||
link.innerHTML = 'Copied!';
|
link.innerHTML = 'Copied!';
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>';
|
link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />';
|
||||||
}, 500);
|
}, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -290,9 +289,20 @@ $(document).ready(function() {
|
||||||
// create popup
|
// create popup
|
||||||
popupDiv.classList.add('popup');
|
popupDiv.classList.add('popup');
|
||||||
$popupText.html(
|
$popupText.html(
|
||||||
'<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
|
'<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// add data cells to table row
|
||||||
|
row.appendChild(name);
|
||||||
|
$(link).append($copyIcon);
|
||||||
|
row.appendChild(link);
|
||||||
|
row.appendChild(expiry);
|
||||||
|
$(popupDiv).append($popupText);
|
||||||
|
$(del).append($delIcon);
|
||||||
|
del.appendChild(popupDiv);
|
||||||
|
row.appendChild(del);
|
||||||
|
$('tbody').append(row); //add row to table
|
||||||
|
|
||||||
// delete file
|
// delete file
|
||||||
$popupText.find('.del-file').click(e => {
|
$popupText.find('.del-file').click(e => {
|
||||||
FileSender.delete(file.fileId, file.deleteToken).then(() => {
|
FileSender.delete(file.fileId, file.deleteToken).then(() => {
|
||||||
|
|
@ -307,17 +317,8 @@ $(document).ready(function() {
|
||||||
location.reload();
|
location.reload();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// add data cells to table row
|
|
||||||
row.appendChild(name);
|
|
||||||
row.appendChild(link);
|
|
||||||
row.appendChild(expiry);
|
|
||||||
$(popupDiv).append($popupText);
|
|
||||||
del.appendChild(popupDiv);
|
|
||||||
row.appendChild(del);
|
|
||||||
|
|
||||||
// show popup
|
// show popup
|
||||||
del.addEventListener('click', function() {
|
$delIcon.click(function() {
|
||||||
$popupText.addClass('show');
|
$popupText.addClass('show');
|
||||||
$popupText.focus();
|
$popupText.focus();
|
||||||
});
|
});
|
||||||
|
|
@ -333,7 +334,7 @@ $(document).ready(function() {
|
||||||
$popupText.blur(() => {
|
$popupText.blur(() => {
|
||||||
$popupText.removeClass('show');
|
$popupText.removeClass('show');
|
||||||
});
|
});
|
||||||
$('tbody').append(row); //add row to table
|
|
||||||
|
|
||||||
toggleHeader();
|
toggleHeader();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,10 +35,6 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** page-one **/
|
/** page-one **/
|
||||||
.title {
|
.title {
|
||||||
font-size: 33px;
|
font-size: 33px;
|
||||||
|
|
@ -146,6 +142,10 @@ tbody {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-delete, .icon-copy, .icon-check {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* Popup container */
|
/* Popup container */
|
||||||
.popup {
|
.popup {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -166,7 +166,7 @@ tbody {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -96px;
|
margin-left: -88px;
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="white" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>
|
||||||
|
After Width: | Height: | Size: 471 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#4A4A4A" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>
|
||||||
|
After Width: | Height: | Size: 499 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path class="icon-copy" fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
|
||||||
|
After Width: | Height: | Size: 629 B |
|
|
@ -1,28 +0,0 @@
|
||||||
{
|
|
||||||
"name": "",
|
|
||||||
"css_prefix_text": "icon-",
|
|
||||||
"css_use_suffix": false,
|
|
||||||
"hinting": true,
|
|
||||||
"units_per_em": 1000,
|
|
||||||
"ascent": 850,
|
|
||||||
"glyphs": [
|
|
||||||
{
|
|
||||||
"uid": "c8585e1e5b0467f28b70bce765d5840c",
|
|
||||||
"css": "docs",
|
|
||||||
"code": 61637,
|
|
||||||
"src": "fontawesome"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uid": "c709da589c923ba3c2ad48d9fc563e93",
|
|
||||||
"css": "cancel-1",
|
|
||||||
"code": 59393,
|
|
||||||
"src": "entypo"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uid": "14017aae737730faeda4a6fd8fb3a5f0",
|
|
||||||
"css": "check",
|
|
||||||
"code": 59394,
|
|
||||||
"src": "entypo"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'fontello';
|
|
||||||
src: url('../font/fontello.eot?60405031');
|
|
||||||
src: url('../font/fontello.eot?60405031#iefix') format('embedded-opentype'),
|
|
||||||
url('../font/fontello.woff2?60405031') format('woff2'),
|
|
||||||
url('../font/fontello.woff?60405031') format('woff'),
|
|
||||||
url('../font/fontello.ttf?60405031') format('truetype'),
|
|
||||||
url('../font/fontello.svg?60405031#fontello') format('svg');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
|
||||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
|
||||||
/*
|
|
||||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
||||||
@font-face {
|
|
||||||
font-family: 'fontello';
|
|
||||||
src: url('../font/fontello.svg?60405031#fontello') format('svg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
|
||||||
font-family: "fontello";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
speak: none;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: inherit;
|
|
||||||
width: 1em;
|
|
||||||
margin-right: .2em;
|
|
||||||
text-align: center;
|
|
||||||
/* opacity: .8; */
|
|
||||||
|
|
||||||
/* For safety - reset parent styles, that can break glyph codes*/
|
|
||||||
font-variant: normal;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
/* fix buttons height, for twitter bootstrap */
|
|
||||||
line-height: 1em;
|
|
||||||
|
|
||||||
/* Animation center compensation - margins should be symmetric */
|
|
||||||
/* remove if not needed */
|
|
||||||
margin-left: .2em;
|
|
||||||
|
|
||||||
/* you can be more comfortable with increased icons size */
|
|
||||||
/* font-size: 120%; */
|
|
||||||
|
|
||||||
/* Font smoothing. That was taken from TWBS */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
/* Uncomment for 3D effect */
|
|
||||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-cancel-1:before { content: '\e801'; font-size: 1.5em; font-weight: lighter;} /* '' */
|
|
||||||
.icon-check:before { content: '\e802'; font-size: 1.5em;} /* '' */
|
|
||||||
.icon-docs:before { content: '\f0c5'; font-weight: bolder;} /* '' */
|
|
||||||
Binary file not shown.
|
|
@ -1,16 +0,0 @@
|
||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
|
|
||||||
<defs>
|
|
||||||
<font id="fontello" horiz-adv-x="1000" >
|
|
||||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
|
||||||
<missing-glyph horiz-adv-x="1000" />
|
|
||||||
<glyph glyph-name="cancel-1" unicode="" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
|
|
||||||
|
|
||||||
<glyph glyph-name="check" unicode="" d="M249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
|
|
||||||
|
|
||||||
<glyph glyph-name="docs" unicode="" d="M946 636q23 0 38-16t16-38v-678q0-23-16-38t-38-16h-535q-23 0-38 16t-16 38v160h-303q-23 0-38 16t-16 38v375q0 22 11 49t27 42l228 228q15 16 42 27t49 11h232q23 0 38-16t16-38v-183q38 23 71 23h232z m-303-119l-167-167h167v167z m-357 214l-167-167h167v167z m109-361l176 176v233h-214v-233q0-22-15-37t-38-16h-233v-357h286v143q0 22 11 49t27 42z m534-449v643h-215v-232q0-22-15-38t-38-15h-232v-358h500z" horiz-adv-x="1000" />
|
|
||||||
</font>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 36 KiB |
|
|
@ -1,60 +1,53 @@
|
||||||
|
<div id="download">
|
||||||
<div class="send-logo">
|
{{#if filename}}
|
||||||
<img src="/resources/send_logo.svg"/>
|
<div id="download-page-one">
|
||||||
<img src="/resources/send_logo_type.svg"/>
|
|
||||||
</div>
|
|
||||||
<div class="all">
|
|
||||||
<div id="download">
|
|
||||||
{{#if filename}}
|
|
||||||
<div id="download-page-one">
|
|
||||||
<div class="title">
|
|
||||||
Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
|
||||||
</div>
|
|
||||||
<img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
|
|
||||||
<div>
|
|
||||||
<button id="download-btn" title="Download">Download</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="download-progress">
|
|
||||||
<div class="title">
|
|
||||||
Downloading {{filename}} ({{filesize}})
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
Please leave this tab open while we fetch your file and decrypt it.
|
|
||||||
</div>
|
|
||||||
<!-- progress bar here -->
|
|
||||||
<div class="progress-bar" id="dl-progress">
|
|
||||||
<div class="percentage">
|
|
||||||
<span class="percent-number"></span>
|
|
||||||
<span class="percent-sign">%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="upload">
|
|
||||||
<div class="progress-text">{{filename}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="send-new" title="Try Firefox Send">
|
|
||||||
Try Firefox Send
|
|
||||||
</a>
|
|
||||||
{{else}}
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
This link has expired or never existed in the first place.
|
Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
|
||||||
</div>
|
</div>
|
||||||
|
<div class="description">
|
||||||
<div class="share-window">
|
Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
||||||
<img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="expired-description">
|
<img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
|
||||||
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
<div>
|
||||||
|
<button id="download-btn" title="Download">Download</button>
|
||||||
</div>
|
</div>
|
||||||
<a class="send-new" title="Try Firefox Send">
|
|
||||||
Try Firefox Send
|
|
||||||
</a>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="download-progress">
|
||||||
|
<div class="title">
|
||||||
|
Downloading {{filename}} ({{filesize}})
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
Please leave this tab open while we fetch your file and decrypt it.
|
||||||
|
</div>
|
||||||
|
<!-- progress bar here -->
|
||||||
|
<div class="progress-bar" id="dl-progress">
|
||||||
|
<div class="percentage">
|
||||||
|
<span class="percent-number"></span>
|
||||||
|
<span class="percent-sign">%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upload">
|
||||||
|
<div class="progress-text">{{filename}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="send-new" title="Try Firefox Send">
|
||||||
|
Try Firefox Send
|
||||||
|
</a>
|
||||||
|
{{else}}
|
||||||
|
<div class="title">
|
||||||
|
This link has expired or never existed in the first place.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="share-window">
|
||||||
|
<img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
|
||||||
|
</div>
|
||||||
|
<div class="expired-description">
|
||||||
|
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
||||||
|
</div>
|
||||||
|
<a class="send-new" title="Try Firefox Send">
|
||||||
|
Try Firefox Send
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,113 +1,105 @@
|
||||||
<div class="send-logo">
|
<div id="page-one">
|
||||||
<img src="/resources/send_logo.svg"/>
|
<div class="title">
|
||||||
<img src="/resources/send_logo_type.svg"/>
|
Private, Encrypted File Sharing
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
|
||||||
|
</div>
|
||||||
|
<div class="upload-window" >
|
||||||
|
<div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
|
||||||
|
<div id="upload-text">
|
||||||
|
Drop your files here to start uploading
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="post" action="upload" enctype="multipart/form-data">
|
||||||
|
<label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
|
||||||
|
<input id="file-upload" type="file" name="fileUploaded" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="file-list">
|
||||||
|
<table id="uploaded-files">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<!-- htmllint attr-bans="false" -->
|
||||||
|
<th width="35%">File</th>
|
||||||
|
<th width="25%">Copy URL</th>
|
||||||
|
<th width="21%">Expires in</th>
|
||||||
|
<th width="12%">Delete</th>
|
||||||
|
<!-- htmllint tag-bans="$previous" -->
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="all">
|
|
||||||
<div id="page-one">
|
|
||||||
<div class="title">
|
|
||||||
Private, Encrypted File Sharing
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
|
|
||||||
</div>
|
|
||||||
<div class="upload-window" >
|
|
||||||
<div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
|
|
||||||
<div id="upload-text">
|
|
||||||
Drop your files here to start uploading
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form method="post" action="upload" enctype="multipart/form-data">
|
<div id="upload-progress">
|
||||||
<label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
|
<div class="title" id="upload-filename">
|
||||||
<input id="file-upload" type="file" name="fileUploaded" />
|
Uploading Your File
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<div class="description">
|
||||||
|
|
||||||
<div id="file-list">
|
</div>
|
||||||
<table id="uploaded-files">
|
<!-- progress bar here -->
|
||||||
<thead>
|
<div class="progress-bar" id="ul-progress">
|
||||||
<tr>
|
<div class="percentage">
|
||||||
<!-- htmllint attr-bans="false" -->
|
<span class="percent-number">0</span>
|
||||||
<th width="35%">File</th>
|
<span class="percent-sign">%</span>
|
||||||
<th width="25%">Copy URL</th>
|
|
||||||
<th width="21%">Expires in</th>
|
|
||||||
<th width="12%">Delete</th>
|
|
||||||
<!-- htmllint tag-bans="$previous" -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="upload">
|
||||||
<div id="upload-progress">
|
<div class="progress-text"></div>
|
||||||
<div class="title" id="upload-filename">
|
<div id="cancel-upload" title="Cancel Upload">Cancel Upload</div>
|
||||||
Uploading Your File
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- progress bar here -->
|
|
||||||
<div class="progress-bar" id="ul-progress">
|
|
||||||
<div class="percentage">
|
|
||||||
<span class="percent-number">0</span>
|
|
||||||
<span class="percent-sign">%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="upload">
|
|
||||||
<div class="progress-text"></div>
|
|
||||||
<div id="cancel-upload" title="Cancel Upload">Cancel Upload</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="share-link">
|
<div id="share-link">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
This encrypted link will expire after 1 download or in 24 hours
|
This encrypted link will expire after 1 download or in 24 hours
|
||||||
</div>
|
|
||||||
<div id="share-window">
|
|
||||||
<div id="copy-text">
|
|
||||||
Copy and share the link to send your file:
|
|
||||||
</div>
|
|
||||||
<div id="copy">
|
|
||||||
<input id="link" type="url" value="" readonly/>
|
|
||||||
<button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
|
|
||||||
</div>
|
|
||||||
<button id="delete-file" title="Delete file">Delete file</button>
|
|
||||||
<a class="send-new" title="Send another file">
|
|
||||||
Send another file
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="share-window">
|
||||||
<div id="upload-error">
|
<div id="copy-text">
|
||||||
<div class="title">
|
Copy and share the link to send your file:
|
||||||
Something went wrong!
|
|
||||||
</div>
|
</div>
|
||||||
<div class="expired-description">
|
<div id="copy">
|
||||||
There has been an error uploading the file.
|
<input id="link" type="url" value="" readonly/>
|
||||||
|
<button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
|
||||||
</div>
|
</div>
|
||||||
<img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
|
<button id="delete-file" title="Delete file">Delete file</button>
|
||||||
<a class="send-new" title="Send another file">
|
<a class="send-new" title="Send another file">
|
||||||
Send another file
|
Send another file
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="unsupported-browser">
|
<div id="upload-error">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
Your browser is not supported.
|
Something went wrong!
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
|
|
||||||
</div>
|
|
||||||
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
|
|
||||||
<img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
|
|
||||||
<div id="dl-firefox-text">Firefox<br><span>Free Download</span></div>
|
|
||||||
</a>
|
|
||||||
<div class="unsupported-description">
|
|
||||||
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="expired-description">
|
||||||
|
There has been an error uploading the file.
|
||||||
|
</div>
|
||||||
|
<img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
|
||||||
|
<a class="send-new" title="Send another file">
|
||||||
|
Send another file
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<div id="unsupported-browser">
|
||||||
|
<div class="title">
|
||||||
|
Your browser is not supported.
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
|
||||||
|
</div>
|
||||||
|
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
|
||||||
|
<img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
|
||||||
|
<div id="dl-firefox-text">Firefox<br><span>Free Download</span></div>
|
||||||
|
</a>
|
||||||
|
<div class="unsupported-description">
|
||||||
|
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,19 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<script src="/bundle.js"></script>
|
<script src="/bundle.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css" />
|
<link rel="stylesheet" type="text/css" href="/main.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/resources/fontello-24c5e6ad/css/fontello.css" />
|
|
||||||
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
|
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
|
||||||
{{#if trackerId}}
|
{{#if trackerId}}
|
||||||
{{> analytics trackerId=trackerId}}
|
{{> analytics trackerId=trackerId}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{{body}}}
|
<div class="send-logo">
|
||||||
|
<img src="/resources/send_logo.svg"/>
|
||||||
|
<img src="/resources/send_logo_type.svg"/>
|
||||||
|
</div>
|
||||||
|
<div class="all">
|
||||||
|
{{{body}}}
|
||||||
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="legal-links">
|
<div class="legal-links">
|
||||||
<a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
|
<a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue