Add pagenator to contact list

Move contacts from plugin back to core

rainloop/v/0.0.0/static/css/app.css

@@ -5736,10 +5736,29 @@ html.no-rgba .modal {
   vertical-align: top;
   text-align: left;
 }
+.g-ui-height-100proc {
+  height: 100%;
+}
 .g-ui-resizable-delimiter-highlight {
   border: none;
   border-right: 6px solid #aaa;
 }
+.e-pagenator .e-page {
+  display: inline-block;
+  color: #999;
+  text-decoration: none;
+  font-size: 24px;
+  padding: 3px;
+  cursor: pointer;
+}
+.e-pagenator .e-page:hover .e-page-number {
+  color: #555;
+}
+.e-pagenator .e-page.current .e-page-number {
+  font-size: 28px;
+  color: #333;
+  border-bottom: 2px solid #000;
+}
 html.rgba .g-ui-resizable-delimiter-highlight {
   border-right-color: rgba(0, 0, 0, 0.2);
 }
@@ -6707,22 +6726,6 @@ html.rl-no-preview-pane .messageList.message-selected {
 .messageList.hideMessageListCheckbox .sidebarParent {
   margin-right: 10px !important;
 }
-.messageList .pagenator .page {
-  display: inline-block;
-  color: #999;
-  text-decoration: none;
-  font-size: 24px;
-  padding: 3px;
-  cursor: pointer;
-}
-.messageList .pagenator .page:hover .pageNumber {
-  color: #555;
-}
-.messageList .pagenator .page.current .pageNumber {
-  font-size: 28px;
-  color: #333;
-  border-bottom: 2px solid #000;
-}
 .draggablePlace {
   z-index: 10002;
   color: #fff;
@@ -6966,6 +6969,12 @@ html.rl-no-preview-pane .messageView.message-selected {
   color: #000;
   font-family: arial, sans-serif;
 }
+.messageView .b-content .messageItem .bodyText .b-text-part div[data-x-div-type=html] {
+  height: 100%;
+}
+.messageView .b-content .messageItem .bodyText .b-text-part div[data-x-div-type=html] div[data-x-div-type=html] {
+  height: 100%;
+}
 .messageView .b-content .messageItem .bodyText .b-text-part a {
   color: blue;
   text-decoration: underline;
@@ -7108,20 +7117,35 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   padding: 0;
   height: 45px;
   text-align: center;
-  width: 250px;
+  width: 270px;
   -webkit-box-shadow: inset 0 -1px 0 #cccccc;
   -moz-box-shadow: inset 0 -1px 0 #cccccc;
   box-shadow: inset 0 -1px 0 #cccccc;
 }
 .b-contacts-content.modal .b-list-toopbar .e-search {
   margin-top: 7px;
+  width: 245px;
+}
+.b-contacts-content.modal .b-list-footer-toopbar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 105px;
+  width: 270px;
+  background-color: #eee;
+  -webkit-box-shadow: inset 0 1px 0 #cccccc;
+  -moz-box-shadow: inset 0 1px 0 #cccccc;
+  box-shadow: inset 0 1px 0 #cccccc;
+}
+.b-contacts-content.modal .b-list-footer-toopbar .footer-pager {
+  padding: 8px 10px 0 0;
 }
 .b-contacts-content.modal .b-list-content {
   position: absolute;
   top: 45px;
-  bottom: 60px;
+  bottom: 105px;
   left: 0;
-  width: 250px;
+  width: 270px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -7135,6 +7159,9 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   font-size: 14px;
   line-height: 13px;
   background-color: #fff;
+  -webkit-box-shadow: inset 0 -1px 0 #cccccc;
+  -moz-box-shadow: inset 0 -1px 0 #cccccc;
+  box-shadow: inset 0 -1px 0 #cccccc;
 }
 .b-contacts-content.modal .b-list-content .listEmptyList,
 .b-contacts-content.modal .b-list-content .listEmptyListLoading,
@@ -7232,7 +7259,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   position: absolute;
   top: 0;
   bottom: 60px;
-  left: 250px;
+  left: 270px;
   right: 0;
   overflow: hidden;
   overflow-y: auto;

rainloop/v/0.0.0/static/css/less.css

@@ -3581,10 +3581,29 @@ html.no-rgba .modal {
   vertical-align: top;
   text-align: left;
 }
+.g-ui-height-100proc {
+  height: 100%;
+}
 .g-ui-resizable-delimiter-highlight {
   border: none;
   border-right: 6px solid #aaa;
 }
+.e-pagenator .e-page {
+  display: inline-block;
+  color: #999;
+  text-decoration: none;
+  font-size: 24px;
+  padding: 3px;
+  cursor: pointer;
+}
+.e-pagenator .e-page:hover .e-page-number {
+  color: #555;
+}
+.e-pagenator .e-page.current .e-page-number {
+  font-size: 28px;
+  color: #333;
+  border-bottom: 2px solid #000;
+}
 html.rgba .g-ui-resizable-delimiter-highlight {
   border-right-color: rgba(0, 0, 0, 0.2);
 }
@@ -4552,22 +4571,6 @@ html.rl-no-preview-pane .messageList.message-selected {
 .messageList.hideMessageListCheckbox .sidebarParent {
   margin-right: 10px !important;
 }
-.messageList .pagenator .page {
-  display: inline-block;
-  color: #999;
-  text-decoration: none;
-  font-size: 24px;
-  padding: 3px;
-  cursor: pointer;
-}
-.messageList .pagenator .page:hover .pageNumber {
-  color: #555;
-}
-.messageList .pagenator .page.current .pageNumber {
-  font-size: 28px;
-  color: #333;
-  border-bottom: 2px solid #000;
-}
 .draggablePlace {
   z-index: 10002;
   color: #fff;
@@ -4811,6 +4814,12 @@ html.rl-no-preview-pane .messageView.message-selected {
   color: #000;
   font-family: arial, sans-serif;
 }
+.messageView .b-content .messageItem .bodyText .b-text-part div[data-x-div-type=html] {
+  height: 100%;
+}
+.messageView .b-content .messageItem .bodyText .b-text-part div[data-x-div-type=html] div[data-x-div-type=html] {
+  height: 100%;
+}
 .messageView .b-content .messageItem .bodyText .b-text-part a {
   color: blue;
   text-decoration: underline;
@@ -4953,20 +4962,35 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   padding: 0;
   height: 45px;
   text-align: center;
-  width: 250px;
+  width: 270px;
   -webkit-box-shadow: inset 0 -1px 0 #cccccc;
   -moz-box-shadow: inset 0 -1px 0 #cccccc;
   box-shadow: inset 0 -1px 0 #cccccc;
 }
 .b-contacts-content.modal .b-list-toopbar .e-search {
   margin-top: 7px;
+  width: 245px;
+}
+.b-contacts-content.modal .b-list-footer-toopbar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 105px;
+  width: 270px;
+  background-color: #eee;
+  -webkit-box-shadow: inset 0 1px 0 #cccccc;
+  -moz-box-shadow: inset 0 1px 0 #cccccc;
+  box-shadow: inset 0 1px 0 #cccccc;
+}
+.b-contacts-content.modal .b-list-footer-toopbar .footer-pager {
+  padding: 8px 10px 0 0;
 }
 .b-contacts-content.modal .b-list-content {
   position: absolute;
   top: 45px;
-  bottom: 60px;
+  bottom: 105px;
   left: 0;
-  width: 250px;
+  width: 270px;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -4980,6 +5004,9 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   font-size: 14px;
   line-height: 13px;
   background-color: #fff;
+  -webkit-box-shadow: inset 0 -1px 0 #cccccc;
+  -moz-box-shadow: inset 0 -1px 0 #cccccc;
+  box-shadow: inset 0 -1px 0 #cccccc;
 }
 .b-contacts-content.modal .b-list-content .listEmptyList,
 .b-contacts-content.modal .b-list-content .listEmptyListLoading,
@@ -5077,7 +5104,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   position: absolute;
   top: 0;
   bottom: 60px;
-  left: 250px;
+  left: 270px;
   right: 0;
   overflow: hidden;
   overflow-y: auto;

rainloop/v/0.0.0/static/js/admin.js

@@ -154,6 +154,12 @@ Consts.DataImages = {};
  */
 Consts.Defaults.MessagesPerPage = 20;
 
+/**
+ * @const
+ * @type {number}
+ */
+Consts.Defaults.ContactsPerPage = 20;
+
 /**
  * @const
  * @type {Array}
@@ -1922,6 +1928,120 @@ Utils.resizeAndCrop = function (sUrl, iValue, fCallback)
 
     oTempImg.src = sUrl;
 };
+
+Utils.computedPagenatorHelper = function (koCurrentPage, koPageCount) {
+
+	return function() {
+		var
+			iPrev = 0,
+			iNext = 0,
+			iLimit = 2,
+			aResult = [],
+			iCurrentPage = koCurrentPage(),
+			iPageCount = koPageCount(),
+
+			/**
+			 * @param {number} iIndex
+			 * @param {boolean=} bPush
+			 * @param {string=} sCustomName
+			 */
+			fAdd = function (iIndex, bPush, sCustomName) {
+
+				var oData = {
+					'current': iIndex === iCurrentPage,
+					'name': Utils.isUnd(sCustomName) ? iIndex.toString() : sCustomName.toString(),
+					'custom': Utils.isUnd(sCustomName) ? false : true,
+					'title': Utils.isUnd(sCustomName) ? '' : iIndex.toString(),
+					'value': iIndex.toString()
+				};
+
+				if (Utils.isUnd(bPush) ? true : !!bPush)
+				{
+					aResult.push(oData);
+				}
+				else
+				{
+					aResult.unshift(oData);
+				}
+			}
+		;
+
+		if (1 < iPageCount || (0 < iPageCount && iPageCount < iCurrentPage))
+//		if (0 < iPageCount && 0 < iCurrentPage)
+		{
+			if (iPageCount < iCurrentPage)
+			{
+				fAdd(iPageCount);
+				iPrev = iPageCount;
+				iNext = iPageCount;
+			}
+			else
+			{
+				if (3 >= iCurrentPage || iPageCount - 2 <= iCurrentPage)
+				{
+					iLimit += 2;
+				}
+
+				fAdd(iCurrentPage);
+				iPrev = iCurrentPage;
+				iNext = iCurrentPage;
+			}
+
+			while (0 < iLimit) {
+
+				iPrev -= 1;
+				iNext += 1;
+
+				if (0 < iPrev)
+				{
+					fAdd(iPrev, false);
+					iLimit--;
+				}
+
+				if (iPageCount >= iNext)
+				{
+					fAdd(iNext, true);
+					iLimit--;
+				}
+				else if (0 >= iPrev)
+				{
+					break;
+				}
+			}
+
+			if (3 === iPrev)
+			{
+				fAdd(2, false);
+			}
+			else if (3 < iPrev)
+			{
+				fAdd(Math.round((iPrev - 1) / 2), false, '...');
+			}
+
+			if (iPageCount - 2 === iNext)
+			{
+				fAdd(iPageCount - 1, true);
+			}
+			else if (iPageCount - 2 > iNext)
+			{
+				fAdd(Math.round((iPageCount + iNext) / 2), true, '...');
+			}
+
+			// first and last
+			if (1 < iPrev)
+			{
+				fAdd(1, false);
+			}
+
+			if (iPageCount > iNext)
+			{
+				fAdd(iPageCount, true);
+			}
+		}
+
+		return aResult;
+	};
+};
 
 // Base64 encode / decode
 // http://www.webtoolkit.info/

