Supply font/svg for all icons, wrong i-icon alignment

This commit is contained in:
Ilya Ig. Petrov 2017-02-27 17:57:44 +00:00
parent a606d25227
commit 653d415bee
12 changed files with 2903 additions and 50 deletions

View File

@ -0,0 +1,8 @@
# Blue Ribbon Icon
URL: http://www.iconsdb.com/icon-sets/cardboard-blue-icons/ribbon-12-icon.html
# SVG Icons, emoji
URL: https://github.com/jslegers/emoji-icon-font
Author: John Slegers aka jslegers

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 756 KiB

View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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="svg15"
sodipodi:docname="my-circled-information-circle - Copywwwwww.svg"
inkscape:version="0.92.1 r15371">
<metadata
id="metadata21">
<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="defs19" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="847"
id="namedview17"
showgrid="false"
inkscape:zoom="6.8"
inkscape:cx="50"
inkscape:cy="50"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg15" />
<g
id="icon-info"
viewBox="0 0 100 100">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:geometricPrecision;text-rendering:auto;enable-background:accumulate"
d="M 50,1.5 C 23.255646,1.5 1.5,23.255646 1.5,50 1.5,76.744354 23.255646,98.5 50,98.5 76.744354,98.5 98.5,76.744354 98.5,50 98.5,23.255646 76.744354,1.5 50,1.5 Z m 0,7 C 72.961273,8.5 91.5,27.038727 91.5,50 91.5,72.961273 72.961273,91.5 50,91.5 27.038727,91.5 8.5,72.961273 8.5,50 8.5,27.038727 27.038727,8.5 50,8.5 Z"
id="circle10"
inkscape:connector-curvature="0" />
<path
shape-rendering="crispEdges"
d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"
id="path12" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-info" viewBox="0 0 100 100">
<circle shape-rendering="geometricPrecision" fill="none" stroke="currentColor" stroke-width="7" cx="50" cy="50" r="45"/>
<path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 379 B

View File

@ -0,0 +1,6 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-info" viewBox="0 0 100 100">
<path d="M 50,1.5 C 23.255646,1.5 1.5,23.255646 1.5,50 1.5,76.744354 23.255646,98.5 50,98.5 76.744354,98.5 98.5,76.744354 98.5,50 98.5,23.255646 76.744354,1.5 50,1.5 Z m 0,7 C 72.961273,8.5 91.5,27.038727 91.5,50 91.5,72.961273 72.961273,91.5 50,91.5 27.038727,91.5 8.5,72.961273 8.5,50 8.5,27.038727 27.038727,8.5 50,8.5 Z"/>
<path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@ -0,0 +1,7 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-info" viewBox="0 0 100 100">
<path fill="none" stroke="currentColor" stroke-width="7" stroke-miterlimit="10"
d="M95,50c0,25-20,45-45,45 c-25,0-45-20-45-45 S25,5,50,5C75,5,95,25,95,45z"/>
<path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 423 B

View File

