fix: frontend: fallback emoji icons for paging
Massimo Melina committed
Mar 13, 2023 at 10:34 UTC
04501b36805fb1d130b0f33961adaa73fc176f20
6 files changed
+62
-68
frontend/fontello-config.json
+25
-31
@@ -6,24 +6,6 @@
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
- },
9
{
10
"uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
11
"css": "edit",
@@ -54,12 +36,6 @@
36
"code": 59404,
37
"src": "fontawesome"
38
},
57
- {
58
- "uid": "0f4cae16f34ae243a6144c18a003f2d8",
59
- "css": "cancel-circled",
60
- "code": 59409,
61
- "src": "fontawesome"
62
- },
39
{
40
"uid": "559647a6f430b3aeadbecd67194451dd",
41
"css": "menu",
@@ -68,13 +44,13 @@
44
},
45
{
46
"uid": "ab95e1351ebaec5850101097cbf7097f",
71
- "css": "quote-left",
47
+ "css": "quote",
48
"code": 61709,
49
"src": "fontawesome"
50
},
51
{
52
"uid": "e80ae555c1413a4ec18b33fb348b4049",
77
- "css": "file-archive",
53
+ "css": "archive",
54
"code": 61894,
55
"src": "fontawesome"
56
},
@@ -162,17 +138,35 @@
138
"code": 59405,
139
"src": "fontawesome"
140
},
141
+ {
142
+ "uid": "c47efa0e3e74f6ba4c2562c1258fff1f",
143
+ "css": "to_end",
144
+ "code": 59408,
145
+ "src": "fontawesome"
146
+ },
147
+ {
148
+ "uid": "348b04ea17f646fbc6a46e20ebe4fe12",
149
+ "css": "download",
150
+ "code": 61486,
151
+ "src": "mfglabs"
152
+ },
153
+ {
154
+ "uid": "ce06b5805120d0c2f8d60cd3f1a4fdb5",
155
+ "css": "play",
156
+ "code": 59396,
157
+ "src": "fontawesome"
158
+ },
159
{
160
"uid": "12052b30d23a1a70d6b32962d5464cae",
167
- "css": "to-start",
161
+ "css": "to_start",
162
"code": 59406,
163
"src": "fontawesome"
164
},
165
{
172
- "uid": "c47efa0e3e74f6ba4c2562c1258fff1f",
173
- "css": "to-end",
174
- "code": 59408,
175
- "src": "fontawesome"
166
+ "uid": "4f3b31017c63ba04dc4f78ce7a8f02b1",
167
+ "css": "upload",
168
+ "code": 61487,
169
+ "src": "mfglabs"
170
}
171
]
172
}
\ No newline at end of file
frontend/public/fontello.css
+10
-12
@@ -1,7 +1,6 @@
1
@font-face {
2
font-family: 'fontello';
3
- src: url('fontello.woff2?1378305') format('woff2');
4
- font-weight: normal;
3
+ src: url('fontello.woff2?66723712') format('woff2'); font-weight: normal;
4
font-style: normal;
5
}
6
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
@@ -10,7 +9,7 @@
9
@media screen and (-webkit-min-device-pixel-ratio:0) {
10
@font-face {
11
font-family: 'fontello';
13
- src: url('../font/fontello.svg?1378305#fontello') format('svg');
12
+ src: url('../font/fontello.svg?66723712#fontello') format('svg');
13
}
14
}
15
*/
@@ -50,11 +49,9 @@
49
}
50
51
.fa-cog:before { content: '\e800'; } /* '' */
53
-.fa-check-circled:before { content: '\e801'; } /* '' */
52
.fa-doc:before { content: '\e802'; } /* '' */
53
.fa-stop:before { content: '\e803'; } /* '' */
56
-.fa-download:before { content: '\e804'; } /* '' */
57
-.fa-upload:before { content: '\e805'; } /* '' */
54
+.fa-play:before { content: '\e804'; } /* '' */
55
.fa-cancel:before { content: '\e806'; } /* '' */
56
.fa-edit:before { content: '\e807'; } /* '' */
57
.fa-check:before { content: '\e808'; } /* '' */
@@ -62,18 +59,19 @@
59
.fa-user:before { content: '\e80a'; } /* '' */
60
.fa-home:before { content: '\e80b'; } /* '' */
61
.fa-key:before { content: '\e80c'; } /* '' */
65
-.fa-to-start:before { content: '\e80e'; } /* '' */
62
+.fa-trash:before { content: '\e80d'; } /* '' */
63
+.fa-to_start:before { content: '\e80e'; } /* '' */
64
.fa-retweet:before { content: '\e80f'; } /* '' */
67
-.fa-to-end:before { content: '\e810'; } /* '' */
68
-.fa-cancel-circled:before { content: '\e811'; } /* '' */
65
+.fa-to_end:before { content: '\e810'; } /* '' */
66
.fa-search:before { content: '\e813'; } /* '' */
67
.fa-logout:before { content: '\e814'; } /* '' */
68
.fa-spin6:before { content: '\e839'; } /* '' */
69
.fa-crown:before { content: '\e844'; } /* '' */
70
+.fa-download:before { content: '\f02e'; } /* '' */
71
+.fa-upload:before { content: '\f02f'; } /* '' */
72
.fa-filter:before { content: '\f0b0'; } /* '' */
73
.fa-menu:before { content: '\f0c9'; } /* '' */
75
-.fa-quote-left:before { content: '\f10d'; } /* '' */
74
+.fa-quote:before { content: '\f10d'; } /* '' */
75
.fa-unlink:before { content: '\f127'; } /* '' */
76
.fa-level-up:before { content: '\f148'; } /* '' */
78
-.fa-file-archive:before { content: '\f1c6'; } /* '' */
79
-.fa-trash:before { content: '\e80d'; } /* '' */
77
+.fa-archive:before { content: '\f1c6'; } /* '' */
frontend/public/fontello.woff2
Binary files a/frontend/public/fontello.woff2 and b/frontend/public/fontello.woff2 differ
frontend/src/BrowseFiles.ts
+3
-3
@@ -145,7 +145,7 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
145
h('button', {
146
className: !current ? 'toggled' : undefined,
147
onClick() { pageChange(0) },
148
- }, hIcon('to-start')),
148
+ }, hIcon('to_start')),
149
h('div', { id: 'paging-middle' }, // using sticky first/last would prevent scrollIntoView from working
150
_.range(1, nPages).map(i =>
151
(!shrink || !(i%10) || (i >= from && i < to)) // if shrinking, we show thousands or hundreds for current thousand
@@ -158,7 +158,7 @@ const Paging = memo(({ nPages, current, pageSize, pageChange, atBottom }: Paging
158
h('button', {
159
className: atBottom ? 'toggled' : undefined,
160
onClick(){ pageChange(nPages-1, true) }
161
- }, hIcon('to-end')),
161
+ }, hIcon('to_end')),
162
)
163
})
164
@@ -202,7 +202,7 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
202
isFolder ? h(Link, { to: base+href }, hIcon('folder'), relativePath.slice(0,-1))
203
: h(Fragment, {},
204
containerDir && h(Link, { to: base+fixUrl(containerDir), className:'container-folder' }, hIcon('file'), containerDir ),
205
- h('a', { href }, !containerDir && hIcon('file'), name)
205
+ h('a', { href }, !containerDir && hIcon('file'), name)
206
),
207
h(CustomCode, { name: 'afterEntryName', props: { entry } }),
208
h(EntryProps, entry),
frontend/src/icons.ts
+23
-21
@@ -4,25 +4,28 @@ import { state, useSnapState } from './state'
4
import { createElement as h, memo } from 'react'
5
6
const SYS_ICONS = {
7
- login: 'user:👤',
8
- user: 'user:👤',
9
- filter: ':✂',
10
- search: ':🔍',
11
- search_off: 'cancel:❌',
12
- stop: ':⏹️',
13
- settings: 'cog:⚙',
14
- archive: 'file-archive:📦',
15
- logout: ':🚪',
16
- home: ':🏠',
17
- parent: 'level-up mirror:⬆',
18
- folder: ':📂',
19
- file: 'doc:📄',
20
- spinner: 'spin6 spinner:🎲',
21
- password: 'key:🗝️',
22
- download: ':📥',
23
- invert: 'retweet:🙃',
24
- admin: 'crown:👑',
25
- check: ':✔️',
7
+ login: '👤:user',
8
+ user: '👤:user',
9
+ filter: '✂',
10
+ search: '🔍',
11
+ search_off: '❌:cancel',
12
+ stop: '⏹️',
13
+ settings: '⚙:cog',
14
+ archive: '📦',
15
+ logout: '🚪',
16
+ home: '🏠',
17
+ parent: '⬅:level-up mirror',
18
+ folder: '📂',
19
+ file: '📄:doc',
20
+ spinner: '🎲:spin6 spinner',
21
+ password: '🗝️:key',
22
+ download: '⬇️',
23
+ upload: '⬆️',
24
+ invert: '🙃:retweet',
25
+ admin: '👑:crown',
26
+ check: '✔️',
27
+ to_start: '◀',
28
+ to_end: '▶',
29
}
30
31
document.fonts.ready.then(async ()=> {
@@ -33,8 +36,7 @@ document.fonts.ready.then(async ()=> {
36
})
37
38
export const Icon = memo(({ name, alt, className='', ...props }: { name:string, className?:string, alt?:string, style?:any }) => {
36
- // @ts-ignore
37
- const [clazz,emoji] = (SYS_ICONS[name] || name).split(':')
39
+ const [emoji,clazz] = ((SYS_ICONS as any)[name] || name).split(':')
40
const { iconsClass } = useSnapState()
41
className += ' icon ' + (iconsClass ? 'fa-'+(clazz||name) : 'emoji')
42
return h('span',{
frontend/src/misc.ts
+1
-1
@@ -22,7 +22,7 @@ export function err2msg(err: number | Error) {
22
}
23
24
export function hIcon(name: string, props?:any) {
25
- return h(Icon, { name, ...props })
25
+ return h(Icon, { name, alt: name, ...props })
26
}
27
28
export function hError(err: Error | string | undefined) {