[Pkg-mozext-commits] [adblock-plus] 04/87: Issue 2747 - Added empty state for tables in options page

David Prévot taffit at moszumanska.debian.org
Sat Apr 30 17:59:02 UTC 2016


This is an automated email from the git hooks/post-receive script.

taffit pushed a commit to branch master
in repository adblock-plus.

commit b7f89ad3de2d587d62a98e9b870ecb712ecde193
Author: Thomas Greiner <thomas at adblockplus.org>
Date:   Thu Dec 17 18:25:53 2015 +0100

    Issue 2747 - Added empty state for tables in options page
---
 locale/en-US/options.json | 20 +++++++++++++++++
 options.html              |  6 +++++-
 options.js                | 55 +++++++++++++++++++++++++++++++++++------------
 skin/options.css          | 15 +++++++------
 4 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/locale/en-US/options.json b/locale/en-US/options.json
index c6c4ccb..3abf9e6 100644
--- a/locale/en-US/options.json
+++ b/locale/en-US/options.json
@@ -103,6 +103,14 @@
     "description": "Acceptable ads descriptive name in General tab",
     "message": "Allow some non-intrusive advertising"
   },
+  "options_whitelisted_add": {
+    "description": "Button label for adding whitelisted website",
+    "message": "add website"
+  },
+  "options_whitelisted_empty": {
+    "description": "Text shown when list of whitelisted websites is empty",
+    "message": "There are no websites in your whitelist."
+  },
   "options_whitelisted_title": {
     "description": "Whitelisting option name in General tab",
     "message": "Whitelisted websites"
@@ -167,6 +175,10 @@
     "description": "Update button in Advanced tab",
     "message": "Update all blocking lists"
   },
+  "options_customFilters_empty": {
+    "description": "Text shown when list of custom filters is empty",
+    "message": "There are no custom filters."
+  },
   "options_customFilters_title": {
     "description": "Custom filters option name in Advanced tab",
     "message": "Blocking rules"
@@ -259,10 +271,18 @@
     "description": "Table headline in add language modal dialog",
     "message": "Added languages"
   },
+  "options_dialog_language_added_empty": {
+    "description": "Text shown when list of added languages is empty",
+    "message": "There are no languages."
+  },
   "options_dialog_language_other": {
     "description": "Table headline in add language modal dialog",
     "message": "Other languages"
   },
+  "options_dialog_language_other_empty": {
+    "description": "Text shown when list of available languages is empty",
+    "message": "There are no available languages."
+  },
   "options_language_en": {
     "description": "Language name shown in add language modal dialog",
     "message": "English"
diff --git a/options.html b/options.html
index 8610512..26c0a9c 100644
--- a/options.html
+++ b/options.html
@@ -188,9 +188,13 @@
                   </template>
                 </ul>
                 <div class="controls">
+                  <button data-action="edit-domain-exception">
+                    <span class="icon icon-add"></span>
+                    <span class="i18n_options_whitelisted_add"></span>
+                  </button>
                   <div>
                     <span class="icon icon-add" data-action="add-domain-exception"></span>
-                    <input type="text" id="whitelisting-textbox" />
+                    <input type="text" id="whitelisting-textbox" placeholder="www.example.com" />
                     <span class="icon icon-enter" data-action="add-domain-exception"></span>
                   </div>
                   <div>
diff --git a/options.js b/options.js
index aba03c8..08e346b 100644
--- a/options.js
+++ b/options.js
@@ -30,6 +30,20 @@
     this.items = [];
   }
 
+  Collection.prototype._setEmpty = function(table, text)
+  {
+    var placeholder = table.querySelector(".empty-placeholder");
+    if (text && !placeholder)
+    {
+      placeholder = document.createElement("li");
+      placeholder.className = "empty-placeholder";
+      placeholder.textContent = ext.i18n.getMessage(text);
+      table.appendChild(placeholder);
+    }
+    else if (placeholder)
+      table.removeChild(placeholder);
+  }
+
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
@@ -65,6 +79,7 @@
           control.checked = item.disabled == false;
         }
 
