Added knockoutjs components (step 1)

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

@@ -2427,6 +2427,7 @@ class Actions
 	 */
 	public function DoAdminSettingsUpdate()
 	{
+//		sleep(3);
 //		return $this->DefaultResponse(__FUNCTION__, false);
 
 		$this->IsAdminLoggined();

rainloop/v/0.0.0/app/src/RainLoop/Service.php

@@ -225,9 +225,11 @@ class Service
 			'AppleTouchLink' => $sStaticPrefix.'apple-touch-icon.png',
 			'AppCssLink' => $sStaticPrefix.'css/app'.($bAppCssDebug ? '' : '.min').'.css',
 			'BootJsLink' => $sStaticPrefix.'js/min/boot.js',
+			'ComponentsJsLink' => $sStaticPrefix.'js/'.($bAppJsDebug ? '' : 'min/').'components.js',
 			'LibJsLink' => $sStaticPrefix.'js/min/libs.js',
 			'EditorJsLink' => $sStaticPrefix.'ckeditor/ckeditor.js',
 			'OpenPgpJsLink' => $sStaticPrefix.'js/min/openpgp.min.js',
+			'AppJsCommonLink' => $sStaticPrefix.'js/'.($bAppJsDebug ? '' : 'min/').'common.js',
 			'AppJsLink' => $sStaticPrefix.'js/'.($bAppJsDebug ? '' : 'min/').($bAdmin ? 'admin' : 'app').'.js'
 		);
 
@@ -238,9 +240,11 @@ class Service
 			'{{BaseAppAppleTouchFile}}' => $aData['AppleTouchLink'],
 			'{{BaseAppMainCssLink}}' => $aData['AppCssLink'],
 			'{{BaseAppBootScriptLink}}' => $aData['BootJsLink'],
+			'{{BaseAppComponentsScriptLink}}' => $aData['ComponentsJsLink'],
 			'{{BaseAppLibsScriptLink}}' => $aData['LibJsLink'],
 			'{{BaseAppEditorScriptLink}}' => $aData['EditorJsLink'],
 			'{{BaseAppOpenPgpScriptLink}}' => $aData['OpenPgpJsLink'],
+			'{{BaseAppMainCommonScriptLink}}' => $aData['AppJsCommonLink'],
 			'{{BaseAppMainScriptLink}}' => $aData['AppJsLink'],
 			'{{BaseDir}}' => \in_array($aData['Language'], array('ar', 'he', 'ur')) ? 'rtl' : 'ltr'
 		);

rainloop/v/0.0.0/app/src/RainLoop/ServiceActions.php

