Skip to content

Commit de2a755

Browse files
zombieFoxzombieFox
authored
[feature] add link display rotate and translate controls
1 parent 8a5633f commit de2a755

File tree

7 files changed

+394
-191
lines changed

7 files changed

+394
-191
lines changed

‎src/css/link.css‎

Lines changed: 150 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,21 @@
121121
width:100%;
122122
height:100%;
123123
display: flex;
124+
flex-direction: column;
124125
z-index:3;
125126
overflow: hidden;
126127
user-select: none;
127128
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
128129
}
129130

131+
.is-link-style-block .link-panel-front{
132+
padding:1em;
133+
}
134+
135+
.is-link-style-list .link-panel-front{
136+
padding:0.5em1em;
137+
}
138+
130139
.is-theme-radius .link-panel-front{
131140
border-radius:var(--theme-radius);
132141
}
@@ -165,102 +174,47 @@
165174
box-shadow:var(--layout-shadow-large);
166175
}
167176

168-
.is-link-style-block .link-panel-front{
169-
padding:1em;
170-
flex-direction: column;
171-
}
172-
173-
.is-link-style-block.is-link-display-alignment-topleft .link-panel-front{
177+
.is-link-display-alignment-topleft .link-panel-front{
174178
justify-content: flex-start;
175179
align-items: flex-start;
176180
}
177181

178-
.is-link-style-block.is-link-display-alignment-topcenter .link-panel-front{
182+
.is-link-display-alignment-topcenter .link-panel-front{
179183
justify-content: flex-start;
180184
align-items: center;
181185
}
182186

183-
.is-link-style-block.is-link-display-alignment-topright .link-panel-front{
187+
.is-link-display-alignment-topright .link-panel-front{
184188
justify-content: flex-start;
185189
align-items: flex-end;
186190
}
187191

188-
.is-link-style-block.is-link-display-alignment-centerleft .link-panel-front{
192+
.is-link-display-alignment-centerleft .link-panel-front{
189193
justify-content: center;
190194
align-items: flex-start;
191195
}
192196

193-
.is-link-style-block.is-link-display-alignment-centercenter .link-panel-front{
197+
.is-link-display-alignment-centercenter .link-panel-front{
194198
justify-content: center;
195199
align-items: center;
196200
}
197201

198-
.is-link-style-block.is-link-display-alignment-centerright .link-panel-front{
202+
.is-link-display-alignment-centerright .link-panel-front{
199203
justify-content: center;
200204
align-items: flex-end;
201205
}
202206

203-
.is-link-style-block.is-link-display-alignment-bottomleft .link-panel-front{
207+
.is-link-display-alignment-bottomleft .link-panel-front{
204208
justify-content: flex-end;
205209
align-items: flex-start;
206210
}
207211

208-
.is-link-style-block.is-link-display-alignment-bottomcenter .link-panel-front{
212+
.is-link-display-alignment-bottomcenter .link-panel-front{
209213
justify-content: flex-end;
210214
align-items: center;
211215
}
212216

213-
.is-link-style-block.is-link-display-alignment-bottomright .link-panel-front{
214-
justify-content: flex-end;
215-
align-items: flex-end;
216-
}
217-
218-
.is-link-style-list .link-panel-front{
219-
padding:0.5em1em;
220-
flex-direction: row;
221-
}
222-
223-
.is-link-style-list.is-link-display-alignment-topleft .link-panel-front{
224-
justify-content: flex-start;
225-
align-items: flex-start;
226-
}
227-
228-
.is-link-style-list.is-link-display-alignment-topcenter .link-panel-front{
229-
justify-content: center;
230-
align-items: flex-start;
231-
}
232-
233-
.is-link-style-list.is-link-display-alignment-topright .link-panel-front{
234-
justify-content: flex-end;
235-
align-items: flex-start;
236-
}
237-
238-
.is-link-style-list.is-link-display-alignment-centerleft .link-panel-front{
239-
justify-content: flex-start;
240-
align-items: center;
241-
}
242-
243-
.is-link-style-list.is-link-display-alignment-centercenter .link-panel-front{
244-
justify-content: center;
245-
align-items: center;
246-
}
247-
248-
.is-link-style-list.is-link-display-alignment-centerright .link-panel-front{
249-
justify-content: flex-end;
250-
align-items: center;
251-
}
252-
253-
.is-link-style-list.is-link-display-alignment-bottomleft .link-panel-front{
254-
justify-content: flex-start;
255-
align-items: flex-end;
256-
}
257-
258-
.is-link-style-list.is-link-display-alignment-bottomcenter .link-panel-front{
259-
justify-content: center;
260-
align-items: flex-end;
261-
}
262-
263-
.is-link-style-list.is-link-display-alignment-bottomright .link-panel-front{
217+
.is-link-display-alignment-bottomright .link-panel-front{
264218
justify-content: flex-end;
265219
align-items: flex-end;
266220
}
@@ -313,21 +267,116 @@
313267

314268
/* link display */
315269
.link-display{
270+
display: flex;
271+
position: relative;
272+
top:var(--link-item-display-translate-y);
273+
left:var(--link-item-display-translate-x);
316274
font-size:1em;
317-
display: none;
318-
transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
275+
transform:rotate(var(--link-item-display-rotate));
276+
transform-origin: center;
277+
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
319278
}
320279

321-
.is-link-edit.is-link-style-list .link-display{
322-
font-size:0.5em;
280+
.is-link-edit .link-display{
281+
font-size:0.6em;
323282
}
324283

325-
.is-link-edit.is-link-style-block .link-display{
326-
font-size:0.6em;
284+
.is-link-style-block .link-display{
285+
flex-direction: column;
327286
}
328287

329-
.is-link-display-item-show .link-display{
330-
display: flex;
288+
.is-link-style-list .link-display{
289+
flex-direction: row;
290+
}
291+
292+
.is-link-style-block.is-link-display-alignment-topleft .link-display{
293+
justify-content: flex-start;
294+
align-items: flex-start;
295+
}
296+
297+
.is-link-style-block.is-link-display-alignment-topcenter .link-display{
298+
justify-content: flex-start;
299+
align-items: center;
300+
}
301+
302+
.is-link-style-block.is-link-display-alignment-topright .link-display{
303+
justify-content: flex-start;
304+
align-items: flex-end;
305+
}
306+
307+
.is-link-style-block.is-link-display-alignment-centerleft .link-display{
308+
justify-content: center;
309+
align-items: flex-start;
310+
}
311+
312+
.is-link-style-block.is-link-display-alignment-centercenter .link-display{
313+
justify-content: center;
314+
align-items: center;
315+
}
316+
317+
.is-link-style-block.is-link-display-alignment-centerright .link-display{
318+
justify-content: center;
319+
align-items: flex-end;
320+
}
321+
322+
.is-link-style-block.is-link-display-alignment-bottomleft .link-display{
323+
justify-content: flex-end;
324+
align-items: flex-start;
325+
}
326+
327+
.is-link-style-block.is-link-display-alignment-bottomcenter .link-display{
328+
justify-content: flex-end;
329+
align-items: center;
330+
}
331+
332+
.is-link-style-block.is-link-display-alignment-bottomright .link-display{
333+
justify-content: flex-end;
334+
align-items: flex-end;
335+
}
336+
337+
.is-link-style-list.is-link-display-alignment-topleft .link-display{
338+
justify-content: flex-start;
339+
align-items: flex-start;
340+
}
341+
342+
.is-link-style-list.is-link-display-alignment-topcenter .link-display{
343+
justify-content: center;
344+
align-items: flex-start;
345+
}
346+
347+
.is-link-style-list.is-link-display-alignment-topright .link-display{
348+
justify-content: flex-end;
349+
align-items: flex-start;
350+
}
351+
352+
.is-link-style-list.is-link-display-alignment-centerleft .link-display{
353+
justify-content: flex-start;
354+
align-items: center;
355+
}
356+
357+
.is-link-style-list.is-link-display-alignment-centercenter .link-display{
358+
justify-content: center;
359+
align-items: center;
360+
}
361+
362+
.is-link-style-list.is-link-display-alignment-centerright .link-display{
363+
justify-content: flex-end;
364+
align-items: center;
365+
}
366+
367+
.is-link-style-list.is-link-display-alignment-bottomleft .link-display{
368+
justify-content: flex-start;
369+
align-items: flex-end;
370+
}
371+
372+
.is-link-style-list.is-link-display-alignment-bottomcenter .link-display{
373+
justify-content: center;
374+
align-items: flex-end;
375+
}
376+
377+
.is-link-style-list.is-link-display-alignment-bottomright .link-display{
378+
justify-content: flex-end;
379+
align-items: flex-end;
331380
}
332381

333382
.link-display-letter,
@@ -336,6 +385,14 @@
336385
text-align: center;
337386
}
338387

388+
.link-display-letcon{
389+
display: none;
390+
}
391+
392+
.is-link-item-display-letcon-show .link-display-letcon{
393+
display: block;
394+
}
395+
339396
.link-display-letter{
340397
padding-top:8%;
341398
font-family:var(--font-fjalla);
@@ -360,11 +417,11 @@
360417
font-size:var(--link-item-display-icon-size);
361418
}
362419

363-
.is-link-style-block.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child){
420+
.is-link-style-block.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child){
364421
margin-bottom:0.5em;
365422
}
366423

367-
.is-link-style-list.is-link-item-name-show.is-link-display-item-show .link-panel-front>*:not(:only-child):not(:last-child){
424+
.is-link-style-list.is-link-item-display-name-show.is-link-item-display-letcon-show .link-display>*:not(:only-child):not(:last-child){
368425
margin-right:0.5em
369426
}
370427

@@ -381,56 +438,52 @@
381438
}
382439

383440
/* link name */
384-
.link-name{
441+
.link-display-name{
385442
margin:0;
386-
font-size:var(--link-item-name-size);
443+
font-size:var(--link-item-display-name-size);
387444
font-family:var(--font-regular);
388445
color:rgb(var(--theme-gray-12));
389446
display: none;
390-
transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
391-
}
392-
393-
.is-link-edit .link-name{
394-
font-size:0.6em;
447+
transition: color var(--layout-timing-extra-fast);
395448
}
396449

397-
.link-name,
398-
.link-name:not(:last-child){
450+
.link-display-name,
451+
.link-display-name:not(:last-child){
399452
margin-bottom:0;
400453
}
401454

402-
.is-link-display-alignment-topleft .link-name,
403-
.is-link-display-alignment-centerleft .link-name,
404-
.is-link-display-alignment-bottomleft .link-name{
455+
.is-link-display-alignment-topleft .link-display-name,
456+
.is-link-display-alignment-centerleft .link-display-name,
457+
.is-link-display-alignment-bottomleft .link-display-name{
405458
text-align: left;
406459
}
407460

408-
.is-link-display-alignment-topcenter .link-name,
409-
.is-link-display-alignment-centercenter .link-name,
410-
.is-link-display-alignment-bottomcenter .link-name{
461+
.is-link-display-alignment-topcenter .link-display-name,
462+
.is-link-display-alignment-centercenter .link-display-name,
463+
.is-link-display-alignment-bottomcenter .link-display-name{
411464
text-align: center;
412465
}
413466

414-
.is-link-display-alignment-topright .link-name,
415-
.is-link-display-alignment-centerright .link-name,
416-
.is-link-display-alignment-bottomright .link-name{
467+
.is-link-display-alignment-topright .link-display-name,
468+
.is-link-display-alignment-centerright .link-display-name,
469+
.is-link-display-alignment-bottomright .link-display-name{
417470
text-align: right;
418471
}
419472

420-
.is-link-item-name-show .link-name{
473+
.is-link-item-display-name-show .link-display-name{
421474
display: block;
422475
}
423476

424-
.link-item:hover .link-name,
425-
.link-item:focus .link-name{
477+
.link-item:hover .link-display-name,
478+
.link-item:focus .link-display-name{
426479
color:rgb(var(--theme-style-text));
427480
}
428481

429-
.link-panel-front:focus .link-name{
482+
.link-panel-front:focus .link-display-name{
430483
color:rgb(var(--theme-style-text));
431484
}
432485

433-
.is-link-style-list .link-name{
486+
.is-link-style-list .link-display-name{
434487
white-space: nowrap;
435488
}
436489

‎src/css/variables.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@
4646
--link-item-size:1em;
4747
--link-item-display-letter-size:2em;
4848
--link-item-display-icon-size:2.5em;
49-
--link-item-name-size:0.9em;
49+
--link-item-display-rotate:0deg;
50+
--link-item-display-translate-x:0em;
51+
--link-item-display-translate-y:0em;
52+
--link-item-display-name-size:0.9em;
5053
--link-item-border:1;
5154
/* layout */
5255
--layout-width:80%;

0 commit comments

Comments
(0)