change icons

This commit is contained in:
Daniela Arcese 2017-07-19 10:21:56 -04:00
parent acfcae5dec
commit 5b1e2f38f4
17 changed files with 171 additions and 287 deletions

View File

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

View File

@ -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);
@ -229,10 +229,10 @@ $(document).ready(function() {
name.appendChild(cellText); name.appendChild(cellText);
// create delete button // create delete button
del.innerHTML = '<span class="icon-cancel-1" title="Delete"></span>'; del.innerHTML = '<img src="/resources/close-16.svg" class="icon-delete" title="Delete" />';
link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>'; link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />';
link.style.color = '#0A8DFF'; link.style.color = '#0A8DFF'; //font colour
//copy link to clipboard when icon clicked //copy link to clipboard when icon clicked
$(link).click(function() { $(link).click(function() {
const aux = document.createElement('input'); const aux = document.createElement('input');
@ -243,7 +243,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);
}); });

View File

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

View File

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

View File

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

View File

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

View File

@ -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"
}
]
}

View File

@ -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;} /* '' */

View File

@ -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="&#xe801;" 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="&#xe802;" 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="&#xf0c5;" 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

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -1,10 +1,4 @@
<div id="download">
<div class="send-logo">
<img src="/resources/send_logo.svg"/>
<img src="/resources/send_logo_type.svg"/>
</div>
<div class="all">
<div id="download">
{{#if filename}} {{#if filename}}
<div id="download-page-one"> <div id="download-page-one">
<div class="title"> <div class="title">
@ -56,5 +50,4 @@
Try Firefox Send Try Firefox Send
</a> </a>
{{/if}} {{/if}}
</div>
</div> </div>

View File

@ -1,9 +1,4 @@
<div class="send-logo"> <div id="page-one">
<img src="/resources/send_logo.svg"/>
<img src="/resources/send_logo_type.svg"/>
</div>
<div class="all">
<div id="page-one">
<div class="title"> <div class="title">
Private, Encrypted File Sharing Private, Encrypted File Sharing
</div> </div>
@ -39,9 +34,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div id="upload-progress"> <div id="upload-progress">
<div class="title" id="upload-filename"> <div class="title" id="upload-filename">
Uploading Your File Uploading Your File
</div> </div>
@ -59,9 +54,9 @@
<div class="progress-text"></div> <div class="progress-text"></div>
<div id="cancel-upload" title="Cancel Upload">Cancel Upload</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>
@ -78,9 +73,9 @@
Send another file Send another file
</a> </a>
</div> </div>
</div> </div>
<div id="upload-error"> <div id="upload-error">
<div class="title"> <div class="title">
Something went wrong! Something went wrong!
</div> </div>
@ -91,9 +86,9 @@
<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 id="unsupported-browser"> <div id="unsupported-browser">
<div class="title"> <div class="title">
Your browser is not supported. Your browser is not supported.
</div> </div>
@ -107,7 +102,4 @@
<div class="unsupported-description"> <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. 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>
</div> </div>

View File

@ -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>
<div class="send-logo">
<img src="/resources/send_logo.svg"/>
<img src="/resources/send_logo_type.svg"/>
</div>
<div class="all">
{{{body}}} {{{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>