Merge branch 'develop' into feature/adhoc-pypy

bower.json

@@ -14,7 +14,7 @@
     "jquery-ui": "~1.10.3",
     "node-uuid": "~1.4.1",
     "js-base64": "~2.1.2",
-    "jsPlumb": "git@github.com:praekelt/jsPlumb.git#~1.5.2",
+    "jsplumb": "~1.7.5",
     "lodash": "~2.0.0",
     "backbone-relational": "0.8.6",
     "bootstrap": "3.0.0",
@@ -45,6 +45,11 @@
     "backbone.babysitter": {
       "js": "lib/*.js"
     },
+    "jsplumb": {
+      "js": [
+        "dist/js/*.js"
+      ]
+    },
     "*": {
       "js": [
         "*.js",
@@ -67,7 +72,6 @@
     }
   },
   "resolutions": {
-    "jquery": "1.9.1",
-    "underscore": ">=1.5.0"
+    "jquery": "1.9.1"
   }
 }

go/apps/dialogue/templates/dialogue/edit.html

@@ -4,9 +4,6 @@
 {% block content_extraclass %}campaigns dialogue{% endblock %}
 
 {% block content_actions_left %}
-    <button class="btn btn-primary" id='new-state'>
-        Create new message
-    </button>
 {% endblock %}
 
 {% block content_actions_right %}
@@ -31,13 +28,21 @@
 
   <div class="pull-right">
     <a href="{% conversation_screen conversation %}">Cancel</a>
+    <button id="save-and-exit" class="btn btn-primary">Save and exit</button>
     <button id="save" class="btn btn-primary">Save</button>
   </div>
 {% endblock %}
 
 {% block content_main %}
     <div class="main-content">
-        <div id="diagram"></div>
+        <div id="diagram">
+            <div class="alert alert-info alert-dismissible info-add-state" role="alert">
+              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+              </button>
+              Double click anywhere to add a new screen
+            </div>
+        </div>
     </div>
 {% endblock %}
 

go/base/static/css/campaigns.less

@@ -93,8 +93,8 @@
     text-align:right; // cancel, save draft, next step
 
     // offsets the cancel button a bit.
-    a:first-child {
-      margin-right:20px;
+    .btn-reset {
+      margin-left: 20px;
     }
   }
 }

go/base/static/css/conversations.less

@@ -1,3 +1,6 @@
+@import "./lesshat";
+
+
 .confirm {
   .details {
     table {
@@ -21,6 +24,7 @@
 .dialogue {
   @color-normal: #428bca;
   @color-hover: #b41e31;
+  @color-unconnected: #d9534f;
   @secondary-opacity: 0.75;
 
   .actions {
@@ -43,14 +47,24 @@
     }
   }
 
+  .info-add-state {
+    z-index: 3;
+    position: relative;
+    width: 30%;
+    margin: 0 auto;
+  }
+
   #diagram {
+    position: relative;
+    min-height: 800px;
+    .user-select(none);
+
     ._jsPlumb_connector {
       z-index: 1;
       opacity: @secondary-opacity;
     }
 
     ._jsPlumb_endpoint {
-      z-index: 5;
       opacity: @secondary-opacity;
     }
 
@@ -69,13 +83,16 @@
     }
 
     .endpoint {
-      z-index: 4;
       width: 15px;
       height: 15px;
-      background: @color-normal;
+      background: @color-unconnected;
       .border-radius(3px);
     }
 
+    ._jsPlumb_connected {
+      background: @color-normal;
+    }
+
     // need to also select by .endpoint in order to override the normal color
     .endpoint.is-hovered-target {
       background: @color-hover;
@@ -88,42 +105,26 @@
       opacity: @secondary-opacity;
     }
 
-    .grid {
-      text-align: center;
-      margin: 0 auto;
-
-      .placeholder {
-        background: #2f3436;
-        width: 8px;
-        height: 200px;
-        float: left;
-        .border-radius(10px);
-      }
-
-      .row {
-        margin: 0;
-      }
-
-      .item {
-        margin: 40px 40px;
-        float: left;
-        z-index: 2;
-      }
+    .entry-point {
+      left: 10px;
+      top: 15px;
+      position: absolute;
+      min-height: 0;
+      .user-select(none);
     }
 
-    .add {
-      width: 85px;
-      line-height: normal;
-      font-family: serif;
-      font-size: 55px;
-      .user-select(none);
+    .endpoint-entry {
+      margin: 0 auto;
+      margin-bottom: -15px;
     }
 
     .state {
+      z-index: 2;
+      width: 280px;
       float: left;
       font-size: 12px;
       text-align: left;
-      position: relative;
+      position: absolute;
       .user-select(none);
 
       label {
@@ -240,15 +241,6 @@
     }
 
     .choice.state {
-      .edit.mode {
-        .choices {
-          .choice {
-            .composite-control {
-            }
-          }
-        }
-      }
-
       .preview.mode {
         .choices {
           text-align: left;

go/base/static/css/routing.less

@@ -39,7 +39,7 @@
         margin:15px auto;
         padding-top:10px;
 
-        z-index:0;
+        z-index:2;
         -webkit-user-select:none;
 
         .name {
@@ -53,7 +53,7 @@
 
       .endpoint {
         background: #888;
-        padding: 3px;
+        padding: 5px;
       }
 
       // need to also select by .endpoint in order to override the normal color

go/base/static/js/src/apps/dialogue/diagram.js

@@ -10,10 +10,13 @@
 
   var dialogue = go.apps.dialogue,
       connections = dialogue.connections,
-      states = dialogue.states;
+      states = dialogue.states,
+      entry = dialogue.entry;
 
   // The main view containing all the dialogue states and connections
   var DialogueDiagramView = DiagramView.extend({
+    className: 'boxes',
+
     stateType: states.DialogueStateView,
     stateCollectionType: states.DialogueStateCollection,
 
@@ -22,6 +25,7 @@
 
     initialize: function(options) {
       DialogueDiagramView.__super__.initialize.call(this, options);
+      this.entryPoint = new entry.DialogueEntryPointView({diagram: this});
       go.utils.bindEvents(this.bindings, this);
     },
 
@@ -33,6 +37,13 @@
       'error:unsupported connections': function(source, target, plumbConnection) {
         jsPlumb.detach(plumbConnection, {fireEvent: false});
       }
+    },
+
+    render: function() {
+      this.$el.addClass(this.className);
+      this.entryPoint.$el.appendTo(this.$el);
+      DialogueDiagramView.__super__.render.call(this);
+      this.entryPoint.render();
     }
   });