Skip to content

Commit

Permalink
Tweak the sidebar for a modern look and feel (#1313)
Browse files Browse the repository at this point in the history 
* Tweak the sidebar for a modern look and feel

* Many adjustments, including: using the bootstrap collapse components for collapsible items in the navbar, the sizing, and a bit on the look

* Adjust unit tests

* Adjust selenium tests

* Fix selenium tests

* Fix folder_list tests

* Fix profiles tests

* Fix settings tests

* Fix servers tests
  • Loading branch information
@jacob-js
jacob-js authored Nov 5, 2024
1 parent ff0b66c commit 7a4a4d4
Show file tree
Hide file tree
Showing 26 changed files with 147 additions and 123 deletions.
2 changes: 1 addition & 1 deletion modules/account/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ protected function output() {
if ($this->get('internal_users')) {
$res = '<li class="menu_change_password"><a class="unread_link" href="?page=change_password">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-key-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-key-fill menu-icon"></i>';
}
$res .= $this->trans('Password').'</a></li>';
$this->concat('formatted_folder_list', $res);
Expand Down
2 changes: 1 addition & 1 deletion modules/calendar/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ class Hm_Output_calendar_page_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_calendar"><a class="unread_link" href="?page=calendar">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-calendar-week-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-calendar-week-fill menu-icon"></i>';
}
$res .= $this->trans('Calendar').'</a></li>';
if ($this->format == 'HTML5') {
Expand Down
2 changes: 1 addition & 1 deletion modules/contacts/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ class Hm_Output_contacts_page_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_contacts"><a class="unread_link" href="?page=contacts">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-people-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-people-fill menu-icon"></i>';
}
$res .= $this->trans('Contacts').'</a></li>';
if ($this->format == 'HTML5') {
Expand Down
61 changes: 29 additions & 32 deletions modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,16 @@ class Hm_Output_search_from_folder_list extends Hm_Output_Module {
* Add a search form to the top of the folder list
*/
protected function output() {
$res = '<li class="menu_search"><form method="get">';
$res .= '<div class="d-flex bd-highlight">';
$res = '<li class="menu_search mb-4"><form method="get">';
$res .= '<div class="input-group">';
if (!$this->get('hide_folder_icons')) {
$res .= '<div class="ps-1 pe-2"><a class="unread_link" href="?page=search">';
$res .= '<i class="bi bi-search"></i></a></div>';
$res .= '<a href="?page=search" class="input-group-text" id="basic-addon1">' .
'<i class="bi bi-search"></i>' .
'</a>';
}
$res .= '<div class="flex-fill bd-highlight"><input type="hidden" name="page" value="search" />'.
'<input type="search" class="search_terms form-control form-control-sm" '.
'name="search_terms" placeholder="'.$this->trans('Search').'" /></div></div></form></li>';
$res .= '<input type="hidden" name="page" value="search" />'.
'<input type="search" class="search_terms form-control form-control-sm" aria-describedby="basic-addon1" '.
'name="search_terms" placeholder="'.$this->trans('Search').'" /></div></form></li>';
if ($this->format == 'HTML5') {
return $res;
}
Expand Down Expand Up @@ -1320,14 +1321,14 @@ class Hm_Output_main_menu_start extends Hm_Output_Module {
* Opens a div and unordered list tag
*/
protected function output() {
$res = '<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">'.$this->trans('Main');
$res = '';
if (DEBUG_MODE) {
$res .= ' <span title="'.
$res .= '<span title="'.
$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 .= '<i class="bi bi-chevron-down"></i>'.
'</div><div class="main"><ul class="folders">';
$res .= '<img class="app-logo" src="'.WEB_ROOT. 'modules/core/assets/images/logo_dark.svg">';
$res .= '<div class="main"><ul class="folders">';
if ($this->format == 'HTML5') {
return $res;
}
Expand All @@ -1354,33 +1355,33 @@ protected function output() {
if ($total_accounts > 1) {
$res .= '<li class="menu_combined_inbox"><a class="unread_link" href="?page=message_list&amp;list_path=combined_inbox">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-box2-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-box2-fill menu-icon"></i>';
}
$res .= $this->trans('Everything').'</a><span class="combined_inbox_count"></span></li>';
}
$res .= '<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">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-envelope-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-envelope-fill menu-icon"></i>';
}
$res .= $this->trans('Unread').'</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li>';
$res .= '<li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-flag-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-flag-fill menu-icon"></i>';
}
$res .= $this->trans('Flagged').'</a> <span class="flagged_count"></span></li>';
$res .= '<li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-envelope-x-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-envelope-x-fill menu-icon"></i>';
}
$res .= $this->trans('Junk').'</a></li>';
$res .= '<li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-trash3-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-trash3-fill menu-icon"></i>';
}
$res .= $this->trans('Trash').'</a></li>';
$res .= '<li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-pencil-square fs-5 me-2"></i>';
$res .= '<i class="bi bi-pencil-square menu-icon"></i>';
}
$res .= $this->trans('Drafts').'</a></li>';

Expand Down Expand Up @@ -1440,22 +1441,18 @@ protected function output() {
$parts = explode('_', $src);
array_pop($parts);
$name = ucwords(implode(' ', $parts));
$class = $this->html_safe($src);
if (!$single) {
$res .= '<div class="src_name d-flex justify-content-between pe-2" data-source=".'.$this->html_safe($src).'">'.$this->trans($name).
$res .= '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".'.$this->html_safe($src).'">'.$this->trans($name).
'<i class="bi bi-chevron-down"></i></div>';
$class .= ' collapse';
}

if ($single) {
$res .= '<div ';
}
else {
$res .= '<div style="display: none;" ';
}
$res .= 'class="'.$this->html_safe($src).'"><ul class="folders">';
$res .= '<div class="'.$class.'"><ul class="folders">';
if ($name == 'Email' && count($this->get('imap_servers', array())) > 1) {
$res .= '<li class="menu_email"><a class="unread_link" href="?page=message_list&amp;list_path=email">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-globe-americas fs-5 me-2"></i>';
$res .= '<i class="bi bi-globe-americas menu-icon"></i>';
}
$res .= $this->trans('All').'</a> <span class="unread_mail_count"></span></li>';
}
Expand All @@ -1477,12 +1474,12 @@ class Hm_Output_settings_menu_start extends Hm_Output_Module {
* Opens an unordered list
*/
protected function output() {
$res = '<div class="src_name d-flex justify-content-between pe-2" data-source=".settings">'.$this->trans('Settings').
$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 style="display: none;" class="settings folders">';
'<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 fs-5 me-2"></i>';
$res .= '<i class="bi bi-house-door-fill menu-icon"></i>';
}
$res .= $this->trans('Home').'</a></li>';
if ($this->format == 'HTML5') {
Expand Down Expand Up @@ -1545,7 +1542,7 @@ class Hm_Output_settings_servers_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_servers"><a class="unread_link" href="?page=servers">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-pc-display-horizontal fs-5 me-2"></i>';
$res .= '<i class="bi bi-pc-display-horizontal menu-icon"></i>';
}
$res .= $this->trans('Servers').'</a></li>';
$this->concat('formatted_folder_list', $res);
Expand All @@ -1563,7 +1560,7 @@ class Hm_Output_settings_site_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_settings"><a class="unread_link" href="?page=settings">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-gear-wide-connected fs-5 me-2"></i>';
$res .= '<i class="bi bi-gear-wide-connected menu-icon"></i>';
}
$res .= $this->trans('Site').'</a></li>';
$this->concat('formatted_folder_list', $res);
Expand All @@ -1584,7 +1581,7 @@ protected function output() {
}
$res = '<li class="menu_save"><a class="unread_link" href="?page=save">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-download fs-5 me-2"></i>';
$res .= '<i class="bi bi-download menu-icon"></i>';
}
$res .= $this->trans('Save').'</a></li>';
$this->concat('formatted_folder_list', $res);
Expand Down
56 changes: 32 additions & 24 deletions modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ a:hover {
.folder_cell {
vertical-align: top;
height: 100%;
max-width: 15%;
display: table-cell;
padding: 0px;
margin: 0px;
Expand All @@ -50,11 +49,11 @@ a:hover {
min-height: 100vh;
}

.selected_menu,
.selected_menu {
background-color: var(--bs-primary-bg-subtle);
}
.selected_menu a {
color: var(--bs-link-color) !important;
font-weight: bold !important;
line-height: 1.25em;
}

form {
Expand Down Expand Up @@ -369,9 +368,10 @@ button {
margin-right: 20px;
padding-right: 15px;
padding-bottom: 40px;
min-width: 200px;
min-width: 300px;
padding-top: 0px;
min-height: 100vh;
padding-top: 20px;
}

.folders,
Expand All @@ -381,14 +381,19 @@ button {
margin-left: 10px;
padding-right: 0px;
}
.folders li,
.folders li {
padding: 0.5rem;
border-radius: var(--bs-border-radius);
transition: all linear 0.3s;
margin-bottom: 10px;
}
.inner_list li {
padding: 4px;
padding-left: 10px;
padding-bottom: 0px;
margin: 2px;
white-space: nowrap;
}
.inner_list li i {
margin-right: 0.25rem;
}
.loading_folders {
text-align: center;
margin: 10px;
Expand Down Expand Up @@ -444,19 +449,18 @@ button {
cursor: pointer;
padding-left: 25px;
margin-top: 0px;
margin-right: -15px;
background: linear-gradient(
180deg,
var(--bs-body-bg),
var(--bs-body-bg),
var(--bs-secondary-bg)
) !important;
border-bottom: solid 1px var(--bs-secondary-bg);
border-top: solid 1px var(--bs-secondary-bg);
padding-top: 10px;
font-size: 125%;
letter-spacing: -1px;
padding-bottom: 10px;
transition: border-bottom-color 0.3s linear;
}
.src_name > i {
transition: transform 0.3s;
}
.src_name[aria-expanded="true"] {
border-bottom-color: transparent;
}
.main_menu {
padding-top: 20px;
Expand Down Expand Up @@ -717,9 +721,6 @@ button {
.search_terms {
padding-left: 5px;
}
.folder_list .search_terms {
width: 100%;
}
.search_content {
display: table;
table-layout: fixed;
Expand Down Expand Up @@ -933,13 +934,9 @@ div.unseen,
}
.mobile .folder_cell {
display: block;
max-width: 96%;
width: 96%;
padding: 0px !important;
}
.mobile .folder_list {
padding: 0px !important;
font-size: 130%;
margin-right: 0px;
width: 100%;
}
Expand Down Expand Up @@ -1396,3 +1393,14 @@ nav .menu-toggle {
body {
overflow-x: hidden;
}

.menu-icon {
font-size: 1rem;
margin-right: 0.5rem;
}

.app-logo {
height: 3rem;
margin-bottom: 1rem;
padding-left: 1rem;
}
26 changes: 12 additions & 14 deletions modules/core/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1269,19 +1269,17 @@ var Hm_Folders = {

folder_list_events: function() {
$('.imap_folder_link').on("click", function() { return expand_imap_folders($(this)); });
$('.src_name').on("click", function() {
var class_name = $(this).data('source');
var icon_element = $(this).find('.bi');
Hm_Utils.toggle_section(class_name);
setTimeout(() => {
var target_element = document.querySelector(class_name);
var is_visible = Hm_Utils.is_element_visible(target_element);
if (is_visible) {
icon_element.removeClass('bi-chevron-down').addClass('bi-chevron-up');
} else {
icon_element.removeClass('bi-chevron-up').addClass('bi-chevron-down');
}
}, 0);
$('.src_name').on('click', function() {

let transformValue = '';
if ($(this).attr('aria-expanded') == 'true') {
transformValue = 'rotate(180deg)';

} else {
transformValue = 'rotate(0deg)';
}

$(this).find('i').css('transform', transformValue);
});
$('.update_message_list').on("click", function(e) {
var text = e.target.innerHTML;
Expand Down Expand Up @@ -1309,7 +1307,7 @@ var Hm_Folders = {
$('.folder_list').find('*').removeClass('selected_menu');
if (path) {
if (page == 'message_list' || page == 'message') {
$("[data-id='"+Hm_Utils.clean_selector(path)+"']").addClass('selected_menu');
$("[data-id='"+Hm_Utils.clean_selector(path)+"']").closest('li').addClass('selected_menu');
$('.menu_'+Hm_Utils.clean_selector(path)).addClass('selected_menu');
}
else {
Expand Down
4 changes: 2 additions & 2 deletions modules/developer/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ class Hm_Output_developer_doc_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_dev"><a class="unread_link" href="?page=dev">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-bug-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-bug-fill menu-icon"></i>';
}
$res .= $this->trans('Dev').'</a></li>';
if ($this->format == 'HTML5') {
Expand All @@ -149,7 +149,7 @@ class Hm_Output_info_page_link extends Hm_Output_Module {
protected function output() {
$res = '<li class="menu_info"><a class="unread_link" href="?page=info">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-info-circle fs-5 me-2"></i>';
$res .= '<i class="bi bi-info-circle menu-icon"></i>';
}
$res .= $this->trans('Info').'</a></li>';
if ($this->format == 'HTML5') {
Expand Down
8 changes: 4 additions & 4 deletions modules/feeds/modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -793,7 +793,7 @@ protected function output() {
if(count($this->get('feeds', array())) > 1) {
$res .= '<li class="menu_feeds"><a class="unread_link" href="?page=message_list&amp;list_path=feeds">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-rss-fill fs-5 me-2"></i>';
$res .= '<i class="bi bi-rss-fill menu-icon"></i>';
}
$res .= $this->trans('All');
$res .= '</a> <span class="unread_feed_count"></span></li>';
Expand All @@ -802,14 +802,14 @@ protected function output() {
$res .= '<li class="feeds_'.$this->html_safe($id).'">'.
'<a data-id="feeds_'.$this->html_safe($id).'" href="?page=message_list&list_path=feeds_'.$this->html_safe($id).'">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-rss fs-5 me-2"></i>';
$res .= '<i class="bi bi-rss menu-icon"></i>';
}
$res .= $this->html_safe($folder).'</a></li>';
}
}
$res .= '<li class="feeds_add_new"><a href="?page=servers#feeds_section">';
if (!$this->get('hide_folder_icons')) {
$res .= '<i class="bi bi-plus-square fs-5 me-2"></i>';
$res .= '<i class="bi bi-plus-square menu-icon"></i>';
}
$res .= $this->trans('Add a feed').'</a></li>';
if ($res) {
Expand Down Expand Up @@ -873,7 +873,7 @@ protected function output() {
class Hm_Output_start_feed_settings extends Hm_Output_Module {
protected function output() {
return '<tr><td colspan="2" data-target=".feeds_setting" class="settings_subtitle cursor-pointer border-bottom p-2">'.
'<i class="bi bi-rss-fill fs-5 me-2"></i>'.$this->trans('Feed Settings').'</td></tr>';
'<i class="bi bi-rss-fill menu-icon"></i>'.$this->trans('Feed Settings').'</td></tr>';
}
}

Expand Down
Loading

0 comments on commit 7a4a4d4

Please sign in to comment.