@ -19,8 +19,9 @@ const templatePlugin = (context) => through.obj(function(file, encoding, cb) {
return cb(new PluginError(PluginName, 'Streams not supported!'));
} else if (file.isBuffer()) {
const {keys, values} = Object.entries(context).reduce( (acc, [key, value]) => {
const {keys, values} = Object.keys(context).reduce( (acc, key) => {
const value = context[key];
acc.keys.push(key);
acc.values.push(value);
return acc;

View File

@ -3,7 +3,8 @@
"version": "0.0.19",
"description": "Development tools for chromium extension",
"scripts": {
"lint": "./node_modules/.bin/eslint ./src/**/*.js --ignore-pattern vendor"
"lint": "eslint ./src/**/*.js --ignore-pattern vendor",
"gulp": "gulp"
},
"author": "Ilya Ig. Petrov",
"license": "GPLv3",

View File

@ -109,6 +109,7 @@
|| Boolean(defaults[prop]) === Boolean(mods[prop])
);
console.log('MODS', mods);
Object.assign(this, defaults, mods);
this.ifNoMods = ifAllDefaults ? true : false;
@ -149,7 +150,7 @@
this.excluded.push(host);
}
}
if (this.included && !this.filteredCustomsString) {
if (this.included.length && !this.filteredCustomsString) {
throw new TypeError(
'Проксировать свои сайты можно только через свои прокси. Нет ни одного своего прокси, удовлетворяющего вашим требованиям!'
);
@ -214,11 +215,11 @@
}
return res + `
const originalProxyString = originalFindProxyForURL(url, host);
let originalProxyArray = originalProxyString.split(/(?:\\s*;\\s*)+/g).filter( (p) => p );
if (originalProxyArray.every( (p) => /^DIRECT$/i.test(p) )) {
const pacProxyString = originalFindProxyForURL(url, host);
let pacProxyArray = pacProxyString.split(/(?:\\s*;\\s*)+/g).filter( (p) => p );
if (pacProxyArray.every( (p) => /^DIRECT$/i.test(p) )) {
// Directs only or null, no proxies.
return originalProxyString;
return pacProxyString;
}
return ` +
function() {
@ -226,15 +227,15 @@
if (!pacMods.ifUsePacScriptProxies) {
return '"' + pacMods.filteredCustomsString + '"';
}
let filteredOriginalsExp = 'originalProxyString';
let filteredPacExp = 'pacProxyString';
if (pacMods.ifUseSecureProxiesOnly) {
filteredOriginalsExp =
'originalProxyArray.filter( (p) => !p.toUpperCase().startsWith("HTTP ") ).join("; ")';
filteredPacExp =
'pacProxyArray.filter( (p) => !p.toUpperCase().startsWith("HTTP ") ).join("; ")';
}
if ( !pacMods.filteredCustomsString ) {
return filteredOriginalsExp;
return filteredPacExp;
}
return '"' + pacMods.filteredCustomsString + '; " + ' + filteredOriginalsExp;
return filteredPacExp + '"; ' + pacMods.filteredCustomsString + '"';
}() + ' + "; DIRECT";'; // Without DIRECT you will get 'PROXY CONN FAILED' pac-error.
@ -292,7 +293,6 @@
},
keepCookedNowAsync(pacMods = mandatory(), cb = throwIfError) {
if (typeof(pacMods) === 'function') {

View File

@ -7,8 +7,9 @@
--ribbon-color: #4169e1;
--blue-bg: dodgerblue;
--default-grey: #bfbfbf;
max-width: 27em;
max-width: 28em;
}
body {
margin: 0;
}
@ -45,6 +46,9 @@
li, li > * {
vertical-align: middle;
}
input[type="radio"], input[type="checkbox"] {
flex-shrink: 0;
}
input[type="radio"], label {
cursor: pointer;
}
@ -205,34 +209,22 @@
/* INFO SIGNS */
.info-row {
display: table;
width: 100%;
position: relative;
}
.info-sign {
font-size: 1.4em;
vertical-align: middle;
line-height: 100%;
.right-bottom-icon {
margin-left: 0.1em;
vertical-align: bottom;
}
.info-url {
.info-url, .info-url:hover {
text-decoration: none;
float: right;
text-align: right;
line-height: normal !important;
vertical-align: top !important;
}
/* Source: https://jsfiddle.net/greypants/zgCb7/ */
.desc {
display: table-cell;
text-align: right;
color: var(--ribbon-color);
cursor: help;
width: 1%;
padding-left: 0.3em;
}
.tooltip {
display: none;
@ -265,13 +257,13 @@
right: 0;
height: 0;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
/* This bridges the gap so you can mouse into the tooltip without it disappearing. */
.desc .tooltip:before {
position: absolute;
top: -1em;
content: "";
display: block;
height: 1.6em;
height: 1.2em;
left: 75%;
width: calc(25% + 0.6em);
}
@ -355,6 +347,14 @@
margin: 1em 0 1em 0;
}
.hor-flex > input:not([type="button"]) {
align-self: flex-end;
}
.label-container {
flex-grow: 9;
padding-left: 0.3em;
}
/* STATUS */
#status-row {
@ -371,6 +371,25 @@
.other-version:hover {
text-decoration: none;
}
@font-face {
font-family: "emoji";
src:url("../lib/fonts/emoji.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.emoji {
font-family: "emoji";
}
svg.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
</style>
</head>
<body>
@ -397,10 +416,16 @@
<header class="only-for-options-page">PAC-скрипт:</header>
<ul id="list-of-providers">
<li><input type="radio" name="pacProvider" id="none" checked> <label for="none">Отключить</label></li>
<li class="info-row hor-flex"><input type="radio" name="pacProvider" id="none" checked> <div class="label-container"><label for="none">Отключить</label></div></li>
</ul>
<div id="update-message">
Обновлялись: <span class="update-date">...</span>
<div id="update-message" class="hor-flex">
<div>Обновлялись: <span class="update-date">...</span></div>
<div>
<a class="only-for-mini-version other-version emoji" href="https://rebrand.ly/ac-versions"
title="Полная версия">🏋</a>
<a class="only-for-full-version other-version emoji" href="https://rebrand.ly/ac-versions"
title="Версия для слабых машин">🐌</a>
</div>
</div>
</section>
@ -416,7 +441,11 @@
</div>
<datalist id="exc-list"></datalist>
<ol class="horizontal-list" id="exc-radio">
<li><input id="this-auto" type="radio" checked name="if-proxy-this-site"/> <label for="this-auto">🔄&#xFE0E; авто</label></li>
<li><input id="this-auto" type="radio" checked name="if-proxy-this-site"/>
<label for="this-auto"><!--span class="emoji">🔄(looks fat)</span--><svg
class="icon"
style="position: relative; top: 0.15em;"><use xlink:href="#icon-loop-round"></use></svg>&nbsp;авто</label>
</li>
<li><input id="this-yes" type="radio" name="if-proxy-this-site"/> <label for="this-yes">&nbsp;да</label></li>
<li><input id="this-no" type="radio" name="if-proxy-this-site"/> <label for="this-no">&nbsp;нет</label></li>
</ol>
@ -445,10 +474,8 @@
<hr/>
<div class="hor-padded">
<section class="hor-flex" id="status-row">
<section id="status-row">
<div id="status" style="will-change: contents">Загрузка...</div>
<a class="only-for-mini-version other-version" title="Полная версия" href="https://rebrand.ly/ac-versions">🏋&#xFE0E;</a>
<a class="only-for-full-version other-version" title="Версия для слабых машин" href="https://rebrand.ly/ac-versions">🐌&#xFE0E;</a>
</section>
<footer class="control-row hor-flex">
@ -461,5 +488,18 @@
<script src="./index.js"></script>
<script src="../lib/keep-links-clickable.js"></script>
<!-- ICONS -->
<svg style="display: none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-info" viewBox="0 0 100 100">
<title>info</title>
<circle shape-rendering="geometricPrecision" fill="none" stroke="currentColor" stroke-width="7" cx="50" cy="50" r="45"/>
<path shape-rendering="crispEdges" d="M 55,40 V 80 H 45 V 40 z m 0,-20 V 35 H 45 V 20 Z"/>
</symbol>
<symbol id="icon-loop-round" viewBox="0 0 32 32">
<title>loop-round</title>
<path d="M27.802 5.197c-2.925-3.194-7.13-5.197-11.803-5.197-8.837 0-16 7.163-16 16h3c0-7.18 5.82-13 13-13 3.844 0 7.298 1.669 9.678 4.322l-4.678 4.678h11v-11l-4.198 4.197z"/>
<path d="M29 16c0 7.18-5.82 13-13 13-3.844 0-7.298-1.669-9.678-4.322l4.678-4.678h-11v11l4.197-4.197c2.925 3.194 7.13 5.197 11.803 5.197 8.837 0 16-7.163 16-16h-3z"/>
</symbol>
</svg>
</body>
</html>

View File

@ -110,7 +110,7 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
}
setStatusTo(
`<span style="color:red">
${err ? '🔥&#xFE0E; Ошибка!' : 'Некритичная ошибка.'}
${err ? '<span class="emoji">🔥</span> Ошибка!' : 'Некритичная ошибка.'}
</span>
<br/>
<span style="font-size: 0.9em; color: darkred">${message}</span>
@ -156,10 +156,16 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
};
const infoIcon = `
<svg class="icon"
style="position: relative; top: 0.08em"><use xlink:href="#icon-info"></use></svg>
<!--span style="font-size: 1.3em" class="emoji">🛈(looks huge)</span-->
`;
const infoSign = function infoSign(tooltip) {
return `<div class="desc">
<span class="info-sign">🛈</span>
${infoIcon}
<div class="tooltip">${tooltip}</div>
</div>`;
@ -173,12 +179,14 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
) {
const provider = antiCensorRu.getPacProvider(providerKey);
const li = document.createElement('li');
li.className = 'info-row';
li.classList.add('info-row', 'hor-flex');
li.innerHTML = `
<input type="radio" name="pacProvider" id="${providerKey}">
<div class="label-container">
<label for="${providerKey}"> ${provider.label}</label>
&nbsp;<a href class="link-button update-button"
id="update-${providerKey}">[обновить]</a> ` +
id="update-${providerKey}">[обновить]</a>
</div>` +
infoSign(provider.desc);
li.querySelector('.link-button').onclick =
() => {
@ -516,16 +524,20 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
const key = conf.key;
const iddy = 'mods-' + conf.key.replace(/([A-Z])/g, (_, p) => '-' + p.toLowerCase());
const li = document.createElement('li');
li.className = 'info-row';
li.classList.add('info-row', 'hor-flex');
keyToLi[key] = li;
const ifMultiline = key === customProxyStringKey;
li.innerHTML = `
<input type="checkbox" id="${iddy}" ${ conf.value ? 'checked' : '' }/>
<label for="${iddy}"> ${ conf.label }</label>`;
<div class="label-container">
<label for="${iddy}"> ${ conf.label }</label>
</div>`;
if (key !== customProxyStringKey) {
if (!ifMultiline) {
li.innerHTML += infoSign(conf.desc);
} else {
li.innerHTML += `<a href="${conf.url}" class="info-sign info-url">🛈</a><br/>
li.style.flexWrap = 'wrap';
li.innerHTML += `<a href="${conf.url}" class="right-bottom-icon info-url">${infoIcon}</a>
<textarea
spellcheck="false"
placeholder="SOCKS5 localhost:9050; # TOR Expert