[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