-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.html
308 lines (274 loc) · 15.8 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
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
* {
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
padding: 20px;
background-color: #140c00;
color: #ffffff;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 140px;
}
.header {
display: flex;
align-items: center;
}
.button-group {
display: flex;
gap: 8px;
}
button {
background-color: #fe9b11;
color: #653d05;
border: none;
padding: 0;
border-radius: 8px;
cursor: pointer;
font-weight: 550;
font-size: 15px;
letter-spacing: -0.2px;
display: flex;
align-items: stretch;
justify-content: space-between;
}
button:hover {
background-color: #fe9b11de;
}
#export-button {
flex: 1;
}
.analyze-btn {
width: 44px;
height: 100%;
padding: 0;
margin-left: 8px;
border: 2px solid #653d059e;
background-color: transparent;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.analyze-btn:hover {
background-color: transparent;
border: 2px solid #653d05;
}
.analyze-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.button-content {
display: flex;
align-items: center;
padding: 12px 16px;
position: relative;
}
#status {
display: none;
}
#count {
color: #653d05;
font-size: 13px;
font-weight: 550;
opacity: 0.7;
border-left: 2px solid #653d0530;
padding: 12px 16px;
display: flex;
align-items: center;
}
button svg {
margin-right: 6px;
}
.spinner {
display: none;
width: 12px;
height: 12px;
margin-right: 6px;
border: 2.5px solid #653d05;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
position: absolute;
left: 16px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
button.loading .spinner {
display: block;
}
button.loading svg {
visibility: hidden;
}
button.loading {
cursor: wait;
}
button.loading:hover {
background-color: #fe9b11;
}
</style>
<div class="header">
<svg width="44" height="60" viewBox="0 0 44 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="20.1365" width="3.49813" height="17.4907" fill="#FE9B11" />
<rect x="6.29785" y="7.46729" width="3.49813" height="17.4907" transform="rotate(-45 6.29785 7.46729)" fill="#FE9B11" />
<rect x="33.2456" y="4.83887" width="3.49813" height="17.4907" transform="rotate(45 33.2456 4.83887)" fill="#FE9B11" />
<rect x="3.39478" y="20.4058" width="3.49813" height="34.9813" transform="rotate(-90 3.39478 20.4058)" fill="#FE9B11" />
<path
d="M28.5177 40.8116H31.764L32.0159 42.2389C32.4636 41.7351 33.0047 41.3433 33.639 41.0635C34.292 40.765 34.9916 40.6157 35.7379 40.6157C36.8386 40.6157 37.7715 40.8489 38.5364 41.3153C39.32 41.7818 39.917 42.4627 40.3274 43.3583C40.7565 44.2351 40.9711 45.3265 40.9711 46.6325V54.8041H37.361V47.1083C37.361 46.0262 37.1465 45.2146 36.7174 44.6736C36.2883 44.1325 35.6446 43.862 34.7864 43.862C33.9095 43.862 33.2379 44.1418 32.7715 44.7015C32.3237 45.2426 32.0998 46.0542 32.0998 47.1362V54.8041H28.5177V40.8116Z"
fill="white"
/>
<path
d="M26.1091 54.8041H22.8348L22.583 53.3489C22.1352 53.8713 21.5848 54.2817 20.9319 54.5802C20.2975 54.8601 19.6166 55 18.889 55C17.8069 55 16.874 54.7668 16.0905 54.3004C15.3069 53.834 14.7005 53.1623 14.2714 52.2855C13.8423 51.3899 13.6278 50.2892 13.6278 48.9832V40.8116H17.2378V48.5355C17.2378 49.5989 17.4431 50.4105 17.8535 50.9702C18.2826 51.5112 18.9356 51.7817 19.8125 51.7817C20.6707 51.7817 21.333 51.5019 21.7994 50.9422C22.2845 50.3825 22.527 49.5709 22.527 48.5075V40.8116H26.1091V54.8041Z"
fill="white"
/>
<path
d="M3.69802 50.2426C3.80996 50.709 3.99653 51.0635 4.25772 51.306C4.53757 51.5486 4.84541 51.7258 5.18123 51.8377C5.5357 51.931 5.89018 51.9777 6.24466 51.9777C6.89764 51.9777 7.4107 51.8564 7.78384 51.6139C8.15697 51.3527 8.34354 51.0262 8.34354 50.6344C8.34354 50.2986 8.21294 50.0374 7.95175 49.8508C7.69055 49.6456 7.35473 49.4963 6.94428 49.403C6.53384 49.2911 6.11406 49.1792 5.68496 49.0672C5.18123 48.9366 4.64018 48.7967 4.06182 48.6474C3.50212 48.4795 2.97041 48.2463 2.46668 47.9478C1.96294 47.6493 1.54317 47.2668 1.20735 46.8004C0.871527 46.3153 0.703617 45.709 0.703617 44.9814C0.703617 44.1232 0.936826 43.3676 1.40324 42.7146C1.88832 42.0616 2.55063 41.5486 3.39018 41.1754C4.24839 40.8023 5.2372 40.6157 6.3566 40.6157C7.68122 40.6157 8.80063 40.8956 9.71481 41.4553C10.629 42.015 11.2913 42.8172 11.7017 43.862L8.53943 44.7575C8.44615 44.4963 8.28757 44.2818 8.06369 44.1139C7.83981 43.9459 7.56928 43.8247 7.25212 43.7501C6.95361 43.6754 6.64578 43.6381 6.32861 43.6381C5.78757 43.6381 5.33981 43.7501 4.98533 43.9739C4.63085 44.1792 4.45361 44.4683 4.45361 44.8415C4.45361 45.0653 4.51891 45.2519 4.64951 45.4012C4.78011 45.5318 4.95735 45.6437 5.18123 45.737C5.42376 45.8303 5.69429 45.9142 5.99279 45.9889C6.30996 46.0635 6.65511 46.1474 7.02824 46.2407C7.6066 46.39 8.18496 46.5672 8.76331 46.7724C9.36033 46.959 9.90137 47.2015 10.3864 47.5C10.8902 47.7986 11.2913 48.1997 11.5898 48.7034C11.8883 49.2071 12.0562 49.8415 12.0935 50.6064C12.0935 51.4273 11.8603 52.1736 11.3939 52.8452C10.9275 53.4982 10.2558 54.0206 9.37898 54.4124C8.50212 54.8041 7.43869 55 6.18869 55C4.73347 55 3.49279 54.6922 2.46668 54.0765C1.45921 53.4609 0.7969 52.5 0.479736 51.1941L3.69802 50.2426Z"
fill="white"
/>
<path
d="M31.5224 38.6753C30.1605 38.6753 28.9478 38.3862 27.8844 37.8078C26.821 37.2108 25.9814 36.3806 25.3657 35.3171C24.7687 34.235 24.4702 32.9664 24.4702 31.5112C24.4702 30.0373 24.7781 28.7593 25.3937 27.6772C26.028 26.5951 26.8863 25.7649 27.9683 25.1865C29.0504 24.5895 30.2631 24.291 31.6064 24.291C32.9497 24.291 34.1624 24.5895 35.2445 25.1865C36.3265 25.7649 37.1848 26.5951 37.8191 27.6772C38.4534 28.7406 38.7706 30 38.7706 31.4552C38.7706 32.9291 38.4441 34.2071 37.7911 35.2891C37.1568 36.3712 36.2892 37.2108 35.1885 37.8078C34.1064 38.3862 32.8844 38.6753 31.5224 38.6753ZM31.4945 35.4571C32.0728 35.4571 32.6232 35.3171 33.1456 35.0373C33.668 34.7388 34.0971 34.3003 34.4329 33.722C34.7687 33.125 34.9366 32.3694 34.9366 31.4552C34.9366 30.5783 34.778 29.8507 34.4609 29.2724C34.1437 28.6753 33.7239 28.2369 33.2016 27.9571C32.6978 27.6586 32.1474 27.5093 31.5504 27.5093C30.9721 27.5093 30.431 27.6586 29.9273 27.9571C29.4422 28.2369 29.0504 28.6753 28.7519 29.2724C28.4721 29.8507 28.3322 30.597 28.3322 31.5112C28.3322 32.388 28.4721 33.125 28.7519 33.722C29.0318 34.3003 29.4142 34.7388 29.8993 35.0373C30.3844 35.3171 30.9161 35.4571 31.4945 35.4571Z"
fill="white"
/>
<path
d="M16.9879 38.6753C15.626 38.6753 14.432 38.3768 13.4058 37.7798C12.3797 37.1828 11.5775 36.3526 10.9991 35.2891C10.4208 34.2071 10.1316 32.9571 10.1316 31.5391C10.1316 30.1026 10.4208 28.8433 10.9991 27.7612C11.5775 26.6791 12.3891 25.8302 13.4338 25.2145C14.4786 24.5989 15.682 24.291 17.0439 24.291C18.5178 24.291 19.8237 24.6548 20.9618 25.3824C22.1185 26.11 22.9301 27.0895 23.3965 28.3209L20.0663 29.2724C19.8424 28.7313 19.4693 28.3022 18.9469 27.985C18.4432 27.6679 17.8648 27.5093 17.2118 27.5093C16.5588 27.5093 15.9805 27.6772 15.4767 28.013C14.9917 28.3488 14.6092 28.8153 14.3293 29.4123C14.0682 30.0093 13.9376 30.7089 13.9376 31.5112C13.9376 32.7238 14.2361 33.6847 14.8331 34.3936C15.4301 35.1026 16.2323 35.4571 17.2398 35.4571C17.8741 35.4571 18.4525 35.3078 18.9749 35.0093C19.4973 34.6921 19.889 34.263 20.1502 33.722L23.4525 34.6735C22.9487 35.8862 22.1092 36.8563 20.9338 37.5839C19.7771 38.3115 18.4618 38.6753 16.9879 38.6753Z"
fill="white"
/>
<path d="M4.34717 24.4873H7.92926V38.4798H4.34717V24.4873Z" fill="white" />
</svg>
</div>
<div style="display: flex; align-items: center">
<button id="export-button">
<div class="button-content">
<div class="spinner"></div>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 2C2.67157 2 2 2.67157 2 3.5V6C2 6.82843 2.67157 7.5 3.5 7.5H6C6.82843 7.5 7.5 6.82843 7.5 6V3.5C7.5 2.67157 6.82843 2 6 2H3.5Z" fill="#653D05" />
<path d="M3.5 8.5C2.67157 8.5 2 9.17157 2 10V12.5C2 13.3284 2.67157 14 3.5 14H6C6.82843 14 7.5 13.3284 7.5 12.5V10C7.5 9.17157 6.82843 8.5 6 8.5H3.5Z" fill="#653D05" />
<path d="M10 8.5C9.17157 8.5 8.5 9.17157 8.5 10V12.5C8.5 13.3284 9.17157 14 10 14H12.5C13.3284 14 14 13.3284 14 12.5V10C14 9.17157 13.3284 8.5 12.5 8.5H10Z" fill="#653D05" />
<path d="M9 5.25V4.25H10.75V2.5H11.75V4.25H13.5V5.25H11.75V7H10.75V5.25H9Z" fill="#653D05" />
</svg>
<span class="button-text">Generate new set</span>
</div>
<div id="count">Select the iconMaster</div>
</button>
<button id="analyze" class="analyze-btn" disabled title="Analyze SVG">
<svg width="20" height="20" style="margin-right: 0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="stroke-icon">
<path
d="M6 17.9745C6.1287 19.2829 6.41956 20.1636 7.07691 20.8209C8.25596 22 10.1536 22 13.9489 22C17.7442 22 19.6419 22 20.8209 20.8209C22 19.6419 22 17.7442 22 13.9489C22 10.1536 22 8.25596 20.8209 7.07691C20.1636 6.41956 19.2829 6.1287 17.9745 6"
stroke="white"
stroke-width="1.5"
/>
<path
d="M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2C13.7712 2 15.6569 2 16.8284 3.17157C18 4.34315 18 6.22876 18 10C18 13.7712 18 15.6569 16.8284 16.8284C15.6569 18 13.7712 18 10 18C6.22876 18 4.34315 18 3.17157 16.8284C2 15.6569 2 13.7712 2 10Z"
stroke="white"
stroke-width="1.5"
/>
<path
d="M2 11.1185C2.61902 11.0398 3.24484 11.001 3.87171 11.0023C6.52365 10.9533 9.11064 11.6763 11.1711 13.0424C13.082 14.3094 14.4247 16.053 15 18"
stroke="white"
stroke-width="1.5"
stroke-linejoin="round"
/>
<path d="M12.9998 7H13.0088" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg width="20" height="20" style="margin-right: 0px; display: none" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-icon">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.1129 7.78312C19.6979 7.36808 19.0964 7.11438 17.8757 6.9943L18.0715 5.00391C19.4675 5.14123 20.6275 5.46925 21.5272 6.36891C22.3335 7.1752 22.6805 8.19058 22.8428 9.39768C22.9992 10.5606 22.9991 12.0394 22.9991 13.8748V14.0212C22.9991 15.8567 22.9992 17.3355 22.8428 18.4984C22.6805 19.7055 22.3335 20.7209 21.5272 21.5272C20.7209 22.3335 19.7055 22.6805 18.4984 22.8428C17.3355 22.9992 15.8567 22.9991 14.0212 22.9991H13.8748C12.0394 22.9991 10.5606 22.9992 9.39768 22.8428C8.19058 22.6805 7.1752 22.3335 6.36891 21.5272C5.46925 20.6275 5.14123 19.4675 5.00391 18.0715L6.9943 17.8757C7.11438 19.0964 7.36808 19.6979 7.78312 20.1129C8.15588 20.4857 8.67885 20.7282 9.66417 20.8606C10.6783 20.997 12.0221 20.9991 13.948 20.9991C15.874 20.9991 17.2178 20.997 18.2319 20.8606C19.2172 20.7282 19.7402 20.4857 20.1129 20.1129C20.4857 19.7402 20.7282 19.2172 20.8606 18.2319C20.997 17.2178 20.9991 15.874 20.9991 13.948C20.9991 12.0221 20.997 10.6783 20.8606 9.66417C20.7282 8.67885 20.4857 8.15588 20.1129 7.78312Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.92684 1H10.0732C11.8966 0.999973 13.3664 0.999951 14.5223 1.15537C15.7225 1.31672 16.733 1.66191 17.5355 2.46447C18.3381 3.26702 18.6833 4.27752 18.8446 5.47767C19.0001 6.63362 19 8.10336 19 9.9268V10.0732C19 11.8966 19.0001 13.3664 18.8446 14.5223C18.6833 15.7225 18.3381 16.733 17.5355 17.5355C16.733 18.3381 15.7225 18.6833 14.5223 18.8446C13.3664 19.0001 11.8966 19 10.0732 19H9.9268C8.10336 19 6.63362 19.0001 5.47767 18.8446C4.27752 18.6833 3.26702 18.3381 2.46447 17.5355C1.66191 16.733 1.31672 15.7225 1.15537 14.5223C0.999951 13.3664 0.999973 11.8966 1 10.0732V9.92684C0.999973 8.10338 0.999951 6.63362 1.15537 5.47767C1.31672 4.27752 1.66191 3.26702 2.46447 2.46447C3.26702 1.66191 4.27752 1.31672 5.47767 1.15537C6.63362 0.999951 8.10338 0.999973 9.92684 1ZM5.74416 3.13753C4.76579 3.26907 4.2477 3.50966 3.87868 3.87868C3.50966 4.2477 3.26907 4.76579 3.13753 5.74416C3.00213 6.7513 3 8.08611 3 10C3 11.9139 3.00213 13.2487 3.13753 14.2558C3.26907 15.2342 3.50966 15.7523 3.87868 16.1213C4.2477 16.4903 4.76579 16.7309 5.74416 16.8625C6.7513 16.9979 8.08611 17 10 17C11.9139 17 13.2487 16.9979 14.2558 16.8625C15.2342 16.7309 15.7523 16.4903 16.1213 16.1213C16.4903 15.7523 16.7309 15.2342 16.8625 14.2558C16.9979 13.2487 17 11.9139 17 10C17 8.08611 16.9979 6.7513 16.8625 5.74416C16.7309 4.76579 16.4903 4.2477 16.1213 3.87868C15.7523 3.50966 15.2342 3.26907 14.2558 3.13753C13.2487 3.00213 11.9139 3 10 3C8.08611 3 6.7513 3.00213 5.74416 3.13753Z"
fill="white"
/>
<path
d="M11.6363 12.4162C9.4301 10.9618 6.68031 10.2023 3.87635 10.2523C3.2166 10.2512 2.55784 10.2921 1.90597 10.3744C1.53026 10.4219 1.24888 10.742 1.25 11.1207C1.25458 12.6661 1.28026 13.8928 1.45316 14.8725C1.63123 15.8815 1.97481 16.6895 2.64946 17.3603C3.40134 18.1079 4.35431 18.4395 5.53219 18.5969C6.67735 18.75 8.14081 18.75 9.98955 18.75L10.1393 18.75C12.2827 18.7501 13.9178 18.7501 15.1501 18.4985C15.3602 18.4556 15.5419 18.3248 15.6492 18.1391C15.7566 17.9535 15.7794 17.7308 15.7118 17.5272C15.0373 15.4965 13.6026 13.7125 11.6363 12.4162Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 6.75C12 6.05964 12.5571 5.5 13.2444 5.5C13.9268 5.5 14.5 6.05988 14.5 6.75C14.5 7.44012 13.9268 8 13.2444 8C12.5571 8 12 7.44036 12 6.75Z"
fill="white"
/>
</svg>
</button>
</div>
<div id="status"></div>
<script>
const statusEl = document.getElementById('status');
const countEl = document.getElementById('count');
const exportButton = document.getElementById('export-button');
const analyzeButton = document.getElementById('analyze');
const strokeIcon = analyzeButton.querySelector('.stroke-icon');
const fillIcon = analyzeButton.querySelector('.fill-icon');
const buttonText = exportButton.querySelector('.button-text');
let hasSelection = false;
exportButton.onclick = () => {
if (!hasSelection) {
figma.notify('Please select a node first');
return;
}
exportButton.classList.add('loading');
buttonText.textContent = 'Generating new set';
statusEl.textContent = 'Scanning for child nodes...';
parent.postMessage(
{
pluginMessage: {type: 'export-children-as-svg'},
},
'*'
);
};
analyzeButton.onclick = () => {
parent.postMessage({pluginMessage: {type: 'analyze-svg'}}, '*');
};
onmessage = (event) => {
const message = event.data.pluginMessage;
if (message.type === 'initial-count') {
hasSelection = message.count > 0;
if (hasSelection) {
countEl.textContent = `${message.count} icons`;
exportButton.style.opacity = '1';
exportButton.style.cursor = 'pointer';
analyzeButton.disabled = !message.enableAnalyze;
strokeIcon.style.display = message.enableAnalyze ? 'none' : 'block';
fillIcon.style.display = message.enableAnalyze ? 'block' : 'none';
} else {
countEl.textContent = 'Select an artboard';
exportButton.style.cursor = 'not-allowed';
analyzeButton.disabled = true;
strokeIcon.style.display = 'block';
fillIcon.style.display = 'none';
}
}
if (message.type === 'update-count') {
statusEl.textContent = `Found ${message.count} nodes to export...`;
}
if (message.type === 'export-error') {
exportButton.classList.remove('loading');
buttonText.textContent = 'Generate new set';
statusEl.textContent = '';
}
if (message.type === 'download-ready') {
statusEl.textContent = 'Creating download...';
const link = document.createElement('a');
link.href = 'data:application/zip;base64,' + message.content;
link.download = 'iconsMaster.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
statusEl.textContent = 'Download complete!';
exportButton.classList.remove('loading');
buttonText.textContent = 'Generate new set';
}
};
</script>