filippodb/LocalCDN-Firefox-Chrome-Brave
1
0
Fork 0
mirror of https://codeberg.org/nobody/LocalCDN.git synced 2024-12-22 08:04:10 +01:00
Code Issues Projects Releases Wiki Activity

Further UI improvements

Browse Source
This commit is contained in:
nobody 2020-06-28 14:59:07 +02:00
parent 3aaadfab1b
commit b654b865c9
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
9 changed files with 318 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
icons/copy-dark.svg Normal file
View File

@ -0,0 +1,124 @@
<?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 330 330"
style="enable-background:new 0 0 330 330;"
xml:space="preserve"
sodipodi:docname="copy-dark_2.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata47"><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="defs45" /><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="namedview43"
showgrid="false"
inkscape:zoom="0.71515152"
inkscape:cx="1.3983051"
inkscape:cy="165"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g10"
style="fill:#777777;fill-opacity:1">
<path
d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15 c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95 c-8.284,0-15,6.716-15,15v165H50V30z"
id="path2"
style="fill:#777777;fill-opacity:1" />
<path
d="M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z"
id="path4"
style="fill:#777777;fill-opacity:1" />
<path
d="M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z"
id="path6"
style="fill:#777777;fill-opacity:1" />
<path
d="M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z "
id="path8"
style="fill:#777777;fill-opacity:1" />
</g>
<g
id="g12"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g14"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g16"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g18"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g20"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g22"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g24"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g26"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g28"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g30"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g32"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g34"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g36"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g38"
style="fill:#777777;fill-opacity:1">
</g>
<g
id="g40"
style="fill:#777777;fill-opacity:1">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

124
icons/copy-light.svg Normal file
View File

@ -0,0 +1,124 @@
<?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 330 330"
style="enable-background:new 0 0 330 330;"
xml:space="preserve"
sodipodi:docname="copy-light2.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata47"><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="defs45" /><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="namedview43"
showgrid="false"
inkscape:zoom="0.71515152"
inkscape:cx="1.3983051"
inkscape:cy="165"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g10"
style="fill:#f2f2f2;fill-opacity:1">
<path
d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15 c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95 c-8.284,0-15,6.716-15,15v165H50V30z"
id="path2"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z"
id="path4"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z"
id="path6"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z "
id="path8"
style="fill:#f2f2f2;fill-opacity:1" />
</g>
<g
id="g12"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g14"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g16"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g18"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g20"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g22"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g24"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g26"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g28"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g30"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g32"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g34"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g36"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g38"
style="fill:#f2f2f2;fill-opacity:1">
</g>
<g
id="g40"
style="fill:#f2f2f2;fill-opacity:1">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

4
icons/credits
View File

@ -15,3 +15,7 @@ CC0
link-dark.svg, link-light.svg (edited)
https://www.svgrepo.com/svg/35710/external
CC0
copy-dark.svg, copy-light.svg (edited)
https://www.svgrepo.com/svg/76619/copy
CC0

15
pages/base.css
View File

