Simple enable/disable button replaced with toggle switch

This commit is contained in:
nobody 2020-03-14 10:28:51 +01:00
parent 215a5b74d8
commit 14274b3d7e
No known key found for this signature in database
GPG Key ID: AB5145CF05BFE119
9 changed files with 85 additions and 242 deletions

View File

@ -7,7 +7,7 @@ A web browser extension that emulates Content Delivery Networks to improve your
LocalCDN based on Decentraleyes. It includes more frameworks and more CDNs:
* **New: Font Awesome v4.7.0** :tada: :tada: :tada:
* **New: Font Awesome v4.7.0 and v5.7.2** :tada: :tada: :tada:
* jQuery up to 3.4.1
* Bootstrap CSS (Delivered by StackPath, NetDNA and MaxCDN)
* Bootstrap JavaScript (Delivered by StackPath, NetDNA and MaxCDN)

View File

@ -1,4 +1,4 @@
disabled.svg, disable-dark.svg, disable-light.svg (edited)
disabled.svg (edited)
enabled.svg (edited)
settings-dark.svg, settings-light.svg (edited)
https://www.svgrepo.com/vectors/web-security-fill/

View File

@ -1,105 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 283.722 283.722"
style="enable-background:new 0 0 283.722 283.722;"
xml:space="preserve"
sodipodi:docname="disable.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata941"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs939" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview937"
showgrid="false"
inkscape:zoom="2.8795795"
inkscape:cx="141.86099"
inkscape:cy="141.86099"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g904"
style="fill:#4d4d4d">
<path
d="M184.721,128.156c4.398-14.805,7.516-29.864,8.885-43.783c0.06-0.607-0.276-1.159-0.835-1.373l-70.484-26.932 c-0.152-0.058-0.312-0.088-0.475-0.088c-0.163,0-0.322,0.03-0.474,0.088L50.851,83c-0.551,0.21-0.894,0.775-0.835,1.373 c2.922,29.705,13.73,64.62,28.206,91.12c14.162,25.923,30.457,41.4,43.589,41.4c8.439,0,18.183-6.4,27.828-17.846l-16.375-16.375 c-14.645-14.645-14.645-38.389,0-53.033C147.396,115.509,169.996,115.017,184.721,128.156z"
id="path898"
style="fill:#4d4d4d" />
<path
d="M121.812,236.893c-46.932,0-85.544-87.976-91.7-150.562c-0.94-9.56,4.627-18.585,13.601-22.013l70.486-26.933 c2.451-0.937,5.032-1.405,7.613-1.405c2.581,0,5.162,0.468,7.614,1.405l70.484,26.932c8.987,3.434,14.542,12.439,13.6,22.013 c-1.773,18.028-6.244,38.161-12.826,57.693l11.068,11.068l17.865-17.866c6.907-20.991,11.737-42.285,13.845-61.972 c1.322-12.347-5.53-24.102-16.934-29.017l-93.512-40.3c-7.152-3.082-15.257-3.082-22.409,0l-93.512,40.3 C5.705,51.147-1.159,62.922,0.162,75.255c8.765,81.851,64.476,191.512,121.65,191.512c0.356,0,0.712-0.023,1.068-0.032 c-1.932-10.793,0.888-22.262,8.456-31.06C128.205,236.465,125.029,236.893,121.812,236.893z"
id="path900"
style="fill:#4d4d4d" />
<path
d="M240.037,208.125c7.327-7.326,30.419-30.419,37.827-37.827c7.81-7.811,7.81-20.475,0-28.285 c-7.811-7.811-20.475-7.811-28.285,0c-7.41,7.41-30.5,30.5-37.827,37.827l-37.827-37.827c-7.81-7.811-20.475-7.811-28.285,0 c-7.811,7.811-7.811,20.475,0,28.285l37.827,37.827c-7.326,7.326-30.419,30.419-37.827,37.827c-7.811,7.811-7.811,20.475,0,28.285 c7.809,7.809,20.474,7.811,28.285,0c7.41-7.41,30.5-30.499,37.827-37.827l37.827,37.827c7.809,7.809,20.474,7.811,28.285,0 c7.81-7.81,7.81-20.475,0-28.285L240.037,208.125z"
id="path902"
style="fill:#4d4d4d" />
</g>
<g
id="g906">
</g>
<g
id="g908">
</g>
<g
id="g910">
</g>
<g
id="g912">
</g>
<g
id="g914">
</g>
<g
id="g916">
</g>
<g
id="g918">
</g>
<g
id="g920">
</g>
<g
id="g922">
</g>
<g
id="g924">
</g>
<g
id="g926">
</g>
<g
id="g928">
</g>
<g
id="g930">
</g>
<g
id="g932">
</g>
<g
id="g934">
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,120 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 283.722 283.722"
style="enable-background:new 0 0 283.722 283.722;"
xml:space="preserve"
sodipodi:docname="disable-light.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata941"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs939" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview937"
showgrid="false"
inkscape:zoom="2.8795795"
inkscape:cx="80.220046"
inkscape:cy="140.4719"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g904"
style="fill:#f2f2f2">
<path
d="M184.721,128.156c4.398-14.805,7.516-29.864,8.885-43.783c0.06-0.607-0.276-1.159-0.835-1.373l-70.484-26.932 c-0.152-0.058-0.312-0.088-0.475-0.088c-0.163,0-0.322,0.03-0.474,0.088L50.851,83c-0.551,0.21-0.894,0.775-0.835,1.373 c2.922,29.705,13.73,64.62,28.206,91.12c14.162,25.923,30.457,41.4,43.589,41.4c8.439,0,18.183-6.4,27.828-17.846l-16.375-16.375 c-14.645-14.645-14.645-38.389,0-53.033C147.396,115.509,169.996,115.017,184.721,128.156z"
id="path898"
style="fill:#f2f2f2" />
<path
d="M121.812,236.893c-46.932,0-85.544-87.976-91.7-150.562c-0.94-9.56,4.627-18.585,13.601-22.013l70.486-26.933 c2.451-0.937,5.032-1.405,7.613-1.405c2.581,0,5.162,0.468,7.614,1.405l70.484,26.932c8.987,3.434,14.542,12.439,13.6,22.013 c-1.773,18.028-6.244,38.161-12.826,57.693l11.068,11.068l17.865-17.866c6.907-20.991,11.737-42.285,13.845-61.972 c1.322-12.347-5.53-24.102-16.934-29.017l-93.512-40.3c-7.152-3.082-15.257-3.082-22.409,0l-93.512,40.3 C5.705,51.147-1.159,62.922,0.162,75.255c8.765,81.851,64.476,191.512,121.65,191.512c0.356,0,0.712-0.023,1.068-0.032 c-1.932-10.793,0.888-22.262,8.456-31.06C128.205,236.465,125.029,236.893,121.812,236.893z"
id="path900"
style="fill:#f2f2f2" />
<path
d="M240.037,208.125c7.327-7.326,30.419-30.419,37.827-37.827c7.81-7.811,7.81-20.475,0-28.285 c-7.811-7.811-20.475-7.811-28.285,0c-7.41,7.41-30.5,30.5-37.827,37.827l-37.827-37.827c-7.81-7.811-20.475-7.811-28.285,0 c-7.811,7.811-7.811,20.475,0,28.285l37.827,37.827c-7.326,7.326-30.419,30.419-37.827,37.827c-7.811,7.811-7.811,20.475,0,28.285 c7.809,7.809,20.474,7.811,28.285,0c7.41-7.41,30.5-30.499,37.827-37.827l37.827,37.827c7.809,7.809,20.474,7.811,28.285,0 c7.81-7.81,7.81-20.475,0-28.285L240.037,208.125z"
id="path902"
style="fill:#f2f2f2" />
</g>
<g
id="g906"
style="fill:#f2f2f2">
</g>
<g
id="g908"
style="fill:#f2f2f2">
</g>
<g
id="g910"
style="fill:#f2f2f2">
</g>
<g
id="g912"
style="fill:#f2f2f2">
</g>
<g
id="g914"
style="fill:#f2f2f2">
</g>
<g
id="g916"
style="fill:#f2f2f2">
</g>
<g
id="g918"
style="fill:#f2f2f2">
</g>
<g
id="g920"
style="fill:#f2f2f2">
</g>
<g
id="g922"
style="fill:#f2f2f2">
</g>
<g
id="g924"
style="fill:#f2f2f2">
</g>
<g
id="g926"
style="fill:#f2f2f2">
</g>
<g
id="g928"
style="fill:#f2f2f2">
</g>
<g
id="g930"
style="fill:#f2f2f2">
</g>
<g
id="g932"
style="fill:#f2f2f2">
</g>
<g
id="g934"
style="fill:#f2f2f2">
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "LocalCDN (fork from Decentraleyes)",
"version": "2.1.4",
"version": "2.1.4-01",
"browser_specific_settings": {
"gecko": {
"id": "{b86e4813-687a-43e6-ab65-0bde4ab75758}",

View File

@ -176,8 +176,7 @@ footer {
color: #339a6f;
}
#options-button-svg,
#protection-toggle-button-svg {
#options-button-svg {
background-size: cover;
width: 15px;
height: 15px;
@ -187,8 +186,61 @@ footer {
background-image: url("../../icons/settings-dark.svg");
}
#protection-toggle-button-svg {
background-image: url("../../icons/disable-dark.svg");
#protection-toggle {
-moz-user-select: none;
cursor: pointer;
float: right;
user-select: none;
padding: 6px 0 0 4px;
}
.switch {
position: relative;
display: inline-block;
width: 26px;
height: 16px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #b40000;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: #f9f9fa;
-webkit-transition: .3s;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #6bb798;
}
input:checked + .slider:before {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
/**
@ -345,8 +397,16 @@ footer {
background-image: url("../../icons/settings-light.svg");
}
#protection-toggle-button-svg {
background-image: url("../../icons/disable-light.svg");
input:checked + .slider {
background-color: #6bb798;
}
.slider {
background-color: #b54b4b;
}
.slider:before {
background-color: #323232;
}
/**

View File

@ -35,8 +35,11 @@
<div class="subpanel">
<div id="protection-toggle-button" class="button button-toggle active">
<div id="protection-toggle-button-svg"></div>
<div id="protection-toggle">
<label class="switch">
<input type="checkbox" id="protection-toggle-switch">
<span class="slider"></span>
</label>
</div>
<div class="label-domain">

View File

@ -68,7 +68,7 @@ popup._renderDomainWhitelistPanel = function () {
let websiteContextElement, protectionToggleElement, domainIndicatorElement;
websiteContextElement = document.getElementById('website-context');
protectionToggleElement = document.getElementById('protection-toggle-button');
protectionToggleElement = document.getElementById('protection-toggle-switch');
domainIndicatorElement = document.getElementById('domain-indicator');
protectionToggleElement.setAttribute('dir', popup._scriptDirection);
@ -78,7 +78,7 @@ popup._renderDomainWhitelistPanel = function () {
let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
protectionToggleElement.setAttribute('class', 'button button-toggle');
protectionToggleElement.checked = false;
protectionToggleElement.addEventListener('click', popup._enableProtection);
protectionToggleElement.setAttribute('title', enableProtectionTitle);
@ -86,7 +86,7 @@ popup._renderDomainWhitelistPanel = function () {
let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
protectionToggleElement.setAttribute('class', 'button button-toggle active');
protectionToggleElement.checked = true;
protectionToggleElement.addEventListener('click', popup._disableProtection);
protectionToggleElement.setAttribute('title', disableProtectionTitle);
}

View File

@ -23,9 +23,7 @@
New in LocalCDN:
</div>
<ul>
<li>Fixed: <a href="https://gitlab.com/nobody42/localcdn/-/issues/16">"Weird behavior of signed extension"</a></li>
<li>New CDN: use.fontawesome.com</li>
<li>New framework: Font Awesome v5.7.2</li>
<li>Simple enable/disable button replaced with toggle switch</li>
</ul>
<div class="topic-label">
Please update your uBlock/uMatrix rules
@ -42,6 +40,13 @@
<input id="button-copy-rule-set" type="button" value="Copy">
<hr/>
<h2>History</h2>
<p>2020-03-13 (v2.1.4)<br/>
<ul>
<li>Fixed: <a href="https://gitlab.com/nobody42/localcdn/-/issues/16">"Weird behavior of signed extension"</a></li>
<li>New CDN: use.fontawesome.com</li>
<li>New framework: Font Awesome v5.7.2</li>
</ul>
</p>
<p>2020-03-12 (v2.1.3)<br/>
<ul>
<li>Fixed file extensions misstakes in mappings.js</li>