Make only icons clickable in file list

README.md

@@ -48,20 +48,3 @@ Pull requests are always welcome! Feel free to check out the list of ["good firs
 ## 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/

frontend/src/upload.js

@@ -47,7 +47,7 @@ $(document).ready(function() {
     //disable button for 3s
     $copyBtn.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(() => {
       $copyBtn.attr('disabled', false);
       $('#link').attr('disabled', false);
@@ -213,8 +213,10 @@ $(document).ready(function() {
     const row = document.createElement('tr');
     const name = 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 del = document.createElement('td');
+    const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', title: 'Delete' });
     const popupDiv = document.createElement('div');
     const $popupText = $('<div>', { class: 'popuptext' });
     const cellText = document.createTextNode(file.name);
@@ -228,13 +230,10 @@ $(document).ready(function() {
 
     name.appendChild(cellText);
 
-    // create delete button
-    del.innerHTML = '<span class="icon-cancel-1" title="Delete"></span>';
+    link.style.color = '#0A8DFF'; //font colour
 
-    link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>';
-    link.style.color = '#0A8DFF';
     //copy link to clipboard when icon clicked
-    $(link).click(function() {
+    $copyIcon.click(function() {
       const aux = document.createElement('input');
       aux.setAttribute('value', url);
       document.body.appendChild(aux);
@@ -243,7 +242,7 @@ $(document).ready(function() {
       document.body.removeChild(aux);
       link.innerHTML = 'Copied!';
       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);
     });
 
@@ -290,9 +289,20 @@ $(document).ready(function() {
     // create popup
     popupDiv.classList.add('popup');
     $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
     $popupText.find('.del-file').click(e => {
       FileSender.delete(file.fileId, file.deleteToken).then(() => {
@@ -307,17 +317,8 @@ $(document).ready(function() {
         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
-    del.addEventListener('click', function() {
+    $delIcon.click(function() {
       $popupText.addClass('show');
       $popupText.focus();
     });
@@ -333,7 +334,7 @@ $(document).ready(function() {
     $popupText.blur(() => {
       $popupText.removeClass('show');
     });
-    $('tbody').append(row); //add row to table
+
 
     toggleHeader();
   }

public/main.css

@@ -35,10 +35,6 @@ a {
   text-decoration: none;
 }
 
-span {
-  cursor: pointer;
-}
-
 /**   page-one    **/
 .title {
   font-size: 33px;
@@ -146,6 +142,10 @@ tbody {
   table-layout: fixed;
 }
 
+.icon-delete, .icon-copy, .icon-check {
+  cursor: pointer;
+}
+
 /* Popup container */
 .popup {
   position: relative;
@@ -166,7 +166,7 @@ tbody {
   z-index: 1;
   bottom: 20px;
   left: 50%;
-  margin-left: -96px;
+  margin-left: -88px;
   transition: opacity 0.5s;
   opacity: 0;
   outline: 0;

views/download.handlebars

@@ -1,60 +1,53 @@
-
-<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}}
-    <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 id="download">
+  {{#if filename}}
+  <div id="download-page-one">
+    <div class="title">
+      Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
     </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 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>
 
-    <a class="send-new" title="Try Firefox Send">
-      Try Firefox Send
-    </a>
-    {{else}}
+  <div id="download-progress">
     <div class="title">
-      This link has expired or never existed in the first place.
+      Downloading {{filename}} ({{filesize}})
     </div>
-
-    <div class="share-window">
-      <img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
+    <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="expired-description">
-      Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+    <div class="upload">
+      <div class="progress-text">{{filename}}</div>
     </div>
-    <a class="send-new" title="Try Firefox Send">
-      Try Firefox Send
-    </a>
-    {{/if}}
   </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>