[API] Remove stylesheet from example

No need to provide custom API for this.

index.html

@@ -32,7 +32,6 @@
         require(['main'], function (mct) {
             require([
                 './tutorials/todo/todo',
-                './tutorials/todo/bundle',
                 './example/imagery/bundle',
                 './example/eventGenerator/bundle',
                 './example/generator/bundle'
@@ -44,6 +43,7 @@
     </script>
     <link rel="stylesheet" href="platform/commonUI/general/res/css/startup-base.css">
     <link rel="stylesheet" href="platform/commonUI/general/res/css/openmct.css">
+    <link rel="stylesheet" href="tutorials/todo/todo.css">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
 	<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">

tutorials/todo/bundle.js

@@ -1,19 +0,0 @@
-define([
-    'legacyRegistry',
-    './src/controllers/TodoController'
-], function (
-    legacyRegistry,
-    TodoController
-) {
-    legacyRegistry.register("tutorials/todo", {
-        "name": "To-do Plugin",
-        "description": "Allows creating and editing to-do lists.",
-        "extensions": {
-            "stylesheets": [
-                {
-                    "stylesheetUrl": "css/todo.css"
-                }
-            ]
-        }
-    });
-});

tutorials/todo/res/templates/todo.html

@@ -1,29 +0,0 @@
-<div ng-controller="TodoController" class="example-todo">
-    <div class="example-button-group">
-        <a ng-class="{ selected: checkVisibility(true) }"
-           ng-click="setVisibility(true)">All</a>
-        <a ng-class="{ selected: checkVisibility(false, false) }"
-           ng-click="setVisibility(false, false)">Incomplete</a>
-        <a ng-class="{ selected: checkVisibility(false, true) }"
-           ng-click="setVisibility(false, true)">Complete</a>
-    </div>
-
-    <ul>
-        <li ng-repeat="task in model.tasks"
-            ng-class="{ 'example-task-completed': task.completed }"
-            ng-if="showTask(task)">
-
-            <input type="checkbox"
-                   ng-checked="task.completed"
-                   ng-click="toggleCompletion($index)">
-            <span ng-click="selectTask($index)"
-                  ng-class="{ selected: isSelected($index) }"
-                  class="example-task-description">
-                {{task.description}}
-            </span>
-        </li>
-    </ul>
-    <div ng-if="model.tasks.length < 1" class="example-message">
-        There are no tasks to show.
-    </div>
-</div>

tutorials/todo/src/controllers/TodoController.js

@@ -1,97 +0,0 @@
-define(function () {
-    // Form to display when adding new tasks
-    var NEW_TASK_FORM = {
-        name: "Add a Task",
-        sections: [{
-            rows: [{
-                name: 'Description',
-                key: 'description',
-                control: 'textfield',
-                required: true
-            }]
-        }]
-    };
-
-    function TodoController($scope, dialogService) {
-        var showAll = true,
-            showCompleted;
-
-        // Persist changes made to a domain object's model
-        function persist() {
-            var persistence =
-                $scope.domainObject.getCapability('persistence');
-            return persistence && persistence.persist();
-        }
-
-        // Remove a task
-        function removeTaskAtIndex(taskIndex) {
-            $scope.domainObject.useCapability('mutation', function (model) {
-                model.tasks.splice(taskIndex, 1);
-            });
-            persist();
-        }
-
-        // Add a task
-        function addNewTask(task) {
-            $scope.domainObject.useCapability('mutation', function (model) {
-                model.tasks.push(task);
-            });
-            persist();
-        }
-
-        // Change which tasks are visible
-        $scope.setVisibility = function (all, completed) {
-            showAll = all;
-            showCompleted = completed;
-        };
-
-        // Check if current visibility settings match
-        $scope.checkVisibility = function (all, completed) {
-            return showAll ? all : (completed === showCompleted);
-        };
-
-        // Toggle the completion state of a task
-        $scope.toggleCompletion = function (taskIndex) {
-            $scope.domainObject.useCapability('mutation', function (model) {
-                var task = model.tasks[taskIndex];
-                task.completed = !task.completed;
-            });
-            persist();
-        };
-
-        // Check whether a task should be visible
-        $scope.showTask = function (task) {
-            return showAll || (showCompleted === !!(task.completed));
-        };
-
-        // Handle selection state in edit mode
-        if ($scope.selection) {
-            // Expose the ability to select tasks
-            $scope.selectTask = function (taskIndex) {
-                $scope.selection.select({
-                    removeTask: function () {
-                        removeTaskAtIndex(taskIndex);
-                        $scope.selection.deselect();
-                    },
-                    taskIndex: taskIndex
-                });
-            };
-
-            // Expose a check for current selection state
-            $scope.isSelected = function (taskIndex) {
-                return ($scope.selection.get() || {}).taskIndex ===
-                    taskIndex;
-            };
-
-            // Expose a view-level selection proxy
-            $scope.selection.proxy({
-                addTask: function () {
-                    dialogService.getUserInput(NEW_TASK_FORM, {})
-                        .then(addNewTask);
-                }
-            });
-        }
-    }
-
-    return TodoController;
-});

tutorials/todo/todo.css

@@ -0,0 +1,29 @@
+.example-todo div.example-button-group {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.example-todo .example-button-group a {
+    padding: 3px;
+    margin: 3px;
+}
+
+.example-todo .example-button-group a.selected {
+    border: 1px gray solid;
+    border-radius: 3px;
+    background: #444;
+}
+
+.example-todo .example-task-completed .example-task-description {
+    text-decoration: line-through;
+    opacity: 0.75;
+}
+
+.example-todo .example-task-description.selected {
+    background: #46A;
+    border-radius: 3px;
+}
+
+.example-todo .example-message {
+    font-style: italic;
+}