Introducing instructor toolbar

All the non-CSS changes to get instructor toolbar working as in
wireframes, with non of the functionality or style.

lms/djangoapps/teams/static/teams/js/views/instructor_tools.js

@@ -0,0 +1,39 @@
+;(function (define) {
+    'use strict';
+
+    define(['backbone',
+            'underscore',
+            'gettext',
+            'teams/js/views/team_utils',
+            'text!teams/templates/instructor-tools.underscore'],
+        function (Backbone, _, gettext, TeamUtils, instructorToolbarTemplate) {
+            return Backbone.View.extend({
+
+                events: {
+                    'click .action-delete': 'deleteTeam',
+                    'click .action-edit-members': 'editMembership'
+                },
+
+                initialize: function(options) {
+                    this.template = _.template(instructorToolbarTemplate);
+                },
+
+                render: function() {
+                    this.$el.html(this.template);
+                    return this;
+                },
+
+                deleteTeam: function (event) {
+                    event.preventDefault();
+                    alert("You clicked the button!");
+                    //placeholder; will route to delete team page
+                },
+
+                editMembership: function (event) {
+                    event.preventDefault();
+                    alert("You clicked the button!");
+                    //placeholder; will route to remove team member page
+                }
+            });
+        });
+}).call(this, define || RequireJS.define);

lms/djangoapps/teams/static/teams/js/views/teams_tab.js

@@ -21,11 +21,12 @@
             'teams/js/views/edit_team',
             'teams/js/views/team_profile_header_actions',
             'teams/js/views/team_utils',
+            'teams/js/views/instructor_tools',
             'text!teams/templates/teams_tab.underscore'],
         function (Backbone, _, gettext, SearchFieldView, HeaderView, HeaderModel,
                   TopicModel, TopicCollection, TeamModel, TeamCollection, TeamMembershipCollection, TeamAnalytics,
                   TeamsTabbedView, TopicsView, TeamProfileView, MyTeamsView, TopicTeamsView, TeamEditView,
-                  TeamProfileHeaderActionsView, TeamUtils, teamsTemplate) {
+                  TeamProfileHeaderActionsView, TeamUtils, InstructorToolsView, teamsTemplate) {
             var TeamsHeaderModel = HeaderModel.extend({
                 initialize: function () {
                     _.extend(this.defaults, {nav_aria_label: gettext('teams')});
@@ -37,12 +38,15 @@
                 initialize: function (options) {
                     this.header = options.header;
                     this.main = options.main;
+                    this.instructorTools = options.instructorTools;
                 },
 
                 render: function () {
                     this.$el.html(_.template(teamsTemplate));
                     this.$('p.error').hide();
                     this.header.setElement(this.$('.teams-header')).render();
+                    if (this.instructorTools)
+                        this.instructorTools.setElement(this.$('.teams-instructor-tools-bar')).render();
                     this.main.setElement(this.$('.page-content')).render();
                     return this;
                 }
@@ -249,12 +253,14 @@
                                 topic: topic,
                                 model: team
                             });
+                            var instructorToolsView = new InstructorToolsView();
                             editViewWithHeader = self.createViewWithHeader({
                                 title: gettext("Edit Team"),
                                 description: gettext("If you make significant changes, make sure you notify members of the team before making these changes."),
                                 mainView: view,
                                 topic: topic,
-                                team: team
+                                team: team,
+                                instructorTools: instructorToolsView
                             });
                             self.mainView = editViewWithHeader;
                             self.render();
@@ -443,7 +449,8 @@
                                 }
                             }
                         }),
-                        main: options.mainView
+                        main: options.mainView,
+                        instructorTools: options.instructorTools
                     });
                 },
 

lms/djangoapps/teams/static/teams/templates/instructor-tools.underscore

@@ -0,0 +1,13 @@
+<div class="wrapper-msg">
+    <span class="left-floater">
+        <%- gettext("Instructor tools") %>
+    </span>
+    <span class="right-floater">
+        <button class="action-delete">
+            <%- gettext("Delete Team") %>
+        </button>
+        <button class="action-edit-members">
+            <%- gettext("Edit Membership") %>
+        </button>
+    </span>
+</div>

lms/djangoapps/teams/static/teams/templates/teams_tab.underscore

@@ -7,6 +7,7 @@
     </div>
 </div>
 <div class="teams-header"></div>
+<div class="teams-instructor-tools-bar"></div>
 <div class="teams-main">
     <div class="page-content"></div>
 </div>