##// END OF EJS Templates
frontend: use webpack instead of vulcanize
frontend: use webpack instead of vulcanize

File last commit:

r3171:b9c8d2ad default
r3171:b9c8d2ad default
Show More
rhodecode-toast.html
200 lines | 7.1 KiB | text/html | HtmlLexer
components: reorganize build pipeline to have nice separation of html/js/css
r703 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
toasts: hide messages on escape.
r1486 <link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
components: reorganize build pipeline to have nice separation of html/js/css
r703 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
<dom-module id="rhodecode-toast">
<template>
frontend: use webpack instead of vulcanize
r3171 <style include="shared-styles">
/* inset border for buttons - does not work in ie */
/* rounded borders */
/* rounded borders - bottom only */
/* rounded borders - top only */
/* text shadow */
/* centers text in a circle - input diameter of circle and color */
/* pill version of the circle */
.absolute-center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.top-left-rounded-corner {
-webkit-border-top-left-radius: 2px;
-khtml-border-radius-topleft: 2px;
border-top-left-radius: 2px;
}
.top-right-rounded-corner {
-webkit-border-top-right-radius: 2px;
-khtml-border-radius-topright: 2px;
border-top-right-radius: 2px;
}
.bottom-left-rounded-corner {
-webkit-border-bottom-left-radius: 2px;
-khtml-border-radius-bottomleft: 2px;
border-bottom-left-radius: 2px;
}
.bottom-right-rounded-corner {
-webkit-border-bottom-right-radius: 2px;
-khtml-border-radius-bottomright: 2px;
border-bottom-right-radius: 2px;
}
.top-left-rounded-corner-mid {
-webkit-border-top-left-radius: 2px;
-khtml-border-radius-topleft: 2px;
border-top-left-radius: 2px;
}
.top-right-rounded-corner-mid {
-webkit-border-top-right-radius: 2px;
-khtml-border-radius-topright: 2px;
border-top-right-radius: 2px;
}
.bottom-left-rounded-corner-mid {
-webkit-border-bottom-left-radius: 2px;
-khtml-border-radius-bottomleft: 2px;
border-bottom-left-radius: 2px;
}
.bottom-right-rounded-corner-mid {
-webkit-border-bottom-right-radius: 2px;
-khtml-border-radius-bottomright: 2px;
border-bottom-right-radius: 2px;
}
.alert {
margin: 10px 0;
}
.toast-close {
margin: 0;
float: right;
cursor: pointer;
}
.toast-message-holder {
background: rgba(255, 255, 255, 0.25);
}
.toast-message-holder.fixed {
position: fixed;
padding: 10px 0;
margin-left: 10px;
margin-right: 10px;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
</style>
notifications: different approach with fixed/standard container
r1483 <template is="dom-if" if="[[hasToasts]]">
rhodecode-toast: css improvements.
r1484 <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
notifications: different approach with fixed/standard container
r1483 <template is="dom-repeat" items="[[toasts]]">
<div class$="alert alert-[[item.level]]">
rhodecode-toasts: allow removing single elements from toast queue.
r1513 <div on-tap="dismissNotification" class="toast-close" index-pos="[[index]]">
<span>[[_gettext('Close')]]</span>
</div>
notifications: different approach with fixed/standard container
r1483 <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
components: reorganize build pipeline to have nice separation of html/js/css
r703 </div>
</template>
</div>
notifications: different approach with fixed/standard container
r1483 </template>
components: reorganize build pipeline to have nice separation of html/js/css
r703 </template>
polymer: prepare for 3.x migration
r3149 <script>
Polymer({
is: 'rhodecode-toast',
properties: {
toasts: {
type: Array,
value: function(){
return []
}
},
isFixed: {
type: Boolean,
value: false
},
hasToasts: {
type: Boolean,
computed: '_computeHasToasts(toasts.*)'
},
keyEventTarget: {
type: Object,
value: function() {
return document.body;
}
}
},
behaviors: [
Polymer.IronA11yKeysBehavior
],
observers: [
'_changedToasts(toasts.splices)'
],
keyBindings: {
'esc:keyup': '_hideOnEsc'
},
_hideOnEsc: function (event) {
return this.dismissNotifications();
},
_computeHasToasts: function(){
return this.toasts.length > 0;
},
_debouncedCalc: function(){
// calculate once in a while
this.debounce('debouncedCalc', this.toastInWindow, 25);
},
conditionalClass: function(){
return this.isFixed ? 'fixed': '';
},
toastInWindow: function() {
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;
}
},
attached: function(){
this._headerNode = document.querySelector('.header', document);
this.listen(window,'scroll', '_debouncedCalc');
this.listen(window,'resize', '_debouncedCalc');
this._debouncedCalc();
},
_changedToasts: function(newValue, oldValue){
$.Topic('/favicon/update').publish({count: this.toasts.length});
},
dismissNotification: function(e) {
$.Topic('/favicon/update').publish({count: this.toasts.length-1});
var idx = e.target.parentNode.indexPos
this.splice('toasts', idx, 1);
},
dismissNotifications: function(){
$.Topic('/favicon/update').publish({count: 0});
this.splice('toasts', 0);
},
handleNotification: function(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: _gettext
});
</script>
components: reorganize build pipeline to have nice separation of html/js/css
r703 </dom-module>