From 177dfcb7e5fa7f191ebe9dee0631525fa3c8b26c Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Thu, 12 Jan 2023 16:54:40 +0100
Subject: [PATCH] Improved and solve #847

---
 dev/Styles/User/FolderList.less               |  2 +-
 dev/Styles/User/Layout.less                   | 17 ++++++++++++++
 dev/Styles/User/MessageList.less              | 22 -------------------
 dev/View/User/MailBox/FolderList.js           |  4 ++++
 dev/View/User/MailBox/MessageList.js          |  4 ----
 .../templates/Views/User/MailFolderList.html  |  6 ++---
 6 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less
index e229cf0dd..346cd8039 100644
--- a/dev/Styles/User/FolderList.less
+++ b/dev/Styles/User/FolderList.less
@@ -15,7 +15,7 @@
 	}
 
 	input {
-		width: calc(100% - 37px);
+		width: calc(100% - 8px);
 		margin-left: 4px;
 	}
 
diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less
index 7f3a7b4ae..0a39a5c17 100644
--- a/dev/Styles/User/Layout.less
+++ b/dev/Styles/User/Layout.less
@@ -177,6 +177,23 @@ html.rl-side-preview-pane {
 	border-radius: var(--input-border-radius, 3px) !important;
 }
 
+.search-input-wrp {
+	position: relative;
+}
+.search-input-wrp a {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	margin: 0 7px;
+	z-index: 100;
+	opacity: .4;
+	cursor: pointer;
+
+	&:hover {
+		opacity: .6;
+	}
+}
+
 /* desktop */
 @media screen and (min-width: 1000px) {
 }
diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index df187721c..6259d9785 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -79,13 +79,6 @@ html.rl-no-preview-pane {
 		padding-right: 8px;
 	}
 
-	.btn.buttonClearFolderSearchInput {
-		font-size: 14px;
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-bottom: 4px;
-	}
-
 	.second-toolbar {
 		display: flex;
 		flex-shrink: 0;
@@ -107,8 +100,6 @@ html.rl-no-preview-pane {
 
 	.search-input-wrp {
 		flex-grow: 1;
-		position: relative;
-		text-align: right;
 	}
 
 	.inputSearch {
@@ -116,19 +107,6 @@ html.rl-no-preview-pane {
 		width: 100%;
 	}
 
-	.closeSearch {
-		position: absolute;
-		right: 0;
-		top: 5px;
-		margin: 0 7px;
-		z-index: 100;
-		vertical-align: middle;
-		opacity: .4;
-		&:hover {
-			opacity: .6;
-		}
-	}
-
 	.b-content {
 		height: 100%;
 		padding: 0;
diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js
index 67d4a12e0..3acab9bd1 100644
--- a/dev/View/User/MailBox/FolderList.js
+++ b/dev/View/User/MailBox/FolderList.js
@@ -206,6 +206,10 @@ export class MailFolderList extends AbstractViewLeft {
 		showMessageComposer();
 	}
 
+	clearFolderSearch() {
+		foldersFilter('');
+	}
+
 	createFolder() {
 		showScreenPopup(FolderCreatePopupView);
 	}
diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js
index 30e5b29eb..104876975 100644
--- a/dev/View/User/MailBox/MessageList.js
+++ b/dev/View/User/MailBox/MessageList.js
@@ -818,10 +818,6 @@ export class MailMessageList extends AbstractViewRight {
 		showScreenPopup(AdvancedSearchPopupView, [MessagelistUserStore.mainSearch()]);
 	}
 
-	clearFolderSearchClick() {
-		document.getElementById("folderSearchInput").value = "";
-	}
-
 	groupSearch(group) {
 		group.search && MessagelistUserStore.mainSearch(group.search);
 	}
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
index 5dc009132..2c8d3f298 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
@@ -20,9 +20,9 @@
 			</li>
 		</ul>
 		<hr>
-		<div class="search-input-wrp">
-			<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
-			<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput">✕</a>
+		<div class="search-input-wrp" data-bind="visible: foldersFilterVisible">
+			<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter" data-i18n="[placeholder]GLOBAL/SEARCH">
+			<a data-bind="click: clearFolderSearch, visible: foldersFilter">✕</a>
 		</div>
 		<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
 		<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>