icons: Create framework for custom icons and add new bot icon.

frontend_tests/zjsunit/output.js

@@ -39,6 +39,7 @@ function stylesheets() {
     data += '<link href="../../static/styles/fonts.css" rel="stylesheet">\n';
     data += '<link href="../../static/styles/portico.css" rel="stylesheet">\n';
     data += '<link href="../../static/third/thirdparty-fonts.css" rel="stylesheet">\n';
+    data += '<link href="../../static/icons/style.css" rel="stylesheet">\n';
     data += '<link href="../../static/styles/zulip.css" rel="stylesheet">\n';
     data += '<link href="../../static/styles/settings.css" rel="stylesheet">\n';
     data += '<link href="../../static/styles/left-sidebar.css" rel="stylesheet">\n';

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"
   },

static/assets/icons/bot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M3.268 1.69a1.714 1.714 0 0 0-.214.054 1.714 1.714 0 0 0-.858 2.946l2.197 2.197h-.964A3.429 3.429 0 0 0 0 10.315v8.572a3.434 3.434 0 0 0 3.429 3.428H20.57A3.43 3.43 0 0 0 24 18.887v-8.572a3.429 3.429 0 0 0-3.429-3.428h-.964l2.197-2.197a1.714 1.714 0 0 0-1.447-2.946 1.714 1.714 0 0 0-1.018.482l-4.66 4.66H9.32l-4.66-4.66a1.714 1.714 0 0 0-1.393-.536zm4.178 10.34a2.571 2.571 0 0 1 .268 0 2.571 2.571 0 0 1 0 5.143 2.575 2.575 0 0 1-.268-5.143zm8.572 0a2.571 2.571 0 0 1 .268 0 2.571 2.571 0 0 1 0 5.143 2.575 2.575 0 0 1-.268-5.143z"/></svg>

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}}

static/icons/fonts/zulip-icons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"/>

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";
+}

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.');
+    });
+});

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'},

version.py

@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.7.0+git"
-PROVISION_VERSION = '11.2'
+PROVISION_VERSION = '11.3'

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',