"Use preview pane" settings refactoring (Layout)

dev/Common/Utils.js

@@ -750,10 +750,13 @@ Utils.initDataConstructorBySettings = function (oData)
 	oData.desktopNotifications = ko.observable(false);
 	oData.useThreads = ko.observable(true);
 	oData.replySameFolder = ko.observable(true);
-	oData.usePreviewPane = ko.observable(true);
-	oData.layout = ko.observable(Enums.Layout.SidePreview);
 	oData.useCheckboxesInList = ko.observable(true);
 	
+	oData.layout = ko.observable(Enums.Layout.SidePreview);
+	oData.usePreviewPane = ko.computed(function () {
+		return Enums.Layout.NoPreview !== oData.layout();
+	});
+
 	oData.interfaceAnimation.subscribe(function (sValue) {
 		if (Globals.bMobileDevice || sValue === Enums.InterfaceAnimation.None)
 		{

dev/Screens/MailBox.js

@@ -49,7 +49,7 @@ MailBoxScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch, bPrevie
 {
 	if (Utils.isUnd(bPreview) ? false : !!bPreview)
 	{
-		if (!RL.data().usePreviewPane() && !RL.data().message())
+		if (Enums.Layout.NoPreview === RL.data().layout() && !RL.data().message())
 		{
 			RL.historyBack();
 		}
@@ -70,7 +70,7 @@ MailBoxScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch, bPrevie
 				.messageListSearch(sSearch)
 			;
 
-			if (!oData.usePreviewPane() && oData.message())
+			if (Enums.Layout.NoPreview === oData.layout() && oData.message())
 			{
 				oData.message(null);
 				oData.messageFullScreenMode(false);
@@ -110,14 +110,14 @@ MailBoxScreen.prototype.onStart = function ()
 		RL.remote().appDelayStart(Utils.emptyFunction);
 	}, 35000);
 
-	$html.toggleClass('rl-no-preview-pane', !oData.usePreviewPane());
+	$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === oData.layout());
 
 	oData.folderList.subscribe(fResizeFunction);
 	oData.messageList.subscribe(fResizeFunction);
 	oData.message.subscribe(fResizeFunction);
 
-	oData.usePreviewPane.subscribe(function (bValue) {
+	oData.layout.subscribe(function (nValue) {
-		$html.toggleClass('rl-no-preview-pane', !bValue);
+		$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === nValue);
 	});
 	
 	oData.foldersInboxUnreadCount.subscribe(function () {

dev/Settings/General.js

@@ -17,8 +17,8 @@ function SettingsGeneral()
 	this.threading = oData.threading;
 	this.useThreads = oData.useThreads;
 	this.replySameFolder = oData.replySameFolder;
-	this.usePreviewPane = oData.usePreviewPane;
 	this.layout = oData.layout;
+	this.usePreviewPane = oData.usePreviewPane;
 	this.useCheckboxesInList = oData.useCheckboxesInList;
 	this.allowLanguagesOnSettings = oData.allowLanguagesOnSettings;
 
@@ -43,6 +43,11 @@ function SettingsGeneral()
 
 Utils.addSettingsViewModel(SettingsGeneral, 'SettingsGeneral', 'SETTINGS_LABELS/LABEL_GENERAL_NAME', 'general', true);
 
+SettingsGeneral.prototype.toggleLayout = function ()
+{
+	this.layout(Enums.Layout.NoPreview === this.layout() ? Enums.Layout.SidePreview : Enums.Layout.NoPreview);
+};
+
 SettingsGeneral.prototype.onBuild = function ()
 {
 	var self = this;
@@ -127,15 +132,6 @@ SettingsGeneral.prototype.onBuild = function ()
 			});
 		});
 
-		oData.usePreviewPane.subscribe(function (bValue) {
-
-			oData.messageList([]);
-
-			RL.remote().saveSettings(Utils.emptyFunction, {
-				'UsePreviewPane': bValue ? '1' : '0'
-			});
-		});
-		
 		oData.layout.subscribe(function (nValue) {
 
 			oData.messageList([]);

dev/Storages/AbstractData.js

@@ -11,6 +11,7 @@ function AbstractData()
 AbstractData.prototype.populateDataOnStart = function()
 {
 	var
+		mLayout = Utils.pInt(RL.settingsGet('Layout')),
 		aLanguages = RL.settingsGet('Languages'),
 		aThemes = RL.settingsGet('Themes')
 	;
@@ -48,10 +49,14 @@ AbstractData.prototype.populateDataOnStart = function()
 	this.desktopNotifications(!!RL.settingsGet('DesktopNotifications'));
 	this.useThreads(!!RL.settingsGet('UseThreads'));
 	this.replySameFolder(!!RL.settingsGet('ReplySameFolder'));
-	this.usePreviewPane(!!RL.settingsGet('UsePreviewPane'));
-	this.layout(!!RL.settingsGet('UsePreviewPane') ? Enums.Layout.SidePreview : Enums.Layout.NoPreview); // TODO
 	this.useCheckboxesInList(!!RL.settingsGet('UseCheckboxesInList'));
 	
+	this.layout(Enums.Layout.SidePreview);
+	if (-1 < Utils.inArray(mLayout, [Enums.Layout.NoPreview, Enums.Layout.SidePreview, Enums.Layout.BottomPreview]))
+	{
+		this.layout(mLayout);
+	}
+
 	this.facebookEnable(!!RL.settingsGet('AllowFacebookSocial'));
 	this.facebookAppID(RL.settingsGet('FacebookAppID'));
 	this.facebookAppSecret(RL.settingsGet('FacebookAppSecret'));

dev/ViewModels/MailBoxFolderListViewModel.js

@@ -42,15 +42,19 @@ MailBoxFolderListViewModel.prototype.onBuild = function (oDom)
 
 			oEvent.preventDefault();
 
-			var oFolder = ko.dataFor(this);
+			var
+				oData = RL.data(),
+				oFolder = ko.dataFor(this)
+			;
+
 			if (oFolder)
 			{
-				if (!RL.data().usePreviewPane())
+				if (Enums.Layout.NoPreview === oData.layout())
 				{
-					RL.data().message(null);
+					oData.message(null);
 				}
 				
-				if (oFolder.fullNameRaw === RL.data().currentFolderFullNameRaw())
+				if (oFolder.fullNameRaw === oData.currentFolderFullNameRaw())
 				{
 					RL.cache().setFolderHash(oFolder.fullNameRaw, '');
 				}

dev/ViewModels/MailBoxMessageViewViewModel.js

@@ -28,6 +28,7 @@ function MailBoxMessageViewViewModel()
 	this.useThreads = oData.useThreads;
 	this.replySameFolder = oData.replySameFolder;
 	this.layout = oData.layout;
+	this.usePreviewPane = oData.usePreviewPane;
 	this.isMessageSelected = oData.isMessageSelected;
 	this.messageActiveDom = oData.messageActiveDom;
 	this.messageError = oData.messageError;

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -1104,7 +1104,7 @@ class Actions
 		$aResult['DesktopNotifications'] = false;
 		$aResult['UseThreads'] = false;
 		$aResult['ReplySameFolder'] = false;
-		$aResult['UsePreviewPane'] = (bool) $oConfig->Get('webmail', 'use_preview_pane', true);
+		$aResult['Layout'] = \RainLoop\Enumerations\Layout::SIDE_PREVIEW;
 		$aResult['UseCheckboxesInList'] = true;
 		$aResult['DisplayName'] = '';
 		$aResult['ReplyTo'] = '';
@@ -1139,7 +1139,7 @@ class Actions
 			$aResult['DesktopNotifications'] = (bool) $oSettings->GetConf('DesktopNotifications', $aResult['DesktopNotifications']);
 			$aResult['UseThreads'] = (bool) $oSettings->GetConf('UseThreads', $aResult['UseThreads']);
 			$aResult['ReplySameFolder'] = (bool) $oSettings->GetConf('ReplySameFolder', $aResult['ReplySameFolder']);
-			$aResult['UsePreviewPane'] = (bool) $oSettings->GetConf('UsePreviewPane', $aResult['UsePreviewPane']);
+			$aResult['Layout'] = (int) $oSettings->GetConf('Layout', $aResult['Layout']);
 			$aResult['UseCheckboxesInList'] = (bool) $oSettings->GetConf('UseCheckboxesInList', $aResult['UseCheckboxesInList']);
 			$aResult['InterfaceAnimation'] = (string) $oSettings->GetConf('InterfaceAnimation', $aResult['InterfaceAnimation']);
 			$aResult['CustomThemeType'] = (string) $oSettings->GetConf('CustomThemeType', $aResult['CustomThemeType']);
@@ -3071,6 +3071,12 @@ class Actions
 			return (int) (\in_array($iValue, array(10, 20, 30, 50, 100, 150, 200, 300)) ? $iValue : 20);
 		});
 		
+		$this->setSettingsFromParams($oSettings, 'Layout', 'int', function ($iValue) {
+			return (int) (\in_array((int) $iValue, array(\RainLoop\Enumerations\Layout::NO_PREVIW,
+				\RainLoop\Enumerations\Layout::SIDE_PREVIEW, \RainLoop\Enumerations\Layout::BOTTOM_PREVIEW)) ?
+					$iValue : \RainLoop\Enumerations\Layout::SIDE_PREVIEW);
+		});
+
 		$this->setSettingsFromParams($oSettings, 'EditorDefaultType', 'string');
 		$this->setSettingsFromParams($oSettings, 'ShowImages', 'bool');
 		$this->setSettingsFromParams($oSettings, 'ContactsAutosave', 'bool');
@@ -3084,8 +3090,6 @@ class Actions
 		$this->setSettingsFromParams($oSettings, 'DesktopNotifications', 'bool');
 		$this->setSettingsFromParams($oSettings, 'UseThreads', 'bool');
 		$this->setSettingsFromParams($oSettings, 'ReplySameFolder', 'bool');
-
-		$this->setSettingsFromParams($oSettings, 'UsePreviewPane', 'bool');
 		$this->setSettingsFromParams($oSettings, 'UseCheckboxesInList', 'bool');
 
 		$this->setSettingsFromParams($oSettings, 'DisplayName', 'string');

rainloop/v/0.0.0/app/libraries/RainLoop/Config/Application.php

@@ -70,8 +70,6 @@ class Application extends \RainLoop\Config\AbstractConfig
 				'allow_additional_accounts'		=> array(true, ''),
 				'allow_identities'				=> array(true, ''),
 
-				'use_preview_pane'		=> array(true, 'Whether message preview pane should be used'),
-				 
 				'messages_per_page'		=> array(20, ' Number of messages displayed on page by default'),
 
 				'editor_default_type'	=> array('Html', 'Editor mode used by default (Html or Plain)'),

rainloop/v/0.0.0/app/libraries/RainLoop/Enumerations/Layout.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace RainLoop\Enumerations;
+
+class Layout
+{
+	const NO_PREVIW = 0;
+	const SIDE_PREVIEW = 1;
+	const BOTTOM_PREVIEW = 2;
+}

rainloop/v/0.0.0/app/templates/Views/SettingsGeneral.html

@@ -87,7 +87,7 @@
 					  
 					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_USE_CHECKBOXES_IN_LIST"></span>
 				</label>
-				<label data-bind="click: function () { usePreviewPane(!usePreviewPane()); }">
+				<label data-bind="click: toggleLayout">
 					<i data-bind="css: usePreviewPane() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
 					&nbsp;&nbsp;
 					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_USE_PREVIEW_PANE"></span>

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

@@ -1377,10 +1377,13 @@ Utils.initDataConstructorBySettings = function (oData)
 	oData.desktopNotifications = ko.observable(false);
 	oData.useThreads = ko.observable(true);
 	oData.replySameFolder = ko.observable(true);
-	oData.usePreviewPane = ko.observable(true);
-	oData.layout = ko.observable(Enums.Layout.SidePreview);
 	oData.useCheckboxesInList = ko.observable(true);
 	
+	oData.layout = ko.observable(Enums.Layout.SidePreview);
+	oData.usePreviewPane = ko.computed(function () {
+		return Enums.Layout.NoPreview !== oData.layout();
+	});
+
 	oData.interfaceAnimation.subscribe(function (sValue) {
 		if (Globals.bMobileDevice || sValue === Enums.InterfaceAnimation.None)
 		{
@@ -6257,6 +6260,7 @@ function AbstractData()
 AbstractData.prototype.populateDataOnStart = function()
 {
 	var
+		mLayout = Utils.pInt(RL.settingsGet('Layout')),
 		aLanguages = RL.settingsGet('Languages'),
 		aThemes = RL.settingsGet('Themes')
 	;
@@ -6294,10 +6298,14 @@ AbstractData.prototype.populateDataOnStart = function()
 	this.desktopNotifications(!!RL.settingsGet('DesktopNotifications'));
 	this.useThreads(!!RL.settingsGet('UseThreads'));
 	this.replySameFolder(!!RL.settingsGet('ReplySameFolder'));
-	this.usePreviewPane(!!RL.settingsGet('UsePreviewPane'));
-	this.layout(!!RL.settingsGet('UsePreviewPane') ? Enums.Layout.SidePreview : Enums.Layout.NoPreview); // TODO
 	this.useCheckboxesInList(!!RL.settingsGet('UseCheckboxesInList'));
 	
+	this.layout(Enums.Layout.SidePreview);
+	if (-1 < Utils.inArray(mLayout, [Enums.Layout.NoPreview, Enums.Layout.SidePreview, Enums.Layout.BottomPreview]))
+	{
+		this.layout(mLayout);
+	}
+
 	this.facebookEnable(!!RL.settingsGet('AllowFacebookSocial'));
 	this.facebookAppID(RL.settingsGet('FacebookAppID'));
 	this.facebookAppSecret(RL.settingsGet('FacebookAppSecret'));

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

@@ -1377,10 +1377,13 @@ Utils.initDataConstructorBySettings = function (oData)
 	oData.desktopNotifications = ko.observable(false);
 	oData.useThreads = ko.observable(true);
 	oData.replySameFolder = ko.observable(true);
-	oData.usePreviewPane = ko.observable(true);
-	oData.layout = ko.observable(Enums.Layout.SidePreview);
 	oData.useCheckboxesInList = ko.observable(true);
 	
+	oData.layout = ko.observable(Enums.Layout.SidePreview);
+	oData.usePreviewPane = ko.computed(function () {
+		return Enums.Layout.NoPreview !== oData.layout();
+	});
+
 	oData.interfaceAnimation.subscribe(function (sValue) {
 		if (Globals.bMobileDevice || sValue === Enums.InterfaceAnimation.None)
 		{
@@ -11246,15 +11249,19 @@ MailBoxFolderListViewModel.prototype.onBuild = function (oDom)
 
 			oEvent.preventDefault();
 
-			var oFolder = ko.dataFor(this);
+			var
+				oData = RL.data(),
+				oFolder = ko.dataFor(this)
+			;
+
 			if (oFolder)
 			{
-				if (!RL.data().usePreviewPane())
+				if (Enums.Layout.NoPreview === oData.layout())
 				{
-					RL.data().message(null);
+					oData.message(null);
 				}
 				
-				if (oFolder.fullNameRaw === RL.data().currentFolderFullNameRaw())
+				if (oFolder.fullNameRaw === oData.currentFolderFullNameRaw())
 				{
 					RL.cache().setFolderHash(oFolder.fullNameRaw, '');
 				}
@@ -12266,6 +12273,7 @@ function MailBoxMessageViewViewModel()
 	this.useThreads = oData.useThreads;
 	this.replySameFolder = oData.replySameFolder;
 	this.layout = oData.layout;
+	this.usePreviewPane = oData.usePreviewPane;
 	this.isMessageSelected = oData.isMessageSelected;
 	this.messageActiveDom = oData.messageActiveDom;
 	this.messageError = oData.messageError;
@@ -12693,8 +12701,8 @@ function SettingsGeneral()
 	this.threading = oData.threading;
 	this.useThreads = oData.useThreads;
 	this.replySameFolder = oData.replySameFolder;
-	this.usePreviewPane = oData.usePreviewPane;
 	this.layout = oData.layout;
+	this.usePreviewPane = oData.usePreviewPane;
 	this.useCheckboxesInList = oData.useCheckboxesInList;
 	this.allowLanguagesOnSettings = oData.allowLanguagesOnSettings;
 
@@ -12719,6 +12727,11 @@ function SettingsGeneral()
 
 Utils.addSettingsViewModel(SettingsGeneral, 'SettingsGeneral', 'SETTINGS_LABELS/LABEL_GENERAL_NAME', 'general', true);
 
+SettingsGeneral.prototype.toggleLayout = function ()
+{
+	this.layout(Enums.Layout.NoPreview === this.layout() ? Enums.Layout.SidePreview : Enums.Layout.NoPreview);
+};
+
 SettingsGeneral.prototype.onBuild = function ()
 {
 	var self = this;
@@ -12803,15 +12816,6 @@ SettingsGeneral.prototype.onBuild = function ()
 			});
 		});
 
-		oData.usePreviewPane.subscribe(function (bValue) {
-
-			oData.messageList([]);
-
-			RL.remote().saveSettings(Utils.emptyFunction, {
-				'UsePreviewPane': bValue ? '1' : '0'
-			});
-		});
-		
 		oData.layout.subscribe(function (nValue) {
 
 			oData.messageList([]);
@@ -13684,6 +13688,7 @@ function AbstractData()
 AbstractData.prototype.populateDataOnStart = function()
 {
 	var
+		mLayout = Utils.pInt(RL.settingsGet('Layout')),
 		aLanguages = RL.settingsGet('Languages'),
 		aThemes = RL.settingsGet('Themes')
 	;
@@ -13721,10 +13726,14 @@ AbstractData.prototype.populateDataOnStart = function()
 	this.desktopNotifications(!!RL.settingsGet('DesktopNotifications'));
 	this.useThreads(!!RL.settingsGet('UseThreads'));
 	this.replySameFolder(!!RL.settingsGet('ReplySameFolder'));
-	this.usePreviewPane(!!RL.settingsGet('UsePreviewPane'));
-	this.layout(!!RL.settingsGet('UsePreviewPane') ? Enums.Layout.SidePreview : Enums.Layout.NoPreview); // TODO
 	this.useCheckboxesInList(!!RL.settingsGet('UseCheckboxesInList'));
 	
+	this.layout(Enums.Layout.SidePreview);
+	if (-1 < Utils.inArray(mLayout, [Enums.Layout.NoPreview, Enums.Layout.SidePreview, Enums.Layout.BottomPreview]))
+	{
+		this.layout(mLayout);
+	}
+
 	this.facebookEnable(!!RL.settingsGet('AllowFacebookSocial'));
 	this.facebookAppID(RL.settingsGet('FacebookAppID'));
 	this.facebookAppSecret(RL.settingsGet('FacebookAppSecret'));
@@ -16364,7 +16373,7 @@ MailBoxScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch, bPrevie
 {
 	if (Utils.isUnd(bPreview) ? false : !!bPreview)
 	{
-		if (!RL.data().usePreviewPane() && !RL.data().message())
+		if (Enums.Layout.NoPreview === RL.data().layout() && !RL.data().message())
 		{
 			RL.historyBack();
 		}
@@ -16385,7 +16394,7 @@ MailBoxScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch, bPrevie
 				.messageListSearch(sSearch)
 			;
 
-			if (!oData.usePreviewPane() && oData.message())
+			if (Enums.Layout.NoPreview === oData.layout() && oData.message())
 			{
 				oData.message(null);
 				oData.messageFullScreenMode(false);
@@ -16425,14 +16434,14 @@ MailBoxScreen.prototype.onStart = function ()
 		RL.remote().appDelayStart(Utils.emptyFunction);
 	}, 35000);
 
-	$html.toggleClass('rl-no-preview-pane', !oData.usePreviewPane());
+	$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === oData.layout());
 
 	oData.folderList.subscribe(fResizeFunction);
 	oData.messageList.subscribe(fResizeFunction);
 	oData.message.subscribe(fResizeFunction);
 
-	oData.usePreviewPane.subscribe(function (bValue) {
+	oData.layout.subscribe(function (nValue) {
-		$html.toggleClass('rl-no-preview-pane', !bValue);
+		$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === nValue);
 	});
 	
 	oData.foldersInboxUnreadCount.subscribe(function () {