UI - Improve items page UX to see tree/items list and items details simultaneously.

includes/core/load.js.php

@@ -75,6 +75,14 @@
         if (window.history.replaceState) {
             window.history.replaceState(null, null, window.location.href);
         }
+
+        // Check theme on page load
+        applyTheme(false);
+
+        // Switch light/dark theme button
+        $('#switch-theme').on('click', function() {
+            applyTheme(true);
+        });
     });
 
     /**
@@ -1648,7 +1656,7 @@ function(data) {
                         '<?php echo $lang->get('caution'); ?>', {
                             timeOut: 5000,
                             progressBar: true,
-                            positionClass: "toast-top-right"
+                            positionClass: "toast-bottom-right"
                         }
                     );
                     return false;
@@ -1975,7 +1983,7 @@ function(data) {
         if (urlParams.get('page') === 'items') {
             // go back to list
             // Play with show and hide classes
-            $('.form-item, .form-item-action, .form-folder-action, .item-details-card, .columns-position, #item-details-card-categories, #form-item-upload-pickfilesList, #card-item-expired')
+            $('.form-item, .form-item-action, .form-folder-action, .columns-position, #item-details-card-categories, #form-item-upload-pickfilesList, #card-item-expired')
                 .addClass('hidden');
             $('#folders-tree-card').removeClass('hidden');
 
@@ -2064,4 +2072,67 @@ function(data) {
             }
         );
     }
+
+    /**
+     * Switch betwen light and dark themes.
+     * 
+     * @param {bool} switch_theme
+     */
+    function applyTheme(switch_theme) {
+        // Read actual theme (default = light)
+        let mode = $.cookie('teampass_theme') !== null ? $.cookie('teampass_theme') : 'light';
+
+        // Switch mode value if page loading
+        if (switch_theme) {
+            mode = (mode === 'dark') ? 'light' : 'dark'
+        }
+
+        if (mode === 'dark') {
+            // Meta theme-color (titlebar)
+            $('meta[name="theme-color"]').attr('content', '#343a40');
+
+            // Adminlte dark theme
+            $('body').addClass('dark-mode');
+            $('html').data('bs-theme', 'dark');
+
+            // jstree dark theme
+            $('#jstree').addClass('jstree-default-dark');
+
+            // Overload .main-header color
+            $('.main-header').removeClass('navbar-white navbar-light');
+            $('.main-header').addClass('navbar-dark');
+
+            // overload tp-action buttons
+            $('#navbarNav .tp-action').removeClass('text-navy');
+            $('#navbarNav .tp-action').addClass('text-white');
+
+            // Overload buttons
+            $('.btn-outline-info').addClass('bg-gray-dark');
+            $('.card-header btn').addClass('bg-gray');
+        } else {
+            // Meta theme-color (titlebar)
+            $('meta[name="theme-color"]').attr('content', '#fff');
+
+            // Adminlte light theme
+            $('body').removeClass('dark-mode');
+
+            // jstree dark theme
+            $('#jstree').removeClass('jstree-default-dark');
+
+            // Restore .main-header default classes
+            $('.main-header').removeClass('navbar-dark');
+            $('.main-header').addClass('navbar-white navbar-light');
+
+            // overload item-form-new-button buttons
+            $('#navbarNav .tp-action').addClass('text-navy');
+            $('#navbarNav .tp-action').removeClass('text-white');
+
+            // Overload buttons
+            $('.btn-outline-info').removeClass('bg-gray-dark');
+            $('.card-header btn').removeClass('bg-gray');
+        }
+
+        // Store new theme value
+        $.cookie('teampass_theme', mode, { expires: 365, secure: true});
+    }
 </script>

includes/core/login.js.php

@@ -639,7 +639,7 @@ function(teampassUser) {
                         '<?php echo $lang->get('caution'); ?>', {
                             timeOut: 5000,
                             progressBar: true,
-                            positionClass: "toast-top-right"
+                            positionClass: "toast-bottom-right"
                         }
                     );
                     return false;
@@ -752,7 +752,7 @@ function(receivedData) {
                         '<?php echo $lang->get('caution'); ?>', {
                             timeOut: 5000,
                             progressBar: true,
-                            positionClass: "toast-top-right"
+                            positionClass: "toast-bottom-right"
                         }
                     );
                     return false;
@@ -771,7 +771,7 @@ function(receivedData) {
                         '<?php echo $lang->get('index_maintenance_mode_admin'); ?>',
                         '<?php echo $lang->get('caution'); ?>', {
                             timeOut: 0,
-                            positionClass: "toast-top-right"
+                            positionClass: "toast-bottom-right"
                         }
                     );
                     return false;
