Improve GUI (#1014)

dev/App/Abstract.jsx

@@ -348,6 +348,7 @@ class AbstractApp extends AbstractBoot
 
 		Globals.leftPanelDisabled.subscribe((bValue) => {
 			Globals.$html.toggleClass('rl-left-panel-disabled', bValue);
+			Globals.$html.toggleClass('rl-left-panel-enabled', !bValue);
 		});
 
 		Globals.leftPanelType.subscribe((sValue) => {
@@ -355,6 +356,8 @@ class AbstractApp extends AbstractBoot
 			Globals.$html.toggleClass('rl-left-panel-short', 'short' === sValue);
 		});
 
+		Globals.leftPanelDisabled.valueHasMutated();
+
 		ssm.ready();
 
 		require('Stores/Language').populate();

dev/App/User.jsx

@@ -1072,6 +1072,10 @@ class AppUser extends AbstractApp
 			fSetWidth = (iWidth) => {
 				if (iWidth)
 				{
+					Globals.leftPanelWidth(iWidth);
+
+					Globals.$html.removeClass('rl-resizer');
+
 					oLeft.css({
 						width: '' + iWidth + 'px'
 					});
@@ -1095,6 +1099,7 @@ class AppUser extends AbstractApp
 					fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
 				}
 			},
+
 			fResizeCreateFunction = (oEvent) => {
 				if (oEvent && oEvent.target)
 				{
@@ -1120,9 +1125,18 @@ class AppUser extends AbstractApp
 				{
 					Local.set(sClientSideKeyName, oObject.size.width);
 
+					Globals.leftPanelWidth(oObject.size.width);
+
 					oRight.css({
 						left: '' + oObject.size.width + 'px'
 					});
+
+					oLeft.css({
+						position: '',
+						top: '',
+						left: '',
+						height: ''
+					});
 				}
 			}
 		;

dev/Common/Globals.js

@@ -211,6 +211,7 @@
 
 	Globals.leftPanelDisabled = ko.observable(false);
 	Globals.leftPanelType = ko.observable('');
+	Globals.leftPanelWidth = ko.observable(0);
 
 	// popups
 	Globals.popupVisibilityNames = ko.observableArray([]);

dev/External/ko.js

@@ -20,6 +20,29 @@
 		}
 	;
 
+	ko.bindingHandlers.updateWidth = {
+		'init': function (oElement, fValueAccessor) {
+			var
+				$w = $(window),
+				$oEl = $(oElement),
+				fValue = fValueAccessor(),
+				fInit = function(){
+					fValue($oEl.width());
+					window.setTimeout(function(){
+						fValue($oEl.width());
+					}, 500);
+				};
+			;
+
+			$w.on('resize', fInit);
+			fInit();
+
+			ko.utils.domNodeDisposal.addDisposeCallback(oElement, function () {
+				$w.off('resize', fInit);
+			});
+		}
+	};
+
 	ko.bindingHandlers.editor = {
 		'init': function (oElement, fValueAccessor) {
 

dev/Styles/FolderList.less

@@ -22,16 +22,24 @@
 		padding: 10px 10px 0 @rlLowMargin;
 		color: #fff;
 		z-index: 101;
+
+		html.rl-left-panel-enabled &{
+			overflow: hidden;
+			white-space: nowrap;
+		}
 	}
 
 	.b-footer {
 		position: absolute;
-		bottom: 20px;
+		bottom: 10px;
 		right: 0;
 		left: 0;
-		height: 20px;
+		height: 30px;
 		padding: 0 10px 0 5px;
 		z-index: 101;
+
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	.b-content {
@@ -83,6 +91,22 @@
 				left: 0;
 			}
 
+			.inbox-star-icon {
+				display: none;
+				margin-left: 7px;
+
+				.icon-star {
+					display: none;
+				}
+				.icon-star-empty {
+					opacity: .5;
+				}
+			}
+
+			&.is-inbox .inbox-star-icon {
+				display: inline;
+			}
+
 			padding: 0;
 			padding-left: @folderItemPadding;
 			padding-right: @folderItemPadding;
@@ -158,6 +182,16 @@
 		}
 	}
 
+	&.inbox-is-starred {
+		.icon-star {
+			color: orange;
+			display: inline-block !important;
+		}
+		.icon-star-empty {
+			display: none;
+		}
+	}
+
 	.b-folder-system-item {
 		font-weight: bold;
 	}

dev/Styles/_BootstrapFix.less

@@ -81,6 +81,10 @@ select {
 	padding: 4px 9px;
 }
 
+.btn.btn-nowrap {
+	white-space: nowrap;
+}
+
 .btn.btn-ellipsis {
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -140,11 +144,15 @@ select {
 //}
 
 html.rgba.textshadow {
-	.btn.btn-danger, .btn.btn-success, .btn.btn-primary {
+	.btn.btn-danger, .btn.btn-success, .btn.btn-primary, .btn.btn-warning {
 		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
 	}
 }
 
+.btn.btn-success {
+    background-color:#84AB04;
+}
+
 .btn-toolbar {
 	margin-top: 0;
 	margin-bottom: 0;

dev/View/Popup/Compose.js

@@ -136,6 +136,10 @@
 		this.sendSuccessButSaveError = ko.observable(false);
 		this.savedError = ko.observable(false);
 
+		this.sendButtonSuccess = ko.computed(function () {
+			return !this.sendError() && !this.sendSuccessButSaveError();
+		}, this);
+
 		this.sendErrorDesc = ko.observable('');
 		this.savedErrorDesc = ko.observable('');
 

dev/View/User/MailBox/FolderList.js

@@ -60,6 +60,21 @@
 			return Enums.Focused.FolderList === AppStore.focusedState();
 		});
 
+		this.isInboxStarred = ko.computed(function () {
+			return FolderStore.currentFolder() &&
+				FolderStore.currentFolder().isInbox() &&
+				'is:flagged' === MessageStore.messageListSearch()
+			;
+		});
+
+		this.displayNewText = ko.observable(false);
+		this.displayNewMessageText = ko.observable(false);
+
+		Globals.leftPanelWidth.subscribe(function(v){
+			this.displayNewText(170 < v && 230 >= v);
+			this.displayNewMessageText(230 < v);
+		}, this);
+
 		kn.constructorEnd(this);
 	}
 
@@ -71,7 +86,44 @@
 		this.oContentVisible = $('.b-content', oDom);
 		this.oContentScrollable = $('.content', this.oContentVisible);
 
-		var self = this;
+		var
+			self = this,
+			fSelectFolder = function (oEvent, bStarred) {
+
+				oEvent.preventDefault();
+
+				if (bStarred)
+				{
+					oEvent.stopPropagation();
+				}
+
+				var
+					oFolder = ko.dataFor(this)
+				;
+
+				if (oFolder)
+				{
+					if (Enums.Layout.NoPreview === SettingsStore.layout())
+					{
+						MessageStore.message(null);
+					}
+
+					if (oFolder.fullNameRaw === FolderStore.currentFolderFullNameRaw())
+					{
+						Cache.setFolderHash(oFolder.fullNameRaw, '');
+					}
+
+					if (bStarred)
+					{
+						kn.setHash(Links.mailBox(oFolder.fullNameHash, 1, 'is:flagged'));
+					}
+					else
+					{
+						kn.setHash(Links.mailBox(oFolder.fullNameHash));
+					}
+				}
+			}
+		;
 
 		oDom
 			.on('click', '.b-folders .e-item .e-link .e-collapsed-sign', function (oEvent) {
@@ -91,28 +143,11 @@
 					oEvent.stopPropagation();
 				}
 			})
+			.on('click', '.b-folders .e-item .e-link.selectable .inbox-star-icon', function (oEvent) {
+				fSelectFolder.call(this, oEvent, !self.isInboxStarred());
+			})
 			.on('click', '.b-folders .e-item .e-link.selectable', function (oEvent) {
-
-				oEvent.preventDefault();
-
-				var
-					oFolder = ko.dataFor(this)
-				;
-
-				if (oFolder)
-				{
-					if (Enums.Layout.NoPreview === SettingsStore.layout())
-					{
-						MessageStore.message(null);
-					}
-
-					if (oFolder.fullNameRaw === FolderStore.currentFolderFullNameRaw())
-					{
-						Cache.setFolderHash(oFolder.fullNameRaw, '');
-					}
-
-					kn.setHash(Links.mailBox(oFolder.fullNameHash));
-				}
+				fSelectFolder.call(this, oEvent, false);
 			})
 		;
 
@@ -240,7 +275,6 @@
 	};
 
 	/**
-	 *
 	 * @param {FolderModel} oToFolder
 	 * @param {{helper:jQuery}} oUi
 	 */

