engineering/unrhodecode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

components: completed rhodecode-toggle for notification settings

Browse source
This commit is contained in:
lisaq 2016-08-31 14:05:29 +02:00
parent 4d896a15bf
commit 265f64bcc7
5 changed files with 2550 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

21
rhodecode/public/js/src/components/rhodecode-toggle/rhodecode-toggle.html
View file

@ -1,14 +1,21 @@
<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>
<style include="shared-styles"></style>
<!--<link rel="stylesheet" href="rhodecode-toggle.css">-->
FOOBAR
<paper-toggle-button>
toggle
</paper-toggle-button>
<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 src="rhodecode-toggle.js"></script>
</dom-module>
</dom-module>

17
rhodecode/public/js/src/components/rhodecode-toggle/rhodecode-toggle.js
View file

@ -1,3 +1,16 @@
Polymer({
is: 'rhodecode-toggle'
});
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"
}
});

14
rhodecode/public/js/src/components/rhodecode-toggle/rhodecode-toggle.less Normal file
View file

@ -0,0 +1,14 @@
@import '../../../../css/variables';
.rc-toggle {
float: left;
position: relative;
paper-spinner {
position: absolute;
top: 0;
left: -30px;
width: 20px;
height: 20px;
}
}

2505
rhodecode/public/js/vendors/webcomponentsjs/webcomponents-lite.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

9
rhodecode/templates/admin/my_account/my_account_notifications.html
View file

@ -18,18 +18,13 @@
<p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
<div class="form">
<!-- fields -->
<div class="fields">
<div class="field">
<div class="label">
<label for="new_email">${_('Notifications Status')}:</label>
</div>
<div class="checkboxes">
<paper-toggle-button class="paper-toggle-button" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></paper-toggle-button>
<paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
<template is="dom-if" if="{{changeNotificationsLoading}}">
<paper-spinner active class="toggle-ajax-spinner"></paper-spinner>
</template>
<rhodecode-toggle id="live-notifications" active="[[changeNotificationsLoading]]" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></rhodecode-toggle>
</div>
</div>
<div class="buttons">
@ -55,7 +50,7 @@
ajax.generateRequest();
};
ctrlr.handleNotifications = function(event){
$('paper-toggle-button')[0].active = event.detail.response;
$('#live-notifications')[0].active = event.detail.response;
};
function checkBrowserStatus(){