Merge pull request #1034 from junaidrsd/fix-sidenav-improvements

Improvements and bug fixes for side navigation
SC5 · Nov 17, 2016 · ab9b43b · ab9b43b
2 parents 593d3cc + 940b8b3
commit ab9b43b
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 12 deletions.
diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css
@@ -389,6 +389,8 @@ Styleguide 3.1.1
     display: inline-block;
     width: 30%;
     opacity: 1;
+    height: 500px;
+    overflow-y: scroll;    
     @media (--mobile) {
       width: 100%;
       padding-top: 30px;

diff --git a/lib/app/index.html b/lib/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="sgApp">
+<html lang="en" ng-app="sgApp" route-css-class>
 <head>
   <meta charset="UTF-8">
   <link rel="icon" href="{{{appRoot}}}/assets/img/favicon.ico">

diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -40,6 +40,7 @@ angular.module('sgApp', deps)
         url: '/section/:section',
         templateUrl: 'views/sections.html',
         controller: 'SectionsCtrl',
+        viewClass: 'view-section',
         resolve: {
           loadLazyModule: function($$animateJs, $ocLazyLoad) {
             return loadModule($$animateJs, $ocLazyLoad);
@@ -59,6 +60,7 @@ angular.module('sgApp', deps)
       .state('app.index.overview', {
         url: '/',
         templateUrl: 'overview.html',
+        viewClass: 'view-overview',
         controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
           // Update current reference to update the designer tool view
@@ -131,6 +133,10 @@ angular.module('sgApp', deps)
       }
     };
 
+    $rootScope.$on('$stateChangeSuccess',function(event, toState){
+        $rootScope.viewClass = toState.viewClass;
+    });
+
     // Create global throttled scorll
     function broadcastScrollEvent(event) {
       $rootScope.$broadcast('scroll', event);

diff --git a/lib/app/js/controllers/appCtrl.js b/lib/app/js/controllers/appCtrl.js
@@ -8,11 +8,6 @@ angular.module('sgApp')
     ngProgress.setHeight('');
     ngProgress.setColor('');
 
-    // Scroll top when page is changed
-    $scope.$on('$viewContentLoaded', function() {
-      window.scrollTo(0, 0);
-    });
-
     $scope.$on('progress start', function() {
       ngProgress.start();
     });

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -23,7 +23,7 @@ angular.module('sgApp')
     };
 
     $scope.isSideNav = function() {
-      if($scope.config.data && $scope.config.data.sideNav) {
+      if ($scope.config.data && $scope.config.data.sideNav) {
         return 'sideNav';
       } else if ($scope.config.data && !$scope.config.data.sideNav) {
         return 'topNav';

diff --git a/lib/app/js/directives/rootCssClass.js b/lib/app/js/directives/rootCssClass.js
@@ -0,0 +1,28 @@
+'use strict';
+
+angular.module('sgApp')
+.directive('routeCssClass', function($rootScope) {
+  return {
+    restrict: 'A',
+    scope: {},
+    link: function (scope, elem) {
+      $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {
+        var fromClassnames = angular.isDefined(fromState.viewClass) && angular.isDefined(fromState.viewClass) ? fromState.viewClass : null;
+        var toClassnames = angular.isDefined(toState.viewClass) && angular.isDefined(toState.viewClass) ? toState.viewClass : null;
+
+        fromClassnames = 'root-' + fromClassnames;
+        toClassnames = 'root-' + toClassnames;
+        // don't do anything if they are the same
+        if (fromClassnames !== toClassnames) {
+          if (fromClassnames) {
+            elem.removeClass(fromClassnames);
+          }
+
+          if (toClassnames) {
+            elem.addClass(toClassnames);
+          }
+        }
+      });
+    }
+  };
+});
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
@@ -1,3 +1,4 @@
+<div class="{{viewClass}}">
 <div id="socketDisconnection" class="sg disconnection-icon" title="no socket connection" ng-hide="socketService.isConnected()" ng-if="socketService.isAvailable()">
   <i class="fa fa-chain-broken"></i>
 </div>
@@ -118,7 +119,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
 </div>
 
 <div sg-design></div>
-
+</div>
 <footer class="sg sg-footer">
   <div class="sg sg-content">
     <p>

diff --git a/lib/app/views/sections.html b/lib/app/views/sections.html
@@ -28,4 +28,5 @@
       </a>
     </li>
   </ul>
-</div>
+</div>
+<section class="sg sg-after-sections" ng-bind-html="config.data.afterSections | unsafe"></section>
diff --git a/lib/modules/cli/argv.js b/lib/modules/cli/argv.js
@@ -15,6 +15,7 @@ module.exports = function(argLib) {
     .describe('extraHead', 'These HTML elements are injected inside the style guide head-tag')
     .describe('beforeBody', 'These HTML elements are injected inside the style guide body tag, before any other content')
     .describe('afterBody', 'These HTML elements are injected inside the style guide body tag, after any other content')
+    .describe('afterSections', 'These HTML elements are injected after the sections, after all the section content')
     .describe('sideNav', 'This bool use to switch navigation to side nav')
     .describe('commonClass', 'The provided classes are added to all preview blocks in the generated style guide')
     .describe('appRoot', 'Define the appRoot parameter if you are hosting the style guide from a directory other than the root directory of the HTTP server')

diff --git a/lib/modules/cli/styleguide-cli.js b/lib/modules/cli/styleguide-cli.js
@@ -22,6 +22,7 @@ module.exports = function(argv) {
           extraHead: argv.extraHead,
           beforeBody: argv.beforeBody,
           afterBody: argv.afterBody,
+          afterSections: argv.afterSections,
           sideNav: argv.sideNav,
           commonClass: argv.commonClass,
           appRoot: argv.appRoot,

diff --git a/lib/modules/common.js b/lib/modules/common.js
@@ -13,6 +13,7 @@ function sanitizeOptions(opt) {
     extraHead: (typeof opt.extraHead === 'object') ? opt.extraHead.join('\n') : opt.extraHead,
     beforeBody: (typeof opt.beforeBody === 'object') ? opt.beforeBody.join('\n') : opt.beforeBody,
     afterBody: (typeof opt.afterBody === 'object') ? opt.afterBody.join('\n') : opt.afterBody,
+    afterSections: (typeof opt.afterSections === 'object') ? opt.afterSections.join('\n') : opt.afterSections,
     additionalNgDependencies: opt.additionalNgDependencies || false,
     sideNav: opt.sideNav || false,
     disableEncapsulation: opt.disableEncapsulation || false,

diff --git a/lib/styleguide.js b/lib/styleguide.js
@@ -149,7 +149,7 @@ function replaceSectionReferences(json) {
 }
 
 function copyUsedOptionsToJsonConfig(opt, json) {
-  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'additionalNgDependencies'];
+  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'afterSections', 'additionalNgDependencies'];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
@@ -158,7 +158,7 @@ function copyUsedOptionsToJsonConfig(opt, json) {
 }
 
 function copyUsedOptionsToInlineJsonConfig(opt, json) {
-  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'additionalNgDependencies'];
+  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'afterSections', 'additionalNgDependencies'];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
@@ -329,7 +329,6 @@ module.exports.generate = function(options) {
           indexHtmlProcessed;
 
         overviewProcessed = processOverviewMarkdown(opt);
-
         var cssSrc = [distPath + '/css/styleguide-app.css', distPath + '/css/styleguide_helper_elements.css'];
 
         // Copy all files (except index.html) from dist from to output stream
@@ -389,6 +388,7 @@ module.exports.generate = function(options) {
               title: opt.title,
               extraHead: opt.extraHead,
               beforeBody: opt.beforeBody,
+              afterSections: opt.afterSections,
               afterBody: opt.afterBody,
               sideNav: opt.sideNav,
               styleguideConfig: JSON.stringify(copyUsedOptionsToInlineJsonConfig(opt, {}).config),