rainloop/v/0.0.0/static/js/app.js

@@ -154,6 +154,12 @@ Consts.DataImages = {};
  */
 Consts.Defaults.MessagesPerPage = 20;
 
+/**
+ * @const
+ * @type {number}
+ */
+Consts.Defaults.ContactsPerPage = 20;
+
 /**
  * @const
  * @type {Array}
@@ -1922,6 +1928,120 @@ Utils.resizeAndCrop = function (sUrl, iValue, fCallback)
 
     oTempImg.src = sUrl;
 };
+
+Utils.computedPagenatorHelper = function (koCurrentPage, koPageCount) {
+
+	return function() {
+		var
+			iPrev = 0,
+			iNext = 0,
+			iLimit = 2,
+			aResult = [],
+			iCurrentPage = koCurrentPage(),
+			iPageCount = koPageCount(),
+
+			/**
+			 * @param {number} iIndex
+			 * @param {boolean=} bPush
+			 * @param {string=} sCustomName
+			 */
+			fAdd = function (iIndex, bPush, sCustomName) {
+
+				var oData = {
+					'current': iIndex === iCurrentPage,
+					'name': Utils.isUnd(sCustomName) ? iIndex.toString() : sCustomName.toString(),
+					'custom': Utils.isUnd(sCustomName) ? false : true,
+					'title': Utils.isUnd(sCustomName) ? '' : iIndex.toString(),
+					'value': iIndex.toString()
+				};
+
+				if (Utils.isUnd(bPush) ? true : !!bPush)
+				{
+					aResult.push(oData);
+				}
+				else
+				{
+					aResult.unshift(oData);
+				}
+			}
+		;
+
+		if (1 < iPageCount || (0 < iPageCount && iPageCount < iCurrentPage))
+//		if (0 < iPageCount && 0 < iCurrentPage)
+		{
+			if (iPageCount < iCurrentPage)
+			{
+				fAdd(iPageCount);
+				iPrev = iPageCount;
+				iNext = iPageCount;
+			}
+			else
+			{
+				if (3 >= iCurrentPage || iPageCount - 2 <= iCurrentPage)
+				{
+					iLimit += 2;
+				}
+
+				fAdd(iCurrentPage);
+				iPrev = iCurrentPage;
+				iNext = iCurrentPage;
+			}
+
+			while (0 < iLimit) {
+
+				iPrev -= 1;
+				iNext += 1;
+
+				if (0 < iPrev)
+				{
+					fAdd(iPrev, false);
+					iLimit--;
+				}
+
+				if (iPageCount >= iNext)
+				{
+					fAdd(iNext, true);
+					iLimit--;
+				}
+				else if (0 >= iPrev)
+				{
+					break;
+				}
+			}
+
+			if (3 === iPrev)
+			{
+				fAdd(2, false);
+			}
+			else if (3 < iPrev)
+			{
+				fAdd(Math.round((iPrev - 1) / 2), false, '...');
+			}
+
+			if (iPageCount - 2 === iNext)
+			{
+				fAdd(iPageCount - 1, true);
+			}
+			else if (iPageCount - 2 > iNext)
+			{
+				fAdd(Math.round((iPageCount + iNext) / 2), true, '...');
+			}
+
+			// first and last
+			if (1 < iPrev)
+			{
+				fAdd(1, false);
+			}
+
+			if (iPageCount > iNext)
+			{
+				fAdd(iPageCount, true);
+			}
+		}
+
+		return aResult;
+	};
+};
 
 // Base64 encode / decode
 // http://www.webtoolkit.info/
