Skip to content

Commit f180fee

Browse files
zombieFoxzombieFox
committed
[feature] add link direction controls and improve order controls
1 parent f5c14c2 commit f180fee

File tree

6 files changed

+134
-76
lines changed

6 files changed

+134
-76
lines changed

‎src/css/link.css‎

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -281,101 +281,125 @@
281281
font-size:0.6em;
282282
}
283283

284-
.is-link-style-block .link-display{
284+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display{
285+
flex-direction: row;
286+
}
287+
288+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display{
289+
flex-direction: row-reverse;
290+
}
291+
292+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display{
285293
flex-direction: column;
286294
}
287295

288-
.is-link-style-list .link-display{
289-
flex-direction: row;
296+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display{
297+
flex-direction: column-reverse;
298+
}
299+
300+
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display>*:not(:only-child):first-child{
301+
margin-right:0.5em;
302+
}
303+
304+
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display>*:not(:only-child):last-child{
305+
margin-right:0.5em;
306+
}
307+
308+
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display>*:not(:only-child):first-child{
309+
margin-bottom:0.5em;
290310
}
291311

292-
.is-link-style-block.is-link-display-alignment-topleft .link-display{
312+
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display>*:not(:only-child):last-child{
313+
margin-bottom:0.5em;
314+
}
315+
316+
.is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display{
293317
justify-content: flex-start;
294318
align-items: flex-start;
295319
}
296320

297-
.is-link-style-block.is-link-display-alignment-topcenter .link-display{
321+
.is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display{
298322
justify-content: flex-start;
299323
align-items: center;
300324
}
301325

302-
.is-link-style-block.is-link-display-alignment-topright .link-display{
326+
.is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display{
303327
justify-content: flex-start;
304328
align-items: flex-end;
305329
}
306330

307-
.is-link-style-block.is-link-display-alignment-centerleft .link-display{
331+
.is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display{
308332
justify-content: center;
309333
align-items: flex-start;
310334
}
311335

312-
.is-link-style-block.is-link-display-alignment-centercenter .link-display{
336+
.is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display{
313337
justify-content: center;
314338
align-items: center;
315339
}
316340

317-
.is-link-style-block.is-link-display-alignment-centerright .link-display{
341+
.is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display{
318342
justify-content: center;
319343
align-items: flex-end;
320344
}
321345

322-
.is-link-style-block.is-link-display-alignment-bottomleft .link-display{
346+
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display{
323347
justify-content: flex-end;
324348
align-items: flex-start;
325349
}
326350

327-
.is-link-style-block.is-link-display-alignment-bottomcenter .link-display{
351+
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display{
328352
justify-content: flex-end;
329353
align-items: center;
330354
}
331355

332-
.is-link-style-block.is-link-display-alignment-bottomright .link-display{
356+
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display{
333357
justify-content: flex-end;
334358
align-items: flex-end;
335359
}
336360

337-
.is-link-style-list.is-link-display-alignment-topleft .link-display{
338-
justify-content: flex-start;
361+
.is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display{
362+
justify-content: flex-end;
339363
align-items: flex-start;
340364
}
341365

342-
.is-link-style-list.is-link-display-alignment-topcenter .link-display{
366+
.is-link-item-display-direction-horizontal.is-link-display-alignment-topcenter .link-display{
343367
justify-content: center;
344368
align-items: flex-start;
345369
}
346370

347-
.is-link-style-list.is-link-display-alignment-topright .link-display{
348-
justify-content: flex-end;
371+
.is-link-item-display-direction-horizontal.is-link-display-alignment-topright .link-display{
372+
justify-content: flex-start;
349373
align-items: flex-start;
350374
}
351375

352-
.is-link-style-list.is-link-display-alignment-centerleft .link-display{
353-
justify-content: flex-start;
376+
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerleft .link-display{
377+
justify-content: flex-end;
354378
align-items: center;
355379
}
356380

357-
.is-link-style-list.is-link-display-alignment-centercenter .link-display{
381+
.is-link-item-display-direction-horizontal.is-link-display-alignment-centercenter .link-display{
358382
justify-content: center;
359383
align-items: center;
360384
}
361385

362-
.is-link-style-list.is-link-display-alignment-centerright .link-display{
363-
justify-content: flex-end;
386+
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerright .link-display{
387+
justify-content: flex-start;
364388
align-items: center;
365389
}
366390

367-
.is-link-style-list.is-link-display-alignment-bottomleft .link-display{
368-
justify-content: flex-start;
391+
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomleft .link-display{
392+
justify-content: flex-end;
369393
align-items: flex-end;
370394
}
371395

372-
.is-link-style-list.is-link-display-alignment-bottomcenter .link-display{
396+
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomcenter .link-display{
373397
justify-content: center;
374398
align-items: flex-end;
375399
}
376400

377-
.is-link-style-list.is-link-display-alignment-bottomright .link-display{
378-
justify-content: flex-end;
401+
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomright .link-display{
402+
justify-content: flex-start;
379403
align-items: flex-end;
380404
}
381405

@@ -417,14 +441,6 @@
417441
font-size:var(--link-item-display-icon-size);
418442
}
419443

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){
421-
margin-bottom:0.5em;
422-
}
423-
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){
425-
margin-right:0.5em
426-
}
427-
428444
.link-item:hover .link-display-letter,
429445
.link-item:focus .link-display-letter,
430446
.link-item:hover .link-display-icon,
@@ -443,10 +459,15 @@
443459
font-size:var(--link-item-display-name-size);
444460
font-family:var(--font-regular);
445461
color:rgb(var(--theme-gray-12));
462+
flex-basis:1%;
446463
display: none;
447464
transition: color var(--layout-timing-extra-fast);
448465
}
449466

467+
.is-link-item-display-name-show .link-display-name{
468+
display: block;
469+
}
470+
450471
.link-display-name,
451472
.link-display-name:not(:last-child){
452473
margin-bottom:0;
@@ -470,10 +491,6 @@
470491
text-align: right;
471492
}
472493

473-
.is-link-item-display-name-show .link-display-name{
474-
display: block;
475-
}
476-
477494
.link-item:hover .link-display-name,
478495
.link-item:focus .link-display-name{
479496
color:rgb(var(--theme-style-text));

‎src/index.html‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1008,14 +1008,24 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
10081008
</div>
10091009
<hr>
10101010
<divclass="input-wrap">
1011-
<inputid="control-link-item-order-displayname" class="control-link-item-order-displayname" type="radio" name="control-link-item-order" value="displayname" tabindex="-1">
1012-
<labelfor="control-link-item-order-displayname"><spanclass="label-icon"></span>Letter/Icon then Name</label>
1011+
<inputid="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
1012+
<labelfor="control-link-item-display-direction-horizontal"><spanclass="label-icon"></span>Align contents horizontally</label>
10131013
</div>
10141014
<divclass="input-wrap">
1015-
<inputid="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="-1">
1016-
<labelfor="control-link-item-order-namedisplay"><spanclass="label-icon"></span>Name then Letter/Icon</label>
1015+
<inputid="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
1016+
<labelfor="control-link-item-display-direction-vertical"><spanclass="label-icon"></span>Align contents vertically</label>
10171017
</div>
1018-
<pclass="control-link-item-order-namedisplay-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
1018+
<pclass="control-link-item-display-direction-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark Block Style.</p>
1019+
<hr>
1020+
<divclass="input-wrap">
1021+
<inputid="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
1022+
<labelfor="control-link-item-display-order-letconname"><spanclass="label-icon"></span> Order Letter/Icon then Name</label>
1023+
</div>
1024+
<divclass="input-wrap">
1025+
<inputid="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
1026+
<labelfor="control-link-item-display-order-nameletcon"><spanclass="label-icon"></span> Order Name then Letter/Icon</label>
1027+
</div>
1028+
<pclass="control-link-item-display-order-helper form-helper small">Only available when Letter/Icon and Name is shown. Works well with Bookmark List Style.</p>
10191029
<hr>
10201030
<divclass="input-wrap">
10211031
<inputid="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
@@ -1064,12 +1074,12 @@ <h1 class="menu-item-header-text">Style</h1>
10641074
<inputid="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
10651075
<labelfor="control-link-style-block"><spanclass="label-icon"></span> Block</label>
10661076
</div>
1067-
<pclass="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped with content stacked vertically.</p>
1077+
<pclass="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped.</p>
10681078
<divclass="input-wrap">
10691079
<inputid="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
10701080
<labelfor="control-link-style-list"><spanclass="label-icon"></span> List</label>
10711081
</div>
1072-
<pclass="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
1082+
<pclass="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide.</p>
10731083
</div>
10741084
</div>
10751085
<divclass="menu-item">
@@ -1085,7 +1095,7 @@ <h1 class="menu-item-header-text">Orientation</h1>
10851095
<inputid="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
10861096
<labelfor="control-link-orientation-bottom"><spanclass="label-icon"></span> Bottom</label>
10871097
</div>
1088-
<pclass="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p>
1098+
<pclass="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Bookmark Tile.</p>
10891099
</div>
10901100
</div>
10911101
<divclass="menu-item">

‎src/js/control.js‎

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2115,18 +2115,32 @@ var control = (function(){
21152115
render.update();
21162116
}
21172117
},{
2118-
element: helper.e(".control-link-item-order-displayname"),
2119-
path: "link.item.order",
2118+
element: helper.e(".control-link-item-display-direction-horizontal"),
2119+
path: "link.item.display.direction",
21202120
type: "radio",
21212121
func: function(){
2122-
link.groupAndItems();
2122+
render.class();
21232123
}
21242124
},{
2125-
element: helper.e(".control-link-item-order-namedisplay"),
2126-
path: "link.item.order",
2125+
element: helper.e(".control-link-item-display-direction-vertical"),
2126+
path: "link.item.display.direction",
21272127
type: "radio",
21282128
func: function(){
2129-
link.groupAndItems();
2129+
render.class();
2130+
}
2131+
},{
2132+
element: helper.e(".control-link-item-display-order-letconname"),
2133+
path: "link.item.display.order",
2134+
type: "radio",
2135+
func: function(){
2136+
render.class();
2137+
}
2138+
},{
2139+
element: helper.e(".control-link-item-display-order-nameletcon"),
2140+
path: "link.item.display.order",
2141+
type: "radio",
2142+
func: function(){
2143+
render.class();
21302144
}
21312145
},{
21322146
element: helper.e(".control-link-item-url-show"),
@@ -2750,8 +2764,6 @@ var control = (function(){
27502764
helper.removeClass(html,"is-link-area-alignment-left");
27512765
helper.removeClass(html,"is-link-area-alignment-center");
27522766
helper.removeClass(html,"is-link-area-alignment-right");
2753-
helper.removeClass(html,"is-link-item-display-name-show");
2754-
helper.removeClass(html,"is-link-item-display-letcon-show");
27552767
helper.removeClass(html,"is-link-display-alignment-topleft");
27562768
helper.removeClass(html,"is-link-display-alignment-topcenter");
27572769
helper.removeClass(html,"is-link-display-alignment-topright");
@@ -2761,13 +2773,16 @@ var control = (function(){
27612773
helper.removeClass(html,"is-link-display-alignment-bottomleft");
27622774
helper.removeClass(html,"is-link-display-alignment-bottomcenter");
27632775
helper.removeClass(html,"is-link-display-alignment-bottomright");
2776+
helper.removeClass(html,"is-link-item-display-direction-horizontal");
2777+
helper.removeClass(html,"is-link-item-display-direction-vertical");
2778+
helper.removeClass(html,"is-link-item-display-order-letconname");
2779+
helper.removeClass(html,"is-link-item-display-order-nameletcon");
2780+
helper.removeClass(html,"is-link-item-display-name-show");
2781+
helper.removeClass(html,"is-link-item-display-letcon-show");
27642782
helper.removeClass(html,"is-link-item-url-show");
27652783
helper.removeClass(html,"is-link-item-line-show");
27662784
helper.removeClass(html,"is-link-item-shadow-show");
27672785
helper.removeClass(html,"is-link-item-hoverscale-show");
2768-
helper.removeClass(html,"is-link-item-alignment-left");
2769-
helper.removeClass(html,"is-link-item-alignment-center");
2770-
helper.removeClass(html,"is-link-item-alignment-right");
27712786
helper.removeClass(html,"is-link-item-border");
27722787
helper.removeClass(html,"is-link-style-list");
27732788
helper.removeClass(html,"is-link-style-block");
@@ -2777,6 +2792,8 @@ var control = (function(){
27772792
if(state.get().link.show){
27782793
helper.addClass(html,"is-link-show");
27792794
helper.addClass(html,"is-link-area-alignment-"+state.get().link.area.alignment);
2795+
helper.addClass(html,"is-link-item-display-direction-"+state.get().link.item.display.direction);
2796+
helper.addClass(html,"is-link-item-display-order-"+state.get().link.item.display.order);
27802797
helper.addClass(html,"is-link-display-alignment-"+state.get().link.item.display.alignment);
27812798
helper.addClass(html,"is-link-style-"+state.get().link.style);
27822799
helper.addClass(html,"is-link-orientation-"+state.get().link.orientation);
@@ -3229,9 +3246,12 @@ var control = (function(){
32293246
_disable.element("[for=control-link-item-display-translate-y]",true);
32303247
_disable.input(".control-link-item-display-translate-y",true);
32313248
_disable.input(".control-link-item-display-translate-y-default",true);
3232-
_disable.input(".control-link-item-order-displayname",true);
3233-
_disable.input(".control-link-item-order-namedisplay",true);
3234-
_disable.element(".control-link-item-order-namedisplay-helper",true);
3249+
_disable.input(".control-link-item-display-direction-horizontal",true);
3250+
_disable.input(".control-link-item-display-direction-vertical",true);
3251+
_disable.input(".control-link-item-display-order-letconname",true);
3252+
_disable.input(".control-link-item-display-order-nameletcon",true);
3253+
_disable.element(".control-link-item-display-direction-helper",true);
3254+
_disable.element(".control-link-item-display-order-helper",true);
32353255
_disable.input(".control-link-item-url-show",true);
32363256
_disable.input(".control-link-item-line-show",true);
32373257
_disable.input(".control-link-item-shadow-show",true);
@@ -3338,9 +3358,12 @@ var control = (function(){
33383358
_disable.input(".control-link-item-display-translate-y-default",false);
33393359
};
33403360
if(state.get().link.item.display.letcon.show&&state.get().link.item.display.name.show){
3341-
_disable.input(".control-link-item-order-displayname",false);
3342-
_disable.input(".control-link-item-order-namedisplay",false);
3343-
_disable.element(".control-link-item-order-namedisplay-helper",false);
3361+
_disable.input(".control-link-item-display-direction-horizontal",false);
3362+
_disable.input(".control-link-item-display-direction-vertical",false);
3363+
_disable.input(".control-link-item-display-order-letconname",false);
3364+
_disable.input(".control-link-item-display-order-nameletcon",false);
3365+
_disable.element(".control-link-item-display-direction-helper",false);
3366+
_disable.element(".control-link-item-display-order-helper",false);
33443367
};
33453368
};
33463369
};

‎src/js/link.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,7 @@ var link = (function(){
572572
if(nameText==null){
573573
nameText="";
574574
};
575-
varlinkName=helper.node("p:"+nameText+"|class:link-display-name");
575+
varlinkDisplayName=helper.node("p:"+nameText+"|class:link-display-name");
576576

577577
varlinkUrl=helper.node("div|class:link-url");
578578
varurl="";
@@ -607,13 +607,8 @@ var link = (function(){
607607
}elseif(stagedLink.link.display=="icon"&&stagedLink.link.icon.prefix!=null&&stagedLink.link.icon.name!=null){
608608
linkDisplayLetcon.appendChild(linkDisplayIcon);
609609
};
610-
if(state.get().link.item.order=="displayname"){
611-
linkDisplay.appendChild(linkDisplayLetcon);
612-
linkDisplay.appendChild(linkName);
613-
}elseif(state.get().link.item.order=="namedisplay"){
614-
linkDisplay.appendChild(linkName);
615-
linkDisplay.appendChild(linkDisplayLetcon);
616-
};
610+
linkDisplay.appendChild(linkDisplayLetcon);
611+
linkDisplay.appendChild(linkDisplayName);
617612
linkPanelFront.appendChild(linkDisplay);
618613
linkLeft.appendChild(linkLeftIcon);
619614
linkControl.appendChild(linkLeft);

‎src/js/state.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ var state = (function(){
153153
show: true,
154154
size: 0.9
155155
},
156+
direction: "vertical",
157+
order: "letconname",
156158
alignment: "centercenter",
157159
rotate: 0,
158160
translate: {
@@ -173,7 +175,6 @@ var state = (function(){
173175
show: true
174176
},
175177
newTab: false,
176-
order: "displayname",
177178
size: 1,
178179
border: 0
179180
},

0 commit comments

Comments
(0)