Skip to content

Commit 7fd136c

Browse files
ThorstenSuckowThorstenSuckow
authored
Merge pull request #303 from #302
Extjs app webmail#302
2 parents e2a1460 + 34bc2a6 commit 7fd136c

File tree

6 files changed

+312
-75
lines changed

6 files changed

+312
-75
lines changed

‎classic/src/view/mail/message/MessageGrid.js

+94-41
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* conjoon
33
* extjs-app-webmail
4-
* Copyright (C) 2019-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
4+
* Copyright (C) 2019-2023 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
55
*
66
* Permission is hereby granted, free of charge, to any person
77
* obtaining a copy of this software and associated documentation
@@ -34,6 +34,15 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
3434

3535
extend: "Ext.grid.Panel",
3636

37+
statics: {
38+
required: {
39+
/**
40+
* @type {conjoon.cn_mail.view.mail.EmailAddressLinkRenderer}
41+
*/
42+
emailAddressLinkRenderer: "conjoon.cn_mail.view.mail.EmailAddressLinkRenderer"
43+
}
44+
},
45+
3746
requires: [
3847
// @see conjoon/extjs-app-webmail#178
3948
"Ext.grid.column.Date",
@@ -42,7 +51,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
4251
"conjoon.cn_mail.view.mail.message.grid.feature.PreviewTextLazyLoad",
4352
"conjoon.cn_mail.store.mail.message.MessageItemStore",
4453
"coon.comp.grid.feature.RowFlyMenu",
45-
"coon.core.util.Date"
54+
"coon.core.util.Date",
55+
"conjoon.cn_mail.view.mail.EmailAddressTip"
4656
],
4757

4858
alias: "widget.cn_mail-mailmessagegrid",
@@ -69,6 +79,13 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
6979
* @param {conjoon.cn_mail.store.mail.message.MessageItemStore} store
7080
*/
7181