@@ -9060,10 +9180,19 @@ function PopupsContactsViewModel()
 	;
 
 	this.search = ko.observable('');
+	this.contactsCount = ko.observable(0);
 	this.contacts = ko.observableArray([]);
 	this.contacts.loading = ko.observable(false).extend({'throttle': 200});
 	this.currentContact = ko.observable(null);
 
+	this.contactsPage = ko.observable(1);
+	this.contactsPageCount = ko.computed(function () {
+		var iPage = Math.ceil(this.contactsCount() / Consts.Defaults.ContactsPerPage);
+		return 0 >= iPage ? 1 : iPage;
+	}, this);
+
+	this.contactsPagenator = ko.computed(Utils.computedPagenatorHelper(this.contactsPage, this.contactsPageCount));
+
 	this.emptySelection = ko.observable(true);
 	this.viewClearSearch = ko.observable(false);
 
@@ -9260,28 +9389,24 @@ function PopupsContactsViewModel()
 		var bV = this.viewHasNonEmptyRequaredProperties();
 		return !this.viewSaving() && bV;
 	});
+
+	this.bDropPageAfterDelete = false;
 }
 
 Utils.extendAsViewModel('PopupsContactsViewModel', PopupsContactsViewModel);
 
 PopupsContactsViewModel.prototype.addNewEmail = function ()
 {
-//	if (0 === this.viewPropertiesEmailsEmpty().length)
-//	{
-		var oItem = new ContactPropertyModel(Enums.ContactPropertyType.EmailPersonal, '');
-		oItem.focused(true);
-		this.viewProperties.push(oItem);
-//	}
+	var oItem = new ContactPropertyModel(Enums.ContactPropertyType.EmailPersonal, '');
+	oItem.focused(true);
+	this.viewProperties.push(oItem);
 };
 
 PopupsContactsViewModel.prototype.addNewPhone = function ()
 {
-//	if (0 === this.viewPropertiesPhonesEmpty().length)
-//	{
-		var oItem = new ContactPropertyModel(Enums.ContactPropertyType.PhonePersonal, '');
-		oItem.focused(true);
-		this.viewProperties.push(oItem);
-//	}
+	var oItem = new ContactPropertyModel(Enums.ContactPropertyType.PhonePersonal, '');
+	oItem.focused(true);
+	this.viewProperties.push(oItem);
 };
 
 PopupsContactsViewModel.prototype.removeCheckedOrSelectedContactsFromList = function ()
