mirror of https://github.com/sipwise/ngcp-csc.git
Change-Id: Ib770c456f61bedbaecfd5a50e6f1a157bccee13bchanges/71/13771/5
Carlo
9 years ago
parent
68cf98a0bb
commit
f5f1cf5f29
@ -0,0 +1,15 @@
|
||||
Ext.define('NgcpCsc.model.ThemeRoller', {
|
||||
extend: 'Ext.data.Model',
|
||||
|
||||
fields: ['basecolor', 'fontcolor', 'bodybgcolor', 'fontfamily', 'fontweight', 'fontsize'],
|
||||
|
||||
proxy: {
|
||||
type: 'ajax',
|
||||
url: Ext.manifest.resources.path + '/data/themeroller.json',
|
||||
autoLoad: true,
|
||||
reader: {
|
||||
type: 'json',
|
||||
rootProperty: 'data'
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,178 @@
|
||||
Ext.define('NgcpCsc.view.pages.themeroller.ThemeRoller', {
|
||||
extend: 'Ext.form.Panel',
|
||||
|
||||
xtype: 'themeroller',
|
||||
|
||||
viewModel: 'themeroller',
|
||||
|
||||
controller: 'themeroller',
|
||||
|
||||
requires:['Ext.ux.colorpick.Field'],
|
||||
|
||||
items: [{
|
||||
defaults: {
|
||||
ui: 'core-container',
|
||||
collapsible: true,
|
||||
collapsed: false,
|
||||
layout: 'responsivecolumn',
|
||||
margin:10,
|
||||
defaults:{
|
||||
padding: 20
|
||||
}
|
||||
},
|
||||
items: [{
|
||||
title: Ngcp.csc.locales.themeroller.first_section_title[localStorage.getItem('languageSelected')],
|
||||
items: [{
|
||||
userCls: 'big-66 small-100',
|
||||
items: [{
|
||||
xtype: 'container',
|
||||
defaults: {
|
||||
width: '100%'
|
||||
},
|
||||
items: [{
|
||||
xtype: 'colorfield',
|
||||
fieldLabel: 'Base color',
|
||||
bind: '{themeroller.basecolor}',
|
||||
listeners: {
|
||||
change: 'applyTheme'
|
||||
}
|
||||
}, {
|
||||
xtype: 'colorselector',
|
||||
hidden: true
|
||||
}]
|
||||
}, {
|
||||
xtype: 'container',
|
||||
defaults: {
|
||||
width: '100%'
|
||||
},
|
||||
items: [{
|
||||
xtype: 'colorfield',
|
||||
fieldLabel: 'Font color',
|
||||
bind: '{themeroller.fontcolor}',
|
||||
listeners: {
|
||||
change: 'applyTheme'
|
||||
}
|
||||
}, {
|
||||
xtype: 'colorselector',
|
||||
hidden: true
|
||||
}]
|
||||
}, {
|
||||
xtype: 'container',
|
||||
defaults: {
|
||||
width: '100%'
|
||||
},
|
||||
items: [{
|
||||
xtype: 'colorfield',
|
||||
fieldLabel: 'Body bgcolor',
|
||||
bind: '{themeroller.bodybgcolor}',
|
||||
listeners: {
|
||||
change: 'applyTheme'
|
||||
}
|
||||
}, {
|
||||
xtype: 'colorselector',
|
||||
hidden: true
|
||||
}]
|
||||
}, {
|
||||
layout: 'hbox',
|
||||
margin: '10 0 0 0',
|
||||
defaults: {
|
||||
xtype: 'button',
|
||||
flex: 1
|
||||
},
|
||||
items: [{
|
||||
text: 'reset',
|
||||
handler: 'resetTheme',
|
||||
margin: '0 5 0 0'
|
||||
}, {
|
||||
text: 'save',
|
||||
handler: 'saveTheme'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: Ngcp.csc.locales.themeroller.second_section_title[localStorage.getItem('languageSelected')],
|
||||
items: [{
|
||||
userCls: 'big-66 small-100',
|
||||
defaults: {
|
||||
width: '100%',
|
||||
listeners: {
|
||||
change: 'applyTheme'
|
||||
}
|
||||
},
|
||||
items: [{
|
||||
xtype: 'textfield',
|
||||
fieldLabel: Ngcp.csc.locales.themeroller.font_family[localStorage.getItem('languageSelected')],
|
||||
bind: '{themeroller.fontfamily}'
|
||||
}, {
|
||||
xtype: 'combo',
|
||||
fieldLabel: Ngcp.csc.locales.themeroller.font_weight[localStorage.getItem('languageSelected')],
|
||||
bind: '{themeroller.fontweight}',
|
||||
editable: false,
|
||||
// left inline until new specs regardng themeroller
|
||||
store: Ext.create('Ext.data.Store', {
|
||||
fields: ['id'],
|
||||
data: [{
|
||||
"id": "normal"
|
||||
}, {
|
||||
"id": "bold"
|
||||
}]
|
||||
}),
|
||||
valueField: 'id',
|
||||
displayField: 'id'
|
||||
}, {
|
||||
xtype: 'numberfield',
|
||||
minValue: 6,
|
||||
editable: false,
|
||||
bind: '{themeroller.fontsize}',
|
||||
fieldLabel: Ngcp.csc.locales.themeroller.font_size[localStorage.getItem('languageSelected')]
|
||||
}, {
|
||||
layout: 'hbox',
|
||||
margin: '10 0 0 0',
|
||||
defaults: {
|
||||
xtype: 'button',
|
||||
flex: 1
|
||||
},
|
||||
items: [{
|
||||
text: 'reset',
|
||||
handler: 'resetTheme',
|
||||
margin: '0 5 0 0'
|
||||
}, {
|
||||
text: 'save',
|
||||
handler: 'saveTheme'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: Ngcp.csc.locales.themeroller.third_section_title[localStorage.getItem('languageSelected')],
|
||||
items: [{
|
||||
userCls: 'big-66 small-100',
|
||||
defaults: {
|
||||
width: '100%'
|
||||
},
|
||||
items: [{
|
||||
xtype: 'filefield',
|
||||
fieldLabel: Ngcp.csc.locales.themeroller.logo[localStorage.getItem('languageSelected')],
|
||||
reference: 'logoField',
|
||||
listeners: {
|
||||
change: 'toggleLogo'
|
||||
}
|
||||
}, {
|
||||
layout: 'hbox',
|
||||
margin: '10 0 0 0',
|
||||
defaults: {
|
||||
xtype: 'button',
|
||||
flex: 1
|
||||
},
|
||||
items: [{
|
||||
text: 'reset',
|
||||
handler: 'resetTheme',
|
||||
margin: '0 5 0 0'
|
||||
}, {
|
||||
text: 'save',
|
||||
handler: 'saveTheme'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
});
|
||||
Loading…
Reference in new issue