frontend: don't depend on cdn
Massimo Melina committed
Jan 3, 2022 at 18:53 UTC
69d23461c5ed70418d1b06d49dfda3336bde37d3
6 files changed
+31
-8
README.md
+1
@@ -74,6 +74,7 @@ accounts:
74
```
75
76
As soon as the file is read HFS will encrypt passwords in a non-reversible way.
77
+For this reason HFS needs that your accounts file is writable.
78
79
# Building instructions
80
frontend/public/icons.css
new
+23
@@ -0,0 +1,23 @@
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 /dev/null and b/frontend/public/icons.woff2 differ
frontend/public/index.html
+1
-2
@@ -9,9 +9,8 @@
9
name="description"
10
content="Web site created using create-react-app"
11
/>
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" id="iconsFile" />
13
+ <link href="icons.css" rel="stylesheet" />
14
<title>File Server</title>
15
</head>
16
<body>
frontend/src/icons.ts
+3
-5
@@ -1,6 +1,5 @@
1
import { state, useSnapState } from './state'
2
import { createElement as h } from 'react'
3
-import { waitFor } from './misc'
3
4
const SYS_ICONS: Record<string,string> = {
5
login: 'person',
@@ -13,10 +12,9 @@ const SYS_ICONS: Record<string,string> = {
12
}
13
14
document.fonts.ready.then(async ()=> {
16
- const el = await waitFor(()=> document.getElementById('iconsFile'))
17
- const name = decodeURIComponent((el as HTMLLinkElement).href.split('=')[1].replace(/\+/g, ' '))
18
- await document.fonts.load(`9px "${name}"`) // force font to be loaded even if we didn't display anything with it yet
19
- state.iconsClass = name.replace(/ /g,'-').toLowerCase()
15
+ const fontName = 'icons'
16
+ await document.fonts.load(`9px "${fontName}"`) // force font to be loaded even if we didn't display anything with it yet
17
+ state.iconsClass = ' ' // don't need additional class, but the empty space will cause reload
18
})
19
20
export function Icon({ name, className='', ...props }: { name:string, className:string, style?:any }) {
todo.md
+3
-1
@@ -13,7 +13,9 @@
13
- archive for search results
14
- archive only selected files
15
- https
16
-- frontend: don't depend on cdn
16
+- frontend: light/dark theme
17
+- frontend: load custom css
18
+- frontend: custom css should be able to access resource files
19
- webdav?
20
- vfs: ability to remove/hide/rename files deep in a source
21
- administration interface