@@ -442,6 +442,7 @@ class ServiceActions
 	 */
 	public function ServiceLang()
 	{
+//		sleep(2);
 		$sResult = '';
 		@\header('Content-Type: application/javascript; charset=utf-8');
 
@@ -1070,7 +1071,9 @@ class ServiceActions
 	 */
 	private function compileTemplates($bAdmin = false)
 	{
-		$sHtml = \RainLoop\Utils::CompileTemplates(APP_VERSION_ROOT_PATH.'app/templates/Views/'.($bAdmin ? 'Admin' : 'User'), $this->oActions).
+		$sHtml =
+			\RainLoop\Utils::CompileTemplates(APP_VERSION_ROOT_PATH.'app/templates/Views/Components', $this->oActions, 'Component').
+			\RainLoop\Utils::CompileTemplates(APP_VERSION_ROOT_PATH.'app/templates/Views/'.($bAdmin ? 'Admin' : 'User'), $this->oActions).
 			\RainLoop\Utils::CompileTemplates(APP_VERSION_ROOT_PATH.'app/templates/Views/Common', $this->oActions).
 			$this->oActions->Plugins()->CompileTemplate($bAdmin);
 

rainloop/v/0.0.0/app/src/RainLoop/Utils.php

@@ -245,10 +245,12 @@ class Utils
 
 	/**
 	 * @param string $sDirName
+	 * @param \RainLoop\Actions $oAction
+	 * @param string $sNameSuffix = ''
 	 *
 	 * @return string
 	 */
-	public static function CompileTemplates($sDirName, $oAction)
+	public static function CompileTemplates($sDirName, $oAction, $sNameSuffix = '')
 	{
 		$sResult = '';
 		if (\file_exists($sDirName))
@@ -257,7 +259,7 @@ class Utils
 
 			foreach ($aList as $sName)
 			{
-				$sTemplateName = \substr($sName, 0, -5);
+				$sTemplateName = \substr($sName, 0, -5).$sNameSuffix;
 				$sResult .= '<script id="'.\preg_replace('/[^a-zA-Z0-9]/', '', $sTemplateName).'" type="text/html" data-cfasync="false">'.
 					$oAction->ProcessTemplate($sTemplateName, \file_get_contents($sDirName.'/'.$sName)).'</script>';
 			}

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html

@@ -13,9 +13,15 @@
 				Page Title
 			</label>
 			<div class="controls">
-				<input type="text" class="span5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="value: title, saveTrigger: title.trigger, enable: capa" />
-				<div data-bind="saveTrigger: title.trigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: title,
+						trigger: title.trigger,
+						size: 5,
+						enable: capa
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
@@ -23,9 +29,15 @@
 				Loading Description
 			</label>
 			<div class="controls">
-				<input type="text" class="span5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="value: loadingDesc, saveTrigger: loadingDesc.trigger, enable: capa" />
-				<div data-bind="saveTrigger: loadingDesc.trigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: loadingDesc,
+						trigger: loadingDesc.trigger,
+						size: 5,
+						enable: capa
+					}
+				}"></div>
 			</div>
 		</div>
 		<br />
@@ -37,9 +49,16 @@
 				Logo
 			</label>
 			<div class="controls">
-				<input type="text" class="span5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					placeholder="https://" data-bind="value: loginLogo, saveTrigger: loginLogo.trigger, enable: capa" />
-				<div data-bind="saveTrigger: loginLogo.trigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: loginLogo,
+						trigger: loginLogo.trigger,
+						placeholder: 'https://',
+						size: 5,
+						enable: capa
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
@@ -47,18 +66,26 @@
 				Description
 			</label>
 			<div class="controls">
-				<input type="text" class="span5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="value: loginDescription, saveTrigger: loginDescription.trigger, enable: capa" />
-				<div data-bind="saveTrigger: loginDescription.trigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: loginDescription,
+						trigger: loginDescription.trigger,
+						size: 5,
+						enable: capa
+					}
+				}"></div>
 			</div>
 		</div>
 <!--		<div class="control-group">
-			<label class="control-label"></label>
 			<div class="controls">
-				<label data-bind="click: function () { if (capa) { loginPowered(!loginPowered()); }}">
-					<i data-bind="css: loginPowered() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Show "Powered by RainLoop" link
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Show &quot;Powered by RainLoop&quot; link',
+						value: loginPowered
+					}
+				}"></div>
 			</div>
 		</div>-->
 		<div class="control-group">
@@ -66,8 +93,16 @@
 				Custom CSS
 			</label>
 			<div class="controls">
-				<textarea class="input-xxlarge" data-bind="value: loginCss, saveTrigger: loginCss.trigger, enable: capa" rows="7" spellcheck="true"></textarea>
-				<div style="vertical-align: top;" data-bind="saveTrigger: loginCss.trigger"></div>
+				<div data-bind="component: {
+					name: 'TextArea',
+					params: {
+						value: loginCss,
+						trigger: loginCss.trigger,
+						width: 530,
+						enable: capa,
+						rows: 7
+					}
+				}"></div>
 			</div>
 		</div>
 	</div>

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsContacts.html

