-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.html
417 lines (364 loc) · 18.2 KB
/
ui.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<html>
<head>
<style>
body {
margin: 0;
background-color: var(--figma-color-bg);
color: var(--figma-color-text);
overflow-y: hidden;
}
label {
font-size: 14px;
font-weight: 600;
color: var(--figma-color-text);
}
.icons-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin-top: 61px;
max-height: calc(100vh - 110px);
overflow-y: auto;
}
.icon {
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
transition: background-color 0.2s ease;
outline: none;
}
.icon:hover {
background-color: var(--figma-color-bg-hover);
outline: 1px solid var(--figma-color-border);
border-radius: 6px;
}
.icon svg {
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
::-webkit-scrollbar {
width: 12px;
background-color: var(--figma-color-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--figma-color-bg-disabled-secondary);
border-radius: 10px;
transition: background-color 0.2s ease;
border: 2px solid var(--figma-color-bg);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--figma-color-bg-disabled);
}
.logo {
width: 70px;
height: auto;
}
.version {
font-family: Inter;
margin-right: 48px;
margin-left: auto;
font-size: 10px;
color: var(--figma-color-text);
}
select {
font-family: Inter;
margin-right: 24px;
margin-left: auto;
border: 1px solid var(--figma-color-border);
border-radius: 8px;
outline: none;
cursor: pointer;
}
select:hover {
border-color: #6d6d6d;
}
.no-results {
font-family: Inter;
color: var(--figma-color-text-tertiary);
font-size: 18px;
font-weight: 500;
text-align: center;
display: flex;
flex-direction: column;
gap: 0px;
position: absolute;
top: 40%;
left: 35%;
}
.search-container {
display: flex;
justify-content: space-between;
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: none;
display: flex;
align-items: center;
padding: 12px 16px;
z-index: 1000;
margin-bottom: 16px;
border-bottom: 1px solid var(--figma-color-border);
}
#search-input {
font-family: Inter;
font-size: 14px;
width: 70%;
padding: 10px;
margin: 0px 12px;
border: none;
background-color: var(--figma-color-bg);
color: var(--figma-color-text);
/* border-bottom: #bdbdbd 1px solid; */
}
#search-input:focus {
outline: none;
}
#search-input::placeholder {
color: var(--figma-color-text-tertiary);
}
#selection {
padding: 8px;
border: 1px solid var(--figma-color-border-disabled-strong);
border-radius: 8px;
background-color: var(--figma-color-bg);
color: var(--figma-color-text);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: var(--figma-color-bg);
border-top: 1px solid var(--figma-color-border);
}
</style>
</head>
<body>
<div class="search-container">
<span><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 4C8.47715 4 4 8.47715 4 14C4 19.5228 8.47715 24 14 24C16.4013 24 18.6049 23.1536 20.3288 21.7429L25.793 27.2071C26.1835 27.5976 26.8167 27.5976 27.2072 27.2071C27.5977 26.8166 27.5977 26.1834 27.2072 25.7929L21.743 20.3287C23.1536 18.6048 24 16.4013 24 14C24 8.47715 19.5228 4 14 4ZM6 14C6 9.58172 9.58172 6 14 6C18.4183 6 22 9.58172 22 14C22 18.4183 18.4183 22 14 22C9.58172 22 6 18.4183 6 14Z"
fill="grey" />
</svg>
</span>
<input type="text" id="search-input" placeholder="Search icons..." />
<select id="selection" onchange="loadIcons()">
<option value="stroke">Outline</option>
<option value="fill">Fill</option>
</select>
</div>
<div id="icons-grid" class="icons-grid"></div>
<div class="footer">
<svg class="logo" width="87" height="20" viewBox="0 0 87 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<a href="https://github.com/abhishekshankr/AIcons" target="_blank">
<path
d="M0.470055 19.6903C0.33078 19.6903 0.217618 19.6559 0.130571 19.5871C0.0435236 19.5183 0 19.4237 0 19.3032L0.0522284 19.0968L6.50243 0.412902C6.60689 0.137634 6.8071 0 7.10306 0H11.2813C11.5773 0 11.7775 0.137634 11.882 0.412902L18.3322 19.0968L18.3844 19.3032C18.3844 19.4237 18.3409 19.5183 18.2538 19.5871C18.1668 19.6559 18.0536 19.6903 17.9143 19.6903H14.0233C13.7274 19.6903 13.5358 19.5441 13.4488 19.2516L12.6393 16.5935C12.5522 16.3011 12.3607 16.1548 12.0648 16.1548H6.31963C6.02367 16.1548 5.83217 16.3011 5.74512 16.5935L4.93558 19.2516C4.84853 19.5441 4.65703 19.6903 4.36107 19.6903H0.470055ZM10.6807 12.1548C10.8548 12.1548 10.9767 12.1032 11.0463 12C11.1333 11.8796 11.1508 11.7333 11.0985 11.5613L9.53168 6.24516C9.51427 6.14193 9.47074 6.05591 9.40111 5.9871C9.33147 5.91828 9.26183 5.88387 9.19219 5.88387C9.05292 5.88387 8.93976 6.0043 8.85271 6.24516L7.28586 11.5613C7.26845 11.6129 7.25974 11.6817 7.25974 11.7677C7.25974 12.0258 7.40772 12.1548 7.70368 12.1548H10.6807Z"
fill="#4285F4" />
<path
d="M19.8919 19.6903C19.5437 19.6903 19.3696 19.5183 19.3696 19.1742V0.516129C19.3696 0.172043 19.5437 0 19.8919 0H23.5217C23.8699 0 24.044 0.172043 24.044 0.516129V19.1742C24.044 19.5183 23.8699 19.6903 23.5217 19.6903H19.8919Z"
fill="#4285F4" />
<path
d="M33.3878 20C31.8558 20 30.5065 19.6817 29.3401 19.0452C28.1911 18.4086 27.2945 17.514 26.6503 16.3613C26.0062 15.1914 25.6841 13.8323 25.6841 12.2839C25.6841 10.8043 25.9975 9.49677 26.6242 8.36129C27.2684 7.2086 28.1737 6.32258 29.3401 5.70322C30.5065 5.06667 31.8558 4.74839 33.3878 4.74839C35.1287 4.74839 36.626 5.16129 37.8794 5.9871C39.1503 6.8129 40.0208 7.93978 40.4909 9.36774C40.5083 9.40215 40.517 9.46236 40.517 9.54839C40.517 9.66882 40.4734 9.76344 40.3864 9.83226C40.2993 9.90107 40.1862 9.93548 40.0469 9.93548H36.2865C36.0079 9.93548 35.8077 9.79785 35.6858 9.52258C35.268 8.62796 34.502 8.18064 33.3878 8.18064C32.4129 8.18064 31.6381 8.55054 31.0636 9.29032C30.4891 10.0129 30.2019 11.0108 30.2019 12.2839C30.2019 13.6086 30.4891 14.6495 31.0636 15.4065C31.6381 16.1634 32.4129 16.5419 33.3878 16.5419C34.589 16.5419 35.3812 16.0516 35.7642 15.071C35.8686 14.7785 36.0689 14.6323 36.3648 14.6323H40.073C40.2645 14.6323 40.3951 14.6839 40.4647 14.7871C40.5518 14.8731 40.5779 15.0021 40.5431 15.1742C40.0904 16.6882 39.22 17.8753 37.9317 18.7355C36.6608 19.5785 35.1462 20 33.3878 20Z"
fill="var(--figma-color-text)" />
<path
d="M49.2081 20C47.6761 20 46.3181 19.6817 45.1343 19.0452C43.9678 18.4086 43.0538 17.5054 42.3923 16.3355C41.7481 15.1656 41.4261 13.8151 41.4261 12.2839C41.4261 10.8043 41.7481 9.49677 42.3923 8.36129C43.0538 7.2086 43.9678 6.32258 45.1343 5.70322C46.3181 5.06667 47.6761 4.74839 49.2081 4.74839C50.7401 4.74839 52.0894 5.06667 53.2558 5.70322C54.4396 6.33978 55.3536 7.22581 55.9978 8.36129C56.6593 9.49677 56.9901 10.8043 56.9901 12.2839C56.9901 13.8151 56.668 15.1656 56.0239 16.3355C55.3797 17.5054 54.4657 18.4086 53.2819 19.0452C52.1155 19.6817 50.7575 20 49.2081 20ZM49.2081 16.2839C50.2004 16.2839 50.9839 15.9226 51.5584 15.2C52.1329 14.4602 52.4201 13.4882 52.4201 12.2839C52.4201 11.1312 52.1242 10.2022 51.5323 9.49677C50.9577 8.7914 50.183 8.43871 49.2081 8.43871C48.2332 8.43871 47.441 8.7914 46.8317 9.49677C46.2398 10.2022 45.9438 11.1312 45.9438 12.2839C45.9438 13.5054 46.2398 14.4774 46.8317 15.2C47.4236 15.9226 48.2158 16.2839 49.2081 16.2839Z"
fill="var(--figma-color-text)" />
<path
d="M59.005 19.6903C58.6568 19.6903 58.4827 19.5183 58.4827 19.1742V5.57419C58.4827 5.23011 58.6568 5.05806 59.005 5.05806H62.3476C62.6958 5.05806 62.8699 5.23011 62.8699 5.57419V5.72903C62.8699 5.9871 62.9395 6.11613 63.0788 6.11613C63.2007 6.11613 63.3225 6.04731 63.4444 5.90968C63.8622 5.49677 64.3323 5.2043 64.8546 5.03226C65.3769 4.84301 65.9775 4.74839 66.6564 4.74839C69.0938 4.74839 70.6867 5.5914 71.4353 7.27742C71.6965 7.84516 71.8532 8.4215 71.9054 9.00645C71.975 9.57419 72.0099 10.4086 72.0099 11.5097V19.1742C72.0099 19.5183 71.8358 19.6903 71.4876 19.6903H68.145C67.7968 19.6903 67.6227 19.5183 67.6227 19.1742V11.4581C67.6227 10.7355 67.5704 10.1677 67.466 9.75484C67.3789 9.34193 67.2223 9.01505 66.9959 8.77419C66.6477 8.4129 66.1081 8.23226 65.3769 8.23226C64.4367 8.23226 63.7839 8.48172 63.4183 8.98064C63.0527 9.46236 62.8699 10.2882 62.8699 11.4581V19.1742C62.8699 19.5183 62.6958 19.6903 62.3476 19.6903H59.005Z"
fill="var(--figma-color-text)" />
<path
d="M80.6543 20C78.9481 20 77.3987 19.6215 76.0059 18.8645C74.6306 18.0903 73.7688 16.8688 73.4206 15.2L73.3945 15.0452C73.3945 14.9247 73.438 14.8301 73.5251 14.7613C73.6295 14.6753 73.7514 14.6323 73.8907 14.6323H77.1288C77.4074 14.6323 77.6076 14.7699 77.7295 15.0452C78.008 15.5957 78.4084 16.0172 78.9307 16.3097C79.453 16.5849 80.0101 16.7226 80.602 16.7226C81.2114 16.7226 81.7075 16.6021 82.0905 16.3613C82.491 16.1204 82.6912 15.8021 82.6912 15.4065C82.6912 14.9591 82.4474 14.6323 81.96 14.4258C81.4725 14.2194 80.6978 14.0129 79.6358 13.8064C78.4694 13.5828 77.5031 13.3419 76.7371 13.0839C75.9711 12.8086 75.3096 12.3613 74.7524 11.7419C74.1953 11.1226 73.9168 10.2796 73.9168 9.2129C73.9168 7.69892 74.4826 6.58064 75.6142 5.85806C76.7458 5.11828 78.1647 4.74839 79.8708 4.74839C81.5944 4.74839 83.0393 5.15269 84.2058 5.96129C85.3896 6.75269 86.1731 7.87957 86.5561 9.34193L86.5822 9.49677C86.5822 9.77204 86.4168 9.90968 86.086 9.90968H82.9523C82.6738 9.90968 82.4735 9.77204 82.3517 9.49677C82.1254 8.98064 81.7859 8.60215 81.3332 8.36129C80.8806 8.12043 80.3844 8 79.8447 8C79.305 8 78.8698 8.10323 78.539 8.30968C78.2256 8.51613 78.069 8.78279 78.069 9.10968C78.069 9.55699 78.3127 9.88387 78.8001 10.0903C79.305 10.2796 80.0972 10.4688 81.1765 10.6581C82.3604 10.8645 83.344 11.0968 84.1274 11.3548C84.9109 11.6129 85.5811 12.043 86.1382 12.6452C86.7127 13.2473 87 14.0731 87 15.1226C87 16.086 86.7389 16.9376 86.2166 17.6774C85.7117 18.4172 84.9805 18.9935 84.023 19.4065C83.0655 19.8022 81.9426 20 80.6543 20Z"
fill="var(--figma-color-text)" />
</a>
</svg>
<div class="version"></div>
</div>
<script>
const STROKE_ICONS_SOURCE = "Stroke";
const FILL_ICONS_SOURCE = "Fill";
let currentIcons = []; // Global variable to store the current set of icons
let download_url = "";
function loadIcons() {
const style = document.getElementById("selection").value;
const source =
style === "stroke" ? STROKE_ICONS_SOURCE : FILL_ICONS_SOURCE;
const searchTerm = document.getElementById("search-input").value;
let url =
"https://raw.githubusercontent.com/abhishekshankr/AIcons/main/Icons/" +
source +
"/iconlist.json";
fetch(url)
.then((response) => response.json())
.then((files) => {
files.sort((a, b) =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
);
const iconFetchPromises = files.map((file) => {
download_url =
"https://raw.githubusercontent.com/abhishekshankr/AIcons/main/Icons/" +
source +
"/" +
file.name;
return fetch(download_url)
.then((response) => response.text())
.then((svg) => ({ svg, name: file.name }));
});
Promise.all(iconFetchPromises).then((icons) => {
currentIcons = icons; // Update the global variable with fetched icons
displayIcons(currentIcons, searchTerm); // Display icons initially
});
})
.catch((error) => console.error("Error loading icons:", error));
}
function displayIcons(icons, searchTerm = "") {
const grid = document.getElementById("icons-grid");
grid.innerHTML = ""; // Clear the grid
const filteredIcons = icons.filter((icon) =>
icon.name.toLowerCase().includes(searchTerm.toLowerCase()),
);
if (filteredIcons.length === 0) {
const noResultsMsg = document.createElement("div");
noResultsMsg.classList.add("no-results"); // Add a class for styling if needed
// Create an SVG element using innerHTML
const svgElement = document.createElement("div");
svgElement.innerHTML = `
<svg width="48" height="48" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 9C14.5523 9 15 9.44771 15 10V15C15 15.5523 14.5523 16 14 16C13.4477 16 13 15.5523 13 15V10C13 9.44771 13.4477 9 14 9Z" fill=var(--figma-color-icon-tertiary) />
<path d="M15 18C15 18.5523 14.5523 19 14 19C13.4477 19 13 18.5523 13 18C13 17.4477 13.4477 17 14 17C14.5523 17 15 17.4477 15 18Z" fill=var(--figma-color-icon-tertiary) />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 14C4 8.47715 8.47715 4 14 4C19.5228 4 24 8.47715 24 14C24 16.4013 23.1536 18.6048 21.743 20.3287L27.2072 25.7929C27.5977 26.1834 27.5977 26.8166 27.2072 27.2071C26.8167 27.5976 26.1835 27.5976 25.793 27.2071L20.3288 21.7429C18.6049 23.1536 16.4013 24 14 24C8.47715 24 4 19.5228 4 14ZM14 6C9.58172 6 6 9.58172 6 14C6 18.4183 9.58172 22 14 22C18.4183 22 22 18.4183 22 14C22 9.58172 18.4183 6 14 6Z" fill=var(--figma-color-icon-tertiary) />
</svg>
`;
// Append SVG to the div
noResultsMsg.appendChild(svgElement);
// Set the text content
const textElement = document.createElement("p");
textElement.textContent = "No results found";
noResultsMsg.appendChild(textElement);
grid.appendChild(noResultsMsg);
} else {
filteredIcons.forEach(({ svg, name }) => {
const iconElement = document.createElement("span");
iconElement.classList.add("icon");
// Assuming name is the variable holding the file name
let nameWithoutExtension = name.replace(/\.svg$/, "");
iconElement.setAttribute("title", nameWithoutExtension);
//Set draggable event
iconElement.setAttribute("draggable", true);
// Create a temporary container for the SVG
const tempContainer = document.createElement("div");
tempContainer.innerHTML = svg;
// Set the CSS variable as the fill for every path in the SVG
const paths = tempContainer.querySelectorAll("path");
paths.forEach((path) => {
path.setAttribute("fill", "var(--figma-color-text)");
});
// Update the innerHTML of the iconElement with the modified SVG
iconElement.innerHTML = tempContainer.innerHTML;
iconElement.addEventListener("click", () =>
handleIconClick(tempContainer.innerHTML, nameWithoutExtension),
);
// In UI
iconElement.addEventListener("dragend", (e) => {
// Don't proceed if the item was dropped inside the plugin window.
if (e.view.length === 0) return;
window.parent.postMessage(
{
pluginDrop: {
clientX: e.clientX,
clientY: e.clientY,
items: [
{ type: "image/svg+xml", data: e.target.innerHTML },
],
dropMetadata: { name: nameWithoutExtension },
},
},
"*",
);
});
grid.appendChild(iconElement);
});
}
}
function handleIconClick(svg, name) {
window.parent.postMessage(
{ pluginMessage: { type: "create-icon", svg, name } },
"*",
);
}
function handleSearch() {
const searchInput = document.getElementById("search-input");
searchInput.addEventListener(
"input",
debounce(() => {
const searchTerm = searchInput.value.trim();
//console.log('Search Term:', searchTerm); // Debugging log
displayIcons(currentIcons, searchTerm);
}, 250),
);
}
function debounce(func, delay) {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
}
async function fetchVersionAndUpdateUI() {
const url =
"https://raw.githubusercontent.com/abhishekshankr/AIcons/main/package.json";
try {
// Fetch the JSON using jsDelivr
const response = await fetch(url);
const data = await response.json();
// Extract the version
const version = data.version;
// Update the Figma plugin UI
const versionElement = document.querySelector(".version");
versionElement.textContent = `v${version}`;
} catch (error) {
console.error("Error fetching version:", error);
}
}
function colorSwitcher() {
// Select all SVG icons
const icons = document.querySelectorAll(".icon");
// Loop over the icons
icons.forEach((icon) => {
// Select all path elements within the current icon
const paths = icon.querySelectorAll("path");
// Loop over the paths
paths.forEach((path) => {
// Change the fill color
path.style.setProperty("fill", "var(--figma-color-text)");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
loadIcons(); // Initial load of icons
handleSearch(); // Set up search functionality
fetchVersionAndUpdateUI();
});
window.onload = function () {
document.getElementById("search-input").focus();
};
</script>
</body>
</html>