render barebone nudge

cms/djangoapps/contentstore/views/component.py

@@ -44,7 +44,7 @@ ADVANCED_PROBLEM_TYPES = settings.ADVANCED_PROBLEM_TYPES
 CONTAINER_TEMPLATES = [
     "basic-modal", "modal-button", "edit-xblock-modal",
     "editor-mode-button", "upload-dialog",
-    "add-xblock-component", "add-xblock-component-button", "add-xblock-component-menu",
+    "add-xblock-component", "add-xblock-component-nudge", "add-xblock-component-button", "add-xblock-component-menu",
     "add-xblock-component-support-legend", "add-xblock-component-support-level", "add-xblock-component-menu-problem",
     "xblock-string-field-editor", "xblock-access-editor", "publish-xblock", "publish-history",
     "unit-outline", "container-message", "container-access", "license-selector",

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

@@ -17,6 +17,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                 BaseView.prototype.initialize.call(this, options);
                 that = this;
                 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.on('change:number_children', function(model){
                 //     console.log('number of children changed!');
@@ -25,7 +26,11 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                 this.model.on('change:number_children', this.render, this);
             },
 
-            render: function() {
+            renderNudge: function() {
+                this.$el.html(this.nudgeTemplate());
+            },
+
+            renderNormal: function() {
                 var that = this;
                 this.$el.html(this.template({numberChildren: that.model.get('number_children')}));
                 this.collection.each(
@@ -41,6 +46,14 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
                 );
             },
 
+            render: function() {
+                if (this.model.get('number_children') > 3) {
+                    this.renderNudge();
+                } else {
+                    this.renderNormal();
+                }
+            },
+
             showComponentTemplates: function(event) {
                 var type;
                 event.preventDefault();

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

 <div class="new-component">
     <h5>This is the nudge</h5>
-    <p>There are <%= numberChildren %> components in this vertical</p>
     <ul class="new-component-type">
     </ul>
 </div>