-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
47 lines (37 loc) · 2.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html spellcheck="false" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="./dist/file-icons.js"></script>
<title>File Icons</title>
<style>
body {color:#444444; margin: 30px 60px;}
/* Icons Container */
.icons-container {display: flex;flex-wrap: wrap;background-color: #f1f1f1;padding: 10px 0 0 10px;}
.icons-container>* { position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; background-color: #dddddd; border-radius: 4px; width: 64px; height: 64px; margin: 0 10px 10px 0; }
/* Icon */
i[class$=-icon] { font-style: normal; }
i[class$=-icon]:before { font-size: 32px;}
i[class$=-icon]:not(:hover):before { color: inherit;}
i[class$=-icon]:hover{ box-shadow: inset 0 0 0 0.1475em #ccc; }
i[class$=-icon]:hover>*.tooltip{visibility:visible;}
/* Tooltip */
i[class$=-icon]>*.tooltip{font-size: 18px; white-space: nowrap;background-color:#444444;bottom:calc(100% + 2px);color:#fff;;padding:5px 10px;position:absolute;text-align:center;border-radius: 4px;visibility:hidden;z-index:1;}
i[class$=-icon]>*.tooltip::after{border-color:#444444 transparent transparent;border-style:solid;border-width:5px;content:"";left:50%;margin-left:-5px;position:absolute;top:100%;}
</style>
</head>
<body>
<h2>Directory Icons</h2>
<div id="directoryContainer" class="icons-container"></div>
<h2>File Icons</h2>
<div id="fileContainer" class="icons-container"></div>
<script>
var icons = window.FileIcons
const directoryIcons = fileContainer.innerHTML = icons.db.directoryIcons.byName.reduce((acc, { icon, colour }) => ({ ...acc, [icon]: colour[0] }), {})
const fileIcons = fileContainer.innerHTML = icons.db.fileIcons.byName.reduce((acc, { icon, colour }) => ({ ...acc, [icon]: colour[0] }), {})
const getIcon = ([icon, colour]) => `<i class="${colour} ${icon}"><span class="tooltip">${icon.slice(0, -5)}</span></i>`
directoryContainer.innerHTML = Object.entries(directoryIcons).map(getIcon).join('')
fileContainer.innerHTML = Object.entries(fileIcons).map(getIcon).join('')
</script>
</body>
</html>