Skip to content

GitLab

R
Rocket.Chat
Commit f000d426 authored by Karl Prieb's avatar Karl Prieb
Browse files
Options

normalize favicons, tiles and touchicons

parent 39b20d13
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 108 deletions
packages/rocketchat-assets/server/assets.coffee
View file @ f000d426
......@@ -18,7 +18,7 @@ assets =
width: undefined
height: undefined
'favicon_ico':
label: 'favicon.ico'
label: 'favicon (ico)'
defaultUrl: 'favicon.ico'
constraints:
type: 'image'
......@@ -26,53 +26,101 @@ assets =
width: undefined
height: undefined
'favicon':
label: 'favicon.svg'
label: 'favicon (svg)'
defaultUrl: 'images/logo/icon.svg'
constraints:
type: 'image'
extensions: ['svg']
width: undefined
height: undefined
'favicon_64':
label: 'favicon.png (64x64)'
defaultUrl: 'images/logo/favicon-64x64.png'
'favicon_16':
label: 'favicon 16x16 (png)'
defaultUrl: 'images/logo/favicon-16x16.png'
constraints:
type: 'image'
extensions: ['png']
width: 64
height: 64
'favicon_96':
label: 'favicon.png (96x96)'
defaultUrl: 'images/logo/favicon-96x96.png'
width: 16
height: 16
'favicon_32':
label: 'favicon 32x32 (png)'
defaultUrl: 'images/logo/favicon-32x32.png'
constraints:
type: 'image'
extensions: ['png']
width: 96
height: 96
'favicon_128':
label: 'favicon.png (128x128)'
defaultUrl: 'images/logo/favicon-128x128.png'
width: 32
height: 32
'android_512':
label: 'android-chrome 512x512 (png)'
defaultUrl: 'images/logo/android-chrome-512x512.png'
constraints:
type: 'image'
extensions: ['png']
width: 128
height: 128
'favicon_192':
label: 'favicon.png (192x192)'
width: 512
height: 512
'android_192':
label: 'android-chrome 192x192 (png)'
defaultUrl: 'images/logo/android-chrome-192x192.png'
constraints:
type: 'image'
extensions: ['png']
width: 192
height: 192
'favicon_256':
label: 'favicon.png (256x256)'
defaultUrl: 'images/logo/favicon-256x256.png'
'touchicon_180':
label: 'apple-touch-icon 180x180 (png)'
defaultUrl: 'images/logo/apple-touch-icon.png'
constraints:
type: 'image'
extensions: ['png']
width: 256
height: 256
width: 180
height: 180
'touchicon_180_pre':
label: 'apple-touch-icon-precomposed 180x180 (png)'
defaultUrl: 'images/logo/apple-touch-icon-precomposed.png'
constraints:
type: 'image'
extensions: ['png']
width: 180
height: 180
'tile_144':
label: 'mstile 144x144 (png)'
defaultUrl: 'images/logo/mstile-144x144.png'
constraints:
type: 'image'
extensions: ['png']
width: 144
height: 144
'tile_150':
label: 'mstile 150x150 (png)'
defaultUrl: 'images/logo/mstile-150x150.png'
constraints:
type: 'image'
extensions: ['png']
width: 150
height: 150
'tile_310_square':
label: 'mstile 310x310 (png)'
defaultUrl: 'images/logo/mstile-310x310.png'
constraints:
type: 'image'
extensions: ['png']
width: 310
height: 310
'tile_310_wide':
label: 'mstile 310x150 (png)'
defaultUrl: 'images/logo/mstile-310x150.png'
constraints:
type: 'image'
extensions: ['png']
width: 310
height: 150
'safari_pinned':
label: 'safari pinneed tab (svg)'
defaultUrl: 'images/logo/safari-pinned-tab.svg'
constraints:
type: 'image'
extensions: ['svg']
width: undefined
height: undefined
RocketChat.Assets = new class
......
packages/rocketchat-favico/favico.js
View file @ f000d426
......@@ -96,12 +96,13 @@
}
_opt.type = (type['' + _opt.type]) ? _opt.type : _def.type;
_orig = link.getIcon();
_orig = link.getIcons();
//create temp canvas
_canvas = document.createElement('canvas');
//create temp image
_img = document.createElement('img');
if (_orig.hasAttribute('href')) {
var lastIcon = _orig[_orig.length - 1];
if (lastIcon.hasAttribute('href')) {
_img.setAttribute('crossOrigin', 'anonymous');
//get width/height
_img.onload = function() {
......@@ -112,7 +113,7 @@
_context = _canvas.getContext('2d');
icon.ready();
};
_img.setAttribute('src', _orig.getAttribute('href'));
_img.setAttribute('src', lastIcon.getAttribute('href'));
} else {
_img.onload = function() {
_h = 32;
......@@ -461,37 +462,40 @@
var link = {};
/**
* Get icon from HEAD tag or create a new <link> element
* Get icons from HEAD tag or create a new <link> element
*/
link.getIcon = function() {
var elm = false;
link.getIcons = function() {
var elms = [];
//get link element
var getLink = function() {
var link = _doc.getElementsByTagName('head')[0].getElementsByTagName('link');
for (var l = link.length, i = (l - 1); i >= 0; i--) {
if ((/(^|\s)icon(\s|$)/i).test(link[i].getAttribute('rel'))) {
return link[i];
var getLinks = function() {
var icons = [];
var links = _doc.getElementsByTagName('head')[0].getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if ((/(^|\s)icon(\s|$)/i).test(links[i].getAttribute('rel'))) {
icons.push(links[i]);
}
}
return false;
return icons;
};
if (_opt.element) {
elm = _opt.element;
elms = [_opt.element];
} else if (_opt.elementId) {
//if img element identified by elementId
elm = _doc.getElementById(_opt.elementId);
elm.setAttribute('href', elm.getAttribute('src'));
elms = [_doc.getElementById(_opt.elementId)];
elms[0].setAttribute('href', elms[0].getAttribute('src'));
} else {
//if link element
elm = getLink();
if (elm === false) {
elm = _doc.createElement('link');
elm.setAttribute('rel', 'icon');
_doc.getElementsByTagName('head')[0].appendChild(elm);
elms = getLinks();
if (elms.length === 0) {
elms = [_doc.createElement('link')];
elms[0].setAttribute('rel', 'icon');
_doc.getElementsByTagName('head')[0].appendChild(elms[0]);
}
}
elm.setAttribute('type', 'image/png');
return elm;
elms.forEach(function(item) {
item.setAttribute('type', 'image/png');
});
return elms;
};
link.setIcon = function(canvas) {
var url = canvas.toDataURL('image/png');
......@@ -512,21 +516,24 @@
if (_browser.ff || _browser.opera) {
//for FF we need to "recreate" element, atach to dom and remove old <link>
//var originalType = _orig.getAttribute('rel');
var old = _orig;
_orig = _doc.createElement('link');
var old = _orig[_orig.length - 1];
var newIcon = _doc.createElement('link');
_orig = [newIcon];
//_orig.setAttribute('rel', originalType);
if (_browser.opera) {
_orig.setAttribute('rel', 'icon');
newIcon.setAttribute('rel', 'icon');
}
_orig.setAttribute('rel', 'icon');
_orig.setAttribute('type', 'image/png');
_doc.getElementsByTagName('head')[0].appendChild(_orig);
_orig.setAttribute('href', url);
newIcon.setAttribute('rel', 'icon');
newIcon.setAttribute('type', 'image/png');
_doc.getElementsByTagName('head')[0].appendChild(newIcon);
newIcon.setAttribute('href', url);
if (old.parentNode) {
old.parentNode.removeChild(old);
}
} else {
_orig.setAttribute('href', url);
_orig.forEach(function(icon) {
icon.setAttribute('href', url);
});
}
}
};
......
packages/rocketchat-ui-master/master/main.html
View file @ f000d426
......@@ -15,26 +15,9 @@
<meta name="theme-color" content="#04436a" />
<link rel="manifest" href="images/logo/manifest.json?v=3" />
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nocfbnnmjnndkbipkabodnheejiegccf" />
<link rel="icon" sizes="any" type="image/svg+xml" href="assets/favicon.svg?v=3" />
<link rel="icon" sizes="256x256" type="image/png" href="assets/favicon_256.png?v=3" />
<link rel="icon" sizes="192x192" type="image/png" href="assets/favicon_192.png?v=3" />
<link rel="icon" sizes="128x128" type="image/png" href="assets/favicon_128.png?v=3" />
<link rel="icon" sizes="96x96" type="image/png" href="assets/favicon_96.png?v=3" />
<link rel="icon" sizes="64x64" type="image/png" href="assets/favicon_64.png?v=3" />
<!--
<link rel="icon" sizes="48x48" type="image/png" href="/images/logo/favicon-48x48.png?v=3" />
<link rel="icon" sizes="32x32" type="image/png" href="/images/logo/favicon-32x32.png?v=3" />
<link rel="icon" sizes="16x16" type="image/png" href="/images/logo/favicon-16x16.png?v=3" />
-->
<link rel="shortcut icon" sizes="16x16 32x32 48x48" type="image/x-icon" href="assets/favicon_ico.ico?v=3" />
<link rel="apple-touch-icon" sizes="57x57" href="images/logo/apple-touch-icon-57x57.png?v=3" />
<link rel="apple-touch-icon" sizes="60x60" href="images/logo/apple-touch-icon-60x60.png?v=3" />
<link rel="apple-touch-icon" sizes="72x72" href="images/logo/apple-touch-icon-72x72.png?v=3" />
<link rel="apple-touch-icon" sizes="76x76" href="images/logo/apple-touch-icon-76x76.png?v=3" />
<link rel="apple-touch-icon" sizes="114x114" href="images/logo/apple-touch-icon-114x114.png?v=3" />
<link rel="apple-touch-icon" sizes="120x120" href="images/logo/apple-touch-icon-120x120.png?v=3" />
<link rel="apple-touch-icon" sizes="144x144" href="images/logo/apple-touch-icon-144x144.png?v=3" />
<link rel="apple-touch-icon" sizes="152x152" href="images/logo/apple-touch-icon-152x152.png?v=3" />
<link rel="mask-icon" href="/images/logo/safari-pinned-tab.svg" color="#04436a">
<link rel="apple-touch-icon" sizes="180x180" href="images/logo/apple-touch-icon-180x180.png?v=3" />
</head>
......
public/images/logo/browserconfig.xml
View file @ f000d426
......@@ -2,10 +2,9 @@
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/images/logo/mstile-70x70.png?v=3"/>
<square150x150logo src="/images/logo/mstile-150x150.png?v=3"/>
<square150x150logo src="/images/logo/mstile-150x150.png?v=3"/>
<square310x310logo src="/images/logo/mstile-310x310.png?v=3"/>
<wide310x150logo src="/images/logo/mstile-310x150.png?v=3"/>
<wide310x150logo src="/images/logo/mstile-310x150.png?v=3"/>
<TileColor>#04436a</TileColor>
</tile>
</msapplication>
......
public/images/logo/manifest.json
View file @ f000d426
{
"name": "Rocket.Chat",
"icons": [
{
"src": "\/images\/logo\/android-chrome-36x36.png?v=3",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/images\/logo\/android-chrome-48x48.png?v=3",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/images\/logo\/android-chrome-72x72.png?v=3",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/images\/logo\/android-chrome-96x96.png?v=3",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/images\/logo\/android-chrome-144x144.png?v=3",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/images\/logo\/android-chrome-192x192.png?v=3",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
"type": "image\/png"
},
{
"src": "\/images\/logo\/android-chrome-512x512.png?v=3",
"sizes": "512x512",
"type": "image\/png"
}
],
"start_url": "https:\/\/rocket.chat\/home",
......
public/images/logo/safari-pinned-tab.svg 0 → 100644
View file @ f000d426
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M758 4695 c-2 -1 -43 -5 -93 -8 -91 -6 -217 -26 -297 -47 -23 -7 -50
-14 -58 -15 -44 -10 -223 -79 -257 -100 -1 -1 55 -60 126 -131 284 -288 418
-537 413 -768 -2 -77 1 -72 -96 -182 -166 -192 -292 -437 -331 -649 -20 -109
-25 -288 -12 -405 28 -241 151 -503 334 -714 111 -128 104 -115 105 -213 0
-49 -5 -99 -10 -113 -5 -14 -10 -29 -11 -35 -1 -5 -8 -32 -17 -60 -54 -165
-199 -371 -400 -569 l-105 -103 61 -27 c118 -53 233 -87 405 -120 134 -26 387
-26 545 -1 200 32 441 115 575 199 122 76 286 197 337 248 13 13 28 18 46 14
66 -12 133 -21 242 -32 41 -3 89 -8 105 -10 37 -5 433 -4 495 0 41 3 69 6 210
22 25 3 81 11 125 19 44 8 94 16 110 19 17 3 62 12 100 21 39 9 80 18 91 21
35 7 345 110 389 129 187 81 401 199 525 291 122 90 302 258 348 326 9 13 19
25 23 28 22 17 130 190 170 275 89 189 122 337 122 545 0 212 -36 376 -124
556 -209 431 -652 781 -1241 980 -103 35 -302 88 -368 99 -19 3 -42 8 -50 10
-16 4 -30 7 -145 25 -303 48 -822 48 -1068 -1 -73 -14 -89 -11 -128 24 -71 62
-92 79 -172 136 -206 145 -406 232 -651 281 -87 18 -101 19 -221 25 -60 4
-118 8 -127 9 -9 2 -18 3 -20 1z"/>
</g>
</svg>
public/manifest.webapp
View file @ f000d426
......@@ -3,7 +3,7 @@
"description": "The Ultimate Open Source WebChat Platform",
"launch_path": "/",
"icons": {
"128": "/images/logo/favicon-128x128.png",
"192": "/images/logo/android-chrome-192x192.png",
"512": "/images/logo/512x512.png"
},
"developer": {
......
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