+        this._setEmpty(table, null);
         if (table.hasChildNodes())
           table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
         else
@@ -81,25 +96,27 @@
       return;
 
     this.items.splice(index, 1);
-    var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
-      var element = table.querySelector("[data-access='" + access + "']");
+      var element = table.childNodes[index];
       element.parentElement.removeChild(element);
+      if (this.items.length == 0)
+        this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
+    this.items = [];
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var template = table.querySelector("template");
       table.innerHTML = "";
       table.appendChild(template);
+      this._setEmpty(table, this.details[i].emptyText);
     }
-    this.items.length = 0;
   };
 
   function onToggleSubscriptionClick(e)
@@ -108,11 +125,10 @@
     var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
     if (!e.target.checked)
     {
-       ext.backgroundPage.sendMessage(
-        {
-          type: "subscriptions.remove",
-          url: subscriptionUrl
-        });
+      ext.backgroundPage.sendMessage({
+        type: "subscriptions.remove",
+        url: subscriptionUrl
+      });
     }
     else
       addEnableSubscription(subscriptionUrl);
@@ -146,44 +162,49 @@
   [
     {
       id: "blocking-languages-table",
+      emptyText: "options_dialog_language_added_empty",
       onClick: onToggleSubscriptionClick
     },
     {
-      id: "blocking-languages-dialog-table"
+      id: "blocking-languages-dialog-table",
+      emptyText: "options_dialog_language_added_empty"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
-      id: "all-lang-table", 
+      id: "all-lang-table",
+      emptyText: "options_dialog_language_other_empty",
       onClick: onAddLanguageSubscriptionClick
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
-      id: "acceptableads-table", 
+      id: "acceptableads-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.custom = new Collection(
   [
     {
-      id: "custom-list-table", 
+      id: "custom-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
-      id: "whitelisting-table", 
+      id: "whitelisting-table",
+      emptyText: "options_whitelisted_empty",
       onClick: onRemoveFilterClick
     }
   ]);
   collections.customFilters = new Collection(
   [
     {
-      id: "custom-filters-table"
+      id: "custom-filters-table",
+      emptyText: "options_customFilters_empty"
     }
   ]);
 
@@ -363,6 +384,7 @@
           break;
         case "cancel-domain-exception":
           E("whitelisting-textbox").value = "";
+          document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
           break;
         case "close-dialog":
           closeDialog();
@@ -371,6 +393,10 @@
           E("custom-filters").classList.add("mode-edit");
           editCustomFilters();
           break;
+        case "edit-domain-exception":
+          document.querySelector("#whitelisting .controls").classList.add("mode-edit");
+          E("whitelisting-textbox").focus();
+          break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
@@ -601,6 +627,7 @@
     }
 
     domain.value = "";
+    document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
   }
 
   function editCustomFilters()
diff --git a/skin/options.css b/skin/options.css
index 0d66bd2..3feb81f 100644
--- a/skin/options.css
+++ b/skin/options.css
@@ -344,12 +344,9 @@ div.button
   flex: 1;
 }
 
-.table.list li:nth-child(odd)
-{
-  background-color: #F5F5F5;
-}
-
-.table.cols li:nth-child(even)
+.table.list li:nth-child(odd),
+.table.cols li:nth-child(even),
+.table li.empty-placeholder
 {
   background-color: #F5F5F5;
 }
@@ -585,6 +582,12 @@ div.button
   -webkit-padding-start: 12px;
 }
 
+#whitelisting .controls.mode-edit > button,
+#whitelisting .controls:not(.mode-edit) > div
+{
+  display: none;
+}
+
 #whitelisting .controls input[type="text"]
 {
   border: 0px;

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-mozext/adblock-plus.git



More information about the Pkg-mozext-commits mailing list