@@ -9290,6 +9415,7 @@ PopupsContactsViewModel.prototype.removeCheckedOrSelectedContactsFromList = func
 		self = this,
 		oKoContacts = this.contacts,
 		oCurrentContact = this.currentContact(),
+		iCount = this.contacts().length,
 		aContacts = this.contactsCheckedOrSelected()
 	;
 	
@@ -9304,8 +9430,14 @@ PopupsContactsViewModel.prototype.removeCheckedOrSelectedContactsFromList = func
 			}
 
 			oContact.deleted(true);
+			iCount--;
 		});
 
+		if (iCount <= 0)
+		{
+			this.bDropPageAfterDelete = true;
+		}
+
 		_.delay(function () {
 			
 			_.each(aContacts, function (oContact) {
@@ -9337,13 +9469,13 @@ PopupsContactsViewModel.prototype.deleteResponse = function (sResult, oData)
 {
 	if (500 < (Enums.StorageResultType.Success === sResult && oData && oData.Time ? Utils.pInt(oData.Time) : 0))
 	{
-		this.reloadContactList();
+		this.reloadContactList(this.bDropPageAfterDelete);
 	}
 	else
 	{
 		_.delay((function (self) {
 			return function () {
-				self.reloadContactList();
+				self.reloadContactList(self.bDropPageAfterDelete);
 			};
 		}(this)), 500);
 	}
@@ -9396,12 +9528,31 @@ PopupsContactsViewModel.prototype.populateViewContact = function (oContact)
 	this.viewProperties(aList);
 };
 
-PopupsContactsViewModel.prototype.reloadContactList = function ()
+/**
+ * @param {boolean=} bDropPagePosition = false
+ */
+PopupsContactsViewModel.prototype.reloadContactList = function (bDropPagePosition)
 {
-	var self = this;
+	var
+		self = this,
+		iOffset = (this.contactsPage() - 1) * Consts.Defaults.ContactsPerPage
+	;
+	
+	this.bDropPageAfterDelete = false;
+
+	if (Utils.isUnd(bDropPagePosition) ? false : !!bDropPagePosition)
+	{
+		this.contactsPage(1);
+		iOffset = 0;
+	}
+
 	this.contacts.loading(true);
 	RL.remote().contacts(function (sResult, oData) {
-		var	aList = [];
+		var
+			iCount = 0,
+			aList = []
+		;
+		
 		if (Enums.StorageResultType.Success === sResult && oData && oData.Result && oData.Result.List)
 		{
 			if (Utils.isNonEmptyArray(oData.Result.List))
@@ -9412,9 +9563,14 @@ PopupsContactsViewModel.prototype.reloadContactList = function ()
 				});
 
 				aList = _.compact(aList);
+
+				iCount = Utils.pInt(oData.Result.Count);
+				iCount = 0 < iCount ? iCount : 0;
 			}
 		}
 
+		self.contactsCount(iCount);
+		
 		self.contacts(aList);
 		self.viewClearSearch('' !== self.search());
 		self.contacts.loading(false);
@@ -9424,7 +9580,7 @@ PopupsContactsViewModel.prototype.reloadContactList = function ()
 			self.contacts.setSelectedByUid('' + self.viewID());
 		}
 
-	}, 0, 20, this.search());
+	}, iOffset, Consts.Defaults.ContactsPerPage, this.search());
 };
 
 PopupsContactsViewModel.prototype.onBuild = function (oDom)
