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

[Thomas Lamprecht]

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..
* 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)

----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}` },
     ],
 });