Misterzym
/
Rambox-CE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Improved edit action for Custom Services 

- Fixes #30.
pull/92/merge
Ramiro Saenz 9 years ago
parent
43740efae4
commit
78fbf7b101
4 changed files with 122 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      app/model/Service.js
  2. 2
      app/store/Services.js
  3. 2
      app/view/main/Main.js
  4. 198
      app/view/main/MainController.js

3
app/model/Service.js
Unescape View File

@ -22,9 +22,6 @@ Ext.define('Rambox.model.Service', {
},{ },{
name: 'logo' name: 'logo'
,type: 'string' ,type: 'string'
,convert: function( value, record ) {
return value ? value : record.get('type') + '.png';
}
},{ },{
name: 'name' name: 'name'
,type: 'string' ,type: 'string'

2
app/store/Services.js
Unescape View File

@ -33,7 +33,7 @@ Ext.define('Rambox.store.Services', {
xtype: 'webview' xtype: 'webview'
,id: 'tab_'+service.get('id') ,id: 'tab_'+service.get('id')
,title: service.get('name') ,title: service.get('name')
,icon: service.get('type') !== 'custom' ? 'resources/icons/'+service.get('logo') : service.get('logo') ,icon: service.get('type') !== 'custom' ? 'resources/icons/'+service.get('logo') : ( service.get('logo') === '' ? 'resources/icons/custom.png' : service.get('logo'))
,src: service.get('url') ,src: service.get('url')
,type: service.get('type') ,type: service.get('type')
,muted: service.get('muted') ,muted: service.get('muted')

2
app/view/main/Main.js
Unescape View File

@ -148,7 +148,7 @@ Ext.define('Rambox.view.main.Main', {
xtype: 'templatecolumn' xtype: 'templatecolumn'
,width: 50 ,width: 50
,variableRowHeight: true ,variableRowHeight: true
,tpl: '<img src="{[ values.type !== \"custom\" ? \"resources/icons/\" : \"\" ]}{logo}" data-qtip="{type:capitalize}" width="32" />' ,tpl: '<img src="{[ values.type !== \"custom\" ? \"resources/icons/\"+values.logo : (values.logo == \"\" ? \"resources/icons/custom.png\" : values.logo) ]}" data-qtip="{type:capitalize}" width="32" />'
} }
,{ text: 'Name', dataIndex: 'name', variableRowHeight: true, flex: 1 } ,{ text: 'Name', dataIndex: 'name', variableRowHeight: true, flex: 1 }
,{ ,{

198
app/view/main/MainController.js
Unescape View File

@ -105,6 +105,7 @@ Ext.define('Rambox.view.main.MainController', {
} else { } else {
var service = Ext.create('Rambox.model.Service', { var service = Ext.create('Rambox.model.Service', {
type: record.get('id') type: record.get('id')
,logo: record.get('logo')
,name: formValues.serviceName ,name: formValues.serviceName
,url: record.get('url') ,url: record.get('url')
,align: formValues.align ,align: formValues.align
@ -149,11 +150,11 @@ Ext.define('Rambox.view.main.MainController', {
win.down('textfield[name="serviceName"]').focus(true, 100); win.down('textfield[name="serviceName"]').focus(true, 100);
} }
,showCustomModal: function(record) { ,showCustomModal: function(record, edit) {
var me = this; var me = this;
var win = Ext.create('Ext.window.Window', { var win = Ext.create('Ext.window.Window', {
title: 'Add '+record.get('name') title: (edit ? 'Edit ' : 'Add ') + record.get('name')
,modal: true ,modal: true
,width: 400 ,width: 400
,resizable: false ,resizable: false
@ -210,7 +211,7 @@ Ext.define('Rambox.view.main.MainController', {
{ {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Align to Right' ,boxLabel: 'Align to Right'
,checked: false ,checked: edit ? (record.get('align') === 'right' ? true : false) : false
,name: 'align' ,name: 'align'
,uncheckedValue: 'left' ,uncheckedValue: 'left'
,inputValue: 'right' ,inputValue: 'right'
@ -219,7 +220,7 @@ Ext.define('Rambox.view.main.MainController', {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Show notifications' ,boxLabel: 'Show notifications'
,name: 'notifications' ,name: 'notifications'
,checked: true ,checked: edit ? record.get('notifications') : true
,uncheckedValue: false ,uncheckedValue: false
,inputValue: true ,inputValue: true
} }
@ -227,7 +228,7 @@ Ext.define('Rambox.view.main.MainController', {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Mute all sounds' ,boxLabel: 'Mute all sounds'
,name: 'muted' ,name: 'muted'
,checked: false ,checked: edit ? record.get('muted') : false
,uncheckedValue: false ,uncheckedValue: false
,inputValue: true ,inputValue: true
} }
@ -253,39 +254,50 @@ Ext.define('Rambox.view.main.MainController', {
var formValues = win.down('form').getValues(); var formValues = win.down('form').getValues();
var service = Ext.create('Rambox.model.Service', { if ( edit ) {
type: record.get('id') record.set({
,name: formValues.serviceName name: formValues.serviceName
,url: record.get('url').replace('___', formValues.url) ,align: formValues.align
,align: formValues.align ,notifications: formValues.notifications
,notifications: formValues.notifications ,muted: formValues.muted
,muted: formValues.muted });
,js_unread: record.get('js_unread') Ext.getCmp('tab_'+record.get('id')).setTitle(formValues.serviceName);
});
service.save();
Ext.getStore('Services').add(service);
var tabData = {
xtype: 'webview'
,id: 'tab_'+service.get('id')
,title: service.get('name')
,icon: 'resources/icons/'+record.get('logo')
,src: service.get('url')
,type: service.get('type')
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,record: service
,tabConfig: {
service: service
}
};
if ( formValues.align === 'left' ) {
var tbfill = me.getView().getTabBar().down('tbfill');
me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show();
} else { } else {
me.getView().add(tabData).show(); var service = Ext.create('Rambox.model.Service', {
type: record.get('id')
,logo: record.get('logo')
,name: formValues.serviceName
,url: record.get('url').replace('___', formValues.url)
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,js_unread: record.get('js_unread')
});
service.save();
Ext.getStore('Services').add(service);
var tabData = {
xtype: 'webview'
,id: 'tab_'+service.get('id')
,title: service.get('name')
,icon: 'resources/icons/'+record.get('logo')
,src: service.get('url')
,type: service.get('type')
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,record: service
,tabConfig: {
service: service
}
};
if ( formValues.align === 'left' ) {
var tbfill = me.getView().getTabBar().down('tbfill');
me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show();
} else {
me.getView().add(tabData).show();
}
} }
win.close(); win.close();
@ -301,6 +313,8 @@ Ext.define('Rambox.view.main.MainController', {
,onNewServiceSelect: function( view, record, item, index, e ) { ,onNewServiceSelect: function( view, record, item, index, e ) {
if ( record.get('url').indexOf('___') >= 0 ) { if ( record.get('url').indexOf('___') >= 0 ) {
this.showCustomModal(record); this.showCustomModal(record);
} else if ( record.get('type') === 'custom' ) {
this.addCustomService(record, false);
} else { } else {
this.showSimpleModal(record, false); this.showSimpleModal(record, false);
} }
@ -355,14 +369,18 @@ Ext.define('Rambox.view.main.MainController', {
} }
,configureService: function( gridView, rowIndex, colIndex, col, e, rec, rowEl ) { ,configureService: function( gridView, rowIndex, colIndex, col, e, rec, rowEl ) {
this.showSimpleModal(rec, true); if ( rec.get('type') === 'custom' ) {
this.addCustomService(rec, true);
} else {
this.showSimpleModal(rec, true);
}
} }
,addCustomService: function( event, toolEl, owner, tool ) { ,addCustomService: function( record, edit ) {
var me = this; var me = this;
var win = Ext.create('Ext.window.Window', { var win = Ext.create('Ext.window.Window', {
title: 'Add Custom Service' title: (edit ? 'Edit ' : 'Add ') + 'Custom Service'
,modal: true ,modal: true
,width: 400 ,width: 400
,resizable: false ,resizable: false
@ -376,6 +394,7 @@ Ext.define('Rambox.view.main.MainController', {
xtype: 'textfield' xtype: 'textfield'
,fieldLabel: 'Name' ,fieldLabel: 'Name'
,name: 'serviceName' ,name: 'serviceName'
,value: (edit ? record.get('name') : '')
,allowBlank: true ,allowBlank: true
,listeners: { ,listeners: {
specialkey: function(field, e) { specialkey: function(field, e) {
@ -391,6 +410,7 @@ Ext.define('Rambox.view.main.MainController', {
,emptyText: 'http://service.url.com' ,emptyText: 'http://service.url.com'
,name: 'url' ,name: 'url'
,vtype: 'url' ,vtype: 'url'
,value: (edit ? record.get('url') : '')
,allowBlank: false ,allowBlank: false
,listeners: { ,listeners: {
specialkey: function(field, e) { specialkey: function(field, e) {
@ -406,6 +426,7 @@ Ext.define('Rambox.view.main.MainController', {
,emptyText: 'http://image.url.com/image.png' ,emptyText: 'http://image.url.com/image.png'
,name: 'logo' ,name: 'logo'
,vtype: 'url' ,vtype: 'url'
,value: (edit ? record.get('logo') : '')
,allowBlank: true ,allowBlank: true
,listeners: { ,listeners: {
specialkey: function(field, e) { specialkey: function(field, e) {
@ -423,7 +444,7 @@ Ext.define('Rambox.view.main.MainController', {
{ {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Align to Right' ,boxLabel: 'Align to Right'
,checked: false ,checked: edit ? (record.get('align') === 'right' ? true : false) : false
,name: 'align' ,name: 'align'
,uncheckedValue: 'left' ,uncheckedValue: 'left'
,inputValue: 'right' ,inputValue: 'right'
@ -432,7 +453,7 @@ Ext.define('Rambox.view.main.MainController', {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Show notifications' ,boxLabel: 'Show notifications'
,name: 'notifications' ,name: 'notifications'
,checked: true ,checked: edit ? record.get('notifications') : true
,uncheckedValue: false ,uncheckedValue: false
,inputValue: true ,inputValue: true
} }
@ -440,7 +461,7 @@ Ext.define('Rambox.view.main.MainController', {
xtype: 'checkbox' xtype: 'checkbox'
,boxLabel: 'Mute all sounds' ,boxLabel: 'Mute all sounds'
,name: 'muted' ,name: 'muted'
,checked: false ,checked: edit ? record.get('muted') : false
,uncheckedValue: false ,uncheckedValue: false
,inputValue: true ,inputValue: true
} }
@ -455,11 +476,11 @@ Ext.define('Rambox.view.main.MainController', {
,items: [ ,items: [
{ {
xtype: 'textarea' xtype: 'textarea'
,fieldLabel: 'Unread Code' ,fieldLabel: 'Unread Code (<a href="https://github.com/saenzramiro/rambox/wiki/Add-a-Custom-Service" target="_blank">read more</a>)'
,allowBlank: true ,allowBlank: true
,name: 'js_unread' ,name: 'js_unread'
,value: (edit ? record.get('js_unread') : '')
,anchor: '100%' ,anchor: '100%'
,emptyText: 'Write code here if the service don\'t update the page title when have new activity. The code needs to return an integer, for example: document.body.getElementsByClassName("ee").length;'
,height: 120 ,height: 120
} }
] ]
@ -477,47 +498,68 @@ Ext.define('Rambox.view.main.MainController', {
} }
,'->' ,'->'
,{ ,{
text: 'Add service' text: (edit ? 'Edit ' : 'Add ') + ' Service'
,itemId: 'submit' ,itemId: 'submit'
,handler: function() { ,handler: function() {
if ( !win.down('form').isValid() ) return false; if ( !win.down('form').isValid() ) return false;
var formValues = win.down('form').getValues(); var formValues = win.down('form').getValues();
var service = Ext.create('Rambox.model.Service', { if ( edit ) {
type: 'custom' // If users change the URL, we change the URL of the Webview
,logo: formValues.logo if ( record.get('url') !== formValues.url ) Ext.getCmp('tab_'+record.get('id')).down('component').el.dom.loadURL(formValues.url);
,name: formValues.serviceName
,url: formValues.url // Save the service
,align: formValues.align record.set({
,notifications: formValues.notifications name: formValues.serviceName
,muted: formValues.muted ,url: formValues.url
,js_unread: 'function checkUnread(){updateBadge(' + formValues.js_unread + ')}function updateBadge(e){e>=1?document.title="("+e+") "+originalTitle:document.title=originalTitle}var originalTitle=document.title;setInterval(checkUnread,3000);' ,logo: formValues.logo
}); ,align: formValues.align
service.save(); ,notifications: formValues.notifications
Ext.getStore('Services').add(service); ,muted: formValues.muted
,js_unread: formValues.js_unread
var tabData = { });
xtype: 'webview'
,id: 'tab_'+service.get('id')
,title: service.get('name')
,icon: formValues.logo
,src: service.get('url')
,type: service.get('type')
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,record: service
,tabConfig: {
service: service
}
};
if ( formValues.align === 'left' ) { // Change the title of the Tab
var tbfill = me.getView().getTabBar().down('tbfill'); Ext.getCmp('tab_'+record.get('id')).setTitle(formValues.serviceName);
me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show(); // Change the icon of the Tab
Ext.getCmp('tab_'+record.get('id')).setIcon(record.get('logo') === '' ? 'resources/icons/custom.png' : record.get('logo'));
} else { } else {
me.getView().add(tabData).show(); var service = Ext.create('Rambox.model.Service', {
type: 'custom'
,logo: formValues.logo
,name: formValues.serviceName
,url: formValues.url
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,js_unread: formValues.js_unread !== '' ? 'function checkUnread(){updateBadge(' + formValues.js_unread + ')}function updateBadge(e){e>=1?document.title="("+e+") "+originalTitle:document.title=originalTitle}var originalTitle=document.title;setInterval(checkUnread,3000);' : ''
});
service.save();
Ext.getStore('Services').add(service);
var tabData = {
xtype: 'webview'
,id: 'tab_'+service.get('id')
,title: service.get('name')
,icon: formValues.logo
,src: service.get('url')
,type: service.get('type')
,align: formValues.align
,notifications: formValues.notifications
,muted: formValues.muted
,record: service
,tabConfig: {
service: service
}
};
if ( formValues.align === 'left' ) {
var tbfill = me.getView().getTabBar().down('tbfill');
me.getView().insert(me.getView().getTabBar().items.indexOf(tbfill), tabData).show();
} else {
me.getView().add(tabData).show();
}
} }
win.close(); win.close();

Write Preview
Loading…
Cancel
Save