@@ -9434,6 +9590,8 @@ PopupsContactsViewModel.prototype.onBuild = function (oDom)
 
 	this.selector.init(this.oContentVisible, this.oContentScrollable);
 
+	var self = this;
+
 	ko.computed(function () {
 		var
 			bModalVisibility = this.modalVisibility(),
@@ -9441,12 +9599,23 @@ PopupsContactsViewModel.prototype.onBuild = function (oDom)
 		;
 		this.selector.useKeyboard(bModalVisibility && bUseKeyboardShortcuts);
 	}, this).extend({'notify': 'always'});
+
+	oDom
+		.on('click', '.e-pagenator .e-page', function () {
+			var oPage = ko.dataFor(this);
+			if (oPage)
+			{
+				self.contactsPage(Utils.pInt(oPage.value));
+				self.reloadContactList();
+			}
+		})
+	;
 };
 
 PopupsContactsViewModel.prototype.onShow = function ()
 {
 	kn.routeOff();
-	this.reloadContactList();
+	this.reloadContactList(true);
 };
 
 PopupsContactsViewModel.prototype.onHide = function ()
@@ -10404,118 +10573,7 @@ function MailBoxMessageListViewModel()
 		return '' === sValue ? '' : Utils.i18n('MESSAGE_LIST/SEARCH_RESULT_FOR', {'SEARCH': sValue});
 	});
 
