[Config] upgrade from webpack-boilerplate.

Author: Jason Cui

.eslintrc

@@ -28,6 +28,7 @@
     "space-before-function-paren": "off",
     "max-len": "off",
     "linebreak-style": "off",
-    "no-unused-vars": "off"
+    "no-unused-vars": "off",
+    "eol-last": "off"
   }
 }

.travis.yml

@@ -0,0 +1,18 @@
+sudo: required
+language: node_js
+node_js:
+  - "6"
+  - "7"
+
+cache: yarn
+
+install:
+  - yarn
+
+
+before_script:
+  - yarn add global gulp
+
+script: yarn run build
+
+cache: yarn

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Aquariuslt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

gulpfile.babel.js

@@ -0,0 +1,4 @@
+import './tasks/build';
+import './tasks/clean';
+import './tasks/test';
+import './tasks/serve';

package.json

@@ -1,15 +1,15 @@
 {
   "name": "Vue-Boilerplate",
   "version": "1.0.0",
+  "description": "A Vue boilerplate like Angular build flow.",
   "author": "Aquariuslt<superaquariuslt@gmail.com>",
-  "description": "Vue boilerplate",
-  "repository": "https://github.com/Aquariuslt/Vue-Boilerplate",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --config ./tasks/webpack/webpack.dev.babel.js",
-    "dev": "webpack-dev-server --config ./tasks/webpack/webpack.dev.babel.js",
-    "build": "rimraf dist && webpack --config ./tasks/webpack/webpack.prod.babel.js",
-    "lint": "eslint --ext .js,.vue src"
+    "clean": "gulp clean",
+    "dev": "gulp serve",
+    "build": "gulp build:prod",
+    "lint": "gulp lint",
+    "test": "gulp test"
   },
   "dependencies": {
     "gsap": "^1.19.1",
@@ -44,11 +44,16 @@
     "file-loader": "^0.11.0",
     "friendly-errors-webpack-plugin": "^1.1.3",
     "gulp": "^3.9.1",
+    "gulp-inject-string": "^1.1.0",
+    "gulp-rimraf": "^0.2.1",
+    "gulp-sequence": "^0.4.6",
+    "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "less": "^2.7.2",
     "less-loader": "^4.0.3",
     "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "node-sass": "^4.5.2",
     "normalize.css": "^6.0.0",
     "opn": "^4.0.2",
@@ -57,14 +62,15 @@
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
-    "vue-loader": "^11.1.4",
-    "vue-style-loader": "^2.0.0",
-    "vue-template-compiler": "^2.2.4",
-    "webpack": "^2.2.1",
+    "vue-loader": "^11.3.4",
+    "vue-style-loader": "^3.0.0",
+    "vue-template-compiler": "^2.2.6",
+    "webpack": "^2.3.3",
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-dev-server": "^2.4.2",
     "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
+    "webpack-merge": "^2.6.1",
+    "winston": "^2.3.1"
   }
 }

src/app/components/workflow/Workflow.vue

@@ -14,10 +14,12 @@
           <!-- Node G -->
           <transition-group name="workflow-node-list" class="workflow-node-graph" tag="g">
             <circle v-for="node in nodeList"
-                    r="30"
                     v-bind:key="node"
+                    v-bind:r="node.r"
                     v-bind:cx="node.cx"
                     v-bind:cy="node.cy"
+                    v-bind:class="node.fillClass"
+                    v-on:click="increase(node)"
                     class="workflow-node">
             </circle>
           </transition-group>
@@ -39,6 +41,7 @@
 
 <script>
   import _ from 'lodash';
+  import {TweenLite} from 'gsap';
 
   let sampleWorkflowSchemaData = {
     nodes: [
@@ -123,9 +126,11 @@
       console.log('depth:', depth, 'nodes:', depthNodeLength);
       _.each(currentDepthNodes, function (node, nodeIndex) {
         let clonedNode = _.clone(node);
+        clonedNode.r = 30;
         clonedNode.cx = widthPerDepth * depth + widthPerDepth / 2;
         clonedNode.cy = layout.height / (depthNodeLength * 2) + nodeIndex * (layout.height / (depthNodeLength));
         clonedNode.depth = depth;
+        clonedNode.fillClass = calculateFillColorClass(clonedNode.r);
         nodeList.push(clonedNode);
       });
     });
@@ -150,10 +155,13 @@
     // calculate label
     let labelList = [];
     _.each(nodeList, function (node) {
+      let scaled = 3.5;
+      let textLength = _.isUndefined(node.name) ? 0 : node.name.length * scaled;
+      let textHeight = 3 * scaled;
       let label = {
         text: node.name,
-        x: node.cx,
-        y: node.cy
+        x: node.cx - textLength,
+        y: node.cy + node.r + textHeight
       };
       labelList.push(label);
     });
@@ -183,6 +191,22 @@
   }
 
 
