group reorder

app/scripts/models/group-model.js

@@ -283,6 +283,23 @@ var GroupModel = MenuItemModel.extend({
             this.file.db.move(object.entry, this.group);
             this.file.reload();
         }
+    },
+
+    moveToTop: function(object) {
+        if (!object || object.id === this.id || object.file !== this.file || !(object instanceof GroupModel)) {
+            return;
+        }
+        this.file.setModified();
+        for (var parent = this; parent; parent = parent.parentGroup) {
+            if (object === parent) {
+                return;
+            }
+        }
+        let atIndex = this.parentGroup.group.groups.indexOf(this.group);
+        if (atIndex >= 0) {
+            this.file.db.move(object.group, this.parentGroup.group, atIndex);
+        }
+        this.file.reload();
     }
 });
 

app/scripts/views/menu/menu-item-view.js

@@ -21,7 +21,9 @@ var MenuItemView = Backbone.View.extend({
         'dragstart': 'dragstart',
         'dragover': 'dragover',
         'dragleave': 'dragleave',
-        'drop': 'drop'
+        'drop': 'drop',
+        'dragover .menu__item-drag-top': 'dragoverTop',
+        'dragleave .menu__item-drag-top': 'dragleaveTop'
     },
 
     iconEl: null,
@@ -179,12 +181,12 @@ var MenuItemView = Backbone.View.extend({
         });
     },
 
-    dropAllowed: function(e) {
+    dropAllowed(e) {
         var types = e.originalEvent.dataTransfer.types;
         return types.indexOf('text/group') >= 0 || types.indexOf('text/entry') >= 0;
     },
 
-    dragstart: function(e) {
+    dragstart(e) {
         e.stopPropagation();
         if (this.model.get('drag')) {
             e.originalEvent.dataTransfer.setData('text/group', this.model.id);
@@ -193,7 +195,7 @@ var MenuItemView = Backbone.View.extend({
         }
     },
 
-    dragover: function(e) {
+    dragover(e) {
         e.stopPropagation();
         if (this.model.get('drop') && this.dropAllowed(e)) {
             e.preventDefault();
@@ -201,25 +203,45 @@ var MenuItemView = Backbone.View.extend({
         }
     },
 
-    dragleave: function(e) {
+    dragleave(e) {
         e.stopPropagation();
         if (this.model.get('drop') && this.dropAllowed(e)) {
-            this.$el.removeClass('menu__item--drag');
+            this.$el.removeClass('menu__item--drag menu__item--drag-top');
         }
     },
 
-    drop: function(e) {
+    drop(e) {
         e.stopPropagation();
         if (this.model.get('drop') && this.dropAllowed(e)) {
-            this.$el.removeClass('menu__item--drag');
-            if (this.model.get('filterKey') === 'trash') {
-                DragDropInfo.dragObject.moveToTrash();
-                Backbone.trigger('refresh');
+            let isTop = this.$el.hasClass('menu__item--drag-top');
+            this.$el.removeClass('menu__item--drag menu__item--drag-top');
+            if (isTop) {
+                this.model.moveToTop(DragDropInfo.dragObject);
             } else {
-                this.model.moveHere(DragDropInfo.dragObject);
+                if (this.model.get('filterKey') === 'trash') {
+                    DragDropInfo.dragObject.moveToTrash();
+                } else {
+                    this.model.moveHere(DragDropInfo.dragObject);
+                }
             }
             Backbone.trigger('refresh');
         }
+    },
+
+    dropTopAllowed(e) {
+        return e.originalEvent.dataTransfer.types.indexOf('text/group') >= 0;
+    },
+
+    dragoverTop(e) {
+        if (this.dropTopAllowed(e)) {
+            this.$el.addClass('menu__item--drag-top');
+        }
+    },
+
+    dragleaveTop(e) {
+        if (this.dropTopAllowed(e)) {
+            this.$el.removeClass('menu__item--drag-top');
+        }
     }
 });
 

app/styles/areas/_menu.scss

@@ -166,7 +166,21 @@
       margin-right: $base-padding-h / 2;
     }
 
-    &--drag {
+    &-drag-top {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      transition: background-color $slow-transition-out;
+    }
+
+    &--drag-top > .menu__item-body > .menu__item-drag-top {
+      transition: background-color $slow-transition-in;
+      @include th { background-color: action-color(); }
+    }
+
+    &--drag:not(.menu__item--drag-top) {
       >.menu__item-body {
         @include th { color: action-color(); }
       }

app/templates/menu/menu-item.hbs

@@ -6,6 +6,7 @@
     ">
     {{#if collapsible}}<i class="menu__item-collapse fa fa-ellipsis-v muted-color" title="{{res 'menuItemCollapsed'}}"></i>{{/if}}
     <div class="menu__item-body" {{#if drag}}draggable="true"{{/if}}>
+        {{#if drag}}<div class="menu__item-drag-top"></div>{{/if}}
         {{#if customIcon~}}
             <img src="{{{customIcon}}}" class="menu__item-icon menu__item-icon--image" />
         {{~else~}}

bower.json

@@ -27,7 +27,7 @@
     "bourbon": "4.2.7",
     "dropbox": "keeweb/dropbox-js#0ac0efdc2711eece73f6ac044459e1fd0d5e9390",
     "font-awesome": "4.6.3",
-    "kdbxweb": "0.4.1",
+    "kdbxweb": "0.4.3",
     "normalize.css": "4.2.0",
     "pikaday": "1.4.0",
     "FileSaver.js": "eligrey/FileSaver.js",

release-notes.md

@@ -4,6 +4,7 @@ Release notes
 ##### v1.3.0 (TBD)
 `+` context menu  
 `+` solarized themes  
+`+` group reorder  
 `+` select field contents on search hotkey  
 `+` option to preload default config and file  
 `+` save displayed table columns