[feature] add group border controls

Author: zombieFox

src/css/group.css

@@ -6,6 +6,10 @@
 width:var(--link-area-width);
 }
 
+.is-group-border .group:not(:first-child):not(:only-child){
+border-top:calc(var(--layout-line-width) *var(--group-border)) solid rgb(var(--theme-accent));
+}
+
 .group:first-child{
 padding-top:calc(var(--layout-space) *var(--layout-padding));
 }
@@ -14,6 +18,11 @@
 padding-bottom:calc(var(--layout-space) *var(--layout-padding));
 }
 
+.is-group-border .group{
+padding-top:calc(var(--layout-space) *var(--layout-padding));
+padding-bottom:calc(var(--layout-space) *var(--layout-padding));
+}
+
 .group-header{
 position: relative;
 display: flex;

src/css/variables.css

@@ -40,6 +40,7 @@
 --header-transitional-size:1em;
 /* group */
 --group-name-size:1em;
+--group-border:0;
 /* link */
 --link-area-width:100%;
 --link-item-size:1em;

src/index.html

@@ -784,6 +784,17 @@ <h1 class="menu-item-header-text">Names</h1>
 </div>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Border</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<labelfor="control-group-border">Between groups</label>
+<inputid="control-group-border" class="control-group-border mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
+</div>
+</div>
+</div>
 </div>
 
 <divclass="menu-content-area menu-content-area-bookmarks is-hidden">

src/js/control.js

@@ -1675,6 +1675,14 @@ var control = (function(){
 link.render.group.size();
 render.update();
 }
+},{
+element: helper.e(".control-group-border"),
+path: "group.border",
+type: "range",
+func: function(){
+link.render.group.border();
+render.class();
+}
 },{
 element: helper.e(".control-header-border-top"),
 path: "header.border.top",
@@ -2605,11 +2613,21 @@ var control = (function(){
 _transitional();
 };
 var_group=function(){
-if(state.get().group.name.show){
-helper.addClass(html,"is-group-name-show");
-}else{
-helper.removeClass(html,"is-group-name-show");
+var_name=function(){
+if(state.get().group.name.show){
+helper.addClass(html,"is-group-name-show");
+}else{
+helper.removeClass(html,"is-group-name-show");
+};
+};
+var_border=function(){
+helper.removeClass(html,"is-group-border");
+if(state.get().group.border>0){
+helper.addClass(html,"is-group-border");
+};
 };
+_name();
+_border();
 };
 var_link=function(){
 helper.removeClass(html,"is-link-show");

src/js/link.js

@@ -482,6 +482,10 @@ var link = (function(){
 varhtml=helper.e("html");
 html.style.setProperty("--group-name-size",state.get().group.name.size+"em");
 },
+border: function(){
+varhtml=helper.e("html");
+html.style.setProperty("--group-border",state.get().group.border);
+},
 tabindex: function(){
 varallGroupControlItem=helper.eA(".group-control-item");
 if(state.get().link.edit){
@@ -1587,6 +1591,7 @@ var link = (function(){
 mod.add.group.close();
 groupAndItems();
 render.group.size();
+render.group.border();
 render.item.size();
 render.item.display.letter();
 render.item.display.icon();

src/js/state.js

@@ -180,6 +180,7 @@ var state = (function(){
 show: true,
 size: 1
 },
+border: 0,
 add: false
 },
 layout: {

src/js/update.js

@@ -629,6 +629,7 @@ var update = (function(){
 show: true,
 size: 1
 },
+border: 0,
 add: false
 };
 data.state.dropdown=false;