6 files changed, 198 insertions, 67 deletions

diff --git a/assets/common/js/picwall.js b/assets/common/js/picwall.js
deleted file mode 100644
index 87a93fc3..00000000
--- a/assets/common/js/picwall.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Blazy from 'blazy';
-
-(() => {
-  const picwall = document.getElementById('picwall_container');
-  if (picwall != null) {
-    // Suppress ESLint error because that's how bLazy works
-    /* eslint-disable no-new */
-    new Blazy();
-  }
-})();
diff --git a/assets/common/js/thumbnails-update.js b/assets/common/js/thumbnails-update.js
new file mode 100644
index 00000000..b66ca3ae
--- /dev/null
+++ b/assets/common/js/thumbnails-update.js
@@ -0,0 +1,51 @@
+/**
+ * Script used in the thumbnails update page.
+ *
+ * It retrieves the list of link IDs to update, and execute AJAX requests
+ * to update their thumbnails, while updating the progress bar.
+ */
+
+/**
+ * Update the thumbnail of the link with the current i index in ids.
+ * It contains a recursive call to retrieve the thumb of the next link when it succeed.
+ * It also update the progress bar and other visual feedback elements.
+ *
+ * @param {array}  ids      List of LinkID to update
+ * @param {int}    i        Current index in ids
+ * @param {object} elements List of DOM element to avoid retrieving them at each iteration
+ */
+function updateThumb(ids, i, elements) {
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', '?do=ajax_thumb_update');
+  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+  xhr.responseType = 'json';
+  xhr.onload = () => {
+    if (xhr.status !== 200) {
+      alert(`An error occurred. Return code: ${xhr.status}`);
+    } else {
+      const { response } = xhr;
+      i += 1;
+      elements.progressBar.style.width = `${(i * 100) / ids.length}%`;
+      elements.current.innerHTML = i;
+      elements.title.innerHTML = response.title;
+      if (response.thumbnail !== false) {
+        elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
+      }
+      if (i < ids.length) {
+        updateThumb(ids, i, elements);
+      }
+    }
+  };
+  xhr.send(`id=${ids[i]}`);
+}
+
+(() => {
+  const ids = document.getElementsByName('ids')[0].value.split(',');
+  const elements = {
+    progressBar: document.querySelector('.progressbar > div'),
+    current: document.querySelector('.progress-current'),
+    thumbnail: document.querySelector('.thumbnail-placeholder'),
+    title: document.querySelector('.thumbnail-link-title'),
+  };
+  updateThumb(ids, 0, elements);
+})();
diff --git a/assets/common/js/thumbnails.js b/assets/common/js/thumbnails.js
new file mode 100644
index 00000000..c28322bb
--- /dev/null
+++ b/assets/common/js/thumbnails.js
@@ -0,0 +1,7 @@
+import Blazy from 'blazy';
+
+(() => {
+  // Suppress ESLint error because that's how bLazy works
+  /* eslint-disable no-new */
+  new Blazy();
+})();
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index 5cf037c2..99e03370 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -98,29 +98,6 @@ function htmlEntities(str) {
   return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`);
 }
 
-function activateFirefoxSocial(node) {
-  const loc = location.href;
-  const baseURL = loc.substring(0, loc.lastIndexOf('/') + 1);
-
-  const data = {
-    name: document.title,
-    description: document.getElementById('translation-delete-link').innerHTML,
-    author: 'Shaarli',
-    version: '1.0.0',
-
-    iconURL: `${baseURL}/images/favicon.ico`,
-    icon32URL: `${baseURL}/images/favicon.ico`,
-    icon64URL: `${baseURL}/images/favicon.ico`,
-
-    shareURL: `${baseURL}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi`,
-    homepageURL: baseURL,
-  };
-  node.setAttribute('data-service', JSON.stringify(data));
-
-  const activate = new CustomEvent('ActivateSocialFeature');
-  node.dispatchEvent(activate);
-}
-
 /**
  * Add the class 'hidden' to city options not attached to the current selected continent.
  *
@@ -433,16 +410,6 @@ function init(description) {
     });
   });
 
-  /**
-   * Firefox Social
-   */
-  const ffButton = document.getElementById('ff-social-button');
-  if (ffButton != null) {
-    ffButton.addEventListener('click', (event) => {
-      activateFirefoxSocial(event.target);
-    });
-  }
-
   const continent = document.getElementById('continent');
   const city = document.getElementById('city');
   if (continent != null && city != null) {
@@ -455,12 +422,12 @@ function init(description) {
   /**
    * Bulk actions
    */
-  const linkCheckboxes = document.querySelectorAll('.delete-checkbox');
+  const linkCheckboxes = document.querySelectorAll('.link-checkbox');
   const bar = document.getElementById('actions');
   [...linkCheckboxes].forEach((checkbox) => {
     checkbox.style.display = 'inline-block';
-    checkbox.addEventListener('click', () => {
-      const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+    checkbox.addEventListener('change', () => {
+      const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked');
       const count = [...linkCheckedCheckboxes].length;
       if (count === 0 && bar.classList.contains('open')) {
         bar.classList.toggle('open');
@@ -477,7 +444,7 @@ function init(description) {
       event.preventDefault();
 
       const links = [];
-      const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
+      const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked');
       [...linkCheckedCheckboxes].forEach((checkbox) => {
         links.push({
           id: checkbox.value,
@@ -500,6 +467,25 @@ function init(description) {
   }
 
   /**
+   * Select all button
+   */
+  const selectAllButtons = document.querySelectorAll('.select-all-button');
+  [...selectAllButtons].forEach((selectAllButton) => {
+    selectAllButton.addEventListener('click', (e) => {
+      e.preventDefault();
+      const checked = selectAllButton.classList.contains('filter-off');
+      [...selectAllButtons].forEach((selectAllButton2) => {
+        selectAllButton2.classList.toggle('filter-off');
+        selectAllButton2.classList.toggle('filter-on');
+      });
+      [...linkCheckboxes].forEach((linkCheckbox) => {
+        linkCheckbox.checked = checked;
+        linkCheckbox.dispatchEvent(new Event('change'));
+      });
+    });
+  });
+
+  /**
    * Tag list operations
    *
    * TODO: support error code in the backend for AJAX requests
@@ -581,7 +567,7 @@ function init(description) {
       event.preventDefault();
       const block = findParent(event.target, 'div', { class: 'tag-list-item' });
       const tag = block.getAttribute('data-tag');
-      const refreshedToken = document.getElementById('token');
+      const refreshedToken = document.getElementById('token').value;
 
       if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) {
         const xhr = new XMLHttpRequest();
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 09d5efbe..760d8d6a 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -146,6 +146,17 @@ body,
   background-color: $main-green;
 }
 
+.pure-alert-warning {
+  a {
+    color: $warning-text;
+    font-weight: bold;
+  }
+}
+
+.page-single-alert {
+  margin-top: 100px;
+}
+
 .anchor {
   &:target {
     padding-top: 40px;
@@ -370,8 +381,6 @@ body,
   box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset;
   background: $almost-white;
   padding: 5px 5px 3px 15px;
-  width: 20%;
-  height: 20px;
   color: $dark-grey;
 }
 
@@ -625,23 +634,22 @@ body,
 }
 
 .linklist-item {
+  position: relative;
   margin: 0 0 10px;
   box-shadow: 1px 1px 3px $light-grey;
   background: $almost-white;
 
   &.private {
-    .linklist-item-title {
-      &::before {
-        @extend %private-border;
-        margin-top: 3px;
-      }
-    }
-
-    .linklist-item-description {
-      &::before {
-        @extend %private-border;
-        height: 100%;
-      }
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: $orange;
+      width: 2px;
+      height: 100%;
+      content: '';
     }
   }
 }
@@ -732,7 +740,7 @@ body,
     font-size: 1em;
   }
 
-  .delete-checkbox {
+  .link-checkbox {
     display: none;
   }
 }
@@ -747,6 +755,14 @@ body,
   font-size: 1.3em;
 }
 
+.pin-link {
+  font-size: 1.3em;
+}
+
+.pinned-link {
+  color: $blue !important;
+}
+
 .linklist-item-description {
   position: relative;
   padding: 0 10px;
@@ -840,6 +856,10 @@ body,
   margin: 0 7px;
 }
 
+.ctrl-delete {
+  margin: 0 7px 0 0;
+}
+
 // 64em -> lg
 @media screen and (max-width: 64em) {
   .linklist-item-infos-url {
@@ -1543,3 +1563,40 @@ form {
 .pure-button-shaarli {
   background-color: $main-green;
 }
+
+.progressbar {
+  border-radius: 6px;
+  background-color: $main-green;
+  padding: 1px;
+
+  > div {
+    border-radius: 10px;
+    background: repeating-linear-gradient(
+      -45deg,
+      $almost-white,
+      $almost-white 6px,
+      $background-color 6px,
+      $background-color 12px
+    );
+    width: 0%;
+    height: 10px;
+  }
+}
+
+.thumbnails-page-container {
+  .progress-counter {
+    padding: 10px 0 20px;
+  }
+
+  .thumbnail-placeholder {
+    margin: 10px auto;
+    background-color: $light-grey;
+  }
+
+  .thumbnail-link-title {
+    padding-bottom: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css
index c919339b..87c440c8 100644
--- a/assets/vintage/css/shaarli.css
+++ b/assets/vintage/css/shaarli.css
@@ -701,8 +701,8 @@ a.bigbutton, #pageheader a.bigbutton {
     position: relative;
     display: table-cell;
     vertical-align: middle;
-    width: 90px;
-    height: 90px;
+    width: 120px;
+    height: 120px;
     overflow: hidden;
     text-align: center;
     float: left;
@@ -739,9 +739,9 @@ a.bigbutton, #pageheader a.bigbutton {
     position: absolute;
     top: 0;
     left: 0;
-    width: 90px;
+    width: 120px;
     font-weight: bold;
-    font-size: 8pt;
+    font-size: 9pt;
     color: #fff;
     text-align: left;
     background-color: transparent;
@@ -1210,3 +1210,43 @@ ul.errors {
     width: 13px;
     height: 13px;
 }
+
+.thumbnails-update-container {
+    padding: 20px 0;
+    width: 50%;
+    margin: auto;
+}
+
+.thumbnails-update-container .thumbnail-placeholder {
+    background: grey;
+    margin: auto;
+}
+
+.thumbnails-update-container .thumbnail-link-title {
+    width: 75%;
+    margin: auto;
+
+    padding-bottom: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.progressbar {
+    border-radius: 6px;
+    background-color: #111;
+    padding: 1px;
+}
+
+.progressbar > div {
+    border-radius: 10px;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f5f5f5,
+        #f5f5f5 6px,
+        #d0d0d0 6px,
+        #d0d0d0 12px
+    );
+    width: 0%;
+    height: 10px;
+}