rainloop/v/0.0.0/app/localization/webmail/_source.en.yml

@@ -50,7 +50,10 @@ en:
   FOLDER_LIST:
     BUTTON_COMPOSE: "Compose"
     BUTTON_CONTACTS: "Contacts"
+    BUTTON_NEW: "New"
+    BUTTON_NEW_MESSAGE: "New message"
     INBOX_NAME: "Inbox"
+    STARRED_NAME: "Starred"
     SENT_NAME: "Sent"
     DRAFTS_NAME: "Drafts"
     SPAM_NAME: "Spam"

rainloop/v/0.0.0/app/localization/webmail/en_GB.yml

@@ -50,7 +50,10 @@ en_GB:
   FOLDER_LIST:
     BUTTON_COMPOSE: "Compose"
     BUTTON_CONTACTS: "Contacts"
+    BUTTON_NEW: "New"
+    BUTTON_NEW_MESSAGE: "New message"
     INBOX_NAME: "Inbox"
+    STARRED_NAME: "Starred"
     SENT_NAME: "Sent"
     DRAFTS_NAME: "Drafts"
     SPAM_NAME: "Spam"
@@ -620,6 +623,7 @@ en_GB:
     NO_PRIVATE_KEY_FOUND: "No private key found"
     NO_PRIVATE_KEY_FOUND_FOR: "No private key found for \"%EMAIL%\" email"
     ADD_A_PUBLICK_KEY: "Add a public key"
