reduced frontend size by reducing the icons set
Massimo Melina committed
Jan 15, 2022 at 17:42 UTC
6ba8372f25a1e874094967455d3c283941442b59
10 files changed
+231
-43
fontello-config.json
new
+148
@@ -0,0 +1,148 @@
1
+{
2
+ "name": "",
3
+ "css_prefix_text": "fa-",
4
+ "css_use_suffix": false,
5
+ "hinting": true,
6
+ "units_per_em": 1000,
7
+ "ascent": 850,
8
+ "glyphs": [
9
+ {
10
+ "uid": "43ab845088317bd348dee1d975700c48",
11
+ "css": "check-circled",
12
+ "code": 59393,
13
+ "src": "fontawesome"
14
+ },
15
+ {
16
+ "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
17
+ "css": "download",
18
+ "code": 59396,
19
+ "src": "fontawesome"
20
+ },
21
+ {
22
+ "uid": "eeec3208c90b7b48e804919d0d2d4a41",
23
+ "css": "upload",
24
+ "code": 59397,
25
+ "src": "fontawesome"
26
+ },
27
+ {
28
+ "uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
29
+ "css": "edit",
30
+ "code": 59399,
31
+ "src": "fontawesome"
32
+ },
33
+ {
34
+ "uid": "dd6c6b221a1088ff8a9b9cd32d0b3dd5",
35
+ "css": "check",
36
+ "code": 59400,
37
+ "src": "fontawesome"
38
+ },
39
+ {
40
+ "uid": "f8aa663c489bcbd6e68ec8147dca841e",
41
+ "css": "folder",
42
+ "code": 59401,
43
+ "src": "fontawesome"
44
+ },
45
+ {
46
+ "uid": "d7271d490b71df4311e32cdacae8b331",
47
+ "css": "home",
48
+ "code": 59403,
49
+ "src": "fontawesome"
50
+ },
51
+ {
52
+ "uid": "f2aa28a2548ed3d2be718d087b65ee21",
53
+ "css": "key",
54
+ "code": 59404,
55
+ "src": "fontawesome"
56
+ },
57
+ {
58
+ "uid": "0f4cae16f34ae243a6144c18a003f2d8",
59
+ "css": "cancel-circled",
60
+ "code": 59409,
61
+ "src": "fontawesome"
62
+ },
63
+ {
64
+ "uid": "559647a6f430b3aeadbecd67194451dd",
65
+ "css": "menu",
66
+ "code": 61641,
67
+ "src": "fontawesome"
68
+ },
69
+ {
70
+ "uid": "ab95e1351ebaec5850101097cbf7097f",
71
+ "css": "quote-left",
72
+ "code": 61709,
73
+ "src": "fontawesome"
74
+ },
75
+ {
76
+ "uid": "e80ae555c1413a4ec18b33fb348b4049",
77
+ "css": "file-archive",
78
+ "code": 61894,
79
+ "src": "fontawesome"
80
+ },
81
+ {
82
+ "uid": "bbfb51903f40597f0b70fd75bc7b5cac",
83
+ "css": "trash",
84
+ "code": 61944,
85
+ "src": "fontawesome"
86
+ },
87
+ {
88
+ "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
89
+ "css": "search",
90
+ "code": 59411,
91
+ "src": "fontawesome"
92
+ },
93
+ {
94
+ "uid": "0d20938846444af8deb1920dc85a29fb",
95
+ "css": "logout",
96
+ "code": 59412,
97
+ "src": "fontawesome"
98
+ },
99
+ {
100
+ "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
101
+ "css": "filter",
102
+ "code": 61616,
103
+ "src": "fontawesome"
104
+ },
105
+ {
106
+ "uid": "b86df50a2d898bfcd371fa86c0b8b2fb",
107
+ "css": "user-o",
108
+ "code": 62144,
109
+ "src": "fontawesome"
110
+ },
111
+ {
112
+ "uid": "e99461abfef3923546da8d745372c995",
113
+ "css": "cog",
114
+ "code": 59392,
115
+ "src": "fontawesome"
116
+ },
117
+ {
118
+ "uid": "dea706a9bd3144316ce37406ec10f469",
119
+ "css": "level-up",
120
+ "code": 61768,
121
+ "src": "fontawesome"
122
+ },
123
+ {
124
+ "uid": "1b5a5d7b7e3c71437f5a26befdd045ed",
125
+ "css": "doc",
126
+ "code": 59394,
127
+ "src": "fontawesome"
128
+ },
129
+ {
130
+ "uid": "9bc2902722abb366a213a052ade360bc",
131
+ "css": "spin6",
132
+ "code": 59449,
133
+ "src": "fontelico"
134
+ },
135
+ {
136
+ "uid": "1dcd2b2148b7f086a4eb47f6a746bdee",
137
+ "css": "unlink",
138
+ "code": 61735,
139
+ "src": "fontawesome"
140
+ },
141
+ {
142
+ "uid": "b624a1e512819d410ddbee84e6918b9d",
143
+ "css": "stop",
144
+ "code": 59395,
145
+ "src": "fontawesome"
146
+ }
147
+ ]
148
+}
\ No newline at end of file
frontend/public/fontello.css
new
+64
@@ -0,0 +1,64 @@
1
+@font-face {
2
+ font-family: 'fontello';
3
+ src: url('fontello.woff2?16824442') format('woff2');
4
+ font-weight: normal;
5
+ font-style: normal;
6
+}
7
+[class^="fa-"]:before, [class*=" fa-"]:before {
8
+ font-family: "fontello";
9
+ font-style: normal;
10
+ font-weight: normal;
11
+ speak: never;
12
+
13
+ display: inline-block;
14
+ text-decoration: inherit;
15
+ width: 1em;
16
+ margin-right: .2em;
17
+ text-align: center;
18
+ /* opacity: .8; */
19
+
20
+ /* For safety - reset parent styles, that can break glyph codes*/
21
+ font-variant: normal;
22
+ text-transform: none;
23
+
24
+ /* fix buttons height, for twitter bootstrap */
25
+ line-height: 1em;
26
+
27
+ /* Animation center compensation - margins should be symmetric */
28
+ /* remove if not needed */
29
+ margin-left: .2em;
30
+
31
+ /* you can be more comfortable with increased icons size */
32
+ /* font-size: 120%; */
33
+
34
+ /* Font smoothing. That was taken from TWBS */
35
+ -webkit-font-smoothing: antialiased;
36
+ -moz-osx-font-smoothing: grayscale;
37
+
38
+ /* Uncomment for 3D effect */
39
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
40
+}
41
+
42
+.fa-cog:before { content: '\e800'; } /* '' */
43
+.fa-check-circled:before { content: '\e801'; } /* '' */
44
+.fa-doc:before { content: '\e802'; } /* '' */
45
+.fa-stop:before { content: '\e803'; } /* '' */
46
+.fa-download:before { content: '\e804'; } /* '' */
47
+.fa-upload:before { content: '\e805'; } /* '' */
48
+.fa-edit:before { content: '\e807'; } /* '' */
49
+.fa-check:before { content: '\e808'; } /* '' */
50
+.fa-folder:before { content: '\e809'; } /* '' */
51
+.fa-home:before { content: '\e80b'; } /* '' */
52
+.fa-key:before { content: '\e80c'; } /* '' */
53
+.fa-cancel-circled:before { content: '\e811'; } /* '' */
54
+.fa-search:before { content: '\e813'; } /* '' */
55
+.fa-logout:before { content: '\e814'; } /* '' */
56
+.fa-spin6:before { content: '\e839'; } /* '' */
57
+.fa-filter:before { content: '\f0b0'; } /* '' */
58
+.fa-menu:before { content: '\f0c9'; } /* '' */
59
+.fa-quote-left:before { content: '\f10d'; } /* '' */
60
+.fa-unlink:before { content: '\f127'; } /* '' */
61
+.fa-level-up:before { content: '\f148'; } /* '' */
62
+.fa-file-archive:before { content: '\f1c6'; } /* '' */
63
+.fa-trash:before { content: '\f1f8'; } /* '' */
64
+.fa-user-o:before { content: '\f2c0'; } /* '' */
frontend/public/fontello.woff2
Binary files /dev/null and b/frontend/public/fontello.woff2 differ
frontend/public/icons.css
deleted
-23
@@ -1,23 +0,0 @@
1
-/* fallback */
2
-@font-face {
3
- font-family: icons;
4
- font-style: normal;
5
- font-weight: 400;
6
- src: url(icons.woff2) format('woff2');
7
-}
8
-
9
-.icon {
10
- font-family: icons, serif;
11
- font-weight: normal;
12
- font-style: normal;
13
- font-size: 24px;
14
- line-height: 1;
15
- letter-spacing: normal;
16
- text-transform: none;
17
- display: inline-block;
18
- white-space: nowrap;
19
- word-wrap: normal;
20
- direction: ltr;
21
- -webkit-font-feature-settings: 'liga';
22
- -webkit-font-smoothing: antialiased;
23
-}
frontend/public/icons.woff2
Binary files a/frontend/public/icons.woff2 and /dev/null differ
frontend/public/index.html
+1
-1
@@ -6,7 +6,7 @@
6
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
<meta name="theme-color" content="#000000" />
8
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
9
- <link href="icons.css" rel="stylesheet" />
9
+ <link href="fontello.css" rel="stylesheet" />
10
<title>File Server</title>
11
</head>
12
<body>
frontend/src/Breadcrumbs.ts
+1
-1
@@ -10,7 +10,7 @@ export function Breadcrumbs() {
10
const parent = currentPath.split('/').slice(0,-1).join('/')+'/'
11
const breadcrumbs = currentPath ? currentPath.split('/').map(x => [prev = prev + x + '/', decodeURIComponent(x)]) : []
12
return h(Fragment, {},
13
- h(Breadcrumb, { label: hIcon('reply'), path: parent }),
13
+ h(Breadcrumb, { label: hIcon('parent'), path: parent }),
14
h(Breadcrumb),
15
breadcrumbs.map(([path,label]) =>
16
h(Breadcrumb, {
frontend/src/icons.ts
+12
-11
@@ -2,17 +2,18 @@ import { state, useSnapState } from './state'
2
import { createElement as h } from 'react'
3
4
const SYS_ICONS: Record<string,string> = {
5
- login: 'person',
6
- user: 'account_circle',
7
- file: 'description',
8
- spinner: 'sports_baseball',
9
- filter: 'filter_alt',
10
- interrupted: 'heart_broken',
11
- sort: 'sort_by_alpha',
5
+ login: 'user-o',
6
+ user: 'user-o',
7
+ file: 'doc',
8
+ spinner: 'spin6 spinner',
9
+ settings: 'cog',
10
+ parent: 'level-up mirror',
11
+ archive: 'file-archive',
12
+ interrupted: 'unlink',
13
}
14
15
document.fonts.ready.then(async ()=> {
15
- const fontName = 'icons'
16
+ const fontName = 'fontello'
17
await document.fonts.load(`9px "${fontName}"`) // force font to be loaded even if we didn't display anything with it yet
18
state.iconsClass = ' ' // don't need additional class, but the empty space will cause reload
19
})
@@ -20,9 +21,9 @@ document.fonts.ready.then(async ()=> {
21
export function Icon({ name, className='', ...props }: { name:string, className:string, style?:any }) {
22
name = SYS_ICONS[name] || name
23
const { iconsClass } = useSnapState()
23
- return h('span',{
24
+ return h('i',{
25
...props,
25
- className: iconsClass+' icon '+className,
26
- }, iconsClass ? name : '#')
26
+ className: iconsClass && 'icon fa-'+name,
27
+ }, iconsClass ? null : '#')
28
}
29
frontend/src/index.scss
+5
-6
@@ -50,10 +50,10 @@ input[type=checkbox] {
50
}
51
52
.icon {
53
- vertical-align: text-bottom;
53
font-size: 1.2em;
54
}
55
56
+.icon.mirror:before { transform: scaleX(-1); }
57
a {
58
text-decoration: none;
59
color: #357;
@@ -91,16 +91,15 @@ header {
91
50% {opacity: 0.2}
92
}
93
@keyframes spin {
94
- from { transform: rotate(0deg); }
95
- to { transform: rotate(360deg); }
94
+ 100% { transform: rotate(360deg); }
95
}
96
@keyframes fade-in {
97
0% {opacity: 0}
98
100% {opacity: 1}
99
}
100
102
-.spinner {
103
- animation: 1s spin infinite;
101
+.spinner, .icon.spinner:before {
102
+ animation: 1.5s spin infinite linear;
103
}
104
105
.breadcrumb {
@@ -194,7 +193,7 @@ button label {
193
}
194
195
@media (max-width: 40em) {
197
- body, button, select { font-size: 16pt; }
196
+ body, button, select { font-size: 14pt; }
197
#menu-bar {
198
display: flex;
199
justify-content: space-between;
todo.md
-1
@@ -1,6 +1,5 @@
1
# To do
2
- emoji as an alternative to icons?
3
-- smaller icons file?
3
- remove seconds from time
4
- update tests to SRP login
5
- upload