Merge pull request #366 from SC5/dev

Changes for 0.2.16 into master

CHANGELOG.md

@@ -1,15 +1,15 @@
-## 0.2.15 (2014-12-17)
+## 0.2.16 (2014-12-22)
 
-### Critical and major changes
-* Find variable declarations from every file. Use styleVariables to filter selected files (#[344](https://github.com/SC5/sc5-styleguide/pull/344))
-* Feature: Custom KSS parameter for wrapper markup (#[338](https://github.com/SC5/sc5-styleguide/pull/338))
-  **The syntax for declaring a component wrapper has been changed. It is not compartible anymore. When updating change
-  you wrapper components according to [documentation](https://github.com/SC5/sc5-styleguide#wrapper-markup).**
+### New features
+* Declare Angular directives in KSS comments (#[364](https://github.com/SC5/sc5-styleguide/pull/364))
 
-### Bug fixes
-* Allow empty single-line comments (#[345](https://github.com/SC5/sc5-styleguide/pull/345))
-* Fixes failed styleguide generation when section modifier has no markup (#[343](https://github.com/SC5/sc5-styleguide/pull/343))
-* Fix: Do not detect @imports as variables (#[342](https://github.com/SC5/sc5-styleguide/pull/342))
+### Improvements
+* Show variable source file name(s) (#[360](https://github.com/SC5/sc5-styleguide/pull/360))
+* Nice looking designer tool for mobile devices (#[359](https://github.com/SC5/sc5-styleguide/pull/359))
+* Hide absolute paths on client (#[358](https://github.com/SC5/sc5-styleguide/pull/358))
+* Save only changed variables (#[355](https://github.com/SC5/sc5-styleguide/pull/355))
 
 ### Internal changes
-* Instruction how to deal with branches (#[346](https://github.com/SC5/sc5-styleguide/pull/346))
+* Add Dockerfile to run demo in docker container (#[357](https://github.com/SC5/sc5-styleguide/pull/357))
+* Minor fixes to releasing instruction (#[349](https://github.com/SC5/sc5-styleguide/pull/349))
+

DEVELOPMENT.md

@@ -50,3 +50,5 @@ To be able to check during development, please
 1. Once your pull request is merged, rebase your `master` against SC5 again
 1. Run `npm publish`
 1. Create a versioning tag in GitHub. Insert the `CHANGELOG.md` content as a description of this versioning tag.
+1. Rebase `dev` against `master`
+1. Push the new `dev` into `SC5` repository

Dockerfile

@@ -0,0 +1,8 @@
+FROM sc5io/ubuntu:latest
+ENV BINDHOST 0.0.0.0
+ENV PORT 3000
+ENV NODE_ENV production
+ADD . /app
+RUN cd /app && rm -rf node_modules && npm install
+WORKDIR /app
+CMD npm run demo

README.md

@@ -256,6 +256,39 @@ Note: When using templateUrl in directives, the template path is relative to sty
 
 Document your CSS components with [KSS](http://warpspire.com/kss/)
 
+### Defining an Angular directive
+
+If your components can be rendered with Angular directives, you can define them in KSS markup and so avoid copy-pasting
+in the `markup` field. This is how you can instruct the style guide to use Angular:
+
+  // Test directive
+  //
+  // markup:
+  // <div sg-test-directive>If you see this something is wrong</div>
+  //
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js
+  //
+  // Styleguide 6.1
+
+It is possible to define several files, so you can attach all the needed dependencies:
+
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js
+  // file: path/to/dependency-file.js
+  // file: path/to/stylesheet.css
+
+You can also write the same with comma-syntax
+
+  // sg-angular-directive:
+  // name: NameOfMainAppModule
+  // template: path/to/template-filename.html
+  // file: path/to/application-file.js, path/to/dependency-file.js, path/to/stylesheet.css
+
 ### Wrapper markup
 
 Sometimes your component examples need a wrapper. For example:

demo-gulpfile.js

@@ -17,16 +17,7 @@ gulp.task('styleguide', ['static'], function() {
             'node_modules/node-bourbon/assets/stylesheets',
             'node_modules/node-neat/assets/stylesheets'
           ]
-        },
-        filesConfig: [
-          {
-            name: 'sgAppTest',
-            files: [
-              'demo/testDirective.js'
-            ],
-            template: 'demo/testDirective.html'
-          }
-        ]
+        }
       }))
     .pipe(gulp.dest(outputPath));
 });

lib/app/js/app.js

@@ -106,11 +106,11 @@ angular.module('sgApp', [
     };
   }])
   .filter('filterRelated', function() {
-    return function(items, relatedVariables) {
+    return function(variables, sectionVariableNames) {
       var filtered = [];
-      angular.forEach(items, function(item) {
-        if (relatedVariables && relatedVariables.indexOf(item.name) > -1) {
-          filtered.push(item);
+      angular.forEach(variables, function(variable) {
+        if (sectionVariableNames && sectionVariableNames.indexOf(variable.name) > -1) {
+          filtered.push(variable);
         }
       });
       return filtered;

lib/app/js/directives/design.js

@@ -24,7 +24,7 @@ angular.module('sgApp')
         }
 
         function unique(a, idx, arr) {
-          return arr.indexOf(a) === idx && a !== undefined;
+          return a !== undefined && arr.indexOf(a) === idx;
         }
 
         scope.showRelated = true;

lib/app/js/services/Variables.js

@@ -113,24 +113,36 @@
 
     this.setSocket = function(newSocket) {
       this.socket = newSocket;
+      if (this.socket) {
+        this.addSocketListeners();
+      }
+      return this;
+    };
+
+    this.addSocketListeners = function() {
       this.socket.on('styleguide progress start', function() {
         $rootScope.$broadcast('progress start');
       });
       this.socket.on('styleguide progress end', function() {
         $rootScope.$broadcast('progress end');
         $rootScope.$broadcast('styles changed');
       });
-      return this;
     };
 
     this.saveVariables = function() {
       if (this.socket) {
-        this.socket.emit('variables to server', this.variables);
+        this.socket.emit('variables to server', this.getDirtyVariables());
       } else {
-        throw 'Socket not available.';
+        throw new Error('Socket not available');
       }
     };
 
+    this.getDirtyVariables = function() {
+      return this.variables.filter(function(variable) {
+        return variable.dirty && variable.dirty === true;
+      });
+    };
+
     // Start constructor
     this.init = function(socket) {
       var _this = this;

lib/app/sass/_styleguide_variables.scss

@@ -17,4 +17,5 @@ $content-margin: 30px;
 
 // Misc
 $designer-tool-width: 30%;
-$header-height: 60px;
+$designer-tool-width-mobile: 90%;
+$header-height: 60px;

lib/app/sass/app.scss

@@ -275,7 +275,7 @@ input.sg {
 //
 // Styleguide 3.1.1
 
-$mobile: new-breakpoint(max-width 480px);
+$mobile: new-breakpoint(max-width 768px);
 
 .sg.wrapper {
   position: relative;
@@ -298,7 +298,7 @@ $mobile: new-breakpoint(max-width 480px);
 .sg.body {
   @include span-columns(9);
   @include media($mobile) {
-    padding: 1em;
+    padding: 0.25em;
 
     @include span-columns(12);
   }
@@ -696,6 +696,13 @@ $mobile: new-breakpoint(max-width 480px);
     .reference-number {
       color: white;
     }
+
+    .section-source {
+      float: right;
+      color: rgba($secondary-color, .6);
+      font-size: 60%;
+      line-height: 1.777em;
+    }
   }
 
   i.fa {
@@ -705,6 +712,7 @@ $mobile: new-breakpoint(max-width 480px);
     color: rgba($secondary-color, .6);
     @include transition(all .4s ease-out);
   }
+
 }
 
 .sg.section.main {
@@ -945,7 +953,10 @@ $mobile: new-breakpoint(max-width 480px);
 // Variable listing
 //
 // markup:
-// <div class="sg design-content" ng-init="variables = [{name: 'example-variable', value: '#00FF00'}, {name: 'another-variable', value: '#FF0000', dirty: true}]">
+// <div class="sg design-content" ng-init="variables = [
+//      {name: 'example-variable', value: '#00FF00'},
+//      {name: 'edited-variable', value: '#FF0000', dirty: true}
+//   ]">
 //   <h3>All variables</h3>
 //   <ul>
 //     <li ng-repeat="variable in variables">
@@ -964,6 +975,12 @@ $mobile: new-breakpoint(max-width 480px);
   width: $designer-tool-width;
   height: 100%;
 
+  z-index: 9000;
+
+  @include media($mobile) {
+    width: $designer-tool-width-mobile;
+  }
+
   border-left: 1px solid rgba(#000, .3);
 
   @include transition(left .3s ease-out);
@@ -1008,6 +1025,9 @@ $mobile: new-breakpoint(max-width 480px);
 
   &.sg-visible {
     left: 100% - $designer-tool-width;
+    @include media($mobile) {
+      left: 100% - $designer-tool-width-mobile;
+    }
 
     .handle {
       left: 0;
@@ -1062,6 +1082,11 @@ $mobile: new-breakpoint(max-width 480px);
       }
     }
 
+    .variable-source {
+      opacity: 0.5;
+      font-size: 80%;
+    }
+
   }
 
   input {
@@ -1214,5 +1239,10 @@ Styleguide 4.4
 // markup:
 // <div sg-test-directive>If you see this something is wrong</div>
 //
+// sg-angular-directive:
+// name: sgAppTest
+// template: demo/testDirective.html
+// file: demo/testDirective.js
+//
 // Styleguide 6.1
 

lib/app/styleguide_config.json

@@ -1,21 +1,12 @@
 {
   "title": "SC5 Styleguide",
   "overviewPath": "../../README.md",
-  "styleVariables": "sass/_styleguide_variables.scss",
+  "styleVariables": "sass/*.scss",
   "sass": {
     "src": "lib/app/sass/app.scss",
     "includePaths": [
       "node_modules/node-bourbon/assets/stylesheets",
       "node_modules/node-neat/assets/stylesheets"
     ]
-  },
-  "filesConfig": [
-    {
-      "name": "sgAppTest",
-      "files": [
-        "demo/testDirective.js"
-      ],
-      "template": "demo/testDirective.html"
-    }
-  ]
+  }
 }

lib/app/views/partials/design.html

@@ -32,7 +32,7 @@ <h3 class="sg" ng-hide="showRelated">All variables</h3>
 
     </ul>
     <div class="sg action-footer" ng-if="socketService.isAvailable()">
-      <button class="sg button primary" ng-disabled="!socketService.isConnected()" ng-click="saveVariables()">Save changes</button>
+      <button class="sg button primary" ng-disabled="!socketService.isConnected() || !dirtyVariablesFound()" ng-click="saveVariables()">Save changes</button>
       <button class="sg button" ng-disabled="!dirtyVariablesFound()" ng-click="resetLocal()">Reset local changes</button>
     </div>
     <div class="sg action-footer" ng-hide="socketService.isAvailable()">

lib/app/views/partials/section.html

@@ -3,7 +3,11 @@
   <header class="sg section-header">
     <a ng-href="{{section.reference}}">
       <i class="fa fa-link"></i>
-      <h1 class="sg"><span class="reference-number">{{ section.reference }}</span> {{ section.header }}</h1>
+      <h1 class="sg">
+        <span class="reference-number">{{ section.reference }}</span>
+        <span>{{ section.header }}</span>
+        <span class="section-source">defined in {{ section.file }}</span>
+      </h1>
     </a>
   </header>
   <div class="sg section-partial" ng-if="section.modifiers.length || section.description">

lib/app/views/partials/variable.html

@@ -5,6 +5,7 @@
       <i class="fa fa-eye"></i>
     </a>
     <i ng-if="variable.dirty" class="fa fa-asterisk" title="this variable value has changed"></i>
+    <span class="sg variable-source">defined in {{variable.file}}</span>
   </label>
   <input class="sg" type="color" ng-if="hasColor(variable.value)" ng-model="color.value" value="{{color.value}}">
   <input class="sg" type="text" ng-model="variable.value" value="{{variable.value}}">

lib/modules/angular-files.js

@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = {
+
+  /* Puts angular directives declared in sections into config */
+  add: function(config, sections) {
+
+    function add(content) {
+      if (!config) {
+        config = [];
+      }
+      config.push(content);
+    }
+
+    sections.forEach(function(section) {
+
+      if (section['sg-angular-directive']) {
+
+        section['sg-angular-directive'].files = section['sg-angular-directive'].file;
+        if (!(section['sg-angular-directive'].files instanceof Array)) {
+          section['sg-angular-directive'].files = [
+            section['sg-angular-directive'].files
+          ];
+        }
+
+        add(section['sg-angular-directive']);
+      }
+    });
+
+    return config;
+
+  }
+
+};