@@ -14,18 +14,14 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { enableContacts(!enableContacts()); }">
-					<i data-bind="css: enableContacts() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Enable contacts
-				</label>
-<!--				<label data-bind="click: function () { contactsSharing(!contactsSharing()); }">
-					<i data-bind="css: contactsSharing() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow contacts sharing (disabled)
-				</label>-->
-				<label data-bind="click: function () { contactsSync(!contactsSync()); }">
-					<i data-bind="css: contactsSync() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow contacts sync (with external CardDAV server)
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: enableContacts, label: 'Enable contacts' }
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: contactsSync, label: 'Allow contacts sync (with external CardDAV server)' }
+				}"></div>
 			</div>
 		</div>
 	</div>

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsGeneral.html

@@ -23,7 +23,11 @@
 						<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
 					</span>
 					<span class="flag-name" data-bind="text: mainLanguageFullName, click: selectLanguage"></span>
-					<div data-bind="saveTrigger: languageTrigger"></div>
+					&nbsp;&nbsp;
+					<div data-bind="component: {
+						name: 'SaveTrigger',
+						params: { value: languageTrigger }
+					}"></div>
 				</label>
 			</div>
 		</div>
@@ -32,28 +36,47 @@
 				Theme
 			</label>
 			<div class="controls">
-				<select class="span2" data-bind="options: themesOptions, value: mainTheme, optionsText: 'optText', optionsValue: 'optValue', saveTrigger: themeTrigger"></select>
-				<div data-bind="saveTrigger: themeTrigger"></div>
+				<div data-bind="component: {
+					name: 'Select',
+					params: {
+						options: themesOptions,
+						value: mainTheme,
+						trigger: themeTrigger,
+						optionsText: 'optText',
+						optionsValue: 'optValue',
+						size: 2
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { allowLanguagesOnSettings(!allowLanguagesOnSettings()); }">
-					<i data-bind="css: allowLanguagesOnSettings() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow language selection on settings screen
-				</label>
-				<label data-bind="click: function () { capaThemes(!capaThemes()); }">
-					<i data-bind="css: capaThemes() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow theme selection on settings screen
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Allow language selection on settings screen',
+						value: allowLanguagesOnSettings
+					}
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Allow theme selection on settings screen',
+						value: capaThemes
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label class="inline" data-bind="click: function () { capaGravatar(!capaGravatar()); }">
-					<i data-bind="css: capaGravatar() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow Gravatar
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Allow Gravatar',
+						value: capaGravatar,
+						inline: true
+					}
+				}"></div>
 				(<a class="g-ui-link" href="http://en.gravatar.com/" target="_blank">http://en.gravatar.com/</a>)
 			</div>
 		</div>
@@ -66,8 +89,15 @@
 				size limit
 			</label>
 			<div class="controls">
-				<input class="span1" type="text" maxlength="3" data-bind="value: mainAttachmentLimit, saveTrigger: attachmentLimitTrigger" /> MB
-				<div data-bind="saveTrigger: attachmentLimitTrigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						label: 'MB',
+						value: mainAttachmentLimit,
+						trigger: attachmentLimitTrigger,
+						size: 1
+					}
+				}"></div>
 				<br />
 				<br />
 				<span class="well well-small" data-bind="visible: '' !== uploadDataDesc">
@@ -84,14 +114,20 @@
 		<br />
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { capaAdditionalAccounts(!capaAdditionalAccounts()); }">
-					<i data-bind="css: capaAdditionalAccounts() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow additional accounts
-				</label>
-				<label data-bind="click: function () { capaAdditionalIdentities(!capaAdditionalIdentities()); }">
-					<i data-bind="css: capaAdditionalIdentities() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow additional identities
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Allow additional accounts',
+						value: capaAdditionalAccounts
+					}
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'Allow additional identities',
+						value: capaAdditionalIdentities
+					}
+				}"></div>
 			</div>
 		</div>
 	</div>

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsLogin.html

@@ -8,26 +8,31 @@
 				Default Domain
 			 </label>
 			<div class="controls">