+    SELECT_A_PRIVATE_KEY: "Select a private key"
     UNVERIFIRED_SIGNATURE: "Unverified signature"
     DECRYPTION_ERROR: "OpenPGP decryption error"
     GOOD_SIGNATURE: "Good signature from %USER%"

rainloop/v/0.0.0/app/localization/webmail/en_US.yml

@@ -50,7 +50,10 @@ en_US:
   FOLDER_LIST:
     BUTTON_COMPOSE: "Compose"
     BUTTON_CONTACTS: "Contacts"
+    BUTTON_NEW: "New"
+    BUTTON_NEW_MESSAGE: "New message"
     INBOX_NAME: "Inbox"
+    STARRED_NAME: "Starred"
     SENT_NAME: "Sent"
     DRAFTS_NAME: "Drafts"
     SPAM_NAME: "Spam"
@@ -620,6 +623,7 @@ en_US:
     NO_PRIVATE_KEY_FOUND: "No private key found"
     NO_PRIVATE_KEY_FOUND_FOR: "No private key found for \"%EMAIL%\" email"
     ADD_A_PUBLICK_KEY: "Add a public key"
+    SELECT_A_PRIVATE_KEY: "Select a private key"
     UNVERIFIRED_SIGNATURE: "Unverified signature"
     DECRYPTION_ERROR: "OpenPGP decryption error"
     GOOD_SIGNATURE: "Good signature from %USER%"

rainloop/v/0.0.0/app/localization/webmail/ja_JP.yml

@@ -11,11 +11,11 @@ ja_JP:
     TITLE_SIGN_IN_FACEBOOK: "Facebookアカウントでログイン"
     TITLE_SIGN_IN_TWITTER: "Twitterアカウントでログイン"
     LABEL_FORGOT_PASSWORD: "Forgot password"
-    LABEL_REGISTRATION: "Registration"
+    LABEL_REGISTRATION: "初回登録"
   TOP_TOOLBAR:
     BUTTON_ADD_ACCOUNT: "アカウントを追加"
-    BUTTON_SETTINGS: "アカウント設定"
-    BUTTON_HELP: "Help"
+    BUTTON_SETTINGS: "設定"
+    BUTTON_HELP: "ヘルプ"
     BUTTON_LOGOUT: "ログアウト"
   SEARCH:
     MAIN_INPUT_PLACEHOLDER: "検索"
@@ -24,7 +24,7 @@ ja_JP:
     LABEL_ADV_TO: "宛先"
     LABEL_ADV_SUBJECT: "件名"
     LABEL_ADV_TEXT: "キーワード"
-    LABEL_ADV_HAS_ATTACHMENT: "Has attachment"
+    LABEL_ADV_HAS_ATTACHMENT: "添付ファイルあり"
     LABEL_ADV_HAS_ATTACHMENTS: "添付ファイルあり"
     LABEL_ADV_FLAGGED: "スター付き"
     LABEL_ADV_UNSEEN: "未読メール"
@@ -38,15 +38,15 @@ ja_JP:
     LABEL_ADV_DATE_YEAR: "1年前まで"
     BUTTON_ADV_SEARCH: "検索"
   PREVIEW_POPUP:
