##// END OF EJS Templates
components: reorganize build pipeline to have nice separation of html/js/css
ergo -
r703:1eda65ea default
parent child
Show More
@@ -0,0 +1,29
1 Polymer({
2 is: 'rhodecode-toast',
3 properties: {
4 toasts: {
5 type: Array,
6 value: function(){
7 return []
8 }
9 }
10 },
11 observers: [
12 '_changedToasts(toasts.splices)'
13 ],
14 ready: function(){
15
16 },
17
18 _changedToasts: function(newValue, oldValue){
19 this.$['p-toast'].notifyResize();
20 },
21 dismissNotifications: function(){
22 this.$['p-toast'].close();
23 this.splice('toasts', 0);
24 },
25 open: function(){
26 this.$['p-toast'].open();
27 },
28 _gettext: _gettext
29 });
@@ -0,0 +1,39
1 paper-toast{
2 width: 100%;
3 min-width: 400px;
4 --paper-toast-background-color: #ffffff;
5 --paper-toast-color: #000000;
6 }
7 paper-toast a{
8 font-weight: bold
9 }
10
11 .toast-message-holder {
12 width: ~'calc(100% - 150px)';
13 display: inline-block;
14 }
15 .toast-close {
16 display: inline-block;
17 width: 145px;
18 text-align: right;
19 float: right;
20 }
21 .toast-notification {
22 padding: 10px 0 10px 0;
23 }
24
25 .toast-level {
26 display: inline-block;
27 min-width: 100px;
28 font-weight: bold;
29 text-transform: uppercase;
30 &.info, &.success {
31 color: #0ac878;
32 }
33 &.error, &.danger {
34 color: #e85e4d;
35 }
36 &.warning {
37 color: #ffc854;
38 }
39 }
@@ -8,6 +8,7 syntax: glob
8 *.swp
8 *.swp
9 *.tox
9 *.tox
10 *.DS_Store*
10 *.DS_Store*
11 rhodecode/public/js/src/components/**/*.css
11
12
12 syntax: regexp
13 syntax: regexp
13
14
@@ -129,13 +129,22 module.exports = function(grunt) {
129 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
129 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
130 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
130 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
131 }
131 }
132 },
133 components: {
134 files: [{
135 cwd: '<%= dirs.js.src %>/components/',
136 dest: '<%= dirs.js.src %>/components/',
137 src: ['**/*.less'],
138 expand: true,
139 ext: '.css'
140 }]
132 }
141 }
133 },
142 },
134
143
135 watch: {
144 watch: {
136 less: {
145 less: {
137 files: ["<%= dirs.css %>/*.less"],
146 files: ["<%= dirs.css %>/*.less"],
138 tasks: ["less:development", 'concat:polymercss', "vulcanize"]
147 tasks: ["less:development", 'less:components', 'concat:polymercss', "vulcanize"]
139 },
148 },
140 js: {
149 js: {
141 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
150 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
@@ -174,5 +183,5 module.exports = function(grunt) {
174 grunt.loadNpmTasks('grunt-crisper');
183 grunt.loadNpmTasks('grunt-crisper');
175 grunt.loadNpmTasks('grunt-contrib-copy');
184 grunt.loadNpmTasks('grunt-contrib-copy');
176
185
177 grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
186 grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
178 };
187 };
@@ -13,21 +13,3
13 @import 'examples';
13 @import 'examples';
14 @import 'login';
14 @import 'login';
15 @import 'comments';
15 @import 'comments';
16
17
18 .toast-level {
19 display: inline-block;
20 min-width: 100px;
21 font-weight: bold;
22 text-transform: uppercase;
23 &.info, &.success {
24 color: #0ac878;
25 }
26 &.error, &.danger {
27 color: #e85e4d;
28 }
29 &.warning {
30 color: #ffc854;
31 }
32 }
33
@@ -1,35 +1,9
1 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
1 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
2 <link rel="import" href="rhodecode-unsafe-html.html">
2 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
3 <dom-module id="rhodecode-toast">
3 <dom-module id="rhodecode-toast">
4 <template>
4 <template>
5 <style include="shared-styles"></style>
5 <link rel="stylesheet" href="rhodecode-toast.css">
6
7 <style>
8 paper-toast{
9 width: 100%;
10 min-width: 400px;
11 --paper-toast-background-color: #ffffff;
12 --paper-toast-color: #000000;
13 }
14 paper-toast a{
15 font-weight: bold
16 }
17
6
18 .toast-message-holder {
19 width: calc(100% - 150px);
20 display: inline-block;
21 }
22 .toast-close {
23 display: inline-block;
24 width: 145px;
25 text-align: right;
26 float: right;
27 }
28 .toast-notification {
29 padding: 10px 0 10px 0;
30 }
31
32 </style>
33 <paper-toast id="p-toast" duration="0" horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
7 <paper-toast id="p-toast" duration="0" horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
34 <div class="toast-message-holder">
8 <div class="toast-message-holder">
35 <template is="dom-repeat" items="{{toasts}}">
9 <template is="dom-repeat" items="{{toasts}}">
@@ -45,35 +19,5
45 </paper-toast>
19 </paper-toast>
46 </template>
20 </template>
47
21
48 <script>
22 <script src="rhodecode-toast.js"></script>
49 Polymer({
50 is: 'rhodecode-toast',
51 properties: {
52 toasts: {
53 type: Array,
54 value: function(){
55 return []
56 }
57 }
58 },
59 observers: [
60 '_changedToasts(toasts.splices)'
61 ],
62 ready: function(){
63
64 },
65
66 _changedToasts: function(newValue, oldValue){
67 this.$['p-toast'].notifyResize();
68 },
69 dismissNotifications: function(){
70 this.$['p-toast'].close();
71 this.splice('toasts', 0);
72 },
73 open: function(){
74 this.$['p-toast'].open();
75 },
76 _gettext: _gettext
77 });
78 </script>
79 </dom-module>
23 </dom-module>
@@ -1,22 +1,9
1 <link rel="import" href="../../../../../bower_components/polymer/polymer.html">
1 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
2
2
3 <dom-module id="rhodecode-unsafe-html">
3 <dom-module id="rhodecode-unsafe-html">
4 <template>
4 <template>
5 <style include="shared-styles"></style>
5 <style include="shared-styles"></style>
6 <content></content>
6 <content></content>
7 </template>
7 </template>
8 <script>
8 <script src="rhodecode-unsafe-html.js"></script>
9 Polymer({
10 is: 'rhodecode-unsafe-html',
11 properties: {
12 text: {
13 type: String,
14 observer: '_handleText'
15 }
16 },
17 _handleText: function(newVal, oldVal){
18 this.innerHTML = this.text;
19 }
20 })
21 </script>
22 </dom-module>
9 </dom-module>
@@ -1,11 +1,3
1 <link rel="import" href="../../../../../bower_components/polymer/polymer.html">
2
3 <dom-module id="rhodecode-unsafe-html">
4 <template>
5 <style include="shared-styles"></style>
6 <content></content>
7 </template>
8 <script>
9 Polymer({
1 Polymer({
10 is: 'rhodecode-unsafe-html',
2 is: 'rhodecode-unsafe-html',
11 properties: {
3 properties: {
@@ -18,5 +10,3
18 this.innerHTML = this.text;
10 this.innerHTML = this.text;
19 }
11 }
20 })
12 })
21 </script>
22 </dom-module>
@@ -5,5 +5,5
5 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
5 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
6 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
6 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
7 <link rel="import" href="shared-styles.html">
7 <link rel="import" href="shared-styles.html">
8 <link rel="import" href="rhodecode-toast.html">
8 <link rel="import" href="rhodecode-toast/rhodecode-toast.html">
9 <link rel="import" href="rhodecode-unsafe-html.html">
9 <link rel="import" href="rhodecode-unsafe-html/rhodecode-unsafe-html.html">
General Comments 0
You need to be logged in to leave comments. Login now