-				<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="value: defaultDomain, saveTrigger: defaultDomainTrigger" />
-				<div data-bind="saveTrigger: defaultDomainTrigger"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: defaultDomain,
+						trigger: defaultDomainTrigger,
+						size: 3
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { determineUserDomain(!determineUserDomain()); }">
-					<i data-bind="css: determineUserDomain() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Try to determine user domain
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: determineUserDomain, label: 'Try to determine user domain' }
+				}"></div>
 				<br />
-				<label data-bind="click: function () { allowLanguagesOnLogin(!allowLanguagesOnLogin()); }">
-					<i data-bind="css: allowLanguagesOnLogin() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Allow language selection on login screen
-				</label>
-				<label data-bind="click: function () { determineUserLanguage(!determineUserLanguage()); }">
-					<i data-bind="css: determineUserLanguage() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Try to determine user language
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: allowLanguagesOnLogin, label: 'Allow language selection on login screen' }
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: determineUserLanguage, label: 'Try to determine user language' }
+				}"></div>
 			</div>
 		</div>
 	</div>

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsPlugins.html

@@ -12,11 +12,10 @@
 	</div>
 
 	<div>
-		<label data-bind="click: function () { enabledPlugins(!enabledPlugins()); }">
-			<i data-bind="css: enabledPlugins() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-			&nbsp;&nbsp;
-			Enable plugins
-		</label>
+		<div data-bind="component: {
+			name: 'Checkbox',
+			params: { value: enabledPlugins, label: 'Enable plugins' }
+		}"></div>
 	</div>
 	<br />
 	<div class="row">

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsSecurity.html

@@ -5,40 +5,38 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { capaTwoFactorAuth(!capaTwoFactorAuth()); }">
-					<i data-bind="css: capaTwoFactorAuth() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					Allow 2-Step Verification (Google Authenticator)
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: capaTwoFactorAuth, label: 'Allow 2-Step Verification (Google Authenticator)' }
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { useLocalProxyForExternalImages(!useLocalProxyForExternalImages()); }">
-					<i data-bind="css: useLocalProxyForExternalImages() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					Use local proxy for external images
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: useLocalProxyForExternalImages, label: 'Use local proxy for external images' }
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { capaOpenPGP(!capaOpenPGP()); }">
-					<i data-bind="css: capaOpenPGP() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					Allow OpenPGP
-					<span style="color:red">(beta)</span>
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: capaOpenPGP, label: 'Allow OpenPGP', inline: true }
+				}"></div>
+				&nbsp;&nbsp;
+				<span style="color:red">(beta)</span>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { verifySslCertificate(!verifySslCertificate()); }">
-					<i data-bind="css: verifySslCertificate() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					Require verification of SSL certificate used (IMAP/SMTP).
-					<span style="color:red">(beta)</span>
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: verifySslCertificate, label: 'Require verification of SSL certificate used (IMAP/SMTP)', inline: true }
+				}"></div>
+				&nbsp;&nbsp;
+				<span style="color:red">(beta)</span>
 			</div>
 		</div>
 		<div class="control-group">

rainloop/v/0.0.0/app/templates/Views/Admin/AdminSettingsSocial.html

@@ -11,21 +11,21 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { googleEnable(!googleEnable()); }">
-					<i data-bind="css: googleEnable() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Enable Google Integration
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: googleEnable, label: 'Enable Google Integration' }
+				}"></div>
 				<div data-bind="visible: googleEnable">
 					<br />
 					<blockquote>
-						<label data-bind="click: function () { googleEnable.auth(!googleEnable.auth()); }">
-							<i data-bind="css: googleEnable.auth() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-							Authentication
-						</label>
-						<label data-bind="click: function () { googleEnable.drive(!googleEnable.drive()); }" style="margin-top: 5px">
-							<i data-bind="css: googleEnable.drive() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-							Google Drive Integration (Compose view)
-						</label>
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: { value: googleEnable.auth, label: 'Authentication' }
+						}"></div>
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: { value: googleEnable.drive, label: 'Google Drive Integration (Compose view)' }
+						}"></div>
 					</blockquote>
 				</div>
 			</div>