-    FULLSCREEN: "Toggle fullscreen"
-    ZOOM: "Zoom in/out"
+    FULLSCREEN: "フルスクリーン"
+    ZOOM: "拡大/縮小"
     CLOSE: "閉じる (Esc)"
     LOADING: "読み込み中..."
     GALLERY_PREV: "前 (Left arrow key)"
     GALLERY_NEXT: "次 (Right arrow key)"
     GALLERY_COUNTER: "%curr% of %total%"
-    IMAGE_ERROR: "<a href=\"%url%\" target=\"_blank\">The image</a> could not be loaded."
-    AJAX_ERROR: "<a href=\"%url%\" target=\"_blank\">The content</a> could not be loaded."
+    IMAGE_ERROR: "<a href=\"%url%\" target=\"_blank\">画像</a> が読み込めませんでした"
+    AJAX_ERROR: "<a href=\"%url%\" target=\"_blank\">コンテンツ</a> が読み込めませんでした"
   FOLDER_LIST:
     BUTTON_COMPOSE: "作成"
     BUTTON_CONTACTS: "連絡先"
@@ -55,33 +55,33 @@ ja_JP:
     DRAFTS_NAME: "下書き"
     SPAM_NAME: "迷惑メール"
     TRASH_NAME: "ごみ箱"
-    ARCHIVE_NAME: "Archive"
+    ARCHIVE_NAME: "アーカイブ"
   QUOTA:
     TITLE: "クォータ使用量"
   MESSAGE_LIST:
     BUTTON_RELOAD: "リスト更新"
     BUTTON_MOVE_TO: "移動"
     BUTTON_DELETE: "削除"
-    BUTTON_ARCHIVE: "Archive"
+    BUTTON_ARCHIVE: "アーカイブ"
     BUTTON_SPAM: "迷惑メールにする"
-    BUTTON_NOT_SPAM: "Not Spam"
-    BUTTON_EMPTY_FOLDER: "フォルダを空に"
+    BUTTON_NOT_SPAM: "迷惑メールを解除"
+    BUTTON_EMPTY_FOLDER: "フォルダを空にする"
     BUTTON_MULTY_FORWARD: "転送"
     BUTTON_DELETE_WITHOUT_MOVE: "完全に削除"
-    BUTTON_MORE: "More"
+    BUTTON_MORE: "その他"
     MENU_SET_SEEN: "既読にする"
     MENU_SET_ALL_SEEN: "すべて既読にする"
     MENU_UNSET_SEEN: "未読にする"
     MENU_SET_FLAG: "スターをつける"
     MENU_UNSET_FLAG: "スターをはずす"
-    MENU_SELECT_ALL: "All"
-    MENU_SELECT_NONE: "None"
+    MENU_SELECT_ALL: "全て"
+    MENU_SELECT_NONE: "選択解除"
     MENU_SELECT_INVERT: "Invert"
     MENU_SELECT_UNSEEN: "未読"
     MENU_SELECT_SEEN: "既読"
     MENU_SELECT_FLAGGED: "Flagged"
     MENU_SELECT_UNFLAGGED: "Unflagged"
-    EMPTY_LIST: "メールは空です。おめでとう！"
+    EMPTY_LIST: "メッセージはありません"
     EMPTY_SEARCH_LIST: "検索条件に一致するメールは見つかりませんでした。高度な検索を試してみてください。"
     SEARCH_RESULT_FOR: "Search results for \"%SEARCH%\""
     BACK_TO_MESSAGE_LIST: "back to message list"

rainloop/v/0.0.0/app/localization/webmail/ru_RU.yml

@@ -50,7 +50,10 @@ ru_RU:
   FOLDER_LIST:
     BUTTON_COMPOSE: "Написать"
     BUTTON_CONTACTS: "Контакты"
+    BUTTON_NEW: "Новое"
+    BUTTON_NEW_MESSAGE: "Написать"
     INBOX_NAME: "Входящие"
+    STARRED_NAME: "Отмеченные"
     SENT_NAME: "Отправленные"
     DRAFTS_NAME: "Черновики"
     SPAM_NAME: "Спам"
@@ -620,6 +623,7 @@ ru_RU:
     NO_PRIVATE_KEY_FOUND: "Приватный ключ не найден"
     NO_PRIVATE_KEY_FOUND_FOR: "Приватный ключ для \"%EMAIL%\" не найден"
     ADD_A_PUBLICK_KEY: "Add a public key"
+    SELECT_A_PRIVATE_KEY: "Выберите секретный ключ"
     UNVERIFIRED_SIGNATURE: "Неподтвержденная сигнатура"
     DECRYPTION_ERROR: "OpenPGP ошибка расшифровки"
     GOOD_SIGNATURE: "Подтвержденная сигнатура для %USER%"

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

