Skip to content

Commit

Permalink
fix(frontend): fix the sidebar content alignment and reorganize mispl…
Browse files Browse the repository at this point in the history 
…aced content. (cypht-org#1397)
  • Loading branch information
@mercihabam
mercihabam authored Dec 3, 2024
1 parent 3044bf8 commit 412b5ad
Show file tree
Hide file tree
Showing 12 changed files with 70 additions and 82 deletions.
2 changes: 1 addition & 1 deletion modules/calendar/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
/*add_output('ajax_imap_message_content', 'vcalendar_add_output', true, 'calendar', 'filter_message_headers', 'after');*/
add_output('calendar', 'calendar_content', true, 'calendar', 'content_section_start', 'after');
add_output('calendar', 'add_cal_event_form', true, 'calendar', 'content_section_start', 'after');
add_output('ajax_hm_folders', 'calendar_page_link', true, 'calendar', 'logout_menu_item', 'before');
add_output('ajax_hm_folders', 'calendar_page_link', true, 'calendar', 'main_menu_content', 'before');

return array(
'allowed_pages' => array(
Expand Down
2 changes: 1 addition & 1 deletion modules/contacts/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
add_output('contacts', 'contacts_content_end', true, 'contacts', 'contacts_list', 'after');
add_output('settings', 'contact_auto_collect_setting', true, 'contacts', 'max_google_contacts_number', 'after');

add_output('ajax_hm_folders', 'contacts_page_link', true, 'contacts', 'logout_menu_item', 'before');
add_output('ajax_hm_folders', 'contacts_page_link', true, 'contacts', 'main_menu_content', 'before');

add_handler('compose', 'load_contacts', true, 'contacts', 'load_user_data', 'after');
add_handler('compose', 'process_send_to_contact', true, 'contacts', 'save_user_data', 'before');
Expand Down
2 changes: 1 addition & 1 deletion modules/core/navigation/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $(() => {
});

const menuToggle = `
<div class="menu-toggle rounded-pill p-2 fw-bold cursor-pointer">
<div class="menu-toggle rounded-pill fw-bold cursor-pointer">
<i class="bi bi-list fs-5 fw-bold"></i>
</div>
`
Expand Down
44 changes: 17 additions & 27 deletions modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1327,7 +1327,7 @@ protected function output() {
$this->trans('Running in debug mode. See https://cypht.org/install.html Section 6 for more detail.').
'" class="debug_title">'.$this->trans('Debug').'</span>';
}
$res .= '<img class="app-logo" src="'.WEB_ROOT. 'modules/core/assets/images/logo_dark.svg">';
$res .= '<a href="?page=home" class="menu_home"><img class="app-logo" src="'.WEB_ROOT. 'modules/core/assets/images/logo_dark.svg"></a>';
$res .= '<div class="main"><ul class="folders">';
if ($this->format == 'HTML5') {
return $res;
Expand Down Expand Up @@ -1392,25 +1392,6 @@ protected function output() {
}
}

/**
* Outputs the logout link in the Main menu of the folder list
* @subpackage core/output
*/
class Hm_Output_logout_menu_item extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_logout"><a class="unread_link logout_link" href="#">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-power fs-5 me-2"></i>';
}
$res .= '<span class="nav-label">'.$this->trans('Logout').'</span></a></li>';

if ($this->format == 'HTML5') {
return $res;
}
$this->concat('formatted_folder_list', $res);
}
}

/**
* Close the Main menu section of the folder list
* @subpackage core/output
Expand Down Expand Up @@ -1477,11 +1458,6 @@ protected function output() {
$res = '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">'.$this->trans('Settings').
'<i class="bi bi-chevron-down"></i></div>'.
'<ul class="collapse settings folders">';
$res .= '<li class="menu_home"><a class="unread_link" href="?page=home">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-house-door-fill menu-icon"></i>';
}
$res .= $this->trans('Home').'</a></li>';
if ($this->format == 'HTML5') {
return $res;
}
Expand Down Expand Up @@ -1614,8 +1590,22 @@ class Hm_Output_folder_list_content_end extends Hm_Output_Module {
* Adds collapse and reload links
*/
protected function output() {
$res = '<a href="#" class="update_message_list">'.$this->trans('[reload]').'</a>';
$res .= '<div class="menu-toggle rounded-pill p-3 fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>';
$res = '<div class="sidebar-footer">';
$res .= '<a class="logout_link" href="#" title="'. $this->trans('Logout') .'">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-power menu-icon"></i>';
}
$res .= '<span class="nav-label">' . $this->trans('Logout') .'</span>';
$res .= '</a>';
$res .= '<a href="#" class="update_message_list" title="'. $this->trans('Reload') .'">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-arrow-clockwise menu-icon"></i>';
}
$res .= '<span class="nav-label">' . $this->trans('Reload') . '</span>';
$res .= '</a>';
/** Sidebar footer end */

$res .= '<div class="menu-toggle rounded-pill fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>';
if ($this->format == 'HTML5') {
return $res;
}
Expand Down
1 change: 0 additions & 1 deletion modules/core/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,6 @@
add_output('ajax_hm_folders', 'main_menu_start', true);
add_output('ajax_hm_folders', 'search_from_folder_list', true);
add_output('ajax_hm_folders', 'main_menu_content', true);
add_output('ajax_hm_folders', 'logout_menu_item', true);
add_output('ajax_hm_folders', 'main_menu_end', true);
add_output('ajax_hm_folders', 'email_menu_content', true);
add_output('ajax_hm_folders', 'settings_menu_start', true);
Expand Down
59 changes: 35 additions & 24 deletions modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ a:hover {
min-height: 100vh;
}

.selected_menu {
li.selected_menu {
background-color: var(--bs-primary-bg-subtle);
}
.selected_menu a {
li.selected_menu a {
color: var(--bs-link-color) !important;
}

Expand Down Expand Up @@ -469,11 +469,6 @@ button {
padding-bottom: 100px;
}

.folder_list .update_message_list {
font-size: 80%;
padding-top: 10px;
float: right;
}
.src_name {
white-space: nowrap;
overflow: hidden;
Expand Down Expand Up @@ -972,10 +967,6 @@ div.unseen,
margin-right: 0px;
width: 100%;
}
.mobile .folder_list li a {
font-size: 110%;
padding-top: 10px;
}
.mobile .folder_list li {
padding-top: 5px;
padding-bottom: 5px;
Expand Down Expand Up @@ -1024,9 +1015,6 @@ div.unseen,
height: 24px;
vertical-align: -13px;
}
.mobile .update_message_list {
margin-right: 20px;
}
.mobile .msg_text {
width: 100%;
max-width: 480px !important;
Expand Down Expand Up @@ -1122,9 +1110,6 @@ div.unseen,
.mobile .search_form select {
width: 30px;
}
.mobile .search_terms {
max-width: 250px;
}
.mobile .search_content {
padding-top: 30px;
}
Expand Down Expand Up @@ -1410,24 +1395,25 @@ div.unseen,
.menu-toggle {
position: absolute;
top: 20px;
right: 0;
right: 15px;
z-index: 999;
color: var(--bs-primary);
}

.mobile .menu-toggle {
position: fixed;
top: 0;
left: -2rem;
right: unset;
left: 20px;
z-index: 1000;
width: 5rem;
text-align: right;
top: 15px;
}

.mobile nav .menu-toggle {
right: -2rem;
right: 20px;
left: unset;
text-align: left;
top: 20px;
}

body {
Expand All @@ -1452,9 +1438,9 @@ nav.collapsed .app-logo, nav.collapsed .menu_search, nav.collapsed .nav-label, n
}

nav.collapsed .menu-toggle {
right: 22%;
top: 0;
right: 32%;
margin: auto;
/* margin-left: 32px; */
}

nav.collapsed .folders {
Expand All @@ -1475,6 +1461,31 @@ nav.collapsed .total_unread_count {
top: 0;
}

nav.collapsed .sidebar-footer {
flex-direction: column;
padding: 0;
padding-left: 20px;
gap: 15px;
}

nav.collapsed .sidebar-footer a {
text-align: center;
}

/* End collapsed navbar state */

.sidebar-footer {
margin-top: 35px;
display: flex;
justify-content: space-between;
padding: 0 15px 0 25px;
font-size: 0.8rem;
}

.logout_link {
color: rgba(var(--bs-body-color-rgb), 0.7);
}

a[disabled] {
cursor: default;
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion modules/history/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
add_output('history', 'history_content', true, 'history', 'history_heading', 'after');
add_output('history', 'history_footer', true, 'history', 'history_content', 'after');

add_output('ajax_hm_folders', 'history_page_link', true, 'history', 'logout_menu_item', 'before');
add_output('ajax_hm_folders', 'history_page_link', true, 'history', 'main_menu_content', 'before');

add_handler('ajax_imap_message_content', 'history_record_imap_message', true, 'history', 'imap_message_content', 'after');
add_handler('ajax_feed_item_content', 'history_record_feed_message', true, 'history', 'feed_item_content', 'after');
Expand Down
4 changes: 2 additions & 2 deletions modules/smtp/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@
add_handler('ajax_smtp_delete_draft', 'process_delete_draft', true, 'smtp', 'load_user_data', 'after');

/* folder list link */
add_output('ajax_hm_folders', 'compose_page_link', true, 'smtp', 'logout_menu_item', 'before');
add_output('ajax_hm_folders', 'compose_page_link', true, 'smtp', 'main_menu_content', 'before');
add_handler('ajax_hm_folders', 'smtp_auto_bcc_check', true, 'smtp', 'load_imap_servers_from_config', 'after');
add_output('ajax_hm_folders', 'sent_folder_link', true, 'smtp', 'logout_menu_item', 'before');
add_output('ajax_hm_folders', 'sent_folder_link', true, 'smtp', 'main_menu_content', 'before');

add_handler('ajax_update_server_pw', 'load_smtp_servers_from_config', true, 'smtp', 'load_user_data', 'after');

Expand Down
25 changes: 7 additions & 18 deletions tests/phpunit/modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -852,10 +852,10 @@ public function test_folder_list_content_start() {
public function test_main_menu_start() {
$test = new Output_Test('main_menu_start', 'core');
$res = $test->run();
$this->assertEquals(array('<img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
$this->assertEquals(array('<a href="?page=home" class="menu_home"><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"></a><div class="main"><ul class="folders">'), $res->output_response);
$test->rtype = 'AJAX';
$res = $test->run();
$this->assertEquals(array('formatted_folder_list' => '<img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
$this->assertEquals(array('formatted_folder_list' => '<a href="?page=home" class="menu_home"><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"></a><div class="main"><ul class="folders">'), $res->output_response);
}
/**
* @preserveGlobalState disabled
Expand All @@ -870,18 +870,7 @@ public function test_main_menu_content() {
$res = $test->run();
$this->assertEquals(array('folder_sources' => array(array('email_folders', 'baz')), 'formatted_folder_list' => '<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread"><i class="bi bi-envelope-fill menu-icon"></i><span class="nav-label">Unread</span></a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li><li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged"><i class="bi bi-flag-fill menu-icon"></i><span class="nav-label">Flagged</span></a> <span class="flagged_count"></span></li><li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk"><i class="bi bi-envelope-x-fill menu-icon"></i><span class="nav-label">Junk</span></a></li><li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash"><i class="bi bi-trash3-fill menu-icon"></i><span class="nav-label">Trash</span></a></li><li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts"><i class="bi bi-pencil-square menu-icon"></i><span class="nav-label">Drafts</span></a></li>'), $res->output_response);
}
/**
* @preserveGlobalState disabled
* @runInSeparateProcess
*/
public function test_logout_menu_item() {
$test = new Output_Test('logout_menu_item', 'core');
$res = $test->run();
$this->assertEquals(array('<li class="menu_logout"><a class="unread_link logout_link" href="#"><i class="bi bi-power fs-5 me-2"></i><span class="nav-label">Logout</span></a></li>'), $res->output_response);
$test->rtype = 'AJAX';
$res = $test->run();
$this->assertEquals(array('formatted_folder_list' => '<li class="menu_logout"><a class="unread_link logout_link" href="#"><i class="bi bi-power fs-5 me-2"></i><span class="nav-label">Logout</span></a></li>'), $res->output_response);
}

/**
* @preserveGlobalState disabled
* @runInSeparateProcess
Expand Down Expand Up @@ -917,10 +906,10 @@ public function test_email_menu_content() {
public function test_settings_menu_start() {
$test = new Output_Test('settings_menu_start', 'core');
$res = $test->run();
$this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill menu-icon"></i>Home</a></li>'), $res->output_response);
$this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders">'), $res->output_response);
$test->rtype = 'AJAX';
$res = $test->run();
$this->assertEquals(array('formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill menu-icon"></i>Home</a></li>'), $res->output_response);
$this->assertEquals(array('formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders">'), $res->output_response);
}
/**
* @preserveGlobalState disabled
Expand Down Expand Up @@ -983,10 +972,10 @@ public function test_settings_menu_end() {
public function test_folder_list_content_end() {
$test = new Output_Test('folder_list_content_end', 'core');
$res = $test->run();
$this->assertEquals(array('<a href="#" class="update_message_list">[reload]</a><div class="menu-toggle rounded-pill p-3 fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>'), $res->output_response);
$this->assertEquals(array('<div class="sidebar-footer"><a class="logout_link" href="#" title="Logout"><i class="bi bi-power menu-icon"></i><span class="nav-label">Logout</span></a><a href="#" class="update_message_list" title="Reload"><i class="bi bi-arrow-clockwise menu-icon"></i><span class="nav-label">Reload</span></a><div class="menu-toggle rounded-pill fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>'), $res->output_response);
$test->rtype = 'AJAX';
$res = $test->run();
$this->assertEquals(array('formatted_folder_list' => '<a href="#" class="update_message_list">[reload]</a><div class="menu-toggle rounded-pill p-3 fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>'), $res->output_response);
$this->assertEquals(array('formatted_folder_list' => '<div class="sidebar-footer"><a class="logout_link" href="#" title="Logout"><i class="bi bi-power menu-icon"></i><span class="nav-label">Logout</span></a><a href="#" class="update_message_list" title="Reload"><i class="bi bi-arrow-clockwise menu-icon"></i><span class="nav-label">Reload</span></a><div class="menu-toggle rounded-pill fw-bold cursor-pointer"><i class="bi bi-list fs-5 fw-bold"></i></div>'), $res->output_response);
}
/**
* @preserveGlobalState disabled
Expand Down
4 changes: 2 additions & 2 deletions tests/phpunit/modules/core/output_modules_debug.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ static function router_module_list_provider() {
public function test_main_menu_start_debug() {
$test = new Output_Test('main_menu_start', 'core');
$res = $test->run();
$this->assertEquals(array('<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
$this->assertEquals(array('<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><a href="?page=home" class="menu_home"><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"></a><div class="main"><ul class="folders">'), $res->output_response);
$test->rtype = 'AJAX';
$res = $test->run();
$this->assertEquals(array('formatted_folder_list' => '<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
$this->assertEquals(array('formatted_folder_list' => '<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><a href="?page=home" class="menu_home"><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"></a><div class="main"><ul class="folders">'), $res->output_response);
}
}
5 changes: 2 additions & 3 deletions tests/selenium/folder_list.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ def reload_folder_list(self):
def expand_section(self):
self.by_css('[data-bs-target=".settings"]').click()
list_item = self.by_class('menu_home')
list_item.find_element(By.TAG_NAME, 'a').click()
list_item.click()
self.wait_with_folder_list()
self.wait_for_navigation_to_complete()
assert self.by_class('content_title').text == 'Home'
Expand All @@ -56,8 +56,7 @@ def hide_folders(self):
hide_button = self.by_class('menu-toggle')
self.driver.execute_script("arguments[0].click();", hide_button)
list_item = self.by_class('menu_home')
link = list_item.find_element(By.TAG_NAME, 'a')
assert link.is_displayed() == False
assert list_item.is_displayed() == False

def show_folders(self):
self.wait(By.CLASS_NAME, 'menu-toggle')
Expand Down
2 changes: 1 addition & 1 deletion tests/selenium/pages.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ def history(self):
def home(self):
self.by_css('[data-bs-target=".settings"]').click()
list_item = self.by_class('menu_home')
list_item.find_element(By.TAG_NAME, 'a').click()
list_item.click()
self.wait_with_folder_list()
self.safari_workaround()
self.wait_for_navigation_to_complete()
Expand Down

0 comments on commit 412b5ad

Please sign in to comment.