Skip to content

Commit

Permalink
fix(frontend): some fixes to the message list display on mobile, the …
Browse files Browse the repository at this point in the history 
…prev & next links, the content title, and the navigation (#1406)

* avoid unecessary displays of the sort field

* do not show the message preview on the list of all messages on mobile

* The combined inbox renders less details on mobile

* Fix the prev & next links to properly work for the combined view

* push the correct main section in the history state
  • Loading branch information
@mercihabam
mercihabam authored Dec 17, 2024
1 parent b05c1d7 commit e7c5054
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 28 deletions.
7 changes: 7 additions & 0 deletions modules/core/message_list_functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,8 +307,15 @@ function subject_callback($vals, $style, $output_mod) {

$hl_subject = preg_replace("/^(\[[^\]]+\])/", '<span class="s_pre">$1</span>', $subject);
if ($style == 'news') {
if ($output_mod->get('is_mobile')) {
return sprintf('<div class="subject"><div class="%s" title="%s">%s <a href="%s">%s</a></div></div>', $output_mod->html_safe(implode(' ', $vals[2])), $subject, $img, $output_mod->html_safe($vals[1]), $hl_subject);
}
return sprintf('<div class="subject"><div class="%s" title="%s">%s <a href="%s">%s</a><p class="fw-light">%s</p></div></div>', $output_mod->html_safe(implode(' ', $vals[2])), $subject, $img, $output_mod->html_safe($vals[1]), $hl_subject, $preview_msg);
}

if ($output_mod->get('is_mobile')) {
return sprintf('<td class="subject"><div class="%s"><a title="%s" href="%s">%s</a></div></td>', $output_mod->html_safe(implode(' ', $vals[2])), $subject, $output_mod->html_safe($vals[1]), $hl_subject);
}
return sprintf('<td class="subject"><div class="%s"><a title="%s" href="%s">%s</a><p class="fw-light">%s</p></div></td>', $output_mod->html_safe(implode(' ', $vals[2])), $subject, $output_mod->html_safe($vals[1]), $hl_subject, $preview_msg);
}}

