Commit 52f1a8ee authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 5540 - implement notification

parent ff2434ce
......@@ -165,10 +165,6 @@
"description": "Duplicate hostname warning of whitelist text input",
"message": "Website is already whitelisted"
},
"options_whitelist_description": {
"description": "Section description in whitelisted tab",
"message": "You've turned off ad blocking on these websites. You will see ads on these websites."
},
"options_button_add": {
"description": "Add button label",
"message": "add"
......@@ -423,6 +419,20 @@
"description": "Text shown when list of available languages is empty",
"message": "There are no available languages."
},
"options_whitelist_notification": {
"description": "Notification that is shown after a new website is whitelisted",
"message": "\"$website$\" has been whitelisted.",
"placeholders": {
"website": {
"content": "$1",
"example": "example.com"
}
}
},
"options_notification_hide": {
"description": "Hidden text attached to the close button for screen readers of Notification",
"message": "Close notification"
},
"options_language_en": {
"description": "Language name shown in add language modal dialog",
"message": "English"
......
......@@ -382,5 +382,12 @@
<!-- Placeholder element to determine when to wrap focus around -->
<span class="focus-last" tabindex="0"></span>
</div>
<!-- Notification -->
<div id="notification" aria-hidden="true" aria-live="polite">
<strong id="notification-text"></strong>
<button id="hide-notification" data-action="hide-notification">
<span class="i18n_options_notification_hide sr-only"></span>
</button>
</div>
</body>
</html>
......@@ -432,6 +432,11 @@
{
filter.title = match[1];
collections.whitelist.addItem(filter);
if (isCustomFiltersLoaded)
{
let text = getMessage("options_whitelist_notification", [filter.title]);
showNotification(text);
}
}
else
{
......@@ -585,6 +590,9 @@
case "edit-custom-filters":
setCustomFiltersView("write");
break;
case "hide-notification":
hideNotification();
break;
case "import-subscription": {
let url = E("blockingList-textbox").value;
addEnableSubscription(url);
......@@ -975,6 +983,19 @@
focusedBeforeDialog.focus();
}
function showNotification(text)
{
E("notification").setAttribute("aria-hidden", false);
E("notification-text").textContent = text;
setTimeout(hideNotification, 3000);
}
function hideNotification()
{
E("notification").setAttribute("aria-hidden", true);
E("notification-text").textContent = "";
}
function setAcceptableAds()
{
let option = "none";
......
<svg id="5dbfc7a9-72c4-4898-881d-75bf73a9a059" data-name="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>delete</title><polygon points="42.71 6.71 41.29 5.29 24 22.59 6.71 5.29 5.29 6.71 22.59 24 5.29 41.29 6.71 42.71 24 25.41 41.29 42.71 42.71 41.29 25.41 24 42.71 6.71"/></svg>
\ No newline at end of file
......@@ -515,6 +515,22 @@ button[role="checkbox"],
vertical-align: top;
}
/*
Used for translatable screen reader only conten.
e.g.: Use instead of aria-label to avoid complex attribute value translation
*/
.sr-only
{
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0px;
border: 0px;
}
/*
General tab content
*/
......@@ -1094,3 +1110,54 @@ body:not([data-dialog]) #dialog
{
display: none;
}
/*
Notification
*/
#notification
{
position: fixed;
top: 0rem;
left: 0rem;
display: flex;
padding: 1rem 1.9rem;
width: 100%;
box-sizing: border-box;
opacity: 0.8;
font-size: 1rem;
color: #099CD0;
background-color: #E1F2FA;
}
#notification strong
{
flex: 1;
text-align: center;
}
#hide-notification
{
border: 0rem;
padding: 0rem;
margin: 0rem 1rem;
background-color: transparent;
cursor: pointer;
}
#hide-notification::after
{
content: "";
display: block;
height: 1rem;
width: 1rem;
border: 0rem;
background-color: #099DD1;
-webkit-mask: url(delete.svg);
mask: url(delete.svg);
}
#hide-notification:hover::after
{
background-color: #5CBCE1;
}
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