[pmg-devel] [PATCH pmg-gui 1/2] add 'MailInfo' Widget

[Dominik Csapak]

On 4/14/20 4:16 PM, Thomas Lamprecht wrote:
> On 4/14/20 2:51 PM, Dominik Csapak wrote:
>> This will be used to show the Subject and From on E-Mail Previews.
>>
>> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
>> ---
>>   js/MailInfo.js | 33 +++++++++++++++++++++++++++++++++
>>   js/Makefile    |  1 +
>>   2 files changed, 34 insertions(+)
>>   create mode 100644 js/MailInfo.js
>>
>> diff --git a/js/MailInfo.js b/js/MailInfo.js
>> new file mode 100644
>> index 0000000..f14dad1
>> --- /dev/null
>> +++ b/js/MailInfo.js
>> @@ -0,0 +1,33 @@
>> +Ext.define('PMG.MailInfoBox', {
>> +    extend: 'Ext.container.Container',
>> +    xtype: 'pmgMailInfo',
>> +
>> +    cls: 'x-toolbar-default',
>> +    style: {
>> +	'border-left': '0px',
>> +	'border-right': '0px',
>> +    },
>> +
>> +    update: function(data) {
>> +	let me = this;
>> +	let escaped = {};
>> +	for (const [key, value] of Object.entries(data)) {
>> +	    escaped[key] = Ext.htmlEncode(value);
>> +	}
>> +	me.items.each((item) => item.update(escaped));
>> +    },
>> +
>> +    layout: {
>> +	type: 'vbox',
>> +	align: 'stretch',
>> +    },
>> +
>> +    defaults: {
>> +	xtype: 'tbtext',
>> +    },
>> +
>> +    items: [
>> +	{ tpl: `<b>${gettext("From")}:</b> {from}` },
>> +	{ tpl: `<b>${gettext("Subject")}:</b> {subject}` },
>> +    ],
> 
> Two things:
> * the "b" element seems to not really work here in this context..

weird, works here:
https://imgur.com/HPE5OYF
seems to be firefox specific... (also the inspect element part of this
in firefox is... weird)

> * long values, quite possible in the Subject, are not cut off.
> 
> I'd propose the followup below, what do you think.
> (we may want to move the .bold class to the common css in the future)

yeah looks good

> 
> ----8<----
> diff --git a/css/ext6-pmg.css b/css/ext6-pmg.css
> index f385d77..68b008b 100644
> --- a/css/ext6-pmg.css
> +++ b/css/ext6-pmg.css
> @@ -203,6 +203,10 @@ tr.bounced {
>       color: #DD0;
>   }
>   
> +.bold {
> +    font-weight: bold;
> +}
> +
>   div.left {
>       float: left;
>   }
> diff --git a/js/MailInfo.js b/js/MailInfo.js
> index f14dad1..c254b31 100644
> --- a/js/MailInfo.js
> +++ b/js/MailInfo.js
> @@ -12,7 +12,7 @@ Ext.define('PMG.MailInfoBox', {
>          let me = this;
>          let escaped = {};
>          for (const [key, value] of Object.entries(data)) {
> -           escaped[key] = Ext.htmlEncode(value);
> +           escaped[key] = Ext.util.Format.ellipsis(Ext.htmlEncode(value), 103);
>          }
>          me.items.each((item) => item.update(escaped));
>       },
> @@ -27,7 +27,7 @@ Ext.define('PMG.MailInfoBox', {
>       },
>   
>       items: [
> -       { tpl: `<b>${gettext("From")}:</b> {from}` },
> -       { tpl: `<b>${gettext("Subject")}:</b> {subject}` },
> +       { tpl: `<b class="bold">${gettext("From")}:</b> {from}` },
> +       { tpl: `<b class="bold">${gettext("Subject")}:</b> {subject}` },
>       ],
>   });
>