-	this.messageListPagenator = ko.computed(function () {
-
-		var
-			iPrev = 0,
-			iNext = 0,
-			iLimit = 2,
-			aResult = [],
-			iCurrentPage = oData.messageListPage(),
-			iPageCount = oData.messageListPageCount(),
-
-			/**
-			 * @param {number} iIndex
-			 * @param {boolean=} bPush
-			 * @param {string=} sCustomName
-			 */
-			fAdd = function (iIndex, bPush, sCustomName) {
-
-				var oData = {
-					'current': iIndex === iCurrentPage,
-					'name': Utils.isUnd(sCustomName) ? iIndex.toString() : sCustomName.toString(),
-					'custom': Utils.isUnd(sCustomName) ? false : true,
-					'title': Utils.isUnd(sCustomName) ? '' : iIndex.toString(),
-					'value': iIndex.toString()
-				};
-
-				if (Utils.isUnd(bPush) ? true : !!bPush)
-				{
-					aResult.push(oData);
-				}
-				else
-				{
-					aResult.unshift(oData);
-				}
-			}
-		;
-
-		if (1 < iPageCount || (0 < iPageCount && iPageCount < iCurrentPage))
-//		if (0 < iPageCount && 0 < iCurrentPage)
-		{
-			if (iPageCount < iCurrentPage)
-			{
-				fAdd(iPageCount);
-				iPrev = iPageCount;
-				iNext = iPageCount;
-			}
-			else
-			{
-				if (3 >= iCurrentPage || iPageCount - 2 <= iCurrentPage)
-				{
-					iLimit += 2;
-				}
-
-				fAdd(iCurrentPage);
-				iPrev = iCurrentPage;
-				iNext = iCurrentPage;
-			}
-
-			while (0 < iLimit) {
-
-				iPrev -= 1;
-				iNext += 1;
-
-				if (0 < iPrev)
-				{
-					fAdd(iPrev, false);
-					iLimit--;
-				}
-
-				if (iPageCount >= iNext)
-				{
-					fAdd(iNext, true);
-					iLimit--;
-				}
-				else if (0 >= iPrev)
-				{
-					break;
-				}
-			}
-
-			if (3 === iPrev)
-			{
-				fAdd(2, false);
-			}
-			else if (3 < iPrev)
-			{
-				fAdd(Math.round((iPrev - 1) / 2), false, '...');
-			}
-
-			if (iPageCount - 2 === iNext)
-			{
-				fAdd(iPageCount - 1, true);
-			}
-			else if (iPageCount - 2 > iNext)
-			{
-				fAdd(Math.round((iPageCount + iNext) / 2), true, '...');
-			}
-
-			// first and last
-			if (1 < iPrev)
-			{
-				fAdd(1, false);
-			}
-
-			if (iPageCount > iNext)
-			{
-				fAdd(iPageCount, true);
-			}
-		}
-
-		return aResult;
-
-	}, this);
+	this.messageListPagenator = ko.computed(Utils.computedPagenatorHelper(oData.messageListPage, oData.messageListPageCount));
 
 	this.checkAll = ko.computed({
 		'read': function () {
@@ -11152,7 +11210,7 @@ MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
 	});
 
 	oDom
-		.on('click', '.pagenator .page', function () {
+		.on('click', '.e-pagenator .e-page', function () {
 			var oPage = ko.dataFor(this);
 			if (oPage)
 			{
@@ -12834,7 +12892,7 @@ function WebMailDataStorage()
 	
 	this.messageListPageCount = ko.computed(function () {
 		var iPage = Math.ceil(this.messageListCount() / this.messagesPerPage());
-		return 0 === iPage ? 1 : iPage;
+		return 0 >= iPage ? 1 : iPage;
 	}, this);
 
 	this.mainMessageListSearch = ko.computed({