@@ -56,9 +56,15 @@
 				Api Key
 			</label>
 			<div class="controls">
-				<input type="text" class="span5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="value: googleApiKey, saveTrigger: googleTrigger3, enable: googleEnable.drive" />
-				<div data-bind="saveTrigger: googleTrigger3"></div>
+				<div data-bind="component: {
+					name: 'Input',
+					params: {
+						value: googleApiKey,
+						trigger: googleTrigger3,
+						size: 5,
+						enable: googleEnable.drive
+					}
+				}"></div>
 				<blockquote style="margin-top: 10px; margin-bottom: 0">
 					<p class="muted">
 						Required for Google Drive File Picker
@@ -73,10 +79,10 @@
 		<div data-bind="if: facebookSupported">
 			<div class="control-group">
 				<div class="controls">
-					<label data-bind="click: function () { facebookEnable(!facebookEnable()); }">
-						<i data-bind="css: facebookEnable() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-						Enable Facebook Integration (Authentication)
-					</label>
+					<div data-bind="component: {
+						name: 'Checkbox',
+						params: { value: facebookEnable, label: 'Enable Facebook Integration (Authentication)' }
+					}"></div>
 				</div>
 			</div>
 			<div class="control-group">
@@ -105,10 +111,10 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { twitterEnable(!twitterEnable()); }">
-					<i data-bind="css: twitterEnable() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Enable Twitter Integration (Authentication)
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: twitterEnable, label: 'Enable Twitter Integration (Authentication)' }
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
@@ -136,10 +142,10 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { dropboxEnable(!dropboxEnable()); }">
-					<i data-bind="css: dropboxEnable() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					Enable Dropbox Integration (Compose view)
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: { value: dropboxEnable, label: 'Enable Dropbox Integration (Compose view)' }
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">

rainloop/v/0.0.0/app/templates/Views/Components/Checkbox.html

@@ -0,0 +1,4 @@
+<label data-bind="click: toggle, css: {'inline': inline}">
+<i data-bind="css: value() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
+&nbsp;<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
+</label>

rainloop/v/0.0.0/app/templates/Views/Components/Input.html

@@ -0,0 +1,14 @@
+<input class="i18n" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder=""
+	data-bind="value: value, attr: {'data-i18n-placeholder': placeholder}, enable: enable, css: className" />
+<!-- ko if: labeled -->
+&nbsp;
+<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
+&nbsp;
+<!-- /ko -->
+<!-- ko if: triggered -->
+&nbsp;
+<div data-bind="component: {
+	name: 'SaveTrigger',
+	params: { value: trigger }
+}"></div>
+<!-- /ko -->

rainloop/v/0.0.0/app/templates/Views/Components/SaveTrigger.html

@@ -0,0 +1,3 @@
+<div class="settings-saved-trigger">
+<i class="icon-spinner animated"></i><i class="icon-remove error"></i><i class="icon-ok success"></i>
+</div>

rainloop/v/0.0.0/app/templates/Views/Components/Select.html

@@ -0,0 +1,13 @@
+<select data-bind="options: options, value: value, optionsText: optionsText, optionsValue: optionsValue, css: className"></select>
+<!-- ko if: labeled -->
+&nbsp;
+<span class="i18n" data-bind="attr: {'data-i18n-text': label}"></span>
+&nbsp;
+<!-- /ko -->
+<!-- ko if: triggered -->
+&nbsp;&nbsp;
+<div data-bind="component: {
+	name: 'SaveTrigger',
+	params: { value: trigger }
+}"></div>
+<!-- /ko -->

rainloop/v/0.0.0/app/templates/Views/Components/TextArea.html

