@odx/icons 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -3
- package/core/demo-poster.html +65 -15
- package/medical/demo-poster.html +65 -15
- package/medical/font.eot +0 -0
- package/package.json +1 -1
- package/safety/demo-poster.html +933 -2563
- package/safety/font.css +2 -1162
- package/safety/font.scss +2 -1162
- package/safety/iconmap.scss +1 -280
- package/safety/metadata.json +93 -1053
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
# [1.
|
|
1
|
+
# [1.3.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v1.2.0...v1.3.0) (2023-04-14)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
* add
|
|
7
|
-
* **icons:** removed core icons from safety set ([3391834](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/3391834e586c6a116bad17ff772f39f38b1965d1))
|
|
6
|
+
* add search to icon set demo poster ([643fc16](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/643fc163aa396476d450501c7d1fed3fcedd9bfb))
|
|
8
7
|
|
|
9
8
|
# 1.0.0 (2023-04-13)
|
|
10
9
|
|
package/core/demo-poster.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>@odx/icons 1.
|
|
5
|
+
<title>@odx/icons 1.3.0</title>
|
|
6
6
|
<link rel="stylesheet" type="text/css" href="font.css" media="screen" />
|
|
7
7
|
<style>
|
|
8
8
|
* {
|
|
@@ -19,18 +19,30 @@
|
|
|
19
19
|
.page-header {
|
|
20
20
|
display: flex;
|
|
21
21
|
background-color: #ffffff;
|
|
22
|
-
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
23
22
|
font-size: 24px;
|
|
24
23
|
line-height: 48px;
|
|
25
24
|
position: sticky;
|
|
26
25
|
top: 0;
|
|
27
26
|
z-index: 1;
|
|
28
|
-
margin-bottom: 32px;
|
|
29
27
|
padding: 0 32px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.page-logo {
|
|
32
|
+
height: 24px;
|
|
33
|
+
margin-right: 12px;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.page-title {
|
|
33
|
-
font-size:
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.page-search {
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
margin: 0 24px;
|
|
44
|
+
padding: 0 8px;
|
|
45
|
+
line-height: 24px;
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
.icon-count {
|
|
@@ -42,6 +54,7 @@
|
|
|
42
54
|
display: flex;
|
|
43
55
|
flex-wrap: wrap;
|
|
44
56
|
margin: 0 auto;
|
|
57
|
+
padding: 24px;
|
|
45
58
|
justify-content: center;
|
|
46
59
|
}
|
|
47
60
|
|
|
@@ -50,14 +63,18 @@
|
|
|
50
63
|
flex-direction: column;
|
|
51
64
|
justify-content: center;
|
|
52
65
|
align-items: center;
|
|
53
|
-
width:
|
|
66
|
+
min-width: 160px;
|
|
54
67
|
margin: 8px;
|
|
55
68
|
padding: 8px;
|
|
56
69
|
line-height: 18px;
|
|
57
|
-
transition:
|
|
70
|
+
transition: 250ms ease;
|
|
58
71
|
cursor: pointer;
|
|
59
72
|
}
|
|
60
73
|
|
|
74
|
+
.icons__item.is-hidden {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
61
78
|
.odx-icon {
|
|
62
79
|
width: 48px;
|
|
63
80
|
height: 48px;
|
|
@@ -66,7 +83,19 @@
|
|
|
66
83
|
|
|
67
84
|
.icons__item:hover {
|
|
68
85
|
background-color: #ffffff;
|
|
69
|
-
transform: scale(1.
|
|
86
|
+
transform: scale(1.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.icon-name,
|
|
90
|
+
.icon-alias {
|
|
91
|
+
max-width: 160px;
|
|
92
|
+
text-overflow: ellipsis;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon-name {
|
|
98
|
+
font-size: 14px;
|
|
70
99
|
}
|
|
71
100
|
|
|
72
101
|
.icon-alias {
|
|
@@ -82,7 +111,7 @@
|
|
|
82
111
|
width: 100%;
|
|
83
112
|
line-height: 32px;
|
|
84
113
|
text-align:center;
|
|
85
|
-
background-color: #
|
|
114
|
+
background-color: #93ffaa;
|
|
86
115
|
color: #002766;
|
|
87
116
|
z-index: 2;
|
|
88
117
|
}
|
|
@@ -90,11 +119,18 @@
|
|
|
90
119
|
</head>
|
|
91
120
|
<body>
|
|
92
121
|
<header class="page-header">
|
|
122
|
+
<svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
|
|
123
|
+
<path
|
|
124
|
+
fill="#002766"
|
|
125
|
+
d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
|
|
126
|
+
/>
|
|
127
|
+
</svg>
|
|
93
128
|
<h1 class="page-title">
|
|
94
|
-
@odx/icons 1.
|
|
129
|
+
@odx/icons 1.3.0
|
|
95
130
|
</h1>
|
|
131
|
+
<input class="page-search" placeholder="Search icons ..." />
|
|
96
132
|
<div class="icon-count">
|
|
97
|
-
Iconset: core
|
|
133
|
+
Iconset: <strong>core</strong> (294 icons)
|
|
98
134
|
</div>
|
|
99
135
|
</header>
|
|
100
136
|
<main class="icons" id="icons">
|
|
@@ -1788,17 +1824,18 @@
|
|
|
1788
1824
|
</main>
|
|
1789
1825
|
<script>
|
|
1790
1826
|
let currentMessage, timeout;
|
|
1791
|
-
|
|
1827
|
+
|
|
1828
|
+
document.body.addEventListener('click', event => {
|
|
1792
1829
|
const target = event.target.closest('.icons__item');
|
|
1793
1830
|
if(target) {
|
|
1794
|
-
const iconName =
|
|
1795
|
-
navigator.clipboard.writeText(iconName).then(
|
|
1796
|
-
const message = `Copied
|
|
1831
|
+
const iconName = target.querySelector('.icon-name').textContent;
|
|
1832
|
+
navigator.clipboard.writeText(iconName).then(() => {
|
|
1833
|
+
const message = `Copied <strong>${iconName}</strong> to clipboard`;
|
|
1797
1834
|
if(currentMessage) currentMessage.remove();
|
|
1798
1835
|
|
|
1799
1836
|
currentMessage = document.createElement('div');
|
|
1800
1837
|
currentMessage.classList.add('copied-message');
|
|
1801
|
-
currentMessage.
|
|
1838
|
+
currentMessage.innerHTML = message
|
|
1802
1839
|
document.body.appendChild(currentMessage);
|
|
1803
1840
|
clearTimeout(timeout);
|
|
1804
1841
|
timeout = setTimeout(() => {
|
|
@@ -1808,6 +1845,19 @@
|
|
|
1808
1845
|
});
|
|
1809
1846
|
}
|
|
1810
1847
|
});
|
|
1848
|
+
|
|
1849
|
+
const searchInput = document.querySelector('.page-search');
|
|
1850
|
+
const iconElements = document.querySelectorAll('.icons__item');
|
|
1851
|
+
const iconNames = new WeakMap();
|
|
1852
|
+
for(const iconElement of iconElements) {
|
|
1853
|
+
iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
|
|
1854
|
+
}
|
|
1855
|
+
searchInput.addEventListener('keyup', event => {
|
|
1856
|
+
for(const iconElement of iconElements) {
|
|
1857
|
+
const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
|
|
1858
|
+
iconElement.classList.toggle('is-hidden', !isVisible);
|
|
1859
|
+
}
|
|
1860
|
+
})
|
|
1811
1861
|
</script>
|
|
1812
1862
|
</body>
|
|
1813
1863
|
</html>
|
package/medical/demo-poster.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>@odx/icons 1.
|
|
5
|
+
<title>@odx/icons 1.3.0</title>
|
|
6
6
|
<link rel="stylesheet" type="text/css" href="font.css" media="screen" />
|
|
7
7
|
<style>
|
|
8
8
|
* {
|
|
@@ -19,18 +19,30 @@
|
|
|
19
19
|
.page-header {
|
|
20
20
|
display: flex;
|
|
21
21
|
background-color: #ffffff;
|
|
22
|
-
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
23
22
|
font-size: 24px;
|
|
24
23
|
line-height: 48px;
|
|
25
24
|
position: sticky;
|
|
26
25
|
top: 0;
|
|
27
26
|
z-index: 1;
|
|
28
|
-
margin-bottom: 32px;
|
|
29
27
|
padding: 0 32px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.page-logo {
|
|
32
|
+
height: 24px;
|
|
33
|
+
margin-right: 12px;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.page-title {
|
|
33
|
-
font-size:
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.page-search {
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
margin: 0 24px;
|
|
44
|
+
padding: 0 8px;
|
|
45
|
+
line-height: 24px;
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
.icon-count {
|
|
@@ -42,6 +54,7 @@
|
|
|
42
54
|
display: flex;
|
|
43
55
|
flex-wrap: wrap;
|
|
44
56
|
margin: 0 auto;
|
|
57
|
+
padding: 24px;
|
|
45
58
|
justify-content: center;
|
|
46
59
|
}
|
|
47
60
|
|
|
@@ -50,14 +63,18 @@
|
|
|
50
63
|
flex-direction: column;
|
|
51
64
|
justify-content: center;
|
|
52
65
|
align-items: center;
|
|
53
|
-
width:
|
|
66
|
+
min-width: 160px;
|
|
54
67
|
margin: 8px;
|
|
55
68
|
padding: 8px;
|
|
56
69
|
line-height: 18px;
|
|
57
|
-
transition:
|
|
70
|
+
transition: 250ms ease;
|
|
58
71
|
cursor: pointer;
|
|
59
72
|
}
|
|
60
73
|
|
|
74
|
+
.icons__item.is-hidden {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
61
78
|
.odx-icon {
|
|
62
79
|
width: 48px;
|
|
63
80
|
height: 48px;
|
|
@@ -66,7 +83,19 @@
|
|
|
66
83
|
|
|
67
84
|
.icons__item:hover {
|
|
68
85
|
background-color: #ffffff;
|
|
69
|
-
transform: scale(1.
|
|
86
|
+
transform: scale(1.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.icon-name,
|
|
90
|
+
.icon-alias {
|
|
91
|
+
max-width: 160px;
|
|
92
|
+
text-overflow: ellipsis;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon-name {
|
|
98
|
+
font-size: 14px;
|
|
70
99
|
}
|
|
71
100
|
|
|
72
101
|
.icon-alias {
|
|
@@ -82,7 +111,7 @@
|
|
|
82
111
|
width: 100%;
|
|
83
112
|
line-height: 32px;
|
|
84
113
|
text-align:center;
|
|
85
|
-
background-color: #
|
|
114
|
+
background-color: #93ffaa;
|
|
86
115
|
color: #002766;
|
|
87
116
|
z-index: 2;
|
|
88
117
|
}
|
|
@@ -90,11 +119,18 @@
|
|
|
90
119
|
</head>
|
|
91
120
|
<body>
|
|
92
121
|
<header class="page-header">
|
|
122
|
+
<svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
|
|
123
|
+
<path
|
|
124
|
+
fill="#002766"
|
|
125
|
+
d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
|
|
126
|
+
/>
|
|
127
|
+
</svg>
|
|
93
128
|
<h1 class="page-title">
|
|
94
|
-
@odx/icons 1.
|
|
129
|
+
@odx/icons 1.3.0
|
|
95
130
|
</h1>
|
|
131
|
+
<input class="page-search" placeholder="Search icons ..." />
|
|
96
132
|
<div class="icon-count">
|
|
97
|
-
Iconset: medical
|
|
133
|
+
Iconset: <strong>medical</strong> (1 icons)
|
|
98
134
|
</div>
|
|
99
135
|
</header>
|
|
100
136
|
<main class="icons" id="icons">
|
|
@@ -108,17 +144,18 @@
|
|
|
108
144
|
</main>
|
|
109
145
|
<script>
|
|
110
146
|
let currentMessage, timeout;
|
|
111
|
-
|
|
147
|
+
|
|
148
|
+
document.body.addEventListener('click', event => {
|
|
112
149
|
const target = event.target.closest('.icons__item');
|
|
113
150
|
if(target) {
|
|
114
|
-
const iconName =
|
|
115
|
-
navigator.clipboard.writeText(iconName).then(
|
|
116
|
-
const message = `Copied
|
|
151
|
+
const iconName = target.querySelector('.icon-name').textContent;
|
|
152
|
+
navigator.clipboard.writeText(iconName).then(() => {
|
|
153
|
+
const message = `Copied <strong>${iconName}</strong> to clipboard`;
|
|
117
154
|
if(currentMessage) currentMessage.remove();
|
|
118
155
|
|
|
119
156
|
currentMessage = document.createElement('div');
|
|
120
157
|
currentMessage.classList.add('copied-message');
|
|
121
|
-
currentMessage.
|
|
158
|
+
currentMessage.innerHTML = message
|
|
122
159
|
document.body.appendChild(currentMessage);
|
|
123
160
|
clearTimeout(timeout);
|
|
124
161
|
timeout = setTimeout(() => {
|
|
@@ -128,6 +165,19 @@
|
|
|
128
165
|
});
|
|
129
166
|
}
|
|
130
167
|
});
|
|
168
|
+
|
|
169
|
+
const searchInput = document.querySelector('.page-search');
|
|
170
|
+
const iconElements = document.querySelectorAll('.icons__item');
|
|
171
|
+
const iconNames = new WeakMap();
|
|
172
|
+
for(const iconElement of iconElements) {
|
|
173
|
+
iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
|
|
174
|
+
}
|
|
175
|
+
searchInput.addEventListener('keyup', event => {
|
|
176
|
+
for(const iconElement of iconElements) {
|
|
177
|
+
const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
|
|
178
|
+
iconElement.classList.toggle('is-hidden', !isVisible);
|
|
179
|
+
}
|
|
180
|
+
})
|
|
131
181
|
</script>
|
|
132
182
|
</body>
|
|
133
183
|
</html>
|
package/medical/font.eot
CHANGED
|
Binary file
|