emoji as a fallback to icons
Massimo Melina committed
Jan 16, 2022 at 10:40 UTC
ba484a6f82750165644e70acc65fb36916de8c71
5 files changed
+28
-7
frontend/src/UserPanel.ts
+1
-1
@@ -15,7 +15,7 @@ function Content() {
15
return h('div', { id: 'user-panel' },
16
h('div', {}, 'User: ' + snap.username),
17
h(MenuButton, {
18
- icon: 'key',
18
+ icon: 'password',
19
label: 'Change password',
20
async onClick() {
21
const pwd = await promptDialog('Enter new password', { type: 'password' })
frontend/src/icons.ts
+23
-4
@@ -10,20 +10,39 @@ const SYS_ICONS: Record<string,string> = {
10
parent: 'level-up mirror',
11
archive: 'file-archive',
12
interrupted: 'unlink',
13
+ password: 'key',
14
+}
15
+const ICON2EMOJI = {
16
+ login: '👤',
17
+ user: '👤',
18
+ filter: '✂',
19
+ search: '🔍',
20
+ settings: '⚙',
21
+ archive: '📦',
22
+ logout: '🚪',
23
+ home: '🏠',
24
+ parent: '⬆️',
25
+ folder: '📂',
26
+ file: '📄',
27
+ spinner: '🎲',
28
+ password: '🗝️',
29
+ download: '📥'
30
}
31
32
document.fonts.ready.then(async ()=> {
33
const fontName = 'fontello'
34
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
35
+ state.iconsClass = ' ' // with fontello we don't need an additional class (unlike google material icons), but the empty space will cause reload
36
})
37
38
export function Icon({ name, className='', ...props }: { name:string, className:string, style?:any }) {
39
+ // @ts-ignore
40
+ const emoji = ICON2EMOJI[name] || '#'
41
name = SYS_ICONS[name] || name
42
const { iconsClass } = useSnapState()
24
- return h('i',{
43
+ return h('span',{
44
...props,
26
- className: iconsClass && 'icon fa-'+name,
27
- }, iconsClass ? null : '#')
45
+ className: className+' icon '+(iconsClass ? 'fa-'+name : 'emoji'),
46
+ }, iconsClass ? null : emoji)
47
}
48
frontend/src/index.scss
+1
@@ -101,6 +101,7 @@ header {
101
.spinner, .icon.spinner:before {
102
animation: 1.5s spin infinite linear;
103
}
104
+.icon.emoji.spinner { display: inline-block; }
105
106
.breadcrumb {
107
padding: 0.1em 0.6em 0.2em;
package.json
+1
-1
@@ -17,7 +17,7 @@
17
"build-prune": "cd dist/node_modules/yaml/dist && mv doc do_c && cd ../.. && mkdir lodash2 && cp lodash/lodash.min.js lodash2/lodash.js && cp lodash/package.json lodash2 && rm -rf lodash && mv lodash2 lodash && cd .. && nm-prune --force && cd node_modules/yaml/dist && mv do_c doc",
18
"build-all": "rm -rf dist && npm run build && cd frontend && npm install && npm run build && echo COMPLETED",
19
"test": "mocha -r ts-node/register 'tests/**/*.ts'",
20
- "zip-dist": "zip hfs.zip -r *.yaml READ* dist/* plugins/*",
20
+ "zip-dist": "zip hfs.zip -r config.yaml accounts.yaml READ* dist/* plugins/*",
21
"make-exe-after-build": "pkg . -C brotli"
22
},
23
"bin": "dist/index.js",
todo.md
+2
-1
@@ -1,5 +1,6 @@
1
# To do
2
-- emoji as an alternative to icons?
2
+- log filter option
3
+- log filter plugin
4
- remove seconds from time
5
- update tests to SRP login
6
- upload