@@ -0,0 +1,9 @@
+<textarea class="i18n" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="true"
+	data-bind="value: value, enable: enable, attr: { rows: rows }, css: className"></textarea>
+<!-- ko if: triggered -->
+&nbsp;
+<div data-bind="component: {
+	name: 'SaveTrigger',
+	params: { value: trigger, verticalAlign: 'top' }
+}"></div>
+<!-- /ko -->

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

@@ -13,7 +13,11 @@
 						<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
 					</span>
 					<span class="flag-name" data-bind="text: mainLanguageFullName, click: selectLanguage"></span>
-					<div data-bind="saveTrigger: languageTrigger"></div>
+					&nbsp;&nbsp;
+					<div data-bind="component: {
+						name: 'SaveTrigger',
+						params: { value: languageTrigger }
+					}"></div>
 				</label>
 			</div>
 		</div>
@@ -43,38 +47,56 @@
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<select class="span2" data-bind="options: mainMessagesPerPageArray, value: mainMessagesPerPage, saveTrigger: mppTrigger" style="width: 70px;"></select>
-				<span class="i18n help-inline" data-i18n-text="SETTINGS_GENERAL/LABEL_MESSAGE_PER_PAGE"></span>
-				<div data-bind="saveTrigger: mppTrigger"></div>
+				<div data-bind="component: {
+					name: 'Select',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_MESSAGE_PER_PAGE',
+						options: mainMessagesPerPageArray,
+						value: mainMessagesPerPage,
+						trigger: mppTrigger,
+						size: 2,
+						width: 70
+					}
+				}"></div>
 			</div>
 		</div>
 		<div class="control-group">
 			<div class="controls">
-				<label data-bind="click: function () { showImages(!showImages()); }">
-					<i data-bind="css: showImages() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_SHOW_IMAGES"></span>
-				</label>
-				<label data-bind="click: function () { useCheckboxesInList(!useCheckboxesInList()); }">
-					<i data-bind="css: useCheckboxesInList() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_USE_CHECKBOXES_IN_LIST"></span>
-				</label>
-				<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>
-				</label>
-				<label data-bind="visible: threading, click: function () { useThreads(!useThreads()); }">
-					<i data-bind="css: useThreads() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_USE_THREADS"></span>
-				</label>
-				<label data-bind="click: function () { replySameFolder(!replySameFolder()); }">
-					<i data-bind="css: replySameFolder() ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'"></i>
-					&nbsp;&nbsp;
-					<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_REPLY_SAME_FOLDER"></span>
-				</label>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_SHOW_IMAGES',
+						value: showImages
+					}
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_USE_CHECKBOXES_IN_LIST',
+						value: useCheckboxesInList
+					}
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_USE_PREVIEW_PANE',
+						value: usePreviewPaneCheckbox
+					}
+				}"></div>
+				<div data-bind="visible: threading, component: {
+					name: 'Checkbox',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_USE_THREADS',
+						value: useThreads
+					}
+				}"></div>
+				<div data-bind="component: {
+					name: 'Checkbox',
+					params: {
+						label: 'SETTINGS_GENERAL/LABEL_REPLY_SAME_FOLDER',
+						value: replySameFolder
+					}
+				}"></div>
 			</div>
 		</div>
 	</div>

rainloop/v/0.0.0/app/templates/Views/User/SettingsThemes.html

@@ -2,7 +2,11 @@
 	<div class="form-horizontal">
 		<div class="legend">
 			<span class="i18n" data-i18n-text="SETTINGS_THEMES/LEGEND_THEMES"></span>
-			<div class="themeTrigger" data-bind="saveTrigger: themeTrigger"></div>
+			&nbsp;&nbsp;
+			<div data-bind="component: {
+				name: 'SaveTrigger',
+				params: { value: themeTrigger }
+			}"></div>
 		</div>
 	</div>
 	<div class="b-themes-list" data-bind="foreach: themesObjects">