Commit 2e25900c authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 5482 - Sidebar and about ABP dialog

parent 52f1a8ee
......@@ -3,13 +3,9 @@
"description": "Options page title",
"message": "Adblock Plus Options"
},
"options_page_header_1": {
"options_page_title": {
"description": "Page title in navigation sidebar",
"message": "Options"
},
"options_page_header_2": {
"description": "Name of extension in navigation sidebar",
"message": "Adblock <strong>Plus</strong>"
"message": "Settings"
},
"options_tab_general": {
"description": "Sidebar tab label",
......@@ -27,17 +23,13 @@
"description": "Sidebar tab label",
"message": "Help"
},
"options_version": {
"description": "Version label in navigation sidebar",
"message": "Version"
},
"options_tab_share": {
"description": "Share button in navigation sidebar",
"message": "Share"
"options_footer_contribute": {
"description": "Sidebar button label",
"message": "Contribute"
},
"options_tab_contribute": {
"description": "Button in navigation sidebar to support Adblock Plus",
"message": "Support us"
"options_footer_about": {
"description": "Sidebar button label",
"message": "About Adblock Plus"
},
"options_control_remove_title": {
"description": "Title of remove controls",
......@@ -367,6 +359,24 @@
"description": "Email label in Help tab",
"message": "Email:"
},
"options_dialog_about_title": {
"description": "Title of about ABP dialog",
"message": "About Adblock Plus"
},
"options_dialog_about_version": {
"description": "Version information in 'about Adblock Plus' modal dialog ",
"message": "Version number $version$",
"placeholders": {
"version": {
"content": "$1",
"example": "2.6.7"
}
}
},
"options_dialog_about_copyright": {
"description": "Copyright information in 'about Adblock Plus' modal dialog ",
"message": "Copyright © 2017 eyeo GmbH. Adblock Plus is a registered ® trademark of eyeo GmbH."
},
"options_dialog_predefined_confirm": {
"description": "Confirming to add a predefined subscription when asked in a dialog",
"message": "Yes, use this filter list"
......
This diff is collapsed.
......@@ -531,14 +531,6 @@
});
}
function openDocLink(id)
{
getDocLink(id, (link) =>
{
location.href = link;
});
}
function switchTab(id)
{
location.hash = id;
......@@ -610,11 +602,6 @@
openDialog(dialog);
break;
}
case "open-doclink": {
let doclink = findParentData(element, "doclink", false);
openDocLink(doclink);
break;
}
case "remove-filter":
ext.backgroundPage.sendMessage({
type: "filters.remove",
......@@ -651,8 +638,7 @@
});
break;
case "switch-tab":
let tabId = findParentData(element, "tab", false);
switchTab(tabId);
switchTab(element.getAttribute("href").substr(1));
break;
case "toggle-disable-subscription":
ext.backgroundPage.sendMessage({
......@@ -765,10 +751,12 @@
if (element.getAttribute("role") == "tab")
{
let parent = element.parentElement;
if (key == "ArrowLeft" || key == "ArrowUp")
element = element.previousElementSibling || container.lastElementChild;
parent = parent.previousElementSibling || container.lastElementChild;
else if (key == "ArrowRight" || key == "ArrowDown")
element = element.nextElementSibling || container.firstElementChild;
parent = parent.nextElementSibling || container.firstElementChild;
element = parent.firstElementChild;
}
let actions = container.getAttribute("data-action").split(",");
......@@ -792,7 +780,7 @@
previousTab.removeAttribute("aria-selected");
previousTab.setAttribute("tabindex", -1);
let tab = tabList.querySelector("li[data-tab='" + tabId + "']");
let tab = tabList.querySelector("a[href='#" + tabId + "']");
tab.setAttribute("aria-selected", true);
tab.setAttribute("tabindex", 0);
......@@ -834,14 +822,10 @@
},
(addonVersion) =>
{
E("abp-version").textContent = addonVersion;
});
getDocLink("releases", (link) =>
{
E("link-version").setAttribute("href", link);
E("abp-version").textContent = getMessage("options_dialog_about_version",
[addonVersion]);
});
updateShareLink();
updateTooltips();
// Initialize interactive UI elements
......@@ -855,6 +839,11 @@
E("whitelisting-add-button").disabled = !e.target.value;
}, false);
getDocLink("contribute", (link) =>
{
E("contribute").href = link;
});
getDocLink("acceptable_ads_criteria", (link) =>
{
setLinks("enable-aa-description", link);
......@@ -1139,7 +1128,6 @@
case "added":
filter[timestampUI] = Date.now();
updateFilter(filter);
updateShareLink();
break;
case "loaded":
populateLists();
......@@ -1152,7 +1140,6 @@
removeCustomFilter(filter.text);
delete filtersMap[filter.text];
updateShareLink();
break;
}
}
......@@ -1216,7 +1203,6 @@
break;
}
updateShareLink();
}
function hidePref(key, value)
......@@ -1277,30 +1263,6 @@
checkbox.setAttribute("aria-checked", value);
}
function updateShareLink()
{
let shareResources = [
"https://facebook.com/plugins/like.php?",
"https://platform.twitter.com/widgets/",
"https://apis.google.com/se/0/_/+1/fastbutton?"
];
let isAnyBlocked = false;
let checksRemaining = shareResources.length;
function onResult(isBlocked)
{
isAnyBlocked |= isBlocked;
if (!--checksRemaining)
{
// Hide the share tab if a script on the share page would be blocked
E("tab-share").hidden = isAnyBlocked;
}
}
for (let sharedResource of shareResources)
checkShareResource(sharedResource, onResult);
}
function updateTooltips()
{
let anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]");
......
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:#d2d2d2;}.cls-2{fill:#fff;}.cls-3{fill:#c70d2c;}</style></defs><title>ABP_Logo_Outline</title><polygon class="cls-1" points="146.45 500 0 353.55 0 146.45 146.45 0 353.55 0 500 146.45 500 353.55 353.55 500 146.45 500"/><polygon class="cls-2" points="149.35 493 7 350.65 7 149.35 149.35 7 350.65 7 493 149.35 493 350.65 350.65 493 149.35 493"/><polygon class="cls-3" points="158.04 472 28 341.95 28 158.04 158.04 28 341.95 28 472 158.04 472 341.95 341.95 472 158.04 472"/><g id="ABP"><path class="cls-2" d="M134.8,293.5H88.35L79,335.15H44L91.62,160h41.32l47.62,175.18H144.14Zm-7-30.9-3.5-16.12Q121,233.32,118,218.54t-6.07-28.48H111q-2.8,14-5.72,28.61t-6.19,27.81L95.35,262.6Z"/><path class="cls-2" d="M201.8,160h52.06a113.44,113.44,0,0,1,22.06,2,48.29,48.29,0,0,1,17.74,7.12,35.79,35.79,0,0,1,11.91,13.43q4.32,8.33,4.32,21a47.44,47.44,0,0,1-1.52,11.82,41.84,41.84,0,0,1-4.55,11,34.88,34.88,0,0,1-7.94,9.13,31.47,31.47,0,0,1-11.44,5.91v1.07q16.33,3.5,24.63,13.43t8.29,27.67q0,13.44-4.55,23.11a43.46,43.46,0,0,1-12.61,16,54.46,54.46,0,0,1-18.79,9.4,83.18,83.18,0,0,1-23.11,3.09H201.8Zm50.42,70.66q12.61,0,18.32-5.78t5.72-15.72q0-9.94-5.83-14.24t-18-4.3H236.11v40Zm3.27,73.89q28.24,0,28.24-23.91,0-11.55-7-16.79t-21.24-5.24H236.11v45.94Z"/><path class="cls-2" d="M340.92,160h55.56a92.07,92.07,0,0,1,23.23,2.82,48.89,48.89,0,0,1,18.91,9.4,45,45,0,0,1,12.72,17.46Q456,200.54,456,216.39q0,15.31-4.78,26.6a51,51,0,0,1-13,18.54,52.67,52.67,0,0,1-18.91,10.75,73.46,73.46,0,0,1-22.88,3.49H375.24v59.38H340.92Zm53.46,84.36q28,0,28-27.94,0-13.7-7.12-19.35t-20.89-5.64H375.24v52.93Z"/></g></svg>
\ No newline at end of file
......@@ -38,34 +38,39 @@
@font-face
{
font-family: "Source Sans Pro";
src: url(fonts/SourceSansPro-Semibold.woff);
src: url(fonts/SourceSansPro-bold.woff);
/* local("Ø") forces using no local font called Source Sans Pro */
src: local("Ø"), url(fonts/SourceSansPro-Semibold.woff) format("woff");
font-weight: 600;
src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff");
font-weight: 700;
font-style: normal;
}
html
{
font-size: 20px;
}
body
{
background-color: #F5F5F5;
display: flex;
margin: 20px 10px;
margin: 1.2rem 0.3rem;
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
font-weight: 300;
font-size: 1rem;
color: #494949;
}
h1
{
font-size: 24px;
line-height: 1em;
font-size: 3rem;
font-weight: 300;
}
h2
{
font-size: 16px;
font-weight: 600;
font-size: 1.375rem;
font-weight: 700;
}
p
......@@ -73,31 +78,65 @@ p
font-weight: 300;
}
hr
[aria-hidden="true"]
{
display: none !important;
}
input[type="text"],
textarea,
main
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
Buttons and links
*/
button,
.button
{
padding: 0.8rem 1.2rem;
font-size: 1.125rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
}
button.primary,
.button.primary
{
background-color: #CDCDCD;
border: 0px;
height: 1px;
margin: 0px;
color: #FFF;
background-color: #0A9DD1;
}
[aria-hidden="true"]
button.primary:hover,
.button.primary:hover
{
display: none !important;
box-shadow: inset 0 0 0 2px #005D80;
}
input[type="search"]::-webkit-search-cancel-button
button.primary[disabled]
{
display: none;
background-color: #5CBCE1;
}
input[type="text"],
input[type="search"],
textarea
button.secondary,
.button.secondary
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #0A9DD1;
color: #099CD0;
}
button.secondary:hover,
.button.secondary:hover
{
box-shadow: inset 0 0 0 4px #099CD0;
}
button[role="checkbox"],
......@@ -109,7 +148,7 @@ button[role="checkbox"],
-moz-margin-end: 20px;
-webkit-margin-end: 20px;
padding: 0px;
border: none;
border: 0px;
background-color: transparent;
background-position: -51px 0px;
}
......@@ -120,63 +159,100 @@ button[role="checkbox"][aria-checked="true"],
background-position: -68px 0px;
}
#nav-sidebar
button.link
{
border: 0px;
background-color: transparent;
font-weight: 300;
font-family: inherit;
color: #099CD0;
text-transform: none;
padding: 0.2rem;
}
/*
Sidebar
*/
#sidebar,
#sidebar .fixed,
[role="tablist"]
{
width: 13.2rem;
}
#sidebar
{
min-width: 198px;
flex-shrink: 0;
}
#nav-sidebar .fixed
#sidebar .fixed
{
top: 40px;
bottom: 2px;
top: 1.2rem;
bottom: 0rem;
height: auto;
position: fixed;
}
#page-title
#sidebar header
{
padding: 0px 20px;
text-align: right;
margin-right: 2rem;
}
#page-title p
html[dir="rtl"] #sidebar header
{
margin: 0px;
font-size: 16px;
line-height: 1em;
margin-left: 2rem;
}
#page-title h1
#sidebar header h1
{
margin: 0px;
padding: 8px 0px 16px 0px;
margin: 0rem;
font-size: 1.5rem;
}
.tabs li
#sidebar header h1 strong
{
cursor: pointer;
display: flex;
font-weight: 700;
}
.tabs li a
#sidebar header p
{
flex: 1;
color: inherit;
text-decoration: none;
margin: 0rem;
font-size: 2.4rem;
}
.tabs.vertical
html[dir="rtl"] #sidebar header
{
text-align: left;
}
#sidebar-logo
{
width: 3rem;
margin-bottom: 0.7rem;
}
#sidebar nav,
#sidebar footer
{
margin: 1.4rem 0rem;
}
[role="tablist"]
{
list-style: none;
margin: 0px;
position: relative;
padding: 0px;
width: 198px;
font-size: 1.25rem;
}
.tabs.vertical li
[role="tablist"] li a
{
height: 46px;
display: flex;
margin-top: -1px;
padding: 1rem 0.8rem;
-moz-margin-end: -1px;
-webkit-margin-end: -1px;
-moz-margin-start: -1px;
......@@ -184,144 +260,59 @@ button[role="checkbox"][aria-checked="true"],
border-color: #CDCDCD transparent;
border-style: solid;
border-width: 1px;
font-size: 16px;
font-weight: 300;
line-height: 1em;
}
.tabs.vertical li a,
.tabs.vertical li span,
.tabs.vertical li::after
{
margin: auto 20px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.tabs li[role="tab"]:focus
[role="tablist"] a[role="tab"]:focus
{
outline: none;
text-shadow: 0px 0px 1px #888;
}
.tabs li[role="tab"][aria-selected]
li a[role="tab"][aria-selected]
{
border-radius: 3px 0px 0px 3px;
-moz-border-start-color: #CDCDCD;
-webkit-border-start-color: #CDCDCD;
font-weight: 600;
font-weight: 700;
background-color: #FFF;
}
html[dir="rtl"] .tabs li[role="tab"][aria-selected]
{
border-radius: 0px 3px 3px 0px;
}
.tabs.vertical.bottom
#sidebar footer
{
bottom: 0px;
position: absolute;
}
.tabs.vertical.bottom li:first-child
{
border-top: 0px;
}
#tab-contribute
{
border-bottom: none;
}
#nav-sidebar ul li span
{
width: 100%;
}
#nav-sidebar ul li::after
{
content: "";
min-width: 14px;
height: 14px;
background-image: url(options-sprite.png);
}
#tab-general::after
#sidebar footer p
{
background-position: -16px -18px;
}
#tab-advanced::after
{
background-position: -46px -18px;
}
#tab-help::after
{
background-position: -1px -18px;
}
#tab-share::after
{
background-position: -61px -18px;
display: flex;
justify-content: center;
margin: 1.2rem 0rem;
}
#tab-contribute::after
main
{
background-position: -31px -18px;
background-color: #FFFFFF;
border: 1px solid #CDCDCD;
max-width: 46.3rem;
padding: 0px 2rem 1.4rem 2rem;
}
#tab-share:lang(zh),
#tab-share[hidden]
main > div
{
display: none;
}
#tab-share:lang(zh) + li,
#tab-share[hidden] + li
{
border-top: none;
}
#content
{
background-color: #FFFFFF;
border: 1px solid #CDCDCD;
border-radius: 8px;
width: 840px;
padding: 0px 60px 40px 60px;
}
#content h1
main h1
{
border-bottom: 1px solid #CDCDCD;
margin: 0px 0px 24px 0px;
padding: 40px 0px 16px 0px;
}
#link-version
{
display: flex;
margin: 12px 20px;
color: #3A7BA6;
text-decoration: none;
}
#abp-version
{
-moz-margin-start: 5px;
-webkit-margin-start: 5px;
}
#content-wrapper
{
position: relative;
}
#content-wrapper > div
{
display: none;
}
body[data-tab|="general"] #content-general,
body[data-tab|="advanced"] #content-advanced,
body[data-tab|="whitelist"] #content-whitelist,
......@@ -500,7 +491,7 @@ button[role="checkbox"],
#dialog-close
{
display: flex;
border: none;
border: 0px;
padding: 0px;
align-items: center;
background: none;
......@@ -846,7 +837,7 @@ div.context-menu > div a::before
div.context-menu > div a:last-child
{
border: none;
border: 0px;
}
.context-menu .update-subscription::before
......@@ -1043,8 +1034,7 @@ body[data-dialog] #dialog-background
margin: 0px;
}
#dialog input[type="text"],
#dialog input[type="search"]
#dialog input[type="text"]
{
font-size: 16px;
margin-top: 10px;
......@@ -1076,20 +1066,6 @@ body[data-dialog] #dialog-background
padding: 12px 0px;
}
#dialog-body button
{
background-color: #F5F5F5;
border: none;
color: #3A7BA6;
cursor: pointer;
display: block;
font-family: inherit;
margin-top: 8px;
padding: 10px 16px;
text-align: initial;
width: 100%;
}
#dialog .url
{
margin-top: 10px;
......@@ -1097,6 +1073,8 @@ body[data-dialog] #dialog-background
word-wrap: break-word;
}
body:not([data-dialog="about"]) #dialog-title-about,
body:not([data-dialog="about"]) #dialog-content-about,
body:not([data-dialog="custom"]) #dialog-title-custom,
body:not([data-dialog="custom"]) #dialog-content-custom,
body:not([data-dialog="language-add"]) #dialog-title-language-add,
......
skin/options-sprite.png

5.77 KB | W: | H:

skin/options-sprite.png

4.84 KB | W: | H:

skin/options-sprite.png
skin/options-sprite.png
skin/options-sprite.png
skin/options-sprite.png
  • 2-up
  • Swipe
  • Onion skin
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