@ -3,7 +3,7 @@ a {
font-weight: bold;
background: url('../../icons/link-dark.svg') no-repeat right center;
background-size: 10px 10px;
padding-right:13px;
padding-right: 13px;
text-decoration: underline;
}
@ -27,6 +27,7 @@ a:hover {
font-size: 1.3em;
line-height: 2;
background-color: #fff;
text-align: center;
}
#button-copy-rule-set:hover {
@ -34,8 +35,15 @@ a:hover {
background-color: #ddd;
}
#button-copy-rule-set-icon {
background: url('../../icons/copy-dark.svg') no-repeat right center;
background-size: 20px 20px;
padding-right: 23px;
}
#generated-rules {
display: none;
margin-top: 20px;
}
/**
@ -232,4 +240,9 @@ a:hover {
#button-copy-rule-set:hover {
background-color: #2d2d2d;
}
#button-copy-rule-set-icon {
background: url('../../icons/copy-light.svg') no-repeat right center;
background-size: 20px 20px;
}
}

12
pages/options/options.css
View File

@ -295,6 +295,18 @@ body[dir="rtl"] .input-text {
border-radius: 3px;
}
.option-links {
list-style-type: disclosure-closed;
}
.option-links-div > ul {
padding-top: 2rem;
}
.option-links-div > ul > li {
padding-bottom: .5rem;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #202023;

15
pages/options/options.html
View File

@ -141,7 +141,7 @@
</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" data-i18n-content="copyRuleSet" value="Copy">
<button id="button-copy-rule-set" value="Copy"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
</section>
</div>
<section class="notice notice-default hidden" id="notice-locale">
@ -149,10 +149,21 @@
<div class="notice-message">
Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
</div>
<a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/" target="_blank">
<a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank">
Translate
</a>
</div>
</section>
<div class="option-links-div">
<ul class="option-links">
<li><a id="link-welcome-page">Welcome page (InApp)</a></li>
<li><a id="link-changelog">Changelog (InApp)</a></li>
<li><a id="link-donate">Donate (InApp)</a></li>
<li><a id="link-codeberg" href="https://codeberg.org/nobody/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">Source-Code (www.codeberg.org)</a></li>
<li><a id="link-website" href="https://localcdn.de" target="_blank" rel="nofollow noopener noreferrer">Website (www.localcdn.de)</a></li>
<li><a id="link-website-test" href="https://localcdn.de/test" target="_blank" rel="nofollow noopener noreferrer">Test-Sites (www.localcdn.de/test)</a></li>
<li><a id="link-translate" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="nofollow noopener noreferrer">Translate (www.weblate.org)</a></li>
</ul>
</div>
</body>
</html>

24
pages/options/options.js
View File

@ -82,6 +82,9 @@ options._renderOptionsPanel = function () {
document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
document.getElementById('negate-html-filter-list-warning').addEventListener('click', options._onClickHTMLFilterWarning);
document.getElementById('link-welcome-page').addEventListener('click', options._onClickWelcomePage);
document.getElementById('link-changelog').addEventListener('click', options._onClickChangelog);
document.getElementById('link-donate').addEventListener('click', options._onClickDonate);
};
options._renderBlockMissingNotice = function () {
@ -313,6 +316,27 @@ options._onClickHTMLFilterWarning = function() {
});
}
options._onClickWelcomePage = function() {
chrome.tabs.create({
'url': chrome.extension.getURL('pages/welcome/welcome.html'),
'active': true
});
}
options._onClickDonate = function() {
chrome.tabs.create({
'url': chrome.extension.getURL('pages/donate/donate.html'),
'active': true
});
}
options._onClickChangelog = function() {
chrome.tabs.create({
'url': chrome.extension.getURL('pages/updates/updates.html'),
'active': true
});
}
/**
* Initializations
*/

4
pages/popup/popup.css
View File

@ -348,7 +348,7 @@ input:checked + .slider:before {
}
.label-domain {
color: #bbb;
color: #555;
display: flex;
font-style: italic;
overflow: hidden;
@ -507,7 +507,7 @@ input:checked + .slider:before {
}
.label-domain {
color: #717171;
color: #aeaeae;
}
.panel:not(:last-child) {

2
pages/updates/updates.html
View File

@ -44,7 +44,7 @@
<li>Added: Chart.js (JS-Bundle & CSS) v2.9.3 (reported by email)</li>
<li>Improved: Option to enable HTML-Filter by default (<a href="https://codeberg.org/nobody/LocalCDN/issues/33">#33</a>)</li>
<li>Added: Google Material Icons v3.0.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/41">#41</a>)</li>
<li>Improved: Dark-Mode (reported by email)</li>
<li>Improved: UI (reported by email)</li>
</ul>
<div class="topic-label">
Generate rule sets for uBlock or uMatrix