From f76b0ea06f29a3156f729ee72ce273046c1cfdac Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 11:49:42 +0200 Subject: [PATCH 01/13] fix import after bundle changes --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 99f41f7b..45bae153 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ window.HYDROGEN_VERSION = "%%VERSION%%"; - - ` + ``); - removeOrEnableScript(doc("script#phone-debug-pre"), debug); - removeOrEnableScript(doc("script#phone-debug-post"), debug); removeOrEnableScript(doc("script#service-worker"), offline); const versionScript = doc("script#version"); From 23d96b554a57739ec295ddd0372e4f60222eb46c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 11:51:21 +0200 Subject: [PATCH 03/13] make theme directory + readme of ~what should go in a theme --- src/ui/web/css/themes/README.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/ui/web/css/themes/README.md diff --git a/src/ui/web/css/themes/README.md b/src/ui/web/css/themes/README.md new file mode 100644 index 00000000..9078da14 --- /dev/null +++ b/src/ui/web/css/themes/README.md @@ -0,0 +1,7 @@ +things that go in the theme: + - margin specialization + - padding + - colors (foreground, background, border, ...) + - border-radius + - font faces, weights and sizes + - alignment From be9e4768747b5cfd1b0ed9224bad92047d12253a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 11:52:03 +0200 Subject: [PATCH 04/13] extract theme from current styling --- index.html | 1 + src/ui/web/css/avatar.css | 4 +- src/ui/web/css/form.css | 26 ++++ src/ui/web/css/layout.css | 4 +- src/ui/web/css/left-panel.css | 20 --- src/ui/web/css/login.css | 34 +++++ src/ui/web/css/main.css | 82 +---------- src/ui/web/css/room.css | 36 +---- src/ui/web/css/spinner.css | 7 + src/ui/web/css/status.css | 33 +++++ src/ui/web/css/themes/bubbles/theme.css | 183 ++++++++++++++++++++++++ src/ui/web/css/timeline.css | 49 ------- src/ui/web/view-gallery.html | 1 + 13 files changed, 296 insertions(+), 184 deletions(-) create mode 100644 src/ui/web/css/form.css create mode 100644 src/ui/web/css/status.css create mode 100644 src/ui/web/css/themes/bubbles/theme.css diff --git a/index.html b/index.html index 4aeff03b..3a1633a2 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + ` + ``); From c3dc01283d7f48e167d4ae9cc9acdb2d7d4ff6ba Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 16:37:55 +0200 Subject: [PATCH 09/13] copy theme assets anything that is not a css file, which will be bundled woff(2) files are treated specially since we only need WOFF for legacy (IE11) and only WOFF2 for any modern browser. --- scripts/build.mjs | 45 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index 72b11dea..08e44715 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -43,6 +43,7 @@ const PROJECT_NAME = "Hydrogen Chat"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const projectDir = path.join(__dirname, "../"); +const cssDir = path.join(projectDir, "src/ui/web/css/"); const targetDir = path.join(projectDir, "target"); const {debug, noOffline, legacy} = process.argv.reduce((params, param) => { @@ -76,6 +77,10 @@ async function build() { themes.push(themeName); }); + // also creates the directories where the theme css bundles are placed in, + // so do it first + const themeAssets = await copyThemeAssets(themes, legacy); + await buildHtml(doc, version, bundleName); if (legacy) { await buildJsLegacy(bundleName); @@ -106,6 +111,27 @@ async function findThemes(doc, callback) { }); } +async function copyThemeAssets(themes, legacy) { + const assets = []; + // create theme directories and copy assets + await fs.mkdir(path.join(targetDir, "themes")); + for (const theme of themes) { + assets.push(`themes/${theme}/bundle.css`); + const themeDstFolder = path.join(targetDir, `themes/${theme}`); + await fs.mkdir(themeDstFolder); + const themeSrcFolder = path.join(cssDir, `themes/${theme}`); + await copyFolder(themeSrcFolder, themeDstFolder, file => { + const isUnneededFont = legacy ? file.endsWith(".woff2") : file.endsWith(".woff"); + if (!file.endsWith(".css") && !isUnneededFont) { + assets.push(file.substr(cssDir.length)); + return true; + } + return false; + }); + } + return assets; +} + async function buildHtml(doc, version, bundleName) { // transform html file // change path to main.css to css bundle @@ -223,7 +249,6 @@ async function buildCssLegacy() { await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); } - function removeOrEnableScript(scriptNode, enable) { if (enable) { scriptNode.attr("type", "text/javascript"); @@ -234,9 +259,7 @@ function removeOrEnableScript(scriptNode, enable) { async function removeDirIfExists(targetDir) { try { - const files = await fs.readdir(targetDir); - await Promise.all(files.map(filename => fs.unlink(path.join(targetDir, filename)))); - await fs.rmdir(targetDir); + await fs.rmdir(targetDir, {recursive: true}); } catch (err) { if (err.code !== "ENOENT") { throw err; @@ -244,4 +267,18 @@ async function removeDirIfExists(targetDir) { } } +async function copyFolder(srcRoot, dstRoot, filter) { + const dirEnts = await fs.readdir(srcRoot, {withFileTypes: true}); + for (const dirEnt of dirEnts) { + const dstPath = path.join(dstRoot, dirEnt.name); + const srcPath = path.join(srcRoot, dirEnt.name); + if (dirEnt.isDirectory()) { + await fs.mkdir(dstPath); + await copyFolder(srcPath, dstPath, filter); + } else if (dirEnt.isFile() && filter(srcPath)) { + await fs.copyFile(srcPath, dstPath); + } + } +} + build().catch(err => console.error(err)); From fc8d2efaf212e29c6dfcd171225f17710ccdaf69 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 16:39:35 +0200 Subject: [PATCH 10/13] build theme css bundles --- scripts/build.mjs | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index 08e44715..7282e364 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -84,11 +84,10 @@ async function build() { await buildHtml(doc, version, bundleName); if (legacy) { await buildJsLegacy(bundleName); - await buildCssLegacy(); } else { await buildJs(bundleName); - await buildCss(); } + await buildCssBundles(legacy ? buildCssLegacy : buildCss, themes); if (offline) { await buildOffline(version, bundleName); } @@ -231,22 +230,29 @@ async function buildOffline(version, bundleName) { await fs.writeFile(path.join(targetDir, "icon-192.png"), icon); } -async function buildCss() { - // create css bundle - const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css"); - const preCss = await fs.readFile(cssMainFile, "utf8"); - const cssBundler = postcss([postcssImport]); - const result = await cssBundler.process(preCss, {from: cssMainFile}); - await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); +async function buildCssBundles(buildFn, themes) { + const cssMainFile = path.join(cssDir, "main.css"); + await buildFn(cssMainFile, path.join(targetDir, `${PROJECT_ID}.css`)); + for (const theme of themes) { + await buildFn( + path.join(cssDir, `themes/${theme}/theme.css`), + path.join(targetDir, `themes/${theme}/bundle.css`) + ); + } } -async function buildCssLegacy() { - // create css bundle - const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css"); - const preCss = await fs.readFile(cssMainFile, "utf8"); +async function buildCss(entryPath, bundlePath) { + const preCss = await fs.readFile(entryPath, "utf8"); + const cssBundler = postcss([postcssImport]); + const result = await cssBundler.process(preCss, {from: entryPath}); + await fs.writeFile(bundlePath, result.css, "utf8"); +} + +async function buildCssLegacy(entryPath, bundlePath) { + const preCss = await fs.readFile(entryPath, "utf8"); const cssBundler = postcss([postcssImport, cssvariables(), flexbugsFixes()]); - const result = await cssBundler.process(preCss, {from: cssMainFile}); - await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8"); + const result = await cssBundler.process(preCss, {from: entryPath}); + await fs.writeFile(bundlePath, result.css, "utf8"); } function removeOrEnableScript(scriptNode, enable) { From e1a5c362dcc76538a790668856674141106ef203 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 16:40:28 +0200 Subject: [PATCH 11/13] add theme assets to offline definition --- scripts/build.mjs | 17 +++++++++++++---- src/service-worker.template.js | 8 ++++++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index 7282e364..611738cb 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -89,7 +89,7 @@ async function build() { } await buildCssBundles(legacy ? buildCssLegacy : buildCss, themes); if (offline) { - await buildOffline(version, bundleName); + await buildOffline(version, bundleName, themeAssets); } console.log(`built ${PROJECT_ID}${legacy ? " legacy" : ""} ${version} successfully`); @@ -196,9 +196,17 @@ async function buildJsLegacy(bundleName) { }); } -async function buildOffline(version, bundleName) { +async function buildOffline(version, bundleName, themeAssets) { + const {offlineAssets, cacheAssets} = themeAssets.reduce((result, asset) => { + if (asset.endsWith(".css")) { + result.offlineAssets.push(asset); + } else { + result.cacheAssets.push(asset); + } + return result; + }, {offlineAssets: [], cacheAssets: []}); // write offline availability - const offlineFiles = [bundleName, `${PROJECT_ID}.css`, "index.html", "icon-192.png"]; + const offlineFiles = [bundleName, `${PROJECT_ID}.css`, "index.html", "icon-192.png"].concat(offlineAssets); // write appcache manifest const manifestLines = [ @@ -214,7 +222,8 @@ async function buildOffline(version, bundleName) { // write service worker let swSource = await fs.readFile(path.join(projectDir, "src/service-worker.template.js"), "utf8"); swSource = swSource.replace(`"%%VERSION%%"`, `"${version}"`); - swSource = swSource.replace(`"%%FILES%%"`, JSON.stringify(offlineFiles)); + swSource = swSource.replace(`"%%OFFLINE_FILES%%"`, JSON.stringify(offlineFiles)); + swSource = swSource.replace(`"%%CACHE_FILES%%"`, JSON.stringify(cacheAssets)); await fs.writeFile(path.join(targetDir, "sw.js"), swSource, "utf8"); // write web manifest const webManifest = { diff --git a/src/service-worker.template.js b/src/service-worker.template.js index 331f5cb7..0ccca862 100644 --- a/src/service-worker.template.js +++ b/src/service-worker.template.js @@ -15,13 +15,17 @@ limitations under the License. */ const VERSION = "%%VERSION%%"; -const FILES = "%%FILES%%"; const cacheName = `brawl-${VERSION}`; +const OFFLINE_FILES = "%%OFFLINE_FILES%%"; +// TODO: cache these files when requested +// The difficulty is that these are relative filenames, and we don't have access to document.baseURI +// Clients.match({type: "window"}).url and assume they are all the same? they really should be ... safari doesn't support this though +const CACHE_FILES = "%%CACHE_FILES%%"; self.addEventListener('install', function(e) { e.waitUntil( caches.open(cacheName).then(function(cache) { - return cache.addAll(FILES); + return cache.addAll(OFFLINE_FILES); }) ); }); From c6f38a4614da2ac67350f40a70b92bd8438ecdec Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 16:40:47 +0200 Subject: [PATCH 12/13] missing rename --- src/service-worker.template.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/service-worker.template.js b/src/service-worker.template.js index 0ccca862..485afba8 100644 --- a/src/service-worker.template.js +++ b/src/service-worker.template.js @@ -15,12 +15,12 @@ limitations under the License. */ const VERSION = "%%VERSION%%"; -const cacheName = `brawl-${VERSION}`; const OFFLINE_FILES = "%%OFFLINE_FILES%%"; // TODO: cache these files when requested // The difficulty is that these are relative filenames, and we don't have access to document.baseURI // Clients.match({type: "window"}).url and assume they are all the same? they really should be ... safari doesn't support this though const CACHE_FILES = "%%CACHE_FILES%%"; +const cacheName = `hydrogen-${VERSION}`; self.addEventListener('install', function(e) { e.waitUntil( From d7657b519a3ddea93c083b150930b56f45b7ea35 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 12 Aug 2020 16:41:03 +0200 Subject: [PATCH 13/13] add element theme (only some color changes + Inter font for now) --- index.html | 3 +- src/ui/web/css/themes/element/inter.css | 152 ++++++++++++++ .../css/themes/element/inter/Inter-Black.woff | Bin 0 -> 139648 bytes .../themes/element/inter/Inter-Black.woff2 | Bin 0 -> 104656 bytes .../element/inter/Inter-BlackItalic.woff | Bin 0 -> 145816 bytes .../element/inter/Inter-BlackItalic.woff2 | Bin 0 -> 109900 bytes .../css/themes/element/inter/Inter-Bold.woff | Bin 0 -> 143464 bytes .../css/themes/element/inter/Inter-Bold.woff2 | Bin 0 -> 107144 bytes .../element/inter/Inter-BoldItalic.woff | Bin 0 -> 149360 bytes .../element/inter/Inter-BoldItalic.woff2 | Bin 0 -> 112276 bytes .../themes/element/inter/Inter-ExtraBold.woff | Bin 0 -> 143256 bytes .../element/inter/Inter-ExtraBold.woff2 | Bin 0 -> 107304 bytes .../element/inter/Inter-ExtraBoldItalic.woff | Bin 0 -> 149116 bytes .../element/inter/Inter-ExtraBoldItalic.woff2 | Bin 0 -> 112656 bytes .../element/inter/Inter-ExtraLight.woff | Bin 0 -> 141344 bytes .../element/inter/Inter-ExtraLight.woff2 | Bin 0 -> 105444 bytes .../element/inter/Inter-ExtraLightItalic.woff | Bin 0 -> 148416 bytes .../inter/Inter-ExtraLightItalic.woff2 | Bin 0 -> 111804 bytes .../themes/element/inter/Inter-Italic.woff | Bin 0 -> 143476 bytes .../themes/element/inter/Inter-Italic.woff2 | Bin 0 -> 108172 bytes .../css/themes/element/inter/Inter-Light.woff | Bin 0 -> 141264 bytes .../themes/element/inter/Inter-Light.woff2 | Bin 0 -> 105556 bytes .../element/inter/Inter-LightItalic.woff | Bin 0 -> 148408 bytes .../element/inter/Inter-LightItalic.woff2 | Bin 0 -> 112040 bytes .../themes/element/inter/Inter-Medium.woff | Bin 0 -> 142780 bytes .../themes/element/inter/Inter-Medium.woff2 | Bin 0 -> 106484 bytes .../element/inter/Inter-MediumItalic.woff | Bin 0 -> 149344 bytes .../element/inter/Inter-MediumItalic.woff2 | Bin 0 -> 112640 bytes .../themes/element/inter/Inter-Regular.woff | Bin 0 -> 134996 bytes .../themes/element/inter/Inter-Regular.woff2 | Bin 0 -> 100368 bytes .../themes/element/inter/Inter-SemiBold.woff | Bin 0 -> 143148 bytes .../themes/element/inter/Inter-SemiBold.woff2 | Bin 0 -> 106916 bytes .../element/inter/Inter-SemiBoldItalic.woff | Bin 0 -> 149356 bytes .../element/inter/Inter-SemiBoldItalic.woff2 | Bin 0 -> 112768 bytes .../css/themes/element/inter/Inter-Thin.woff | Bin 0 -> 137068 bytes .../css/themes/element/inter/Inter-Thin.woff2 | Bin 0 -> 101004 bytes .../element/inter/Inter-ThinItalic.woff | Bin 0 -> 144528 bytes .../element/inter/Inter-ThinItalic.woff2 | Bin 0 -> 107584 bytes src/ui/web/css/themes/element/theme.css | 188 ++++++++++++++++++ 39 files changed, 342 insertions(+), 1 deletion(-) create mode 100644 src/ui/web/css/themes/element/inter.css create mode 100644 src/ui/web/css/themes/element/inter/Inter-Black.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Black.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Bold.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Bold.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Italic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Italic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Light.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Light.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-LightItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Medium.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Medium.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Regular.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Regular.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-SemiBold.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-Thin.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-Thin.woff2 create mode 100644 src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff create mode 100644 src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 create mode 100644 src/ui/web/css/themes/element/theme.css diff --git a/index.html b/index.html index 3a1633a2..09e51f34 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ - + +