New feature to order behaviours

docs/user_guide.md

@@ -551,7 +551,7 @@ connections previously added into the wiring configuration.
 ![General aspect of the behaviour oriented wiring user interface](images/user_guide/behaviour_oriented_wiring/general_aspect.png)
 
 This is the look of the wiring editor interface when the behaviour engine is
-enabled. Each of the panels in the *Identified behaviours* section represents a
+enabled. Each of the panels in the *Behaviours* section represents a
 behaviour and displays the name and the description of the represented
 behaviour.
 

src/wirecloud/commons/static/js/StyledElements/ToggleButton.js

@@ -83,13 +83,18 @@
     };
 
     StyledElements.ToggleButton.prototype._clickCallback = function _clickCallback(event) {
-        if (!this.enabled) {
-            return;
+        event.stopPropagation();
+        this.click();
+    };
+
+    StyledElements.ToggleButton.prototype.click = function click() {
+
+        if (this.enabled) {
+            this.active = !this.active;
+            this.trigger('click');
         }
 
-        event.stopPropagation();
-        this.active = !this.active;
-        this.events.click.trigger(this);
+        return this;
     };
 
 })();

src/wirecloud/commons/utils/remote.py

@@ -1,6 +1,6 @@
 # -*- coding: utf-8 -*-
 
-# Copyright (c) 2008-2015 CoNWeT Lab., Universidad Politécnica de Madrid
+# Copyright (c) 2008-2016 CoNWeT Lab., Universidad Politécnica de Madrid
 
 # This file is part of Wirecloud.
 
@@ -989,6 +989,10 @@ def btn_remove(self):
     def heading(self):
         return self.title_element
 
+    @property
+    def index(self):
+        return int(self.element.get_attribute('data-index'))
+
     @property
     def title(self):
         return self.title_element.text
@@ -1024,6 +1028,19 @@ def check_basic_info(self, title=None, description=None):
 
         return self
 
+    def move_to(self, behaviour):
+        new_index = behaviour.index
+
+        actions = ActionChains(self.testcase.driver).click_and_hold(self.title_element)
+
+        for i in range(abs(new_index - self.index)):
+            actions.move_to_element(behaviour.title_element)
+
+        actions.release().perform()
+        self.testcase.assertEqual(self.index, new_index)
+
+        return self
+
 
 class WorkspaceTabTester(object):
 
@@ -1732,6 +1749,10 @@ def behaviour_list(self):
     def btn_create_behaviour(self):
         return ButtonTester(self.testcase, self.panel.find_element_by_css_selector(".btn-create"))
 
+    @property
+    def btn_order(self):
+        return ButtonTester(self.testcase, self.panel.find_element_by_css_selector(".btn-order"))
+
     @property
     def btn_enable_behaviour_engine(self):
         return ButtonTester(self.testcase, self.panel.find_element_by_css_selector(".btn-enable"))
@@ -1776,6 +1797,14 @@ def enable(self):
 
         return self
 
+    def find_behaviour_by_title(self, title):
+
+        for behaviour in self.behaviour_list:
+            if behaviour.title == title:
+                return behaviour
+
+        return None
+
     def has_behaviours(self):
         behaviours = self.behaviour_list
 

src/wirecloud/defaulttheme/static/css/wiring/wiring_behaviours.scss

@@ -27,3 +27,15 @@
         margin-bottom: 0px;
     }
 }
+
+.behaviour.temporal {
+    visibility: hidden;
+}
+
+.behaviour.dragging {
+    position: absolute;
+    cursor: move;
+    top: 0;
+    left: 0;
+    z-index: 10;
+}

src/wirecloud/defaulttheme/static/css/wiring/wiring_layout.scss

@@ -44,7 +44,7 @@
         border: solid 1px $panel-default-border-color;
         box-shadow: $panel-box-shadow-inset;
         background-color: $panel-bg;
-        overflow-y: auto;
+        overflow-y: scroll;
 
         .section {
             position: relative;
@@ -56,7 +56,7 @@
 .wiring-sidebar > .panel-behaviours {
 
     & > .panel-heading .panel-title {
-        width: $behaviour-title-width;
+        width: 90%;
     }
 
     &.disabled {
@@ -71,6 +71,13 @@
     }
 }
 
+.wiring-sidebar > .panel-behaviours:not(.disabled) {
+
+    & > .panel-body {
+        top: 80px;
+    }
+}
+
 // ============================================================================
 // WIRING-VIEW - FOOTER
 // ============================================================================

src/wirecloud/platform/locale/es/LC_MESSAGES/djangojs.po

@@ -2296,8 +2296,8 @@ msgid "Enable"
 msgstr "Activar"
 
 #: static/js/wirecloud/ui/WiringEditor/BehaviourEngine.js:61
-msgid "Identified behaviours"
-msgstr "Comportamientos identificados"
+msgid "Behaviours"
+msgstr "Comportamientos"
 
 #: static/js/wirecloud/ui/WiringEditor/BehaviourEngine.js:67
 msgid "New feature"
@@ -2412,7 +2412,7 @@ msgid "No image available"
 msgstr "Imagen no disponible"
 
 #: static/js/wirecloud/ui/WiringEditor/ComponentShowcase.js:48
-msgid "Available components"
+msgid "Components"
 msgstr "Componentes"
 
 #: static/js/wirecloud/ui/WiringEditor/ComponentShowcase.js:80

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor.js

@@ -314,10 +314,15 @@ Wirecloud.ui = Wirecloud.ui || {};
             .on('slideOut', function () {
                 this.btnFindComponents.active = false;
                 this.btnListBehaviours.active = false;
+                this.behaviourEngine.stopOrdering();
             }.bind(this))
             .on('slideIn', function (offcanvas, panel) {
                 this.btnFindComponents.active = panel.hasClassName("panel-components");
                 this.btnListBehaviours.active = panel.hasClassName("panel-behaviours");
+
+                if (this.btnFindComponents.active) {
+                    this.behaviourEngine.stopOrdering();
+                }
             }.bind(this));
 
         var wiringLegend = document.createElement('div');

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor/Behaviour.js

@@ -1,5 +1,5 @@
 /*
- *     Copyright (c) 2015 CoNWeT Lab., Universidad Politécnica de Madrid
+ *     Copyright (c) 2015-2016 CoNWeT Lab., Universidad Politécnica de Madrid
  *
  *     This file is part of Wirecloud Platform.
  *
@@ -40,7 +40,7 @@
      */
     ns.Behaviour = utils.defineClass({
 
-        constructor: function Behaviour(options) {
+        constructor: function Behaviour(index, options) {
             var descriptionElement;
 
             options = utils.updateObject(ns.Behaviour.JSON_TEMPLATE, options);
@@ -89,11 +89,21 @@
                     set: function set(value) {descriptionElement.textContent = value ? value : ns.Behaviour.JSON_TEMPLATE.description;}
                 },
 
+                index: {
+                    get: function () {
+                        return this.get().getAttribute('data-index');
+                    },
+                    set: function (value) {
+                        this.get().setAttribute('data-index', value);
+                    }
+                },
+
                 logManager: {value: new ns.BehaviourLogManager(this)}
 
             });
 
             this.active = options.active;
+            this.index = index;
 
             this.components = options.components;
             this.connections = options.connections;