components: reorganize build pipeline to have nice separation of html/js/css

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js

@@ -0,0 +1,29 b''
+Polymer({
+    is: 'rhodecode-toast',
+    properties: {
+        toasts: {
+            type: Array,
+            value: function(){
+                return []
+            }
+        }
+    },
+    observers: [
+        '_changedToasts(toasts.splices)'
+    ],
+    ready: function(){
+
+    },
+
+    _changedToasts: function(newValue, oldValue){
+        this.$['p-toast'].notifyResize();
+    },
+    dismissNotifications: function(){
+        this.$['p-toast'].close();
+        this.splice('toasts', 0);
+    },
+    open: function(){
+        this.$['p-toast'].open();
+    },
+    _gettext: _gettext
+});

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less

@@ -0,0 +1,39 b''
+paper-toast{
+    width: 100%;
+    min-width: 400px;
+    --paper-toast-background-color: #ffffff;
+    --paper-toast-color: #000000;
+}
+paper-toast a{
+    font-weight: bold
+}
+
+.toast-message-holder {
+    width: ~'calc(100% - 150px)';
+    display: inline-block;
+}
+.toast-close {
+    display: inline-block;
+    width: 145px;
+    text-align: right;
+    float: right;
+}
+.toast-notification {
+    padding: 10px 0 10px 0;
+}
+
+.toast-level {
+    display: inline-block;
+    min-width: 100px;
+    font-weight: bold;
+    text-transform: uppercase;
+    &.info, &.success {
+        color: #0ac878;
+    }
+    &.error, &.danger {
+        color: #e85e4d;
+    }
+    &.warning {
+        color: #ffc854;
+    }
+}

.hgignore

@@ -1,63 +1,64 b''
 syntax: glob
 *.egg
 *.egg-info
 *.idea
 *.orig
 *.pyc
 *.sqlite-journal
 *.swp
 *.tox
 *.DS_Store*
+rhodecode/public/js/src/components/**/*.css
 
 syntax: regexp
 
 #.filename
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^\.cache.*$
 ^\.rhodecode$
 
 ^rcextensions
 ^_dev
 ^._dev
 ^build/
 ^bower_components/
 ^coverage\.xml$
 ^data$
 ^\.eggs/
 ^configs/data$
 ^dev.ini$
 ^acceptance_tests/dev.*\.ini$
 ^dist/
 ^fabfile.py
 ^htmlcov
 ^junit\.xml$
 ^node_modules/
 ^pylint.log$
 ^rcextensions/
 ^result$
 ^rhodecode/public/css/style.css$
 ^rhodecode/public/css/style-polymer.css$
 ^rhodecode/public/js/scripts.js$
 ^rhodecode/public/js/rhodecode-components.html$
 ^rhodecode/public/js/src/components/shared-styles.html$
 ^rhodecode\.db$
 ^rhodecode\.log$
 ^rhodecode_dev\.log$
 ^test\.db$
 
 # ac-tests
 ^acceptance_tests/\.cache.*$
 ^acceptance_tests/externals
 ^acceptance_tests/ghostdriver.log$
 ^acceptance_tests/local(_.+)?\.ini$
 
 # docs
 ^docs/_build$
 ^docs/result$
 ^docs-internal/_build$
 
 # Cythonized things
 ^rhodecode/.*\.(c|so)$

Gruntfile.js