@@ -1,15 +1,21 @@
-<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderListFocused,
-	'single-root-inbox': foldersListWithSingleInboxRootFolder}">
-    <div class="b-toolbar btn-toolbar">
-        <a class="btn buttonCompose pull-left" data-tooltip-join="top"
-			data-bind="visible: allowComposer, click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE', css: {'btn-warning': composeInEdit}">
-            <i class="icon-paper-plane"></i>
-        </a>
-        <a class="btn buttonContacts pull-left" data-tooltip-join="top" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
-            <i class="icon-address-book"></i>
-        </a>
-    </div>
-	<div class="b-content opacity-on-panel-disabled" data-bind="visible: allowFolders, nano: true, scrollerShadows: true">
+<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderListFocused, 'single-root-inbox': foldersListWithSingleInboxRootFolder, 'inbox-is-starred': isInboxStarred}">
+	<div class="b-toolbar btn-toolbar">
+		<a class="btn btn-nowrap buttonCompose pull-left" data-tooltip-join="top" data-bind="visible: allowComposer, click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
+			<i class="icon-paper-plane"></i>
+			<span data-bind="visible: displayNewText">
+				&nbsp;&nbsp;
+				<span class="i18n" data-i18n="FOLDER_LIST/BUTTON_NEW"></span>
+			</span>
+			<span data-bind="visible: displayNewMessageText">
+				&nbsp;&nbsp;
+				<span class="i18n" data-i18n="FOLDER_LIST/BUTTON_NEW_MESSAGE"></span>
+			</span>
+		</a>
+		<a class="btn buttonContacts pull-left" data-tooltip-join="top" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+			<i class="icon-address-book"></i>
+		</a>
+	</div>
+	<div class="b-content opacity-on-panel-disabled" data-bind="visible: allowFolders, nano: true, scrollerShadows: true, css: {'inbox-is-starred': isInboxStarred}">
 		<div class="content g-scrollbox" data-scroller-shadows-content>
 			<div class="content-wrapper">
 				<div class="b-folders-system" data-bind="template: { name: 'MailFolderListSystemItem', foreach: folderListSystem }"></div>
@@ -18,24 +24,20 @@
 			</div>
 		</div>
 	</div>
-    <div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
-	<div class="b-footer" data-bind="visible: allowFolders">
-        <nobr>
-	        <div class="btn-toolbar">
-                <div class="btn-group hide-on-panel-disabled">
-                    <a class="btn first" data-bind="click: createFolder">
-                        <i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
-                    </a>
-                    <a class="btn last" data-bind="click: configureFolders">
-                        <i class="icon-cog"></i>
-                    </a>
-                </div>
-                <div class="btn-group">
-                    <a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
-						<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
-                    </a>
-                </div>
-            </div>
-        </nobr>
+	<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
+	<div class="b-footer btn-toolbar" data-bind="visible: allowFolders">
+		<div class="btn-group hide-on-panel-disabled">
+			<a class="btn first" data-bind="click: createFolder">
+				<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
+			</a>
+			<a class="btn last" data-bind="click: configureFolders">
+				<i class="icon-cog"></i>
+			</a>
+		</div>
+		<div class="btn-group">
+			<a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
+				<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
+			</a>
+		</div>
 	</div>
 </div>

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

@@ -1,8 +1,12 @@
 <div class="e-item b-folder-system-item">
-	<a class="e-link" data-bind="droppable: function (oEvent, oUi) { $root.messagesDrop($data, oUi); }, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink }">
+	<a class="e-link" data-bind="droppable: function (oEvent, oUi) { $root.messagesDrop($data, oUi); }, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		&nbsp;
 		<span class="focused-poiner"></span>
 		<span class="name" data-bind="text: localName()"></span>
+		<span class="inbox-star-icon">
+			<i class="icon-star"></i>
+			<i class="icon-star-empty"></i>
+		</span>
 	</a>
 </div>

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

@@ -1,8 +1,8 @@
 <div class="popups">
 	<div class="modal hide b-compose" data-backdrop="static" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
 		<div class="modal-header b-header-toolbar g-ui-user-select-none">
-			<a class="btn btn-large button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
-				<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner animated big': sending(), 'icon-white': sendError() || sendSuccessButSaveError()}"></i>
+			<a class="btn btn-large button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
+				<i class="icon-white" data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner animated big': sending()}"></i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="COMPOSE/BUTTON_SEND"></span>
 			</a>