engineering/unrhodecode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Marcin Lulek 2016-08-26 16:16:32 +02:00
parent ef0780634c
commit de7d04b74e
11 changed files with 126 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.hgignore
View file

@ -8,6 +8,7 @@ syntax: glob
*.swp
*.tox
*.DS_Store*
rhodecode/public/js/src/components/**/*.css
syntax: regexp

13
Gruntfile.js
View file

@ -129,13 +129,22 @@ module.exports = function(grunt) {
"<%= 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/*.*"],
@ -174,5 +183,5 @@ module.exports = function(grunt) {
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']);
};

18
rhodecode/public/css/polymer.less
View file

@ -13,21 +13,3 @@
@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;
}
}

79
rhodecode/public/js/src/components/rhodecode-toast.html
View file

@ -1,79 +0,0 @@
<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="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
}
.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>
</dom-module>

23
rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html Normal file
View file

@ -0,0 +1,23 @@
<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>
<link rel="stylesheet" href="rhodecode-toast.css">
<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 src="rhodecode-toast.js"></script>
</dom-module>

29
rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js Normal file
View file

@ -0,0 +1,29 @@
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
});

39
rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less Normal file
View file

@ -0,0 +1,39 @@
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;
}
}

22
rhodecode/public/js/src/components/rhodecode-unsafe-html.html
View file

@ -1,22 +0,0 @@
<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>

9
rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html Normal file
View file

@ -0,0 +1,9 @@
<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 src="rhodecode-unsafe-html.js"></script>
</dom-module>

12
rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js Normal file
View file

@ -0,0 +1,12 @@
Polymer({
is: 'rhodecode-unsafe-html',
properties: {
text: {
type: String,
observer: '_handleText'
}
},
_handleText: function(newVal, oldVal){
this.innerHTML = this.text;
}
})

4
rhodecode/public/js/src/components/shared-components.html
View file

@ -5,5 +5,5 @@
<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">