[feature] add group order controls

Author: zombieFox

src/css/group.css

@@ -4,6 +4,15 @@
 padding-left:calc(var(--layout-space) *var(--layout-padding));
 padding-right:calc(var(--layout-space) *var(--layout-padding));
 width:var(--link-area-width);
+display: flex;
+}
+
+.is-group-order-headerbody .group{
+flex-direction: column;
+}
+
+.is-group-order-bodyheader .group{
+flex-direction: column-reverse;
 }
 
 .group:first-child{
@@ -45,10 +54,14 @@
 justify-content: flex-start;
 }
 
-.is-group-name-show .group-header,
-.is-link-edit .group-header{
+.is-group-order-headerbody.is-group-name-show .group-header,
+.is-group-order-headerbody.is-link-edit .group-header{
 padding-bottom:calc(var(--layout-space) *var(--layout-gutter));
-transition: padding var(--layout-timing-extra-fast);
+}
+
+.is-group-order-bodyheader.is-group-name-show .group-header,
+.is-group-order-bodyheader.is-link-edit .group-header{
+padding-top:calc(var(--layout-space) *var(--layout-gutter));
 }
 
 .group-name{

src/index.html

@@ -823,6 +823,21 @@ <h1 class="menu-item-header-text">Names</h1>
 <pclass="control-group-area-alignment-helper form-helper small">Effects may not be visible if the Group Name is not shown.</p>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Order</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<inputid="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
+<labelfor="control-group-order-headerbody"><spanclass="label-icon"></span> Group Name then Bookmarks</label>
+</div>
+<divclass="input-wrap">
+<inputid="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
+<labelfor="control-group-order-bodyheader"><spanclass="label-icon"></span> Bookmarks then Group Name</label>
+</div>
+</div>
+</div>
 <divclass="menu-item">
 <divclass="menu-item-header">
 <h1class="menu-item-header-text">Border</h1>

src/js/control.js

@@ -1723,6 +1723,20 @@ var control = (function(){
 func: function(){
 render.class();
 }
+},{
+element: helper.e(".control-group-order-headerbody"),
+path: "group.order",
+type: "radio",
+func: function(){
+render.class();
+}
+},{
+element: helper.e(".control-group-order-bodyheader"),
+path: "group.order",
+type: "radio",
+func: function(){
+render.class();
+}
 },{
 element: helper.e(".control-group-border"),
 path: "group.border",
@@ -2695,6 +2709,11 @@ var control = (function(){
 helper.removeClass(html,"is-group-name-show");
 };
 };
+var_order=function(){
+helper.removeClass(html,"is-group-order-headerbody");
+helper.removeClass(html,"is-group-order-bodyheader");
+helper.addClass(html,"is-group-order-"+state.get().group.order);
+};
 var_border=function(){
 helper.removeClass(html,"is-group-border");
 if(state.get().group.border>0){
@@ -2703,6 +2722,7 @@ var control = (function(){
 };
 _area();
 _name();
+_order();
 _border();
 };
 var_link=function(){

src/js/state.js

@@ -185,6 +185,7 @@ var state = (function(){
 size: 1
 },
 border: 0,
+order: "headerbody",
 add: false
 },
 layout: {

src/js/update.js

@@ -634,6 +634,7 @@ var update = (function(){
 size: 1
 },
 border: 0,
+order: "headerbody",
 add: false
 };
 data.state.dropdown=false;