Advanced message search

[sazanof]

Signed-off-by: Mikhail Sazanov [email protected]

Hello! I would like to discuss the improvement related to the search for emails by sender, recipient, cc, bcc, subject of the letter, as well as by tags.

This is a PR draft, because, ideally, I would also like to search through the body of the letter. I looked at the code and realized that the body of the letter is searched here: https://github.com/nextcloud/mail/blob/fe00d8ba4f14554774df6bcecfeb64da09b526b5/lib/Service/Search/MailSearch.php#L168 If &filter=my text is passed to the URL request, 2 search tokens will be generated and passed to this method ($query->getTextTokens())

However, there is a problem that I haven't figured out how to solve yet: I get the exception String contains non-ASCII characters.. Tested with Cyrillic characters. Moreover, if you write one word, there is no mistake. I looked at the ASCII characters table and all the characters used in the query are there. This is the first problem and perhaps the most important. Can you advise on this?

Also, in order to correctly search for a match in the topic, I replace the space with "+" so that the $query->addTextToken() method does not work. I can't say that this is a super solution, but that's how it is... But the search occurs clearly by the phrase.

I also didn't understand how to search by imap_label directly on the IMAP server. =(

The whole search uses the database, but I would like to add another switch "Message body"

I placed the search bar in an obvious place. I remember there was a PR https://github.com/nextcloud/contacts/pull/2711

And I read several messages, that this place will be occupied by other buttons. However, it seems to me that the most optimal place here is for searching (in contacts and mail).

If you are interested in PR, I would ask you to check the operation of this functionality and discuss / get tips for further improvement. Thank you!

[sazanof]

also added the ability to pre-filter by type "And": unread, important, favorites

[JuliaKirschenheuter]

That is a great feature! @nimishavijay what do you think design-wise?

[nimishavijay]

At first glance it looks really nice :) The placement makes sense to me, and it seems like it would search only within the current mailbox which is open? For eg, if you are in "Sent" then it would search through only "Sent" and not in "Inbox", is that correct?

I am not able to give more detailed feedback as I don't fully understand the language, could you please post screenshots in English so it is easier for me and anyone else to also review? :)

[sazanof]

@nimishavijay hello!

Yes, the search takes place in the folder that the user has open, with the exception of the folder "Priority" and "All" mailboxes

search by "And" conditions. if the "unread" and "important" checkboxes are marked, then as a result we are looking for unread letters marked "important"

[nimishavijay]

Ah thank you so much :) It looks great! The placement and flow make sense to me, and as far as I understand that space would be occupied by other actions only during multiselect, and I think that's okay :)

Visually also it looks pretty good :) Only minor feedback from my end

• The icon for filter could be an MDI tune icon
• Instead of a toggle for the subject could it be a text input field, with a checkbox below that says "No subject" or something like that
• Additionally: if you entered text in the search field and then click on the filter icon, the subject could be prefilled with the value you entered
• I missed the "Important, unread, favourites" section in the beginning, possibly because it looks like a heading due to the placement. We could move it down below to the end, with the label "Marked as" and the 3 checkboxes
• For the "Search" and "Reset" buttons, it would be more in line with NC design if
  • the 2 buttons are justified justified to the right (right now they are at the center of the modal)
  • the primary button (Search) is on the right of the secondary button (Reset)
• Also I'm thinking we can replace the icon for "Reset" with an MDI replay icon or we could possibly keep the same icon and change the wording to "Clear", not sure about which to go with. Any preferences @jancborchardt?
• If possible we could also have a "Has attachments" checkbox? Could be pretty useful and Gmail also has one :)

Really nice work! :)

[jancborchardt]

Great feedback @nimishavijay, nothing to add! :)

Also I'm thinking we can replace the icon for "Reset" with an MDI replay icon or we could possibly keep the same icon and change the wording to "Clear", not sure about which to go with. Any preferences @jancborchardt?

Agree with your proposal of changing the wording to "Clear".

[sazanof]

@nimishavijay @jancborchardt HELLO!!!)

I removed the "Theme" switch altogether. it was initially present, as I was thinking of adding a "Body" switch in the future. So that you can choose why to search in the query: Subject - off Body - on

But since it's not possible to search through the body now, what's the point of one switch? Therefore, I think that by default, what was written in the search bar is searched in the Subject

please give feedback about corrected design =)

PS I will also try to make a filter by search date (sentdate)

[sazanof]

Hello everyone I will be glad if you take a look!

[nimishavijay]

Nice work! Super cool with the datetime picker :D

A few tiny changes:

