##// 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-toggle.html
48 lines | 1.7 KiB | text/html | HtmlLexer
<link rel="import" href="../../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../../../../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../../../../../bower_components/paper-tooltip/paper-tooltip.html">
<dom-module id="rhodecode-toggle">
<style include="shared-styles">
.rc-toggle {
float: left;
position: relative;
}
.rc-toggle paper-spinner {
position: absolute;
top: 0;
left: -30px;
width: 20px;
height: 20px;
}
</style>
<template>
<div class="rc-toggle">
<paper-toggle-button checked={{checked}}>[[labelStatus(checked)]]</paper-toggle-button>
<paper-tooltip>[[tooltipText]]</paper-tooltip>
<template is="dom-if" if="[[shouldShow(noSpinner)]]">
<paper-spinner active=[[active]]></paper-spinner>
</template>
</div>
</template>
<script>
Polymer({
is: 'rhodecode-toggle',
properties: {
noSpinner: { type: Boolean, value: false, reflectToAttribute:true},
tooltipText: { type: String, value: "Click to toggle", reflectToAttribute:true},
checked: { type: Boolean, value: false, reflectToAttribute:true},
active: { type: Boolean, value: false, reflectToAttribute:true, notify:true}
},
shouldShow: function(){
return !this.noSpinner
},
labelStatus: function(isActive){
return this.checked? 'Enabled' : "Disabled"
}
});
</script>
</dom-module>