@@ -1,178 +1,187 b''
 module.exports = function(grunt) {
   grunt.initConfig({
 
     dirs: {
       css: "rhodecode/public/css",
       js: {
         "src": "rhodecode/public/js/src",
         "dest": "rhodecode/public/js"
       }
     },
     copy: {
       main: {
         expand: true,
         cwd: 'bower_components',
         src: 'webcomponentsjs/**',
         dest: '<%= dirs.js.dest %>/vendors',
       },
     },
     concat: {
       polymercss:{
         src: [
           // Base libraries
           '<%= dirs.js.src %>/components/shared-styles-prefix.html',
           '<%= dirs.css %>/style-polymer.css',
           '<%= dirs.js.src %>/components/shared-styles-suffix.html'
         ],
         dest: '<%= dirs.js.dest %>/src/components/shared-styles.html',
         nonull: true
       },
       dist: {
         src: [
           // Base libraries
           '<%= dirs.js.src %>/jquery-1.11.1.min.js',
           '<%= dirs.js.src %>/logging.js',
           '<%= dirs.js.src %>/bootstrap.js',
           '<%= dirs.js.src %>/mousetrap.js',
           '<%= dirs.js.src %>/moment.js',
           '<%= dirs.js.src %>/appenlight-client-0.4.1.min.js',
           '<%= dirs.js.src %>/i18n_utils.js',
           '<%= dirs.js.src %>/deform.js',
 
           // Plugins
           '<%= dirs.js.src %>/plugins/jquery.pjax.js',
           '<%= dirs.js.src %>/plugins/jquery.dataTables.js',
           '<%= dirs.js.src %>/plugins/flavoured_checkbox.js',
           '<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js',
           '<%= dirs.js.src %>/plugins/jquery.autocomplete.js',
           '<%= dirs.js.src %>/plugins/jquery.debounce.js',
           '<%= dirs.js.src %>/plugins/jquery.mark.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
 
           // Select2
           '<%= dirs.js.src %>/select2/select2.js',
 
           // Code-mirror
           '<%= dirs.js.src %>/codemirror/codemirror.js',
           '<%= dirs.js.src %>/codemirror/codemirror_loadmode.js',
           '<%= dirs.js.src %>/codemirror/codemirror_hint.js',
           '<%= dirs.js.src %>/codemirror/codemirror_overlay.js',
           '<%= dirs.js.src %>/codemirror/codemirror_placeholder.js',
           // TODO: mikhail: this is an exception. Since the code mirror modes
           // are loaded "on the fly", we need to keep them in a public folder
           '<%= dirs.js.dest %>/mode/meta.js',
           '<%= dirs.js.dest %>/mode/meta_ext.js',
           '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
 
           // Rhodecode utilities
           '<%= dirs.js.src %>/rhodecode/utils/array.js',
           '<%= dirs.js.src %>/rhodecode/utils/string.js',
           '<%= dirs.js.src %>/rhodecode/utils/pyroutes.js',
           '<%= dirs.js.src %>/rhodecode/utils/ajax.js',
           '<%= dirs.js.src %>/rhodecode/utils/autocomplete.js',
           '<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js',
           '<%= dirs.js.src %>/rhodecode/utils/ie.js',
           '<%= dirs.js.src %>/rhodecode/utils/os.js',
           '<%= dirs.js.src %>/rhodecode/utils/topics.js',
 
           // Rhodecode widgets
           '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
 
           // Rhodecode components
           '<%= dirs.js.src %>/rhodecode/init.js',
           '<%= dirs.js.src %>/rhodecode/connection_controller.js',
           '<%= dirs.js.src %>/rhodecode/codemirror.js',
           '<%= dirs.js.src %>/rhodecode/comments.js',
           '<%= dirs.js.src %>/rhodecode/constants.js',
           '<%= dirs.js.src %>/rhodecode/files.js',
           '<%= dirs.js.src %>/rhodecode/followers.js',
           '<%= dirs.js.src %>/rhodecode/menus.js',
           '<%= dirs.js.src %>/rhodecode/notifications.js',
           '<%= dirs.js.src %>/rhodecode/permissions.js',
           '<%= dirs.js.src %>/rhodecode/pjax.js',
           '<%= dirs.js.src %>/rhodecode/pullrequests.js',
           '<%= dirs.js.src %>/rhodecode/settings.js',
           '<%= dirs.js.src %>/rhodecode/select2_widgets.js',
           '<%= dirs.js.src %>/rhodecode/tooltips.js',
           '<%= dirs.js.src %>/rhodecode/users.js',
           '<%= dirs.js.src %>/rhodecode/utils/notifications.js',
           '<%= dirs.js.src %>/rhodecode/appenlight.js',
 
           // Rhodecode main module
           '<%= dirs.js.src %>/rhodecode.js'
         ],
         dest: '<%= dirs.js.dest %>/scripts.js',
         nonull: true
       }
     },
 
     less: {
       development: {
         options: {
           compress: false,
           yuicompress: false,
           optimization: 0
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
           "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
       },
       production: {
         options: {
           compress: true,
           yuicompress: true,
           optimization: 2
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
           "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
+      },
+      components: {
+        files: [{
+          cwd: '<%= dirs.js.src %>/components/',
+          dest: '<%= dirs.js.src %>/components/',
+          src: ['**/*.less'],
+          expand: true,
+          ext: '.css'
+        }]
       }
     },
 
     watch: {
       less: {
         files: ["<%= dirs.css %>/*.less"],
-        tasks: ["less:development", 'concat:polymercss', "vulcanize"]
+        tasks: ["less:development", 'less:components', 'concat:polymercss', "vulcanize"]
       },
       js: {
         files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
         tasks: ["vulcanize", "concat:dist"]
       }
     },
 
     jshint: {
       rhodecode: {
         src: '<%= dirs.js.src %>/rhodecode/**/*.js',
         options: {
           jshintrc: '.jshintrc'
         }
       }
     },
     vulcanize: {
       default: {
         options: {
           abspath: '',
           inlineScripts: true,
           inlineCss: true,
           stripComments: true
         },
         files: {
           '<%= dirs.js.dest %>/rhodecode-components.html': '<%= dirs.js.src %>/components/shared-components.html'
         }
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-vulcanize');
   grunt.loadNpmTasks('grunt-crisper');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
 };

rhodecode/public/css/polymer.less

@@ -1,33 +1,15 b''
 //Primary CSS
 //--- IMPORTS ------------------//
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'fonts';
 @import 'variables';
 @import 'legacy_code_styles';
 @import 'type';
 @import 'alerts';
 @import 'buttons';
 @import 'tags';
 @import 'examples';
 @import 'login';
 @import 'comments';
-
-
-.toast-level {
-  display: inline-block;
-  min-width: 100px;
-  font-weight: bold;
-  text-transform: uppercase;
-  &.info, &.success {
-    color: #0ac878;
-  }
-  &.error, &.danger {
-    color: #e85e4d;
-  }
-  &.warning {
-    color: #ffc854;
-  }
-}
-

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -1,79 +1,23 b''
-<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="rhodecode-unsafe-html.html">
+<link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
-        <style include="shared-styles"></style>
-
-        <style>
-            paper-toast{
-                width: 100%;
-                min-width: 400px;
-                --paper-toast-background-color: #ffffff;
-                --paper-toast-color: #000000;
-            }
-            paper-toast a{
-                font-weight: bold
-            }
+        <link rel="stylesheet" href="rhodecode-toast.css">
 
-            .toast-message-holder {
-                width: calc(100% - 150px);
-                display: inline-block;
-            }
-            .toast-close {
-                display: inline-block;
-                width: 145px;
-                text-align: right;
-                float: right;
-            }
-            .toast-notification {
-                padding: 10px 0 10px 0;
-            }
-
-        </style>
         <paper-toast id="p-toast" duration="0"  horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
             <div class="toast-message-holder">
                 <template is="dom-repeat" items="{{toasts}}">
                     <div class="toast-notification">
                     <span class$="toast-level {{item.level}}">{{item.level}}</span>
                     <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
                     </div>
                 </template>
             </div>
             <div class="toast-close">
                 <paper-button on-tap="dismissNotifications" class="btn btn-info">{{_gettext('Close now')}}</paper-button>
             </div>
         </paper-toast>
     </template>
 
-    <script>
-        Polymer({
-            is: 'rhodecode-toast',
-            properties: {
-                toasts: {
-                    type: Array,
-                    value: function(){
-                        return []
-                    }
-                }
-            },
-            observers: [
-                '_changedToasts(toasts.splices)'
-            ],
-            ready: function(){
-
-            },
-
-            _changedToasts: function(newValue, oldValue){
-                this.$['p-toast'].notifyResize();
-            },
-            dismissNotifications: function(){
-                this.$['p-toast'].close();
-                this.splice('toasts', 0);
-            },
-            open: function(){
-                this.$['p-toast'].open();
-            },
-            _gettext: _gettext
-        });
-    </script>
+    <script src="rhodecode-toast.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html

@@ -1,22 +1,9 b''
-<link rel="import" href="../../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 
 <dom-module id="rhodecode-unsafe-html">
     <template>
         <style include="shared-styles"></style>
         <content></content>
     </template>
-    <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
-              text: {
-                  type: String,
-                  observer: '_handleText'
-              }
-            },
-            _handleText: function(newVal, oldVal){
-                this.innerHTML = this.text;
-            }
-        })
-    </script>
+    <script src="rhodecode-unsafe-html.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js

@@ -1,22 +1,12 b''
-<link rel="import" href="../../../../../bower_components/polymer/polymer.html">
-
-<dom-module id="rhodecode-unsafe-html">
-    <template>
-        <style include="shared-styles"></style>
-        <content></content>
-    </template>
-    <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
-              text: {
-                  type: String,
-                  observer: '_handleText'
-              }
-            },
-            _handleText: function(newVal, oldVal){
-                this.innerHTML = this.text;
-            }
-        })
-    </script>
-</dom-module>
+Polymer({
+    is: 'rhodecode-unsafe-html',
+    properties: {
+        text: {
+            type: String,
+            observer: '_handleText'
+        }
+    },
+    _handleText: function(newVal, oldVal){
+        this.innerHTML = this.text;
+    }
+})

rhodecode/public/js/src/components/shared-components.html

@@ -1,9 +1,9 b''
 <link rel="import" href="../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../../../../../bower_components/paper-tooltip/paper-tooltip.html">
 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="shared-styles.html">
-<link rel="import" href="rhodecode-toast.html">
-<link rel="import" href="rhodecode-unsafe-html.html">
+<link rel="import" href="rhodecode-toast/rhodecode-toast.html">
+<link rel="import" href="rhodecode-unsafe-html/rhodecode-unsafe-html.html">