From 0b800b0a7d8036bf0490bf0eacba4ebb55943002 Mon Sep 17 00:00:00 2001 From: Cynthia Lin Date: Wed, 11 Oct 2017 20:39:46 -0700 Subject: [PATCH] icons: Create framework for custom icons and add new bot icon. --- frontend_tests/zjsunit/output.js | 1 + package.json | 1 + static/assets/icons/bot.svg | 1 + static/icons/fonts/template.hbs | 39 +++++++++++++++++++++++++++ static/icons/fonts/zulip-icons.eot | Bin 0 -> 1808 bytes static/icons/fonts/zulip-icons.svg | 1 + static/icons/fonts/zulip-icons.ttf | Bin 0 -> 1628 bytes static/icons/fonts/zulip-icons.woff | Bin 0 -> 1028 bytes static/icons/fonts/zulip-icons.woff2 | Bin 0 -> 644 bytes static/icons/style.css | 39 +++++++++++++++++++++++++++ tools/generate-custom-icon-webfont | 39 +++++++++++++++++++++++++++ tools/linter_lib/custom_check.py | 3 ++- version.py | 2 +- zproject/settings.py | 3 +++ 14 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 static/assets/icons/bot.svg create mode 100644 static/icons/fonts/template.hbs create mode 100755 static/icons/fonts/zulip-icons.eot create mode 100755 static/icons/fonts/zulip-icons.svg create mode 100755 static/icons/fonts/zulip-icons.ttf create mode 100755 static/icons/fonts/zulip-icons.woff create mode 100644 static/icons/fonts/zulip-icons.woff2 create mode 100755 static/icons/style.css create mode 100755 tools/generate-custom-icon-webfont diff --git a/frontend_tests/zjsunit/output.js b/frontend_tests/zjsunit/output.js index abb5c90818..9fa7ce48a1 100644 --- a/frontend_tests/zjsunit/output.js +++ b/frontend_tests/zjsunit/output.js @@ -39,6 +39,7 @@ function stylesheets() { data += '\n'; data += '\n'; data += '\n'; + data += '\n'; data += '\n'; data += '\n'; data += '\n'; diff --git a/package.json b/package.json index cbb2c2e3a1..aa52f96999 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "svgo": "0.7.2", "swagger-parser": "3.4.1", "tslint": "5.3.2", + "webfonts-generator": "0.4.0", "webpack-dev-server": "2.4.1", "xmlhttprequest": "1.5.0" }, diff --git a/static/assets/icons/bot.svg b/static/assets/icons/bot.svg new file mode 100644 index 0000000000..361e048773 --- /dev/null +++ b/static/assets/icons/bot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/fonts/template.hbs b/static/icons/fonts/template.hbs new file mode 100644 index 0000000000..95d89206e7 --- /dev/null +++ b/static/icons/fonts/template.hbs @@ -0,0 +1,39 @@ +/* Custom Zulip icons generated with ./tools/generate-custom-icon-webfont */ + +@font-face { + font-family: '{{fontName}}'; + src: {{{src}}}; + font-weight: normal; + font-style: normal; +} + +i{{baseSelector}} { + font-family: '{{fontName}}' !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none; + font-size: inherit; + line-height: 100%; + + text-decoration: inherit; + text-rendering: auto; + display: inline-block; + speak: none; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +{{baseSelector}}::before { + font-family: 'zulip-icons' !important; + font-style: normal; + font-weight: normal !important; + vertical-align: top; +} + +{{#each codepoints}} +{{../baseSelector}}.{{../classPrefix}}{{@key}}::before { + content: "\\{{this}}"; +} +{{/each}} diff --git a/static/icons/fonts/zulip-icons.eot b/static/icons/fonts/zulip-icons.eot new file mode 100755 index 0000000000000000000000000000000000000000..7d3096bed250d171dbf2be8704d1fd2ee953bc25 GIT binary patch literal 1808 zcmd^AO-~b16g_XIE!q+wsKuznNm0Ncr4&R{KSGR_jZq^=Sdf^Zoqm{UXVOlI5EEUw z!3A+|;vaD9%B`+kvvOewOBZ5d!cNb7^BSrtzrZ({`_4V*&g*-3Zto2A0IM-TzR{!NZKEVM(SnOAd`!|7;GvEtG{_{eOr}A# zs-i4RBaMtwj#`DH+&}^^VIs4z`1rQ9b#asAHL^<&7N@egeEui>*YuYQHQWDrY3Dut z@4Wr8yHR?P-F*v~Me46Bj$KT=+FB<5#(SpWW28H!jl%bcYPpZAE^}2gRt&h*}baVLLo z34N{|)Nuw8rG|PZ7H+j{bNx^ejFYM$Bfy$b>k0IVZSZ{P#{jLV=R_EDSWndc8V^f% ziPgb7jGH0HWd;}>K6OsJB_|0>NmVUT% z2)Xb7ee|jXoYQGgxssWpFK?*&4r@qO*m+#S3~)6wJ#uPjBo!MLCzIDjcJ8K_9i0$Y zuZ&HIo{_QCP);OI#!{oRb2FK&My4=?Fbpv$jl?1niwKjmB;qvWl7?xBeM~H_tjuMY+93!65IF1Sa55i{?IKc+QYKj~u zlf-k44YsT|8k^+bX&fQ`pmCJ=i^ehHU5(>xZ3h}BFe>hEw%n>eSuJ?=<|C)va_vS3 z(*c*AMziYGt?6{8gI#dyPQwnIqP4bRHP_48AShX-hF7!lUOjMJ*R%YF_tYr_=}Hjz zxv8m==F=OQeuVS~1bb$$-AWCN7wm-s30 zP$SB#&w-3~d3j`fr9CB6V00Q4^^}hsrg)Y9iBGG~PK}ik){m^}?!#bNnlRVAK \ No newline at end of file diff --git a/static/icons/fonts/zulip-icons.ttf b/static/icons/fonts/zulip-icons.ttf new file mode 100755 index 0000000000000000000000000000000000000000..56eab563914c4beec42430e3b50f56d351afdbc8 GIT binary patch literal 1628 zcmd^9O-~b16g_XIEz%Mo%7;;jlcJyjN+}4YeuNk;8-oV0abaSHcKSi4ok=?oASSwU z0}JEc#6RHHm0Ml8X63>VmM(lJL|q;Ec>iPh|NUvy!XajCNEcFp-M-c`O6E1A||C=J=Chsn(IuG_y@t6H&hZMatok7u&|bkD%h z%Vj15Q|yZzl8y5Lj-<;W<8h>M7smbE!zFaOc2LI!L{v14w_@Q|%Qo|e5kZ}d3Niw* z6ShOV0qa8-x@k>4Cqj*ZXt*1O{v3}>4~m%G7yCk0XXt*kb|dVQ%q?@s{_*$4lBxrk zCo9#XoLMFL2$D(@k^H_mV%?#oAMPAN?)!fq9jXDBbQ@H!WT)uM7wUY6|C&5umvJ4F zz)X5#u(y9O85ea1@RJw(obLvjR4xFO3ykRxh%9$W2 zS*3k5$cuDiAf>*;PR^hTnpEpny1$d~Vi3K<)tB8%p zKQyPW%yVUf8LBFi#Tzrld*yWP9JO_&w-InI!oo5(Xq#B$?`OycDA6x5r-vF*PUV$q vmyburSFsf`1*%i1s8v3)80S;^OP^9T)_78m??!p9Pa6i0r3rJ{3sm$s8&|h6 literal 0 HcmV?d00001 diff --git a/static/icons/fonts/zulip-icons.woff b/static/icons/fonts/zulip-icons.woff new file mode 100755 index 0000000000000000000000000000000000000000..85c2d545b5f6a168a34b397477cc49ef7f57e7cd GIT binary patch literal 1028 zcmXT-cXMN4WB>vd76xt*%@zaUgV?CRJvh{ffq{_&C~6JFAqw59RsO;HMnEwaAm0{< z!>rugJ|*WS768RsfP8NtUGPcs+S>G-$}}MR0#FPn$Iw%6^k{BIYGMil1Cs-guM5Ox z+-==q89+gx7)Xs65UVg4GDv6SmQ(=6I)HqT-5d-O3=BE>$slzTfP6MEc4J`3O{@Uw zW10cvD}XQ~KZ8SFVs0u>YzNS8pgWnYj^26FU65Z~!oa}%2B-#T5`%7XSt)D9oaBU* zgoFo41_>LI6N(Byb0$7G?WuDzc|uY`Vgthj8>88V>c+Mc8<~$WpW4`v$)}Lk+`+`4 zX3grs0M`2;an6AQrw$xAa9)8yW#&Q?b7o~`X=Y|&W^H5UFo6lrW*vI)Vd6(+Umc9+pp$2UM7qr4MU7V4Q3eAZM{gVMe1MgIgZwOrTl1UB2AS1_CbWX0w9& zlZ5q`PG|_)^COgX>Hq)vrQ6@i-Q&p@<15oulB-B!{8o5s`;5u^H*=~#e|vVT^p5?% z8mHe`USVKjSNeKe&*%M?T$+b&CCqKre_`Sq!d2=x=R=m$!sy7b`}scwe=z(?P;7tzFfPGqkcq*Bff+2q1SGkDkb&Vpm=E-4Y5!io!v-R){=eEY zR9hU9oIkZp2)Hc2jj!kJu?q{UXIbU0Qt6Y~9;7|5N&SIl1&i9ersWAwuH0GZbYC92^q7_fE=0TO)Ui z%iFws7qTV(KjBxhF!#w9r?cg&Zt1n3Q`Oq27M>hzF*nt1>a{hcZw^f@e!Aki_mTFE zCpR8vll;HYWx8pbVBr_WZ`i zup6KLDz0@tWS4kMLB03y8^yVW(z7nzUz?fqOF-K`G^s_d{FA!;uj`-XIoD-ugQT;h Y1N<{2W=hPIoH6;6w}b=(>qo{A0ChHOBLDyZ literal 0 HcmV?d00001 diff --git a/static/icons/fonts/zulip-icons.woff2 b/static/icons/fonts/zulip-icons.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f3d090fa4b6cf97990c15017c59ebec275adc3b4 GIT binary patch literal 644 zcmV-~0(<>;Pew8T0RR9100M*n3jhEB00vwD00K4u0RR9100000000000000000000 z0000SR0dW6f^Z6f41pj4HUcCA2nz-P1Rw>3ItMKqq6HDvi)XT*2{yQe{!l?wZkj%w z7sKIF(r<$PYuWnE%%(pV2syeaQCBD|4x?`^DQb7dLv~95-12%}DoP`Y%ECb2Js%Bc zFrfjCCbVtS`pQL^PTBLV|K%Bh@{DjH{S^T7e>uL}BohD!jn$$x7e*5-4dh<@;|Usg zfQ1=1j9uUoo4g0@P8v7$d>9e4wuQ7-w{V>0JS+$>pOdr(R0|$RKvNg^P>t=! zog~6)IJ+D+Cm*uQ7y{>eK^U9>57r<+Q?0v&hv_vD)7-%f>*ICsy z0AnyJe7HYE033h-JlKQ%QCEX+%|=TZ{pHmQ+OIKQzf0wt*`Nlzi+wh5)qj2c+J3ou zE8k-oTg^jZkJPOKYds-P8&R;A?rB-j!r>|>Lp7+v1)N|-hctHhmDB&>&PDU!CyxvP zou$QoB=++nKZl~yB7aT5GF*$IoPSSL*JBJ+*xThhc2nYwc{3419_yikXdFtgB`C#q zDYL2rN4?H?iVI}GE2W%KU1iEFjU$V{h1V( z29Idyg>C07u_Hq4#_V$a21ILtM8z*S(DG}8Ab1yV9 e93zr-9qm=FuQIHx<^MGyCf%ha;x$Rv0RRB>3=qx$ literal 0 HcmV?d00001 diff --git a/static/icons/style.css b/static/icons/style.css new file mode 100755 index 0000000000..79caac9147 --- /dev/null +++ b/static/icons/style.css @@ -0,0 +1,39 @@ +/* Custom Zulip icons generated with ./tools/generate-custom-icon-webfont */ + +@font-face { + font-family: 'zulip-icons'; + src: url("fonts/zulip-icons.eot?d6a0487bb617e47dd22f6b30a327cfd4?#iefix") format("embedded-opentype"), +url("fonts/zulip-icons.woff2?d6a0487bb617e47dd22f6b30a327cfd4") format("woff2"), +url("fonts/zulip-icons.woff?d6a0487bb617e47dd22f6b30a327cfd4") format("woff"); + font-weight: normal; + font-style: normal; +} + +i.zulip-icon { + font-family: 'zulip-icons' !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none; + font-size: inherit; + line-height: 100%; + + text-decoration: inherit; + text-rendering: auto; + display: inline-block; + speak: none; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.zulip-icon::before { + font-family: 'zulip-icons' !important; + font-style: normal; + font-weight: normal !important; + vertical-align: top; +} + +.zulip-icon.bot::before { + content: "\f101"; +} diff --git a/tools/generate-custom-icon-webfont b/tools/generate-custom-icon-webfont new file mode 100755 index 0000000000..97de41906b --- /dev/null +++ b/tools/generate-custom-icon-webfont @@ -0,0 +1,39 @@ +#!/usr/bin/env node + +const fs = require('fs'); +const webfontsGenerator = require('webfonts-generator'); + +fs.readdir('./static/assets/icons', function (err, files) { + if (err) { + console.error(err); + process.exit(1); + } + + // Filter out any non-SVG files and join by absolute path + const svg = files.filter(function (file) { + return file.slice(-4) === '.svg'; + }).map(function (file) { + return './static/assets/icons/' + file; + }); + + // Generate webfonts + const options = { + files: svg, + dest: './static/icons/fonts', + fontName: 'zulip-icons', + cssDest: './static/icons/style.css', + cssFontsUrl: 'fonts/', + templateOptions: { + classPrefix: '', + baseSelector: '.zulip-icon', + }, + cssTemplate: './static/icons/fonts/template.hbs', + }; + webfontsGenerator(options, function (err) { + if (err) { + console.error(err); + process.exit(1); + } + console.log('SUCCESS! Webfonts generated in /static/icons/fonts.'); + }); +}); diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index e1c2b491f9..ad88def0a7 100644 --- a/tools/linter_lib/custom_check.py +++ b/tools/linter_lib/custom_check.py @@ -199,7 +199,8 @@ def build_custom_checkers(by_lang): 'frontend_tests/zjsunit', 'frontend_tests/casper_lib/common.js', 'frontend_tests/node_tests', - 'static/js/debug.js']), + 'static/js/debug.js', + 'tools/generate-custom-icon-webfont']), 'description': 'console.log and similar should not be used in webapp'}, {'pattern': '[.]text\(["\'][a-zA-Z]', 'description': 'Strings passed to $().text should be wrapped in i18n.t() for internationalization'}, diff --git a/version.py b/version.py index f8e20955ed..091730709e 100644 --- a/version.py +++ b/version.py @@ -1,2 +1,2 @@ ZULIP_VERSION = "1.7.0+git" -PROVISION_VERSION = '11.2' +PROVISION_VERSION = '11.3' diff --git a/zproject/settings.py b/zproject/settings.py index 63b651dcdf..1a2666c63b 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -783,6 +783,7 @@ PIPELINE = { 'styles/portico-signin.css', 'styles/pygments.css', 'third/thirdparty-fonts.css', + 'icons/style.css', 'styles/fonts.css', ), 'output_filename': 'min/portico.css' @@ -799,6 +800,7 @@ PIPELINE = { 'third/bootstrap-notify/css/bootstrap-notify.css', 'third/spectrum/spectrum.css', 'third/thirdparty-fonts.css', + 'icons/style.css', 'styles/components.css', 'styles/app_components.css', 'styles/zulip.css', @@ -826,6 +828,7 @@ PIPELINE = { 'third/bootstrap-notify/css/bootstrap-notify.css', 'third/spectrum/spectrum.css', 'third/thirdparty-fonts.css', + 'icons/style.css', 'node_modules/katex/dist/katex.css', 'styles/components.css', 'styles/app_components.css',