Expand Down
5 changes: 4 additions & 1 deletion modules/core/navigation/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,13 @@ async function navigate(url) {
const main = html.match(/<main[^>]*>((.|[\n\r])*)<\/main>/i)[0];
const title = html.match(/<title[^>]*>((.|[\n\r])*)<\/title>/i)[0];

let cyphtMain;
if ($(main).attr('id') === 'cypht-main') {
$('main#cypht-main').replaceWith(main);
cyphtMain = main;
} else {
$('main#cypht-main').replaceWith($(main).find('#cypht-main'));
cyphtMain = $(main).find('#cypht-main').prop('outerHTML');
}
document.title = title.replace(/<[^>]*>/g, '');

Expand All @@ -75,7 +78,7 @@ async function navigate(url) {

const unMountCallback = renderPage(url);

history.pushState({ main, head }, "", url);
history.pushState({ main: cyphtMain, head }, "", url);

if (unMountCallback) {
unMountSubscribers[url] = unMountCallback;
Expand Down
4 changes: 2 additions & 2 deletions modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2436,9 +2436,9 @@ protected function output()
class Hm_output_combined_message_list extends Hm_Output_Module {
protected function output() {
$messageList = [];
$style = $this->get('news_list_style') ? 'news' : 'email';
$style = $this->get('news_list_style') || $this->get('is_mobile') ? 'news' : 'email';
if ($this->get('imap_combined_inbox_data')) {
$messageList = array_merge($messageList, format_imap_message_list($this->get('imap_combined_inbox_data'), $this, false, $style));
$messageList = array_merge($messageList, format_imap_message_list($this->get('imap_combined_inbox_data'), $this, 'combined_inbox', $style));
}
if ($this->get('feed_list_data')) {
$messageList = array_merge($messageList, $this->get('feed_list_data'), Hm_Output_filter_feed_list_data::formatMessageList($this));
Expand Down
23 changes: 12 additions & 11 deletions modules/core/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -748,7 +748,6 @@ function Message_List() {
self.clear_read_messages();
}
self.set_row_events();
$('.combined_sort').show();
}
if (getPageNameParam() == 'search' && hm_run_search() == "0") {
Hm_Timer.add_job(self.load_sources, interval, true);
Expand Down Expand Up @@ -841,30 +840,33 @@ function Message_List() {
};

this.prev_next_links = function(msgUid, lisPath = getListPathParam()) {
let phref;
let nhref;
let prevUrl;
let nextUrl;

const target = $('.msg_headers tr').last();
const messages = new Hm_MessagesStore(lisPath, Hm_Utils.get_url_page_number());
messages.load(false, true);
const next = messages.getNextRowForMessage(msgUid);
const prev = messages.getPreviousRowForMessage(msgUid);
if (prev) {
const prevSubject = $(prev['0']).find('.subject a');
phref = prevSubject.prop('href');
prevUrl = new URL(prevSubject.prop('href'));
prevUrl.searchParams.set('list_parent', lisPath);
const subject = prevSubject.text();
const plink = '<a class="plink" href="'+phref+'"><i class="prevnext bi bi-arrow-left-square-fill"></i> '+subject+'</a>';
const plink = '<a class="plink" href="'+prevUrl.href+'"><i class="prevnext bi bi-arrow-left-square-fill"></i> '+subject+'</a>';
$('<tr class="prev"><th colspan="2">'+plink+'</th></tr>').insertBefore(target);
}
if (next) {
const nextSubject = $(next['0']).find('.subject a');
nhref = nextSubject.prop('href');
nextUrl = new URL(nextSubject.prop('href'));
nextUrl.searchParams.set('list_parent', lisPath);
const subject = nextSubject.text();

const nlink = '<a class="nlink" href="'+nhref+'"><i class="prevnext bi bi-arrow-right-square-fill"></i> '+subject+'</a>';
const nlink = '<a class="nlink" href="'+nextUrl.href+'"><i class="prevnext bi bi-arrow-right-square-fill"></i> '+subject+'</a>';
$('<tr class="next"><th colspan="2">'+nlink+'</th></tr>').insertBefore(target);
}

return [phref, nhref];
return [prevUrl?.href, nextUrl?.href];
};

this.check_empty_list = function() {
Expand All @@ -882,7 +884,6 @@ function Message_List() {
}
else {
$('.empty_list').remove();
$('.combined_sort').show();
}
return count === 0;
};
Expand Down Expand Up @@ -2275,7 +2276,7 @@ function handleAllowResource(element, messagePart, inline = false) {
if (inline) {
return inline_imap_msg(window.inline_msg_details, window.inline_msg_uid);
}
return get_message_content(getParam('part'), getMessageUidParam(), getListPathParam(), false, false, false);
return get_message_content(getParam('part'), getMessageUidParam(), getListPathParam(), getParam('list_parent'), false, false, false);
});
}

Expand Down Expand Up @@ -2362,7 +2363,7 @@ const handleExternalResources = (inline) => {
if (inline) {
inline_imap_msg(window.inline_msg_details, window.inline_msg_uid);
} else {
get_message_content(getParam('part'), getMessageUidParam(), getListPathParam(), false, false, false)
get_message_content(getParam('part'), getMessageUidParam(), getListPathParam(), getParam('list_parent'), false, false, false)
}
}).finally(() => {
popover.dispose();
Expand Down
2 changes: 1 addition & 1 deletion modules/imap/js_modules/route_handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function applyImapMessageListPageHandlers(routeParams) {
}

function applyImapMessageContentPageHandlers(routeParams) {
imap_setup_message_view_page(routeParams.uid, null, routeParams.list_path, imap_setup_tags);
imap_setup_message_view_page(routeParams.uid, null, routeParams.list_path, routeParams.list_parent, imap_setup_tags);
imap_setup_snooze();

const messages = new Hm_MessagesStore(routeParams.list_path, routeParams.list_page);
Expand Down
2 changes: 1 addition & 1 deletion modules/imap/js_modules/utils/messageParts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ function handleViewMessagePart() {
const url = new URL(window.location.href);
url.searchParams.set('part', messagePart);
history.replaceState(history.state, "", url.toString());
get_message_content(messagePart, getMessageUidParam() ?? inline_msg_uid, getListPathParam());
get_message_content(messagePart, getMessageUidParam() ?? inline_msg_uid, getListPathParam(), getParam('list_parent') ?? getListPathParam());
});
}
20 changes: 10 additions & 10 deletions modules/imap/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ var imap_flag_message = function(state, supplied_uid, supplied_detail) {
$('#unflag_msg').show();
}
set_message_content();
imap_message_view_finished(false, false, true);
imap_message_view_finished(false, false, getParam('list_parent'), true);
}
);
}
Expand Down Expand Up @@ -607,7 +607,7 @@ var expand_imap_folders = function(element) {
return false;
};

var get_message_content = function(msg_part, uid, list_path, detail, callback, noupdate) {
var get_message_content = function(msg_part, uid, list_path, listParent, detail, callback, noupdate) {
if (!uid) {
uid = $('.msg_uid').val();
}
Expand All @@ -625,7 +625,7 @@ var get_message_content = function(msg_part, uid, list_path, detail, callback, n
$('.msg_text').append(res.msg_text);
$('.msg_text').append(res.msg_parts);
document.title = $('.header_subject th').text();
imap_message_view_finished(uid, detail);
imap_message_view_finished(uid, detail, listParent);
}
else {
$('.reply_link, .reply_all_link, .forward_link').each(function() {
Expand Down Expand Up @@ -727,7 +727,7 @@ var block_unblock_sender = function(msg_uid, detail, scope, action, sender = '',
);
}

var imap_message_view_finished = function(msg_uid, detail, skip_links) {
var imap_message_view_finished = function(msg_uid, detail, listParent, skip_links) {
var class_name = false;
if (!detail) {
detail = Hm_Utils.parse_folder_path(getListPathParam(), 'imap');
Expand All @@ -736,10 +736,10 @@ var imap_message_view_finished = function(msg_uid, detail, skip_links) {
msg_uid = getMessageUidParam();
}
if (detail && !skip_links) {
Hm_Message_List.prev_next_links(msg_uid);
Hm_Message_List.prev_next_links(msg_uid, listParent);
}
if (Hm_Message_List.track_read_messages(class_name)) {
if (hm_list_parent() == 'unread') {
if (listParent == 'unread') {
Hm_Message_List.adjust_unread_total(-1);
}
}
Expand Down Expand Up @@ -803,7 +803,7 @@ var get_local_message_content = function(msg_uid, path) {
return Hm_Utils.get_from_local_storage(getMessageStorageKey(msg_uid));
};

var imap_setup_message_view_page = function(uid, details, list_path, callback) {
var imap_setup_message_view_page = function(uid, details, list_path, listParent, callback) {
if (!uid) {
uid = getMessageUidParam();
}
Expand All @@ -816,7 +816,7 @@ var imap_setup_message_view_page = function(uid, details, list_path, callback) {

const msg_content = get_local_message_content(uid, list_path);
if (!msg_content) {
get_message_content(false, uid, list_path, details, callbackFn);
get_message_content(false, uid, list_path, listParent, details, callbackFn);
}
else {
const msgResponse = JSON.parse(msg_content);
Expand All @@ -833,8 +833,8 @@ var imap_setup_message_view_page = function(uid, details, list_path, callback) {
$(this).data("href", $(this).attr("href")).removeAttr("href");
$(this).addClass('disabled_link');
});
imap_message_view_finished(uid, details);
get_message_content(false, uid, list_path, details, callback, true);
imap_message_view_finished(uid, details, listParent);
get_message_content(false, uid, list_path, listParent, details, callback, true);
}
};

Expand Down
4 changes: 2 additions & 2 deletions modules/inline_message/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ var inline_imap_msg = function(details, uid, list_path, inline_msg_loaded_callba
clear_open_msg(inline_msg_style());
msg_container(inline_msg_style(), path);

imap_setup_message_view_page(uid, details, list_path, inline_msg_loaded_callback);
imap_setup_message_view_page(uid, details, list_path, list_path, inline_msg_loaded_callback);
$('.part_encoding').hide();
$('.part_charset').hide();
$('div', $(path)).removeClass('unseen');
Expand Down Expand Up @@ -131,7 +131,7 @@ var capture_subject_click = function() {
if ($('.header_subject th').find('i.bi.bi-x-lg.close_inline_msg').length === 0) {
$('.header_subject th').append('<i class="bi bi-x-lg close_inline_msg"></i>');
$('.close_inline_msg').on("click", function() { msg_inline_close(); });
$('.msg_part_link').on("click", function() { return get_message_content($(this).data('messagePart'), uid, list_path, details, inline_msg_loaded_callback); });
$('.msg_part_link').on("click", function() { return get_message_content($(this).data('messagePart'), uid, list_path, list_path, details, inline_msg_loaded_callback); });
}
update_imap_links(uid, details);
};
Expand Down

0 comments on commit e7c5054

Please sign in to comment.