Commit b7f89ad3 authored by Thomas Greiner's avatar Thomas Greiner

Issue 2747 - Added empty state for tables in options page

parent 6de95bb9
......@@ -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"
......
......@@ -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>
......
......@@ -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()
......
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment