Skip to content

Commit

Permalink
Ref: Replace inline msg controls with dropdown (#854)
Browse files Browse the repository at this point in the history 
* Fix: msg_control dropdown mobile css
  • Loading branch information
@henochit
henochit authored Apr 15, 2024
1 parent 7e073b6 commit 4665e88
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 25 deletions.
30 changes: 21 additions & 9 deletions modules/core/message_list_functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,14 +350,26 @@ function icon_callback($vals, $style, $output_mod) {
*/
if (!hm_exists('message_controls')) {
function message_controls($output_mod) {
$txt = '';
$res = '<a class="toggle_link" href="#"><i class="bi bi-check-square-fill"></i></a>'.
'<div class="msg_controls fs-6 d-none gap-1">'.
'<a class="msg_read core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="read">'.$output_mod->trans('Read').'</a>'.
'<a class="msg_unread core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="unread">'.$output_mod->trans('Unread').'</a>'.
'<a class="msg_flag core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="flag">'.$output_mod->trans('Flag').'</a>'.
'<a class="msg_unflag core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="unflag">'.$output_mod->trans('Unflag').'</a>'.
'<a class="msg_delete core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="delete">'.$output_mod->trans('Delete').'</a>'.
'<a class="msg_archive core_msg_control btn btn-sm btn-light border text-black-50" href="#" data-action="archive">'.$output_mod->trans('Archive').'</a>';
'<div class="msg_controls fs-6 d-none gap-1 align-items-center">
<div class="dropdown on_mobile">
<button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" id="coreMsgControlDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions</button>
<ul class="dropdown-menu" aria-labelledby="coreMsgControlDropdown">
<li><a class="dropdown-item msg_read core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="read">'.$output_mod->trans('Read').'</a></li>'.
'<li><a class="dropdown-item msg_unread core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="unread">'.$output_mod->trans('Unread').'</a></li>'.
'<li><a class="dropdown-item msg_flag core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="flag">'.$output_mod->trans('Flag').'</a></li>'.
'<li><a class="dropdown-item msg_unflag core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="unflag">'.$output_mod->trans('Unflag').'</a></li>'.
'<li><a class="dropdown-item msg_delete core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="delete">'.$output_mod->trans('Delete').'</a></li>'.
'<li><a class="dropdown-item msg_archive core_msg_control btn btn-sm btn-light text-black-50" href="#" data-action="archive">'.$output_mod->trans('Archive').'</a></li>
</ul>
</div>'.
'<a class="msg_read core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="read">'.$output_mod->trans('Read').'</a>'.
'<a class="msg_unread core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="unread">'.$output_mod->trans('Unread').'</a>'.
'<a class="msg_flag core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="flag">'.$output_mod->trans('Flag').'</a>'.
'<a class="msg_unflag core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="unflag">'.$output_mod->trans('Unflag').'</a>'.
'<a class="msg_delete core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="delete">'.$output_mod->trans('Delete').'</a>'.
'<a class="msg_archive core_msg_control btn btn-sm btn-light no_mobile border text-black-50" href="#" data-action="archive">'.$output_mod->trans('Archive').'</a>';

if ($output_mod->get('msg_controls_extra')) {
$res .= $output_mod->get('msg_controls_extra');
Expand Down Expand Up @@ -495,7 +507,7 @@ function list_controls($refresh_link, $config_link, $source_link=false, $search_
return '<div class="list_controls no_mobile d-flex gap-3 align-items-center">'.
$refresh_link.$source_link.$config_link.$search_field.'</div>
<div class="list_controls on_mobile">'.$search_field.'
<i class="bi bi-three-dots-vertical" onclick="listControlsMenu()"></i>
<i class="bi bi-filter-circle" onclick="listControlsMenu()"></i>
<div id="list_controls_menu" classs="list_controls_menu">'.$refresh_link.$source_link.$config_link.'</div>
</div>';
}}
Expand Down Expand Up @@ -574,7 +586,7 @@ function build_page_links($page_size, $current_page, $total, $path, $filter=fals
$links = '';
$first = '';
$last = '';
$display_links = 10;
$display_links = 10;
if ($filter) {
$filter_str = '&amp;filter='.$filter;
}
Expand Down
2 changes: 1 addition & 1 deletion modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1243,7 +1243,7 @@ class Hm_Output_folder_list_start extends Hm_Output_Module {
* Opens the folder list nav tag
*/
protected function output() {
$res = '<a class="folder_toggle" href="#">'.$this->trans('Show folders').'<i class="bi bi-menu-up"></i></a>'.
$res = '<a class="folder_toggle" href="#"><i class="bi bi-list"></i></a>'.
'<nav class="folder_cell"><div class="folder_list">';
return $res;
}
Expand Down
30 changes: 20 additions & 10 deletions modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -602,8 +602,7 @@ button {
.folder_toggle {
font-size: 0px;
float: left;
margin: 15px;
margin-top: 19px;
margin: 10px 15px;
display: none;
}
.folder_toggle img {
Expand Down Expand Up @@ -979,7 +978,8 @@ div.unseen,
background-color: #fff;
position: fixed;
padding-left: 45px !important;
padding-top: 20px;
padding-right: 45px !important;
padding-top: 10px !important;
margin-bottom: 5px;
left: 0px;
right: 0px;
Expand All @@ -997,11 +997,12 @@ div.unseen,
display: block;
top: 0px;
left: -3px;
font-size: 20px;
font-weight: bold;
}
.mobile .folder_toggle img {
width: 24px;
height: 32px;
margin-top: -7px;
.mobile .folder_toggle i {
font-size: 2rem;
font-weight: bold;
}
.mobile .folder_toggle {
position: fixed;
Expand Down Expand Up @@ -1040,7 +1041,7 @@ div.unseen,
padding-left: 5px;
padding-top: 5px;
top: 1px;
left: 65px !important;
left: 70px !important;
}
@media (orientation: landscape) {
.mobile .msg_controls {
Expand Down Expand Up @@ -1151,8 +1152,10 @@ div.unseen,
padding-left: 5px;
padding-right: 5px;
}
.mobile .list_controls img {
margin-top: 10px;
.mobile .list_controls i {
margin-top: 10px !important;
font-size: 2rem;
font-weight: bold;
}
.mobile .page_links {
font-size: 150%;
Expand Down Expand Up @@ -1286,6 +1289,9 @@ div.unseen,
}
.mobile #list_controls_menu.show {
display: flex;
width: 100vw;
left: 0px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.mobile .imap_sort {
width: 100%;
Expand Down Expand Up @@ -1335,3 +1341,7 @@ div.unseen,
.settings_table .form-select {
display: inline-block;
}
.on_mobile {display: none;}
.mobile .no_mobile {display: none !important;}
.mobile .on_mobile {display: block !important;}
.mobile .move_to_location {right: 0;}
5 changes: 3 additions & 2 deletions modules/core/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -827,7 +827,9 @@ function Message_List() {
this.sort_fld = sort_type;
$('.combined_sort').val(sort_type);
}
$('.core_msg_control').on("click", function() { return self.message_action($(this).data('action')); });
$('.core_msg_control').on("click", function(e) {
e.preventDefault();
return self.message_action($(this).data('action')); });
$('.toggle_link').on("click", function() { return self.toggle_rows(); });
$('.refresh_link').on("click", function() { return self.load_sources(); });
};
Expand Down Expand Up @@ -936,7 +938,6 @@ function Message_List() {
if (!updated) {
self.update_after_action(action_type, selected);
}
return false;
};

this.prev_next_links = function(cache, class_name) {
Expand Down
6 changes: 4 additions & 2 deletions modules/imap/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -747,8 +747,10 @@ protected function output() {
class Hm_Output_move_copy_controls extends Hm_Output_Module {
protected function output() {
if ($this->get('move_copy_controls', false)) {
$res = '<span class="ctr_divider"></span> <div class="d-flex gap-1 dropdown"><a class="imap_move disabled_input btn btn-sm btn-secondary" href="#" data-action="copy">'.$this->trans('Copy').'</a>';
$res .= '<a class="imap_move disabled_input btn btn-sm btn-secondary" href="#" data-action="move">'.$this->trans('Move').'</a>';
$res = '<span class="ctr_divider"></span> <div class="d-flex align-items-start gap-1 dropdown"><a class="imap_move disabled_input btn btn-sm btn-secondary no_mobile" href="#" data-action="copy">'.$this->trans('Copy').'</a>';
$res .= '<a class="imap_move disabled_input btn btn-sm btn-secondary no_mobile" href="#" data-action="move">'.$this->trans('Move').'</a>';
$res .= '<a class="imap_move disabled_input btn btn-outline-success btn-sm on_mobile" href="#" data-action="copy">'.$this->trans('Copy').'</a>';
$res .= '<a class="imap_move disabled_input btn btn-outline-success btn-sm on_mobile" href="#" data-action="move">'.$this->trans('Move').'</a>';
$res .= '<div class="move_to_location dropdown-menu"></div>';
$res .= '<input type="hidden" class="move_to_type" value="" />';
$res .= '<input type="hidden" class="move_to_string1" value="'.$this->trans('Move to ...').'" />';
Expand Down
2 changes: 1 addition & 1 deletion modules/imap/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1194,7 +1194,7 @@ $(function() {

if ($('.imap_move').length > 0) {
check_select_for_imap();
$('.toggle_link').on("click", function() { setTimeout(search_selected_for_imap, 100); });
$('.toggle_link').on("click", function() { $('.mailbox_list_title').toggleClass('hide'); setTimeout(search_selected_for_imap, 100); });
Hm_Ajax.add_callback_hook('ajax_imap_folder_display', check_select_for_imap);
Hm_Message_List.callbacks.push(check_select_for_imap);
$('.imap_move').on("click", function() { return false; });
Expand Down

0 comments on commit 4665e88

Please sign in to comment.