@@ -796,7 +796,7 @@ function(receivedData) {
                             {
                                 timeOut: 10000,
                                 progressBar: true,
-                                positionClass: "toast-top-right"
+                                positionClass: "toast-bottom-right"
                             }
                         );
                         if(data.ga_bad_code === true)
@@ -810,7 +810,7 @@ function(receivedData) {
                             '<?php echo $lang->get('caution'); ?>', {
                                 timeOut: 5000,
                                 progressBar: true,
-                                positionClass: "toast-top-right"
+                                positionClass: "toast-bottom-right"
                             }
                         );
                     }

includes/core/login.php

@@ -66,7 +66,7 @@
 }
 
 echo '
-<body class="hold-transition login-page">
+<body class="hold-transition login-page '.$theme_body.'">
 <div class="login-box">
     <div class="login-logo"><div style="margin:30px;">',
     isset($SETTINGS['custom_logo']) === true && empty($SETTINGS['custom_logo']) === false ?

includes/core/logout.php

@@ -90,20 +90,22 @@
 $session->invalidate();
 $session->set('key', SessionManager::getCookieValue('PHPSESSID'));
 
-echo '
-    <script type="text/javascript" src="../../plugins/store.js/dist/store.everything.min.js"></script>
-    <script language="javascript" type="text/javascript">
-    <!--
-        // Clear localstorage
-        store.remove("teampassApplication");
-        store.remove("teampassSettings");
-        store.remove("teampassUser");
-        store.remove("teampassItem");
-        sessionStorage.clear();
-        localStorage.clear();
-
-        setTimeout(function() {
-            document.location.href="../../index.php"
-        }, 1);
-    -->
-    </script>';
+?>
+<script type="text/javascript" src="../../plugins/store.js/dist/store.everything.min.js"></script>
+<script language="javascript" type="text/javascript">
+    // Save jstree state
+    jstree_save = store.get("jstree") !== undefined ? store.get("jstree") : null;
+
+    // Clear all localstorage
+    sessionStorage.clear();
+    localStorage.clear();
+
+    // Restore jstree state
+    if (jstree_save !== null) {
+        store.set('jstree', jstree_save);
+    }
+
+    setTimeout(function() {
+        document.location.href="../../index.php"
+    }, 1);
+</script>

includes/css/teampass.css

@@ -75,7 +75,6 @@
     position: absolute;
     top: 8px;
     right: 0px;
-    background-color:#ECECEC;
     color:#c4c4c4;
 }
 
@@ -287,4 +286,29 @@
 	height: 100%;
 	line-height: inherit;
 	padding-top: 10px;
-}
+}
+
+/* Some issues with background-image on buttons in 
+ * dark mode and it's not particularly pretty. */
+.btn {
+    background-image: none !important;
+}
+
+/* Light blue on blue is not very readable */
+.dark-mode .jstree-anchor:hover {
+    color: #fff !important;
+}
+
+/* Not adminlte items */
+.dark-mode .select2-selection {
+    background-color: #343a40 !important;
+    border: 1px solid #6c757d !important;
+}
+.dark-mode .select2-selection span {
+    color: #fff !important;
+}
+
+/* Scrollbar */
+.dark-mode {
+    scrollbar-color: #3b3b3b #555;
+}

index.php

@@ -198,6 +198,12 @@
     $menuUtilities = false;
 }
 
+// Force dark theme on page generation
+$theme = $_COOKIE['teampass_theme'] ?? 'light';
+$theme_body = $theme === 'dark' ? 'dark-mode' : '';
+$theme_meta = $theme === 'dark' ? '#343a40' : '#fff';
+$theme_navbar = $theme === 'dark' ? 'navbar-dark' : 'navbar-white navbar-light';
+
 ?>
 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
 
@@ -207,7 +213,8 @@
     <meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Teampass</title>
