Remove sub-tabs in the Tutorials tab.

Author: Volodymyr Tymtsiv

app/admin_components/adf-tutorial/Readme.md

@@ -0,0 +1,94 @@
+### Adding a new tutorial
+
+To add a new tutorial you need to do the following:
+
+1) Add a file with a scenario to tour_scenario folder which you want to implement
+2) Create a method in tutorial.controller.js which will start the tour.
+3) Create a button in main-tutorial.html.
+4) Add ng-click directive to the button with a method which will start the tour.
+
+
+Now let's look closer to these steps.
+
+### Adding scenario  
+
+You need to create a file and declare all steps related to the tour.
+
+Each step has a type. For each step, the element of the step will be highlighted.
+
+There are four step types:
+
+- click - To get the next step it is necessary to click on the element;
+- input - To get the next step it is necessary to type in the input what is described in the step and click 'next' button;
+- notice - Just highlight the element. To get the next step it is necessary to click 'next' button;
+- select - Just highlight the element
+
+Each step could have a custom logic relate to step (some action which needs to do before or after the step is shown)
+They should be declared in `eventHandlers` array.
+
+Also, each step could have buttons. 
+
+There are four type of buttons:
+
+- next
+- back
+- skip
+- done
+
+To declare a default behavior you just need to declare the button type.
+If necessary to add some custom behavior to the button you could declare `action` field in button which is a function. It will rewrite the default behavior of the button.
+
+For instance:
+
+```
+{
+   type: 'back',
+   action: function () {
+       $("#info-tab").trigger("click");
+   }
+ }
+``` 
+
+
+### Creating a method in tutorial.controller.js
+
+Example:
+```javascript
+ $scope.startServiceTutorial = function () {
+            TourBuilder.buildTour(createServiceScenario);
+        };
+
+```
+
+Where `createServiceScenario` is the name of the variable in the scenario file.
+
+
+### Adding button and use the  method from the controller
+
+
+Example: 
+
+```html
+<button class="btn btn-primary" type="button" ng-click="startServiceTutorial()">
+            Let's create a Service
+</button>
+```
+
+Where `startServiceTutorial` the method name of the new tour.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

app/admin_components/adf-tutorial/tutorial.controller.js

@@ -6,15 +6,7 @@ angular.module('dfTutorial')
 
         $scope.$parent.title = 'Tutorials';
 
-        $scope.links = [
-            {
-                name: 'services',
-                label: 'Services',
-                path: 'service-tutorial'
-            }
-        ];
-
-        $scope.start = function () {
+        $scope.startServiceTutorial = function () {
             TourBuilder.buildTour(createServiceScenario);
         };
 

app/admin_components/adf-tutorial/views/main-tutorial.html

@@ -1,21 +1,12 @@
 <div>
-    <div class="col-md-2 df-sidebar-nav">
-        <df-sidebar-nav></df-sidebar-nav>
-    </div>
-    <div class="col-md-10 df-section"
-         data-ng-class="activeView.path === 'service-tutorial' ? 'df-section-3-round' : 'df-section-all-round'"
-         df-fs-height>
-
-        <div data-ng-if="activeView.path === 'service-tutorial'">
-            <df-section-header data-title="'Services tutorial'"></df-section-header>
-            <br>
-            <p class="hero-example">Services are where you set up REST API connections to databases, file storage,
-                email, remote web services, and more.
-            </p>
-            <button class="btn btn-primary"
-                    type="button"
-                    ng-click="start()">Let's create a Service
-            </button>
-        </div>
+    <div class="col-md-12 df-section" df-fs-height>
+        <df-section-header data-title="'Tutorials'"></df-section-header>
+        <br>
+        <p class="hero-example">Services are where you set up REST API connections to databases, file storage,
+            email, remote web services, and more.
+        </p>
+        <button class="btn btn-primary" type="button" ng-click="startServiceTutorial()">
+            Let's create a Service
+        </button>
     </div>
 </div>

dist/admin_components/adf-tutorial/views/main-tutorial.html

@@ -1 +1 @@
-<div> <div class="col-md-2 df-sidebar-nav"> <df-sidebar-nav></df-sidebar-nav> </div> <div class="col-md-10 df-section" data-ng-class="activeView.path === 'service-tutorial' ? 'df-section-3-round' : 'df-section-all-round'" df-fs-height> <div data-ng-if="activeView.path === 'service-tutorial'"> <df-section-header data-title="'Services tutorial'"></df-section-header> <br> <p class="hero-example">Services are where you set up REST API connections to databases, file storage, email, remote web services, and more. </p> <button class="btn btn-primary" type="button" ng-click="start()">Let's create a Service </button> </div> </div> </div> 
+<div> <div class="col-md-12 df-section" df-fs-height> <df-section-header data-title="'Tutorials'"></df-section-header> <br> <p class="hero-example">Services are where you set up REST API connections to databases, file storage, email, remote web services, and more. </p> <button class="btn btn-primary" type="button" ng-click="start()">Let's create a Service </button> </div> </div> 

dist/index.html

@@ -2,7 +2,7 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]--> <!-- Add your site or application content here --> <div id="dreamfactoryApp" data-ng-controller="MainCtrl" df-popup-login> <div id="popup-login-container"></div> <!-- Top level Nav --> <df-top-level-nav-std data-options="topLevelNavOptions"></df-top-level-nav-std> <div data-ng-if="showAdminComponentNav" style="margin: 10px auto;"> <!-- Component nav and title --> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <df-component-title></df-component-title> <df-component-nav data-options="componentNavOptions"></df-component-nav> </div> </div> </div> </div> <!-- Rendering Context --> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div data-ng-view=""></div> </div> </div> </div> </div> <!--<df-main-loading></df-main-loading>--> <div id="mask"></div> </div> <!--[if lt IE 9]>
     <script src="scripts/oldieshim.d41d8cd9.js"></script>
-    <![endif]--> <script src="scripts/vendor.ef0c91cf.js"></script> <script src="admin_components/adf-tutorial/popper.min.js"></script> <script src="admin_components/adf-tutorial/shepherd.min.js"></script> <script src="scripts/app.b8c94ade.js"></script> <!-- other deps --> <script src="vendor/ace/ace.js"></script> <script src="vendor/ace/mode-javascript.js"></script> <script src="vendor/ace/mode-json.js"></script> <script src="vendor/ace/mode-yaml.js"></script> <!--Begin Comm100 Live Chat Code--> <div id="comm100-button-219"></div> <script type="text/javascript"> var Comm100API=Comm100API||{};
+    <![endif]--> <script src="scripts/vendor.ef0c91cf.js"></script> <script src="admin_components/adf-tutorial/popper.min.js"></script> <script src="admin_components/adf-tutorial/shepherd.min.js"></script> <script src="scripts/app.c208f5a2.js"></script> <!-- other deps --> <script src="vendor/ace/ace.js"></script> <script src="vendor/ace/mode-javascript.js"></script> <script src="vendor/ace/mode-json.js"></script> <script src="vendor/ace/mode-yaml.js"></script> <!--Begin Comm100 Live Chat Code--> <div id="comm100-button-219"></div> <script type="text/javascript"> var Comm100API=Comm100API||{};
         Comm100API.status = "init";
         Comm100API.showChat = function (bool) {
             var sel = $("#comm100-button-219");