[pmg-devel] [PATCH pmg-gui] fix #2677: show more info on multiple selected mails

[Dominik Csapak]

On 4/22/20 5:27 PM, Thomas Lamprecht wrote:
> On 4/22/20 10:26 AM, Dominik Csapak wrote:
>> show how many mails are selected, and a short overview like this:
>>
>> sender1
>>   subject1
>>   subject2
>>
>> sender2
>>   subject3
>>   subject4
>>
>> also fix the padding on multiSelect
>>
> 
> Quite nicely (concise) implemented, some issues with the outcome, namely:
> * the same <b>old issue we had last week or so with Firefox

arg... sorry

> * no ellipsis of subject, would do the same as the mailinfo viewer does

yeah, makes sense

> * above promises indentation, there is no indentation
> 
> How about the following rather quickly hacked together on top - I did the
> s/selectionsummary/summary/ only to make some lines not overlong, had nothing
> against that variable name (FYI):


i did not want to promise indentation^^ i just wanted
to separate the senders and subject visually,
and bold is not really possible in plaintext..

yeah something like this would be good
do you wanna follow up, or should i send a v2?

> 
> ----8<----
> diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
> index b6e5460..6598e0e 100644
> --- a/js/SpamQuarantine.js
> +++ b/js/SpamQuarantine.js
> @@ -91,16 +91,17 @@ Ext.define('PMG.SpamQuarantine', {
>              preview.setBodyStyle('padding', '10px');
>              let previewtext = `<h3>${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`;
>   
> -           let selectionsummary = {};
> +           let summary = {};
>              selection.forEach((mail) => {
>                  let sender = Ext.htmlEncode(mail.data.from);
> -               if (!selectionsummary[sender]) {
> -                   selectionsummary[sender] = `<b>${sender}</b>`;
> +               if (!summary[sender]) {
> +                   summary[sender] = `<b class="bold">${sender}</b><ul style="margin-top:0px;">`;
>                  }
> -               selectionsummary[sender] += `<br>${Ext.htmlEncode(mail.data.subject)}`;
> +               let subject = Ext.htmlEncode(mail.data.subject);
> +               subject = Ext.util.Format.ellipsis(subject, 103);
> +               summary[sender] += `<li>${subject}</li>`;
>              });
> -
> -           previewtext += Object.values(selectionsummary).join('<br><br>');
> +           previewtext += Object.values(summary).join('</ul>');
>   
>              preview.update(previewtext);
>              raw.setDisabled(true);
> ---
> 
> It uses lists which have nice "inter margins" between other <ul>, ellipsises
> text and adds the bold class again.
> 
> We could also sort the outcome by sender, as now it's not really stable.
> E.g., selecting a few mails from top to bottom, then deselecting and selecting
> again from top will move stuff around - nothing bad or so though.

its stable in the sense as the order in which you select (for the 
sender) is respected

> 
> I mean this is only relevant for rather huge spam queues anyway, maybe others
> find that even not as useful as I when I requested it..
> 
>> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
>> ---
>>   js/SpamQuarantine.js | 21 ++++++++++++++++++---
>>   1 file changed, 18 insertions(+), 3 deletions(-)
>>
>> diff --git a/js/SpamQuarantine.js b/js/SpamQuarantine.js
>> index 60fbae8..b6e5460 100644
>> --- a/js/SpamQuarantine.js
>> +++ b/js/SpamQuarantine.js
>> @@ -72,13 +72,14 @@ Ext.define('PMG.SpamQuarantine', {
>>   
>>   	    var url = '/api2/htmlmail/quarantine/content?id=' + rec.data.id + ((raw)?'&raw=1':'');
>>   	    preview.setDisabled(false);
>> +	    preview.setBodyStyle('padding', '0px');
>>   	    this.lookupReference('raw').setDisabled(false);
>>   	    this.lookupReference('spam').setDisabled(false);
>>   	    this.lookupReference('download').setDisabled(false);
>>   	    preview.update("<iframe frameborder=0 width=100% height=100% sandbox='allow-same-origin' src='" + url +"'></iframe>");
>>   	},
>>   
>> -	multiSelect: function() {
>> +	multiSelect: function(selection) {
>>   	    var preview = this.lookupReference('preview');
>>   	    var raw = this.lookupReference('raw');
>>   	    var spam = this.lookupReference('spam');
>> @@ -87,7 +88,21 @@ Ext.define('PMG.SpamQuarantine', {
>>   	    var download = this.lookupReference('download');
>>   
>>   	    preview.setDisabled(false);
>> -	    preview.update('<h3>' + gettext('Multiple E-Mails selected') + '</h3>');
>> +	    preview.setBodyStyle('padding', '10px');
>> +	    let previewtext = `<h3>${gettext('Multiple E-Mails selected')} (${selection.length})</h3>`;
>> +
>> +	    let selectionsummary = {};
>> +	    selection.forEach((mail) => {
>> +		let sender = Ext.htmlEncode(mail.data.from);
>> +		if (!selectionsummary[sender]) {
>> +		    selectionsummary[sender] = `<b>${sender}</b>`;
>> +		}
>> +		selectionsummary[sender] += `<br>${Ext.htmlEncode(mail.data.subject)}`;
>> +	    });
>> +
>> +	    previewtext += Object.values(selectionsummary).join('<br><br>');
>> +
>> +	    preview.update(previewtext);
>>   	    raw.setDisabled(true);
>>   	    spam.setDisabled(true);
>>   	    spam.setPressed(false);
>> @@ -154,7 +169,7 @@ Ext.define('PMG.SpamQuarantine', {
>>   	    var list = this.lookupReference('list');
>>   	    var selection = list.selModel.getSelection();
>>   	    if (selection.length > 1) {
>> -		me.multiSelect();
>> +		me.multiSelect(selection);
>>   		return;
>>   	    }
>>   
>>
>