+    <meta name="theme-color" content="<?php echo $theme_meta; ?>" />
+    <title><?php echo $configManager->getSetting('teampass_title') ?? 'Teampass'; ?></title>
     <script type='text/javascript'>
         //<![CDATA[
         if (window.location.href.indexOf('page=') === -1 &&
@@ -265,11 +272,11 @@
     empty($get['page']) === false && empty($session->get('user-id')) === false
 ) {
     ?>
-    <body class="hold-transition sidebar-mini layout-navbar-fixed layout-fixed">
+    <body class="hold-transition sidebar-mini layout-navbar-fixed layout-fixed <?php echo $theme_body; ?>">
         <div class="wrapper">
 
             <!-- Navbar -->
-            <nav class="main-header navbar navbar-expand navbar-white navbar-light border-bottom">
+            <nav class="main-header navbar navbar-expand <?php echo $theme_navbar ?>">
                 <!-- User encryption still ongoing -->
                 <div id="user_not_ready" class="alert alert-warning hidden pointer p-2 mt-2" style="position:absolute; left:200px;">
                     <span class="align-middle infotip ml-2" title="<?php echo $lang->get('keys_encryption_not_ready'); ?>"><?php echo $lang->get('account_not_ready'); ?><span id="user_not_ready_progress"></span><i class="fa-solid fa-hourglass-half fa-beat-fade mr-2 ml-2"></i></span>
@@ -280,21 +287,6 @@
                     <li class="nav-item">
                         <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa-solid fa-bars"></i></a>
                     </li>
-                    <?php
-                        if ($get['page'] === 'items') {
-                            ?>
-                        <li class="nav-item d-none d-sm-inline-block">
-                            <a class="nav-link" href="#">
-                                <i class="far fa-arrow-alt-circle-right columns-position tree-increase infotip" title="<?php echo $lang->get('move_right_columns_separator'); ?>"></i>
-                            </a>
-                        </li>
-                        <li class="nav-item d-none d-sm-inline-block">
-                            <a class="nav-link" href="#">
-                                <i class="far fa-arrow-alt-circle-left columns-position tree-decrease infotip" title="<?php echo $lang->get('move_left_columns_separator'); ?>"></i>
-                            </a>
-                        </li>
-                    <?php
-                        } ?>
                 </ul>
 
                 <!-- Right navbar links -->
@@ -356,6 +348,9 @@
                     <li class="nav-item">
                         <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" id="controlsidebar"><i class="fa-solid fa-th-large"></i></a>
                     </li>
+                    <li id="switch-theme" class="nav-item pointer">
+                        <i class="fa-solid fa-circle-half-stroke m-2 m-2"></i>
+                    </li>
                 </ul>
             </nav>
             <!-- /.navbar -->
@@ -1148,7 +1143,7 @@ function(teampassSettings) {}
     <link href="plugins/fontawesome-free-6/css/v5-font-face.min.css?v=<?php echo TP_VERSION; ?>" rel="stylesheet" /> 
     <!-- jQuery -->
     <script src="plugins/jquery/jquery.min.js?v=<?php echo TP_VERSION; ?>"></script>
-    <script src="plugins/jstree/jquery.cookie.js?v=<?php echo TP_VERSION; ?>" type="text/javascript"></script>
+    <script src="plugins/jquery/jquery.cookie.js?v=<?php echo TP_VERSION; ?>" type="text/javascript"></script>
     <!-- jQuery UI -->
     <script src="plugins/jqueryUI/jquery-ui.min.js?v=<?php echo TP_VERSION; ?>"></script>
     <link rel="stylesheet" href="plugins/jqueryUI/jquery-ui.min.css?v=<?php echo TP_VERSION; ?>">

pages/admin.js.php

@@ -152,7 +152,7 @@ function(data) {
                         '<?php echo $lang->get('server_answer_error') . '<br />' . $lang->get('server_returned_data') . ':<br />'; ?>' + data.error,
                         '', {
                             closeButton: true,
-                            positionClass: 'toastr-top-right'
+                            positionClass: 'toast-bottom-right'
                         }
                     );
                     return false;
@@ -226,7 +226,7 @@ function(data) {
                         '<?php echo $lang->get('server_answer_error') . '<br />' . $lang->get('server_returned_data') . ':<br />'; ?>' + data.error,
                         '', {
                             closeButton: true,
-                            positionClass: 'toastr-top-right'
+                            positionClass: 'toast-bottom-right'
                         }
                     );
                     return false;
@@ -274,7 +274,7 @@ function(data) {
                         '<?php echo $lang->get('server_answer_error') . '<br />' . $lang->get('server_returned_data') . ':<br />'; ?>' + data.error,
                         '', {
                             closeButton: true,
-                            positionClass: 'toastr-top-right'
+                            positionClass: 'toast-bottom-right'
                         }
                     );
                     return false;

pages/backups.php

@@ -141,7 +141,7 @@
                                                     <div class="input-group mb-0">
                                                         <input type="text" class="form-control form-control-sm" id="onthefly-backup-key" value="<?php echo $localEncryptionKey; ?>">
                                                         <div class="input-group-append">
-                                                            <button class="btn btn-outline-secondary btn-no-click infotip key-generate" title="<?php echo $lang->get('pw_generate'); ?>"><i class="fas fa-random"></i></button>
+                                                            <button class="btn btn-secondary btn-no-click infotip key-generate" title="<?php echo $lang->get('pw_generate'); ?>"><i class="fas fa-random"></i></button>
                                                         </div>
                                                     </div>
                                                 </div>