hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Always preload app fonts at earliest stages (#5117)

Browse Source 
* always preload app fonts at earliest stages, fix #5019

Signed-off-by: Roman <ixrock@gmail.com>

* attempt to fix tests, clean up

Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2022-03-29 19:15:46 +03:00 committed by GitHub
parent dd0cb8594c
commit 30d22bfb6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/app.scss
View File

@ -7,9 +7,9 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import "~flex.box"; // todo: replace with tailwind's flexbox classes @import "~flex.box";
@import "./fonts";
@import "../themes/theme-vars"; @import "../themes/theme-vars";
@import "./fonts";
:root { :root {
--unit: 8px; --unit: 8px;

3
src/renderer/components/dock/terminal/terminal-dock-tab.scss
View File

@ -4,7 +4,4 @@
*/ */
.TerminalTab { .TerminalTab {
@include font-preload {
font-family: "RobotoMono", monospace;
}
} }

10
src/renderer/components/fonts.scss
View File

@ -24,3 +24,13 @@
font-display: block; font-display: block;
src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype'); src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
} }
#fonts-preloading {
> .icons {
@include font-preload("Material Icons");
}
> .terminal {
@include font-preload("RobotoMono");
}
}

15
src/renderer/components/mixins.scss
View File

@ -60,14 +60,19 @@
} }
} }
// Makes custom font available at earlier stages (start preloading) // Makes custom @font-family available at earlier stages.
// Element must be in DOM and contain some text of loading font. // Element must exist in DOM as soon as possible to initiate preloading.
@mixin font-preload() { @mixin font-preload($fontFamily) {
position: absolute;
visibility: hidden;
height: 0;
&:before { &:before {
width: 0; width: 0;
display: block; display: block;
overflow: hidden; overflow: hidden;
content: "x"; // required content: "x"; // some text required to start applying font in document
@content; // must contain `font-family` font-family: $fontFamily; // imported name in @font-face declaration
@content;
} }
} }

7
src/renderer/template.html
View File

@ -2,13 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="preload" href="<%= assetPath %>/MaterialIcons-Regular.ttf" as="font" crossorigin>
<link rel="preload" href="<%= assetPath %>/roboto-mono-nerd.ttf" as="font" crossorigin>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="terminal-init"></div> <div id="terminal-init"></div>
<div id="fonts-preloading">
<i class="icons"><!--material icons--></i>
<i class="terminal"><!--roboto mono--></i>
</div>
</body> </body>
</html> </html>