• "Date interval" --> "Date"
• For the date time picker: How about instead of one field there are 2 separate fields for "from" and "to" dates on the same line? This way only one datetime picker is shown at a time so it's less busy :)
• "Search" button on the right of "Clear" button
• Clear button actually does look better with your original MDI close icon so we can so with that :)
• The entire "Marked as" row can be moved to the bottom, and we can also move "Has attachments" to the next row

Therefore, I think that by default, what was written in the search bar is searched in the Subject

This behaviour makes sense, I think we can also include the subject input field in the modal to easily make changes to the subject if needed. It can be the first item.

Really really nice work :)

[sazanof]

@nimishavijay Thanks for the feedback! Take a look, give comments, please =)

[nimishavijay]

Looks great now! Only a couple of tiny changes:

• [x] "Text" --> "Subject"
• [x] We can remove the trailing ellipses ("...") from the placeholder text in the fields
• [x] Swap the positions of "Search" and "Clear" buttons
• [x] Many other clients don't have a time picker in their search so I think we can get rid of it
• [x] "Pick a date and time" --> "Pick a start date" and "Pick an end date"

[sazanof]

Hello! @nimishavijay "Text" --> "Subject" - DONE We can remove the trailing ellipses ("...") from the placeholder text in the fields - DONE Swap the positions of "Search" and "Clear" buttons (they always jump over each other) - DONE Many other clients don't have a time picker in their search so I think we can get rid of it - DONE "Pick a date and time" --> "Pick a start date" and "Pick an end date" ......... I think it is not possible to change placeholder text without make changes in component https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L305-L322

What else?

[sazanof]

Hi, @jancborchardt ! Thank you for review! Surprize after updates =) Now it remains to change the header a little and push the search here =) I'm thinking of limiting myself to the search icon or showing the panel by clicking "search" icon. Do you have any ideas?

The date placeholders would be more understandable as "Pick start date" and "Pick end date"

I think it is not possible to change placeholder text without make changes in component https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/NcDatetimePicker/NcDatetimePicker.vue#L310-L327

[jancborchardt]

Now it remains to change the header a little and push the search here =)

Right, so now that we add the search, I'd say you can move the "New message" and "Refresh" function back into the left navigation, and the search bar can take the top spot in the message list (next to the nav toggle).

We only moved the New message and refresh button over there since we had awkward empty space. But since the search searches inside a folder and filters the message list, it makes sense to also place it above the message list. :)

[GretaD]

• [ ] Can the "x" close button also be placed inside the modal on the top right, or is that a component thing cc @GretaD ?

in this case is just an icon

[sazanof]

We only moved the New message and refresh button over there since we had awkward empty space.

You see, the search only appears in individual folders. It does not appear on the priority inbox page.

OK, let's rock anyway

[sazanof]

@jancborchardt I mean that priority inbox starts looks like this

Here we got again bug with burger-icon (collapse navigation)

What if (for ex) to do like this (centered)?

and in other maiboxes like it was earler:

What do you think?

[sazanof]

Only minimal feedback:

@jancborchardt slightly corrected, please take a look

• [x] The modal needs a title (h2), inside the modal "Search in mailbox"
• [x] Can the "x" close button also be placed inside the modal on the top right, or is that a component thing cc @GretaD ?
• [x] The placeholder of "Subject" can then be changed to "Search term"
• [x] The "Select recipient" placeholder could be individual to the field, like:
• [x] From: "Select sender"
• [x] To: "Select recipient"
• [x] Cc: "Select cc recipient"
• [x] Bcc: "Select bcc recipient"
• [x] On the bottom "Favorite" is better as singular – "Marked as favorite"

canceled:

The date placeholders would be more understandable as "Pick start date" and "Pick end date" https://github.com/nextcloud/mail/pull/6546#issuecomment-1227453155

[sazanof]

Help! Well, after update code to NcComponentTitle.vue from ComponentTitle.vue there are some visual inconsistencies with components Will this be corrected in the nexctoud-vue repository, or should I fix it here?

[sazanof]

OMG.OMG.OMG.

Perhaps we need to edit the appearance of the multiselect centrally, and not in each component?

[st3iny]

Help! Well, after update code to NcComponentTitle.vue from ComponentTitle.vue there are some visual inconsistencies with components Will this be corrected in the nexctoud-vue repository, or should I fix it here?

Don't worry, this is already fixed in nextcloud-vue.

[sazanof]

So, conflicts solved, css fixrd a little

[st3iny]

I'm not sure why the php tests fail. I'll investigate it a bit.

In the meantime, could you please fix all static analysis issues in your php code changes? https://github.com/nextcloud/mail/actions/runs/3255416357/jobs/5344711652

[sazanof]

@st3iny Thank you for help.

into one

I hope I did everything right

[miaulalala]

Thanks so much for your work, it is impressive!!!!! :partying_face:

[szaimen]

🎉🎉🎉🎉🎉