- ${this.toasts.map((item, index) => html`
-
-
this.dismissNotification(index)}>
-
${this._gettext('Close')}
+
+
+
+
+
+ [[_gettext('Close')]]
+
+
+
- `)}
-
- `;
- }
-
- _handleKeyup(event) {
- if (event.key === 'Escape') {
- this.dismissNotifications();
+
+ `
}
- }
- _debouncedCalc() {
- if (this._debounceTimeout) {
- clearTimeout(this._debounceTimeout);
+ static get properties() {
+ return {
+ toasts: {
+ type: Array,
+ value() {
+ return []
+ }
+ },
+ isFixed: {
+ type: Boolean,
+ value: false
+ },
+ hasToasts: {
+ type: Boolean,
+ computed: '_computeHasToasts(toasts.*)'
+ },
+ keyEventTarget: {
+ type: Object,
+ value() {
+ return document.body;
+ }
+ }
+ }
}
- this._debounceTimeout = setTimeout(() => {
- this.toastInWindow();
- }, 25);
- }
- toastInWindow() {
- if (!this._headerNode) {
- return true;
+ get keyBindings() {
+ return {
+ 'esc:keyup': '_hideOnEsc'
+ }
}
- const headerHeight = this._headerNode.offsetHeight;
- const scrollPosition = window.scrollY;
- if (this.isFixed) {
- this.isFixed = 1 <= scrollPosition;
- } else {
- this.isFixed = headerHeight <= scrollPosition;
+ static get observers() {
+ return [
+ '_changedToasts(toasts.splices)'
+ ]
}
- }
- dismissNotification(index) {
- $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
- this.toasts = [
- ...this.toasts.slice(0, index),
- ...this.toasts.slice(index + 1)
- ];
- }
-
- dismissNotifications() {
- $.Topic('/favicon/update').publish({count: 0});
- this.toasts = [];
- }
-
- handleNotification(data) {
- if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
- return;
+ _hideOnEsc(event) {
+ return this.dismissNotifications();
+ }
+
+ _computeHasToasts() {
+ return this.toasts.length > 0;
+ }
+
+ _debouncedCalc() {
+ // calculate once in a while
+ this.debounce('debouncedCalc', this.toastInWindow, 25);
+ }
+
+ conditionalClass() {
+ return this.isFixed ? 'fixed' : '';
+ }
+
+ toastInWindow() {
+ if (!this._headerNode) {
+ return true
+ }
+ var headerHeight = this._headerNode.offsetHeight;
+ var scrollPosition = window.scrollY;
+
+ if (this.isFixed) {
+ this.isFixed = 1 <= scrollPosition;
+ }
+ else {
+ this.isFixed = headerHeight <= scrollPosition;
+ }
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this._headerNode = document.querySelector('.header', document);
+ this.listen(window, 'scroll', '_debouncedCalc');
+ this.listen(window, 'resize', '_debouncedCalc');
+ this._debouncedCalc();
+ }
+
+ _changedToasts(newValue, oldValue) {
+ $.Topic('/favicon/update').publish({count: this.toasts.length});
+ }
+
+ dismissNotification(e) {
+ $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
+ var idx = e.target.parentNode.indexPos
+ this.splice('toasts', idx, 1);
+
+ }
+
+ dismissNotifications() {
+ $.Topic('/favicon/update').publish({count: 0});
+ this.splice('toasts', 0);
+ }
+
+ handleNotification(data) {
+ if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
+ // do not act if notifications are disabled
+ return
+ }
+ this.push('toasts', {
+ level: data.message.level,
+ message: data.message.message
+ });
+ }
+
+ _gettext(x){
+ return _gettext(x)
}
- this.toasts = [...this.toasts, {
- level: data.message.level,
- message: data.message.message
- }];
- }
- _gettext(x) {
- return _gettext(x);
- }
}
-customElements.define('rhodecode-toast', RhodecodeToast);
+customElements.define(RhodecodeToast.is, RhodecodeToast);
diff --git a/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
index 72223043..7290a207 100644
--- a/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
+++ b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
@@ -1,24 +1,30 @@
-import {LitElement, html} from 'lit';
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
-export class RhodecodeUnsafeHtml extends LitElement {
- static properties = {
- text: {type: String}
- };
+export class RhodecodeUnsafeHtml extends PolymerElement {
- constructor() {
- super();
- this.text = '';
- }
-
- render() {
- return html`
`;
- }
-
- updated(changedProperties) {
- if (changedProperties.has('text')) {
- this.innerHTML = this.text;
+ static get is() {
+ return 'rhodecode-unsafe-html';
+ }
+
+ static get template() {
+ return html`
+
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ text: {
+ type: String,
+ observer: '_handleText'
+ }
+ }
+ }
+
+ _handleText(newVal, oldVal) {
+ this.innerHTML = this.text;
}
- }
}
-customElements.define('rhodecode-unsafe-html', RhodecodeUnsafeHtml);
+customElements.define(RhodecodeUnsafeHtml.is, RhodecodeUnsafeHtml);
diff --git a/rhodecode/templates/base/root.mako b/rhodecode/templates/base/root.mako
index 86cbd02b..3a69305e 100644
--- a/rhodecode/templates/base/root.mako
+++ b/rhodecode/templates/base/root.mako
@@ -58,6 +58,7 @@ c.template_context['attachment_store'] = {
${self.robots()}
+
## CSS definitions
diff --git a/rhodecode/templates/errors/error_document.mako b/rhodecode/templates/errors/error_document.mako
index d58ff3ef..58978505 100644
--- a/rhodecode/templates/errors/error_document.mako
+++ b/rhodecode/templates/errors/error_document.mako
@@ -11,6 +11,7 @@
%endif
+
diff --git a/rhodecode/tests/rhodecode.ini b/rhodecode/tests/rhodecode.ini
index 7a8726cb..c628eba7 100644
--- a/rhodecode/tests/rhodecode.ini
+++ b/rhodecode/tests/rhodecode.ini
@@ -588,7 +588,7 @@ search.location = %(here)s/.rc-test-data/data/index
channelstream.enabled = false
; server address for channelstream server on the backend
-channelstream.server = channelstream:8000
+channelstream.server = channelstream:9800
; location of the channelstream server from outside world
; use ws:// for http or wss:// for https. This address needs to be handled
diff --git a/webpack.config.js b/webpack.config.js
index 83dd1fa7..bc868e78 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,19 +15,11 @@ let babelRCOptions = {
"presets": [
["env", {
"targets": {
- "esmodules": true
- },
- "exclude": [
- "transform-es2015-classes",
- "transform-regenerator",
- "transform-async-to-generator"
- ]
+ "browsers": ["last 2 versions"]
+ }
}]
],
- "plugins": [
- ["transform-class-properties", { "loose": true }],
- "transform-object-rest-spread"
- ]
+ "plugins": ["transform-object-rest-spread"]
};
module.exports = {
@@ -75,10 +67,9 @@ module.exports = {
{
// If you see a file that ends in .js, just send it to the babel-loader.
test: /\.js$/,
- // Exclude node_modules, but process our Lit components
- // Babel is configured to NOT transpile ES6 classes (see babelRCOptions exclude)
- exclude: /node_modules/,
use: {loader: 'babel-loader', options: babelRCOptions}
+ // Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
+ // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
},
// this is required because of bug:
// https://github.com/webpack-contrib/polymer-webpack-loader/issues/49