|
|
<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"></style>
|
|
|
<link rel="stylesheet" href="rhodecode-toggle.css">
|
|
|
|
|
|
<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>
|
|
|
|