+  function calculateFillColorClass(level) {
+    const warningLimit = 40;
+    const dangerLimit = 50;
+    let targetClassPrefix = 'workflow-node';
+
+    if (level >= warningLimit && level < dangerLimit) {
+      return targetClassPrefix + '-warning';
+    }
+    if (level >= dangerLimit) {
+      return targetClassPrefix + '-danger';
+    }
+
+    return targetClassPrefix + '-normal';
+  }
+
+
   export default{
     name: 'workflow',
     props: [
@@ -205,7 +229,26 @@
       this.pathList = pathList;
       this.labelList = labelList;
     },
-    methods: {}
+    methods: {
+      increase: function (workflowNode) {
+        let originalRadius = workflowNode.r;
+        let targetRadius = originalRadius + 5;
+
+        let targetFillColorClass = calculateFillColorClass(workflowNode.r);
+
+        TweenLite.to(
+          workflowNode,
+          1,
+          {
+            r: targetRadius,
+            fillClass: targetFillColorClass
+          }
+        );
+      },
+      decrease: function () {
+        console.log('decrease');
+      }
+    }
   };
 </script>
 
@@ -226,6 +269,23 @@
   }
 
   .workflow-node-graph {
+    transition: 1s;
+  }
+
+  $workflow-normal-color: #41B883;
+  $workflow-warning-color: #b88207;
+  $workflow-danger-color: #b82800;
+
+  .workflow-node {
+    &-normal {
+      fill: $workflow-normal-color !important;;
+    }
+    &-warning {
+      fill: $workflow-warning-color !important;
+    }
+    &-danger {
+      fill: $workflow-danger-color !important;;
+    }
   }
 
   $workflow-node-content-color: #41B883;
@@ -248,7 +308,8 @@
   }
 
   .workflow-label {
-    font-weight: bold;
+    font-size: 14px;
+    font-weight: lighter;
     fill: #000000;
   }
 
@@ -277,16 +338,13 @@
 
   }
 
-
-
   .workflow-label-list-enter-active,
-  .workflow-label-list-leave-active{
+  .workflow-label-list-leave-active {
     opacity: 0;
     transition: 1s;
   }
 
 
-
 </style>
 
 

src/assets/.gitkeep

@@ -1,30 +1,10 @@
-/* For Global Material Design Icons */
 @font-face {
-  font-family: 'Material Icons';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url(./assets/fonts/material-icons.woff2) format('woff2');
+  src: local(Roboto), url(./assets/fonts/roboto.woff) format('woff');
 }
 
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+body * {
+  font-family: 'Roboto', serif !important;
 }
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local(Roboto), url(./assets/fonts/roboto.woff) format('woff');
-}

src/assets/fonts/material-icons.woff2

@@ -0,0 +1,28 @@
+/* Created by Aquariuslt on 15/04/2017.*/
+import gulp from 'gulp';
+import gutil from 'gulp-util';
+import sequence from 'gulp-sequence';
+
+import webpack from 'webpack';
+import webpackProdConfig from './config/webpack.prod.config.babel';
+
+import './clean';
+
+import logger from './util/logger';
+
+gulp.task('build', function (done) {
+  logger.info('Webpack building.');
+  webpack(webpackProdConfig, function (error, stats) {
+    if (error) {
+      throw new gutil.PluginError('webpack', error);
+    }
+    gutil.log(stats.toString(webpackProdConfig.stats));
+    logger.info('Webpack build done');
+    done();
+  });
+});
+
+
+gulp.task('build:prod', sequence(['clean'], ['build']));
+
+

src/fonts.css

@@ -0,0 +1,13 @@
+/* Created by Aquariuslt on 15/04/2017.*/
+import gulp from 'gulp';
+import rimraf from 'gulp-rimraf';
+
+import logger from './util/logger';
+
+import prodConfig from './config/prod.config';
+
+gulp.task('clean', function () {
+  logger.info('Deleting dist folder');
+  return gulp.src(prodConfig.dist)
+    .pipe(rimraf());
+});

src/style.css src/styles.css

@@ -0,0 +1,16 @@
+/* Created by Aquariuslt on 14/04/2017.*/
+let baseConfig = {
+  src: 'src',
+  dist: 'dist',
+  // assets folder will be copied into dist folder
+  assets: [
+    {
+      from: 'src/assets',
+      to: 'assets'
+    }
+  ],
+  // if you use favicon.ico or other filename under /src please update here
+  favicon: 'favicon.png'
+};
+
+export default baseConfig;

tasks/build.js

@@ -0,0 +1,28 @@
+/* Created by Aquariuslt on 14/04/2017.*/
+
+import merge from 'webpack-merge';
+import baseConfig from './base.config';
+import * as pathUtil from '../util/path-util';
+
+
+/**
+ * Update development environment configurable variables here.
+ * */
+
+const PROTOCOL = 'http://';
+const HOST = '127.0.0.1';
+const PORT = 5000;
+
+
+let devConfig = merge(baseConfig, {
+  output: {
+    path: pathUtil.root('build'),
+    publicPath: PROTOCOL + HOST + ':' + PORT
+  },
+  devServer: {
+    host: HOST,
+    port: PORT
+  }
+});
+
+export default devConfig;