Improve design of read-only pop up device info dialog

Re design device details dialog
Aldo did some folder info related changes at server side php file

js/MDM.js

@@ -27,7 +27,7 @@ Zarafa.plugins.mdm.MDM = Ext.extend(Zarafa.core.Plugin, {
 	{
 		this.registerInsertionPoint('context.settings.categories', this.createSettingCategory, this);
 		this.registerInsertionPoint('settings.versioninformation', this.createVersionInfo, this);
-		Zarafa.core.data.SharedComponentType.addProperty('mdm.dialog.mdmdevicedetails');
+		Zarafa.core.data.SharedComponentType.addProperty('mdm.dialog.mdmdevicecontentpanel');
 		Zarafa.plugins.mdm.MDM.superclass.initPlugin.apply(this, arguments);
 	},
 
@@ -41,7 +41,7 @@ Zarafa.plugins.mdm.MDM = Ext.extend(Zarafa.core.Plugin, {
 	{
 		var bid = -1;
 		switch (type) {
-			case Zarafa.core.data.SharedComponentType['mdm.dialog.mdmdevicedetails']:
+			case Zarafa.core.data.SharedComponentType['mdm.dialog.mdmdevicecontentpanel']:
 				bid = 1;
 				break;
 		}
@@ -57,7 +57,7 @@ Zarafa.plugins.mdm.MDM = Ext.extend(Zarafa.core.Plugin, {
 	 */
 	getSharedComponent : function (type, record)
 	{
-		return Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsContentPanel;
+		return Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel;
 	},
 
 

js/data/MDMDeviceRecord.js

@@ -15,7 +15,11 @@ Zarafa.plugins.mdm.data.MDMDeviceRecordFields = [
 	{name: 'totalfolders', type: 'string'},
 	{name: 'shortfolderids', type: 'string'},
 	{name: 'synchronizedfolders', type: 'string'},
-	{name: 'synchronizeddata', type: 'string'},
+	{name: 'emailsfolder', type: 'string'},
+	{name: 'contactsfolder', type: 'string'},
+	{name: 'tasksfolder', type: 'string'},
+	{name: 'calendarsfolder', type: 'string'},
+	{name: 'notesfolder', type: 'string'},
 	{name: 'koeversion', type: 'string'},
 	{name: 'koebuild', type: 'string'},
 	{name: 'koebuilddate', type: 'date', dateFormat: 'timestamp'}

js/dialogs/MDMDeviceContentPanel.js

@@ -0,0 +1,53 @@
+Ext.namespace('Zarafa.plugins.mdm.dialogs');
+
+/**
+ * @class Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel
+ * @extends Zarafa.core.ui.ContentPanel
+ * @xtype mdmplugin.devicecontentpanel
+ *
+ * The content panel which is use to show device detail panel.
+ */
+Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel = Ext.extend(Zarafa.core.ui.ContentPanel, {
+
+	/**
+	 * @constructor
+	 * @param config Configuration structure
+	 */
+	constructor: function (config)
+	{
+		config = config || {};
+		var isKOE =  config.record && config.record.get('koeversion') ? true : false;
+		Ext.applyIf(config, {
+			xtype: 'mdmplugin.devicecontentpanel',
+			modal: true,
+			title: dgettext('plugin_mdm', config.record.get('devicetype')),
+			layout  : 'fit',
+			stateful : false,
+			width : isKOE ? 440 : 405,
+			height : isKOE ? 395 : 360,
+			items: [{
+				xtype: 'mdmplugin.mdmdevicepanel',
+				record: config.record,
+				isKoe : isKOE,
+				buttons: [{
+					text: _('Ok'),
+					handler: this.onOk,
+					scope: this
+				}]
+			}]
+		});
+
+		Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel.superclass.constructor.call(this, config);
+	},
+
+	/**
+	 * Action handler when the user presses the "Ok" button.
+	 * This will close the panel.
+	 */
+	onOk: function ()
+	{
+		this.close();
+	}
+});
+
+Ext.reg('mdmplugin.devicecontentpanel', Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel);

js/dialogs/MDMDeviceDetailsContentPanel.js

@@ -1,38 +0,0 @@
-Ext.namespace('Zarafa.plugins.mdm.dialogs');
-
-/**
- * @class Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsContentPanel
- * @extends Zarafa.core.ui.ContentPanel
- * @xtype mdmplugin.devicedetailscontentpanel
- * 
- * The content panel which is use to show device detail panel.
- */
-Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsContentPanel = Ext.extend(Zarafa.core.ui.ContentPanel, {
-
-    /**
-     * @constructor
-     * @param config Configuration structure
-     */
-    constructor: function (config) {
-        config = config || {};
-
-        Ext.applyIf(config, {
-
-            xtype: 'mdmplugin.devicedetailscontentpanel',
-            layout    : 'fit',
-            modal     : true,
-            width     : 435,
-            minWidth  : 435,
-            autoHeight: true,
-            title     : dgettext('plugin_mdm', config.record.get('devicetype')),
-            items     : [{
-                xtype: 'mdmplugin.devicedetailspanel',
-                record : config.record
-            }]
-        });
-
-        Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsContentPanel.superclass.constructor.call(this, config);
-    }
-});
-
-Ext.reg('mdmplugin.devicedetailscontentpanel', Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsContentPanel);

js/dialogs/MDMDeviceDetailsPanel.js

@@ -1,184 +0,0 @@
-Ext.namespace('Zarafa.plugins.mdm.dialogs');
-
-/**
- * @class Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel
- * @extends Ext.form.FormPanel
- * @xtype mdmplugin.devicedetailspanel
- *
- * This dialog panel will provide detail information of device.
- */
-Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel = Ext.extend(Ext.form.FormPanel, {
-
-    /**
-     * @cfg {Zarafa.plugins.mdm.data.MDMDeviceRecord} record The device record which
-     * is being display by this panel.
-     */
-    record : null,
-
-    /**
-     * @constructor
-     * @param config Configuration structure
-     */
-    constructor : function (config) {
-        config = config || {};
-
-        Ext.applyIf(config, {
-            xtype : 'mdmplugin.devicedetailspanel',
-            layout : 'form',
-            autoScroll : true,
-            autoResize : true,
-            height : 500,
-            defaultType : 'textfield',
-            defaults : {
-                width : 300,
-                readOnly : true
-            },
-            items : this.createPanelItems(config),
-            listeners : {
-                afterlayout : this.onAfterLayout,
-                scope : this
-            }
-        });
-
-        Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel.superclass.constructor.call(this, config);
-    },
-
-
-    /**
-     * Function will create panel items for {@link Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel MDMDeviceDetailsPanel}.
-     * @param config Configuration structure
-     * @return {Array} array of items that should be added to panel.
-     */
-    createPanelItems : function (config)
-    {
-        var items = [{
-            fieldLabel : dgettext('plugin_mdm', 'Device Id'),
-            name : "entryid"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Device Type'),
-            name : "devicetype"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Device OS'),
-            name : "deviceos"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Device Friendly Name'),
-            name : "devicefriendlyname"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'User Agent'),
-            name : "useragent"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'ActiveSync Version'),
-            name : "asversion"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Z-Push Version'),
-            value : container.getSettingsModel().get('zarafa/v1/plugins/mdm/zpush-server-version', true)
-        }, {
-            xtype : "label",
-            width : 100,
-            text : dgettext('plugin_mdm', 'First sync') + ':'
-        }, {
-            xtype : 'zarafa.datetimefield',
-            name : "firstsynctime"
-        }, {
-            xtype : "label",
-            width : 100,
-            text : dgettext('plugin_mdm', 'Last sync') + ':'
-        }, {
-            xtype : 'zarafa.datetimefield',
-            name : "lastsynctime"
-        }, {
-            xtype : "label",
-            width : 100,
-            text : dgettext('plugin_mdm', 'Last Update Time') + ':'
-        }, {
-            xtype : 'zarafa.datetimefield',
-            name : "lastupdatetime"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Total folders'),
-            name : "totalfolders"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Short folder Ids'),
-            name : "shortfolderids"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Synchronized folders'),
-            name : "synchronizedfolders"
-        }, {
-            xtype : 'textarea',
-            fieldLabel : dgettext('plugin_mdm', 'Synchronized data'),
-            autoHeight : true,
-            name : "synchronizeddata"
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Status'),
-            listeners : {
-                afterrender : this.onAfterRenderStatus,
-                scope : this
-            }
-        }, {
-            fieldLabel : dgettext('plugin_mdm', 'Policy name'),
-            name : "policyname"
-        }];
-
-        // KOE information
-        if (config.record && config.record.get('koeversion')) {
-            items.push(this.createKOEItems());
-        }
-        return items;
-    },
-
-    /**
-     * Function will create Kopano Outlook Extension panel items for 
-     * {@link Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel MDMDeviceDetailsPanel}.
-     * @return {Array} array of items that should be added to panel.
-     */
-    createKOEItems : function ()
-    {
-        return [{
-            xtype : 'fieldset',
-            checkboxToggle : false,
-            title : dgettext('plugin_mdm', 'Kopano Outlook Extension'),
-            layout : 'form',
-            width : 405,
-            defaultType : 'textfield',
-            defaults : {
-                readOnly : true,
-                width : 285
-            },
-            items : [{
-                fieldLabel : dgettext('plugin_mdm', 'Version'),
-                name : "koeversion"
-            }, {
-                fieldLabel : dgettext('plugin_mdm', 'Build'),
-                name : "koebuild"
-            },{
-                xtype : "label",
-                width : 100,
-                text : dgettext('plugin_mdm', 'Build Date') + ':'
-            }, {
-                xtype : 'zarafa.datetimefield',
-                name : "koebuilddate"
-            }]
-        }]
-    },
-
-    /**
-     * Function which handles the after layout event of {@link Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel panel}
-     * Which is use to set record values into form fields.
-     */
-    onAfterLayout : function ()
-    {
-        this.getForm().loadRecord(this.record);
-    },
-
-    /**
-     * Function which handles the after render event of status field.
-     * Which is use to set the the display name for the given Provisioning Status into given field 
-     * @param {Ext.form.TextField} statusField text field
-     */
-    onAfterRenderStatus : function (statusField) 
-    {
-        var status = parseInt(this.record.get("wipestatus"));
-        statusField.setValue(Zarafa.plugins.mdm.data.ProvisioningStatus.getDisplayName(status));
-    }
-});
-
-Ext.reg('mdmplugin.devicedetailspanel', Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsPanel);

js/dialogs/MDMDeviceDetailsTab.js

@@ -0,0 +1,168 @@
+Ext.namespace('Zarafa.plugins.mdm.dialogs');
+
+/**
+ * @class Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsTab
+ * @extends Ext.form.FormPanel
+ * @xtype mdmplugin.mdmdevicedetailstab
+ *
+ * General tab in the {@link Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel}
+ */
+Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsTab = Ext.extend(Ext.form.FormPanel, {
+
+	/**
+	 * @cfg {Boolean} isKoe True if device has Kopano Outlook Extension information.
+	 */
+	isKoe : false,
+
+	/**
+	 * @constructor
+	 * @param {Object} config
+	 */
+	constructor: function (config)
+	{
+		config = config || {};
+		Ext.applyIf(config, {
+			xtype: 'mdmplugin.mdmdevicedetailstab',
+			cls: 'tab-device',
+			border: false,
+			labelAlign: 'left',
+			defaults: {
+				border: false,
+				xtype: 'panel',
+				layout: 'form',
+				labelWidth: 150
+			},
+
+			items: [
+				this.createDeviceInfoPanel(config.isKoe),
+				this.createVersionInfoPanel(config.isKoe)
+			],
+			listeners: {
+				afterlayout: this.onAfterLayout,
+				scope: this
+			}
+		});
+
+		// KOE information
+		if (config.isKoe) {
+			config.items.push(this.createKOEInfoPanel(config.record));
+		}
+		Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsTab.superclass.constructor.call(this, config);
+	},
+	/**
+	 * Function which is use to create device information panel
+	 * @param {Boolean} isKoe True if device has Kopano Outlook Extension information, false otherwise.
+	 * @return {Object} Configuration object for the panel which shows device properties
+	 * @private
+	 */
+	createDeviceInfoPanel: function (isKoe)
+	{
+		return {
+			cls : 'mdm-device-panel',
+			defaultType: 'displayfield',
+			defaults: {
+				disabled: true
+			},
+			items: [{
+				cls: 'mdm-display-name',
+				value: dgettext('plugin_mdm', 'Device'),
+				hideLabel: true,
+				disabled: false
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Type'),
+				name: 'devicetype'
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Operating System'),
+				hidden: isKoe,
+				name: 'deviceos'
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'ID'),
+				name: 'entryid'
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'User Agent'),
+				name: 'useragent'
+			}]
+		};
+	},
+
+	/**
+	 * Function which is use to create version information panel.
+	 * @param {Boolean} isKoe True if device has Kopano Outlook Extension information, false otherwise.
+	 * @return {Object} Configuration object for the panel which shows versions properties
+	 * @private
+	 */
+	createVersionInfoPanel: function (isKoe)
+	{
+		return {
+			defaultType: 'displayfield',
+			defaults: {
+				disabled: true
+			},
+			cls : 'mdm-device-panel mdm-field-sep',
+			items: [{
+				cls: 'mdm-display-name',
+				value: dgettext('plugin_mdm', 'MDM Plugin'),
+				htmlEncode: true,
+				hideLabel: true,
+				disabled: false
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Active Sync Version'),
+				name: 'asversion'
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Z-Push Version'),
+				value: container.getSettingsModel().get('zarafa/v1/plugins/mdm/zpush-server-version', true)
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Short folder Ids'),
+				name: 'shortfolderids'
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Policy name'),
+				hidden: isKoe,
+				name: 'policyname'
+			}]
+		};
+	},
+
+	/**
+	 * Function which is use to create Kopano Outlook Extension panel
+	 * @param {Zarafa.plugins.mdm.data.MDMDeviceRecord} record The device record.s
+	 * @return {Object} Configuration object for the panel which shows Kopano Outlook Extension properties
+	 * @private
+	 */
+	createKOEInfoPanel: function (record)
+	{
+		return {
+			cls : 'mdm-device-panel mdm-field-sep',
+			defaults: {
+				disabled: true
+			},
+			defaultType: 'displayfield',
+			items: [{
+				cls: 'mdm-display-name',
+				value: dgettext('plugin_mdm', 'Kopano Outlook Extension'),
+				htmlEncode: true,
+				hideLabel: true,
+				disabled: false
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Version'),
+				name: "koeversion"
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Build'),
+				name: "koebuild"
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Last updated'),
+				value: String.format('{0}', new Date(record.get('koebuilddate')).format(_('d F Y, H:i')))
+			}]
+		};
+	},
+
+	/**
+	 * Function which handles the afterlayout event
+	 * Which is use to set record values into form fields.
+	 */
+	onAfterLayout: function ()
+	{
+		this.getForm().loadRecord(this.record);
+	}
+});
+
+Ext.reg('mdmplugin.mdmdevicedetailstab', Zarafa.plugins.mdm.dialogs.MDMDeviceDetailsTab);

js/dialogs/MDMDeviceGeneralTab.js

@@ -0,0 +1,155 @@
+Ext.namespace('Zarafa.plugins.mdm.dialogs');
+
+/**
+ * @class Zarafa.plugins.mdm.dialogs.MDMDeviceGeneralTab
+ * @extends Ext.form.FormPanel
+ * @xtype mdmplugin.mdmdevicegeneraltab
+ *
+ * Details tab in the {@link Zarafa.plugins.mdm.dialogs.MDMDeviceContentPanel}
+ */
+Zarafa.plugins.mdm.dialogs.MDMDeviceGeneralTab = Ext.extend(Ext.form.FormPanel, {
+
+	/**
+	 * @cfg {Boolean} isKoe True if device has Kopano Outlook Extension information.
+	 */
+	isKoe : false,
+
+	/**
+	 * @constructor
+	 * @param {Object} config Configuration object
+	 */
+	constructor: function (config)
+	{
+		config = config || {};
+		Ext.applyIf(config, {
+			xtype: 'mdmplugin.mdmdevicegeneraltab',
+			cls: 'tab-general',
+			border: false,
+			labelAlign: 'left',
+			defaults: {
+				border: false,
+				xtype: 'panel',
+				layout: 'form',
+				labelWidth: 150,
+				cls: 'mdm-device-panel'
+			},
+			items: [
+				this.createDeviceInfoPanel(config),
+				this.createFolderInfoPanel()
+			],
+			listeners: {
+				afterlayout: this.onAfterLayout,
+				scope: this
+			}
+		});
+
+		Zarafa.plugins.mdm.dialogs.MDMDeviceGeneralTab.superclass.constructor.call(this, config);
+	},
+	/**
+	 * Function which is use to create device status panel
+	 * @param {Object} config Configuration object
+	 * @return {Object} Configuration object for the panel which shows device status properties
+	 * @private
+	 */
+	createDeviceInfoPanel: function (config)
+	{
+		return {
+			cls : 'mdm-device-panel',
+			defaultType: 'displayfield',
+			defaults: {
+				disabled: true
+			},
+			items: [{
+				cls: 'mdm-display-name',
+				value: dgettext('plugin_mdm', config.record.get('devicetype')),
+				htmlEncode: true,
+				disabled: false,
+				hideLabel: true
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Connected since'),
+				value: String.format('{0}', new Date(config.record.get('firstsynctime')).format(_('d F Y')))
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Last updated'),
+				value: String.format(_('{0}'), new Date(config.record.get('lastupdatetime')).format(_('d F Y, H:i')))
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Status'),
+				hidden: config.isKoe,
+				listeners: {
+					afterrender: this.onAfterRenderStatus,
+					scope: this
+				}
+			}]
+		};
+	},
+	/**
+	 * Function which is use to create folders synchronization panel
+	 * @return {Object} Configuration object for the panel which shows folders properties
+	 * @private
+	 */
+	createFolderInfoPanel: function ()
+	{
+		return {
+			cls : 'mdm-device-panel mdm-field-sep',
+			defaultType: 'displayfield',
+			items: [{
+				cls: 'mdm-display-name',
+				value: dgettext('plugin_mdm', 'Synchronize'),
+				htmlEncode: true,
+				hideLabel: true
+			}, {
+				fieldLabel: dgettext('plugin_mdm', 'Folders'),
+				disabled: true,
+				name: 'synchronizedfolders'
+			}, {
+				xtype: 'fieldset',
+				layout: 'form',
+				labelWidth: 140,
+				cls : 'mdm-synchronize-panel',
+				defaultType: 'displayfield',
+				defaults: {
+					labelSeparator: '',
+					value: '0',
+					disabled: true
+				},
+				items: [{
+					fieldLabel: _('Email'),
+					name: 'emailsfolder'
+				}, {
+					fieldLabel: _('Calendar'),
+					name: 'calendarsfolder'
+				}, {
+					fieldLabel: _('Contacts'),
+					name: 'contactsfolder'
+				}, {
+					fieldLabel: _('Notes'),
+					name: 'notesfolder'
+				}, {
+					fieldLabel: _('Tasks'),
+					name: 'tasksfolder'
+				}]
+			}]
+		};
+	},
+
+	/**
+	 * Function which handles the after layoutevent.
+	 * Which is use to set record values into form fields.
+	 */
+	onAfterLayout: function ()
+	{
+		this.getForm().loadRecord(this.record);
+	},
+
+	/**
+	 * Function which handles the after render event of status field.
+	 * Which is use to set the the display name for the given Provisioning Status into given field
+	 * @param {Ext.form.TextField} statusField text field
+	 */
+	onAfterRenderStatus: function (statusField)
+	{
+		var status = parseInt(this.record.get("wipestatus"));
+		statusField.setValue(Zarafa.plugins.mdm.data.ProvisioningStatus.getDisplayName(status));
+	}
+});
+
+Ext.reg('mdmplugin.mdmdevicegeneraltab', Zarafa.plugins.mdm.dialogs.MDMDeviceGeneralTab);

js/dialogs/MDMDevicePanel.js

@@ -0,0 +1,52 @@
+Ext.namespace('Zarafa.plugins.mdm.dialogs');
+
+/**
+ * @class Zarafa.plugins.mdm.dialogs.MDMDevicePanel
+ * @extends Ext.Panel
+ * @xtype mdmplugin.mdmdevicepanel
+ *
+ * This class is used as wrapper class for all tabs, individual tab will have its own class.
+ */
+Zarafa.plugins.mdm.dialogs.MDMDevicePanel = Ext.extend(Ext.Panel, {
+
+	/**
+	 * @cfg {Boolean} isKoe True if device has Kopano Outlook Extension information.
+	 */
+	isKoe : false,
+
+	/**
+	 * @constructor
+	 * @param {Object} config configuration object.
+	 */
+	constructor: function (config)
+	{
+		config = config || {};
+		Ext.applyIf(config, {
+			xtype: 'mdmplugin.mdmdevicepanel',
+			cls: 'mdm-devicepanel tabpanel-container',
+			border: false,
+			deferredRender: false,
+			items: [{
+				xtype: 'tabpanel',
+				border: false,
+				activeTab: 0,
+				layoutOnTabChange: true,
+				items: [{
+					xtype: 'mdmplugin.mdmdevicegeneraltab',
+					record: config.record,
+					title: dgettext('plugin_mdm','General'),
+					isKoe : config.isKoe
+				}, {
+					xtype: 'mdmplugin.mdmdevicedetailstab',
+					record: config.record,
+					title: dgettext('plugin_mdm','Details'),
+					isKoe : config.isKoe
+				}]
+			}]
+		});
+
+		Zarafa.plugins.mdm.dialogs.MDMDevicePanel.superclass.constructor.call(this, config);
+	}
+});
+
+Ext.reg('mdmplugin.mdmdevicepanel', Zarafa.plugins.mdm.dialogs.MDMDevicePanel);

js/settings/MDMSettingsWidget.js

@@ -207,7 +207,7 @@ Zarafa.plugins.mdm.settings.MDMSettingsWidget = Ext.extend(Zarafa.settings.ui.Se
 	onRowDblClick : function (grid, rowIndex)
 	{
 		var record = grid.getStore().getAt(rowIndex);
-		Zarafa.core.data.UIFactory.openLayerComponent(Zarafa.core.data.SharedComponentType['mdm.dialog.mdmdevicedetails'], undefined, {
+		Zarafa.core.data.UIFactory.openLayerComponent(Zarafa.core.data.SharedComponentType['mdm.dialog.mdmdevicecontentpanel'], undefined, {
 			manager : Ext.WindowMgr,
 			record : record
 		});

manifest.xml

@@ -33,8 +33,10 @@
 					<clientfile load="source">js/data/ProvisioningStatus.js</clientfile>
 					<clientfile load="source">js/settings/MDMSettingsWidget.js</clientfile>
 					<clientfile load="source">js/settings/MDMSettingsCategory.js</clientfile>
-					<clientfile load="source">js/dialogs/MDMDeviceDetailsContentPanel.js</clientfile>
+					<clientfile load="source">js/dialogs/MDMDeviceContentPanel.js</clientfile>
-					<clientfile load="source">js/dialogs/MDMDeviceDetailsPanel.js</clientfile>
+					<clientfile load="source">js/dialogs/MDMDeviceGeneralTab.js</clientfile>
+					<clientfile load="source">js/dialogs/MDMDevicePanel.js</clientfile>
+					<clientfile load="source">js/dialogs/MDMDeviceDetailsTab.js</clientfile>
 					<clientfile load="source">js/ui/Renderers.js</clientfile>
 				</client>
 				<resources>

php/class.pluginmdmmodule.php

@@ -111,7 +111,7 @@ class PluginMDMModule extends Module
 
 
 	/**
-	  function which calls the wipeDevice soap call
+	 * function which calls the wipeDevice soap call
 	 * @param int $deviceid of phone which has to be wiped
 	 * @return json $response object contains the response of the soap request from Z-Push
 	 */
@@ -232,7 +232,6 @@ class PluginMDMModule extends Module
 		$contentData = $device['contentdata'];
 		$folders = array_keys($contentData);
 		$synchedFolderTypes = array();
-		$synchronizedData = '';
 		$synchronizedFolders = 0;
 		$hierarchyCache = isset($device['hierarchycache']) ? $device['hierarchycache'] : false;
 
@@ -258,22 +257,16 @@ class PluginMDMModule extends Module
 				}
 			}
 		}
-
-		foreach ($synchedFolderTypes as $key => $value) {
-			$synchronizedData = $synchronizedData . $key;
-			$synchronizedFolders += $value;
-			if ($value > 1) {
-				$synchronizedData = $synchronizedData . "(" . $value . ") ";
-			} else {
-				$synchronizedData = $synchronizedData . " ";
-			}
-		}
-
 		$syncFoldersProps = array();
+		foreach ($synchedFolderTypes as $key => $value) {
+			$synchronizedFolders += $value;
+			$syncFoldersProps[strtolower($key) . 'folder'] = $value;
+		}
+
+
 		$syncFoldersProps["totalfolders"] = count($folders);
-		$syncFoldersProps["shortfolderids"] = $device['hasfolderidmapping'] ? dgettext('plugin_mdm', "Yes") : dgettext('plugin_mdm', "No") ;
+		$syncFoldersProps["shortfolderids"] = $device['hasfolderidmapping'] ? dgettext('plugin_mdm', "Yes") : dgettext('plugin_mdm', "No");
 		$syncFoldersProps['synchronizedfolders'] = $synchronizedFolders;
-		$syncFoldersProps['synchronizeddata'] = $synchronizedData;
 
 		return $syncFoldersProps;
 	}

resources/css/mdm.css

@@ -1,3 +1,40 @@
 .icon_mdm_settings {
 	background-image:url(../icons/mdm_icon.png) !important;
 }
+
+
+.mdm-devicepanel.x-panel.tabpanel-container
+> .x-panel-bwrap
+> .x-panel-body {
+	padding: 0;
+}
+.mdm-devicepanel.x-panel.tabpanel-container
+> .x-panel-bwrap
+> .x-panel-body
+> .x-tab-panel
+> .x-tab-panel-bwrap
+> .x-tab-panel-body {
+	padding: 0!important;
+}
+
+
+.mdm-display-name {
+	font-weight: bold !important;
+	padding: 4px 0 2px 0;
+}
+
+.mdm-device-panel{
+	padding: 5px 0px 5px 10px;
+}
+
+.mdm-field-sep {
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-color: #e6e6e6;
+}
+
+.mdm-synchronize-panel {
+	border: 0px;
+	margin-left: 10px;
+	padding: 0px;
+}