more thorough nudge

cms/static/js/views/components/add_xblock.js

@@ -2,15 +2,17 @@
  * This is a simple component that renders add buttons for all available XBlock template types.
  */
 define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/utils/view_utils',
-        'js/views/components/add_xblock_button', 'js/views/components/add_xblock_menu'],
-    function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu) {
+        'js/views/components/add_xblock_button', 'js/views/components/add_xblock_menu', 'js/views/utils/xblock_utils'],
+    function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, XBlockViewUtils) {
         var AddXBlockComponent = BaseView.extend({
             events: {
                 'click .new-component .new-component-type .multiple-templates': 'showComponentTemplates',
                 'click .new-component .new-component-type .single-template': 'createNewComponent',
                 'click .new-component .cancel-button': 'closeNewComponent',
                 'click .new-component-templates .new-component-template .button-component': 'createNewComponent',
-                'click .new-component-templates .cancel-button': 'closeNewComponent'
+                'click .new-component-templates .cancel-button': 'closeNewComponent',
+                'click .new-component .add-unit-button': 'addNewUnit',
+                'click .new-component .override-button': 'overrideNudge'
             },
 
             initialize: function(options) {
@@ -19,11 +21,17 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                 this.template = this.loadTemplate('add-xblock-component');
                 this.nudgeTemplate = this.loadTemplate('add-xblock-component-nudge');
                 this.model.set({number_children: $('.level-element').length});
+                this.model.set({overrideNudge: false});
                 // this.model.on('change:number_children', function(model){
                 //     console.log('number of children changed!');
                 //     console.log(model.get('number_children'));
                 // }, this.model);
                 this.model.on('change:number_children', this.render, this);
+                this.model.on('change:overrideNudge', this.render, this);
+            },
+
+            overrideNudge: function() {
+                this.model.set({overrideNudge: true});
             },
 
             renderNudge: function() {
@@ -32,7 +40,13 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
 
             renderNormal: function() {
                 var that = this;
-                this.$el.html(this.template({numberChildren: that.model.get('number_children')}));
+                this.$el.html(this.template({
+                    numberChildren: that.model.get('number_children'),
+                    isVertical: that.model.isVertical(),
+                    parentId: that.model.get('ancestor_info').ancestors[0].get('id'),
+                    defaultNewName: that.model.get('display_name'),
+                    overrideNudge: that.model.get('overrideNudge')
+                }));
                 this.collection.each(
                     function(componentModel) {
                         var view, menu;
@@ -91,6 +105,16 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                     // component appears above them.
                     ViewUtils.setScrollOffset(self.$el, oldOffset);
                 });
+            },
+
+            addNewUnit: function(event) {
+                var $target = $(event.currentTarget);
+                console.log($target);
+                    // category = $target.data('category');
+                event.preventDefault();
+                XBlockViewUtils.addXBlock($target).done(function(locator) {
+                    ViewUtils.redirect('/container/' + locator + '?action=new')
+                });
             }
         });
 

cms/static/sass/elements/_modules.scss

@@ -122,17 +122,42 @@
       margin-bottom: ($baseline*0.75);
       color: $uxpl-green-base;
     }
+    button {
+      @include clearfix();
+      display: inline-block;
+      @extend %t-action3;
+      @include margin-right($baseline*0.75);
+      position: relative;
+      display: inline-block;
+      width: ($baseline*5);
+      height: ($baseline*5);
+      margin-bottom: ($baseline/2);
+      box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
+      border-radius: ($baseline/4);
+      padding: 0;
+      text-align: center;
+      // @extend %btn-primary-blue;
+      &.override-button {
+        @extend %btn-secondary-blue;
+      }
+      &.add-unit-button-style {
+        @extend %btn-primary-blue;
+        margin-left: $baseline;
+      }
+    }
 
     // add component - list of green buttons
     .new-component-type {
       @include clearfix();
 
+      // display: inline-block;
+
       li {
         display: inline-block;
       }
 
       // green button
-      .add-xblock-component-button {
+      .add-xblock-component-button{
         @extend %t-action3;
 
         @include margin-right($baseline*0.75);

cms/templates/js/add-xblock-component.underscore

 <div class="new-component">
     <h5><%= gettext("Add New Component") %></h5>
-    <p>There are <%= numberChildren %> components in this unit!</p>
-    <% if (numberChildren < 4) { %>
+    <p>Learner engagement is generally higher when units have fewer components. <a href="https://partners.edx.org/" target="_blank">Read more.</a></p>
+    <% if (numberChildren < 4 || overrideNudge) { %>
     <ul class="new-component-type">
+
     </ul>
+    <% } if (numberChildren >= 4) { %>
+    <p>This unit already contains <%= numberChildren %> components. Sylvia demands that start a new unit.</p>
+
     <% } %>
+
+    <% if (isVertical) { %>
+        <button class="add-unit-button add-unit-button-style" data-category="vertical"
+               data-parent="<%= parentId %>" data-default-name="<%= defaultNewName %>"
+               title="<%= interpolate(
+                     gettext('Click to add a new %(xblock_type)s'), { xblock_type: defaultNewName }, true
+               ) %>"
+            >
+            <%= interpolate(
+                gettext('New %(xblock_type)s'),
+                { xblock_type: defaultNewName },
+                true
+            ) %>
+        </button>
+    <% } %>
+
+    <% if (numberChildren > 3 && !overrideNudge) { %>
+        <button class="override-button">Thwart Sylvia</button>
+    <% } %>
+
 </div>

cms/templates/js/add-xblock-unit-button.underscore

+<% if (type === 'advanced' || templates.length > 1) { %>
+<button type="button" class="multiple-templates add-xblock-component-button" data-type="<%= type %>">
+<% } else { %>
+<button type="button" class="single-template add-xblock-component-button" data-type="<%= type %>" data-category="<%= templates[0].category %>">
+<% } %>
+  <span class="large-template-icon large-<%= type %>-icon"></span>
+  <span class="sr"> <%= gettext("Add Component:") %></span>
+  <span class="name"><%= display_name %></span>
+</button>