82+
/**
83+
* @param addressTip
84+
* @type {conjoon.cn_mail.view.mail.EmailAddressTip}
85+
* @private
86+
*/
87+
88+
7289
/**
7390
* "storeRelayers" was already taken
7491
* @private
@@ -119,7 +136,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
119136
*/
120137
emptySubjectText: "(No subject)",
121138
getPreviewTextRow: record => `<div class="previewText">${Ext.util.Format.nbsp(record.get("previewText"))}</div>`,
122-
getAdditionalData: function (data, idx, record, orig) {
139+
getAdditionalData (data, idx, record, orig) {
123140

124141
const
125142
me = this,
@@ -181,7 +198,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
181198

182199
viewConfig: {
183200
markDirty: false,
184-
getRowClass: function (record, rowIndex, rowParams, store){
201+
getRowClass (record, rowIndex, rowParams, store){
185202
let cls = record.get("recent") ? "recent" : "";
186203
cls += record.get("seen") ? "" : " boldFont";
187204

@@ -205,7 +222,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
205222
* record are specified in its arguments. might be an issue with the
206223
* needsUpdate computing and considering argument values?
207224
*/
208-
renderer: function (value, metaData, record) {
225+
renderer (value, metaData, record) {
209226
return "<span class=\"" + (!value ? "fas" : "far")+ " fa-circle\"></span>";
210227
},
211228
menuDisabled: true,
@@ -214,7 +231,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
214231
dataIndex: "hasAttachments",
215232
hideable: false,
216233
text: "<span class=\"x-fa fa-paperclip\"></span>",
217-
renderer: function (value) {
234+
renderer (value) {
218235
return value ? "<span class=\"x-fa fa-paperclip\"></span>" : "";
219236
},
220237
menuDisabled: true,
@@ -227,23 +244,16 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
227244
dataIndex: "to",
228245
text: "To",
229246
width: 240,
230-
renderer: function (value, meta, record, rowIndex, colIndex, store, view) {
231-
return view.grid.stringifyTo(value);
247+
renderer (value, meta, record, rowIndex, colIndex, store, view) {
248+
return view.grid.renderAddress(value);
232249

233250
}
234251
}, {
235252
dataIndex: "from",
236253
text: "From",
237254
width: 140,
238-
renderer: function (value, meta, record, rowIndex, colIndex, store, view) {
239-
240-
var feature = view.getFeature("cn_mail-mailMessageFeature-messagePreview");
241-
242-
if (!feature.disabled) {
243-
meta.tdCls += "previewLarge";
244-
}
245-
246-
return value ? value.name : "";
255+
renderer (value, meta, record, rowIndex, colIndex, store, view) {
256+
return view.grid.renderAddress(value);
247257
}
248258
}, {
249259
dataIndex: "draftDisplayAddress",
@@ -277,7 +287,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
277287
*
278288
* @protected
279289
*/
280-
setRepresentedFolderType: function (representedFolderType) {
290+
setRepresentedFolderType (representedFolderType) {
281291

282292
const me = this;
283293

@@ -288,7 +298,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
288298
/**
289299
* @inheritdoc
290300
*/
291-
initComponent: function () {
301+
initComponent () {
292302

293303
const me = this;
294304

@@ -297,7 +307,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
297307
// apply Renderer to draftDisplayAddress columns
298308
for (let i = 0, len = me.columns.length; i < len; i++) {
299309
if (me.columns[i].dataIndex === "draftDisplayAddress") {
300-
me.columns[i].renderer = me.renderDraftDisplayAddress;
310+
me.columns[i].renderer = me.renderDisplayAddress;
301311
}
302312
}
303313

@@ -311,8 +321,46 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
311321
},
312322

313323

324+
initTip () {
325+
326+
const
327+
me = this,
328+
view = me.getView();
329+
330+
me.addressTip = Ext.create("conjoon.cn_mail.view.mail.EmailAddressTip", {
331+
target: view.el,
332+
delegate: view.itemSelector + " a.address",
333+
queryAddress (node) {
334+
const addrIndex = node.getAttribute("address-idx");
335+
336+
while (node && !node.getAttribute("data-recordId")) {
337+
node = node.parentNode;
338+
}
339+
340+
if (!node) {
341+
return;
342+
}
343+
344+
const
345+
record = view.getRecord(node),
346+
address = me.getAddressBasedOnCurrentInboxContext(record, me.representedFolderType);
347+
348+
return (address.length && address[addrIndex]) ? address[addrIndex] : address;
349+
}
350+
});
351+
},
352+
353+
354+
getAddressBasedOnCurrentInboxContext (record, representedFolderType) {
355+
if (record.get("draft") || representedFolderType === "SENT") {
356+
return record.get("to");
357+
}
358+
return record.get("from");
359+
},
360+
361+
314362
/**
315-
* Renderer for the draftDisplayAddress-column.
363+
* Renderer for the from/draftDisplayAddress-column.
316364
*
317365
* @param value
318366
* @param meta
@@ -325,18 +373,24 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
325373
*
326374
* @private
327375
*/
328-
renderDraftDisplayAddress: function (value, meta, record, rowIndex, colIndex, store, view) {
329-
const me = this,
376+
renderDisplayAddress (value, meta, record, rowIndex, colIndex, store, view) {
377+
378+
const
379+
me = this,
330380
feature = view.getFeature("cn_mail-mailMessageFeature-messagePreview");
331381

332-
if (!feature.disabled) {
333-
meta.tdCls += "previewLarge";
334-
if (record.get("draft") || me.representedFolderType === "SENT") {
335-
return view.grid.stringifyTo(record.get("to"));
336-
}
382+
if (feature.disabled) {
383+
return record.get("from") ? record.get("from").name : "";
337384
}
338385

339-
return record.get("from") ? record.get("from").name : "";
386+
meta.tdCls += " previewLarge";
387+
388+
return view.grid.renderAddress(
389+
me.getAddressBasedOnCurrentInboxContext(
390+
record, me.representedFolderType
391+
)
392+
);
393+
340394
},
341395

342396

@@ -350,7 +404,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
350404
* @param {Boolean} enable true to switch to the grid view, falsy to
351405
* switch to preview mode.
352406
*/
353-
enableRowPreview: function (enable) {
407+
enableRowPreview (enable) {
354408

355409
const me = this,
356410
view = me.getView(),
@@ -391,7 +445,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
391445
*
392446
* @inheritdoc
393447
*/
394-
bindStore: function (store, initial) {
448+
bindStore (store, initial) {
395449

396450
const me = this;
397451

@@ -416,7 +470,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
416470
*
417471
* @inheritdoc
418472
*/
419-
unbindStore: function (store) {
473+
unbindStore (store) {
420474

421475
const me = this;
422476

@@ -437,7 +491,7 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
437491
*
438492
* @param {conjoon.cn_mail.model.mail.message.reader.MessageItem} record
439493
*/
440-
updateRowFlyMenu: function (record) {
494+
updateRowFlyMenu (record) {
441495

442496
const me = this,
443497
feature = me.view.getFeature("cn_mail-mailMessageFeature-rowFlyMenu"),
@@ -469,18 +523,17 @@ Ext.define("conjoon.cn_mail.view.mail.message.MessageGrid", {
469523
* Helper function to return an array containing address-like objects (keyed
470524
* with "address" and "name") as a string.
471525
*
472-
* @param {Array} toAddresses
526+
* @param {Array} addresses
473527
*
474528
* @return {String}
475529
*/
476-
stringifyTo: function (toAddresses) {
477-
const names = [];
530+
renderAddress (addresses) {
531+
const me = this;
478532

479-
for (var i = 0, len = toAddresses.length; i < len; i++) {
480-
names.push(toAddresses[i].name);
481-
}
482-
return names.join(", ");
533+
addresses = [].concat(addresses);
534+
return addresses.map (
535+
(item, index) => me.emailAddressLinkRenderer.render({...item, index})
536+
).join("");
483537
}
484538

485-
486539
});

‎sass/extjs-theme-material/src/view/mail/message/MessageGrid.scss

+26-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* conjoon
33
* extjs-app-webmail
4-
* Copyright (C) 2019-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
4+
* Copyright (C) 2019-2023 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
55
*
66
* Permission is hereby granted, free of charge, to any person
77
* obtaining a copy of this software and associated documentation
@@ -25,21 +25,40 @@
2525

2626
.cn_mail-mailmessagegrid {
2727

28-
.previewEnabled {
29-
.x-grid-item-focused .x-grid-cell-inner:before {
30-
border : 0;
31-
}
32-
}
3328

3429
.x-grid-cell {
3530
position:inherit;
3631
}
3732

3833
.x-grid-cell-inner {
39-
padding: 7px 10px 2px;
34+
padding: 7px 8px 2px;
4035
color:var(--accent-dark-color);
36+
display:flex;
37+
a.address {
38+
border: 1px solid var(--accent-foreground-color);
39+
border-radius: 4px;
40+
margin-right: 4px;
41+
padding: 0 6px 0 6px;
42+
color: var(--accent-dark-color);
43+
text-decoration:none;
44+
&:hover {
45+
color:var(--accent-color);
46+
text-decoration:underline;
47+
}
48+
}
4149
}
4250

51+
.previewEnabled {
52+
53+
.x-grid-item-focused .x-grid-cell-inner:before {
54+
border : 0;
55+
}
56+
a.address {
57+
color: var(--highlight-color);
58+
}
59+
}
60+
61+
4362
.x-grid-item-over {
4463
.x-grid-cell-inner {
4564
color:var(--highlight-color);

‎sass/extjs-theme-material/src/view/mail/message/reader/MessageView.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* conjoon
33
* extjs-app-webmail
4-
* Copyright (C) 2019-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
4+
* Copyright (C) 2019-2023 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
55
*
66
* Permission is hereby granted, free of charge, to any person
77
* obtaining a copy of this software and associated documentation
@@ -110,6 +110,21 @@
110110
margin-top:4px
111111
}
112112

113+
.from, .to {
114+
a.address {
115+
border: 1px solid var(--accent-foreground-color);
116+
border-radius: 4px;
117+
margin-right: 4px;
118+
padding: 0 6px 0 6px;
119+
color: var(--highlight-color);
120+
text-decoration:none;
121+
&:hover {
122+
color:var(--accent-color);
123+
text-decoration:underline;
124+
}
125+
}
126+
}
127+
113128
.subject {
114129
font-size : 13px;
115130
max-width : 95%;

0 commit comments

Comments
 (0)