style: Upgrade to Bootstrap and Bootswatch v5.3.3

package.json

@@ -8,6 +8,8 @@
     "@electron/remote": "2.1.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "adbkit-apkreader": "3.2.0",
+    "bootstrap": "^5.3.3",
+    "bootswatch": "^5.3.3",
     "command-exists": "1.2.9",
     "compare-versions": "6.1.1",
     "electron-find": "1.0.7",

views/browse_include.twig

@@ -1,6 +1,6 @@
 <div class="card text-light bg-primary">
   <div class="card-header sticky" id="nav-panel">
-    <h4 class="float-left mb-0">
+    <h4 class="float-start mb-0">
       <a
         class="btn btn-md btn-primary"
         onclick="upDir()"
@@ -20,32 +20,33 @@
       </a>
       <span id="path"></span>
     </h4>
-    <h4 class="float-right mb-0">
+    <h4 class="float-end mb-0">
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('bookmarksdropdown').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-star" title="Bookmarks"></i>
       </button>
-      <div
+      <ul
         id="bookmarksdropdown"
         class="dropdown-menu"
         style="left: auto; top: auto"
       >
-        <div class="input-group">
+        <li class="input-group">
           <input
             id="bookmarkName"
-            class="ml-3"
+            class="ms-3"
             value=""
             placeholder="Bookmark name"
           >
-          <a class="btn btn-warning btn-sm mr-3" id="addBookmark">
+          <a class="btn btn-warning btn-sm me-3" id="addBookmark">
             <i class="fa fa-plus" title="Add current location"></i
           ></a>
-        </div>
+        </li>
         <hr>
-      </div>
+      </ul>
       <a
         class="btn btn-md btn-primary"
         onclick="refreshDir()"
@@ -55,36 +56,45 @@
       >
       <a
         class="btn btn-md btn-primary"
-        onclick="openSearch()"
+        onclick="toggleSearch()"
         title="(hotkey: ctrl+f)"
       >
         <i class="fa fa-search"></i> Search</a
       >
       <button
         class="btn btn-md btn-primary dropdown-toggle"
         type="button"
-        onclick="$id('searchdropdownmenu').toggle()"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
       >
         <i class="fa fa-sort"></i> Sort By
       </button>
-      <div
-        id="searchdropdownmenu"
+      <ul
+        id="sortdropdownmenu"
         class="dropdown-menu"
         style="right: 0; left: auto; top: auto"
       >
-        <a class="dropdown-item" onclick="sortFiles('name', 1)">
-          <i class="fa fa-sort-alpha-asc"></i> Name</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('name', 0)">
-          <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 1)">
-          <i class="fa fa-sort-amount-asc"></i> Last modified</a
-        >
-        <a class="dropdown-item" onclick="sortFiles('modified', 0)">
-          <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
-        >
-      </div>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 1)">
+            <i class="fa fa-sort-alpha-asc"></i> Name</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('name', 0)">
+            <i class="fa fa-sort-alpha-desc"></i> Name (decending)</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 1)">
+            <i class="fa fa-sort-amount-asc"></i> Last modified</a
+          >
+        </li>
+        <li>
+          <a class="dropdown-item" onclick="sortFiles('modified', 0)">
+            <i class="fa fa-sort-amount-desc"></i> Last modified (decending)</a
+          >
+        </li>
+      </ul>
     </h4>
   </div>
   <div class="card-body">

views/css/main.css

@@ -40,7 +40,7 @@ a {
 .badge {
   text-shadow: none;
 }
-.badge-success {
+.bg-success {
   background: #5a4;
 }
 .alert-warning {
@@ -250,6 +250,16 @@ html {
   overflow-y: scroll;
 }
 
+.small,
+small {
+  font-size: 0.75em;
+}
+
+.form-check-input:checked {
+  background-color: #bfbfbf;
+  border-color: #bfbfbf;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 6pt;

views/device_info.twig

@@ -20,8 +20,8 @@
       const danger = Math.min(5, Math.max(0, percent - 95));
 
       id('storageDiv').innerHTML = `
-      <small class="pull-left">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
-      <small class="pull-right">Free: ${storage.free}</small><br/>
+      <small class="float-start">Used: ${storage.used} of ${storage.size}(${storage.percent})</small>
+      <small class="float-end">Free: ${storage.free}</small><br/>
       <div class="progress">
         <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: ${success}%" aria-valuenow="${success}" aria-valuemin="0" aria-valuemax="100"></div>
         <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: ${warning}%" aria-valuenow="${warning}" aria-valuemin="0" aria-valuemax="100"></div>

views/index.twig

@@ -22,22 +22,22 @@
           Sidenoder Dir: {{ sidenoderHome }}
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="adbCheckIndicator">
+          <div class="badge bg-warning text-start" id="adbCheckIndicator">
             Android Debug Bridge - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="rcloneCheckIndicator">
+          <div class="badge bg-warning text-start" id="rcloneCheckIndicator">
             RCLONE - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="zipCheckIndicator">
+          <div class="badge bg-warning text-start" id="zipCheckIndicator">
             7zip Archiver - checking..
           </div>
         </h4>
         <h4>
-          <div class="badge badge-warning text-left" id="scrcpyCheckIndicator">
+          <div class="badge bg-warning text-start" id="scrcpyCheckIndicator">
             SCRCPY - checking..
           </div>
         </h4>
@@ -61,12 +61,12 @@
       if (adb) {
         const el = $id('adbCheckIndicator');
         if (adb.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> ADB Instaled (${adb.cmd})
             <br/><pre style="font-size: x-small;">${adb.version}</pre>`);
         } else {
-          el.removeClass('badge-warning')
-            .addClass('badge-danger')
+          el.removeClass('bg-warning')
+            .addClass('bg-danger')
             .html(
               `<i class="fa fa-times-circle"></i> ADB Failed. Maybe global installation will be fixed this issue`,
             );
@@ -80,12 +80,12 @@
       if (rclone) {
         const el = $id('rcloneCheckIndicator');
         if (rclone.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> RCLONE Installed (${rclone.cmd})
             <br/><pre style="font-size: x-small;">${rclone.version}</pre>`);
           if (remote.getGlobal('currentConfiguration').autoMount) checkMount();
         } else {
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           Can't find RCLONE - try to manualy download latest <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://downloads.rclone.org/')">RClone</a> and set custom location at settings`);
           if (rclone.error)
@@ -98,11 +98,11 @@
       if (zip) {
         const el = $id('zipCheckIndicator');
         if (zip.version) {
-          el.removeClass('badge-warning').addClass('badge-success')
+          el.removeClass('bg-warning').addClass('bg-success')
             .html(`<i class="fa fa-check-circle-o"></i> 7zip Archiver installed (${zip.cmd})
             <br/><pre style="font-size: x-small;">${zip.version}</pre>`);
         } else {
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           Can't find 7zip Archiver - try to manualy download latest <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://www.7-zip.org/download.html')">7ZIP</a> and set custom location at settings`);
           if (zip.error)
@@ -115,8 +115,8 @@
       if (scrcpy) {
         const el = $id('scrcpyCheckIndicator');
         if (scrcpy.version) {
-          el.removeClass('badge-warning')
-            .addClass('badge-success')
+          el.removeClass('bg-warning')
+            .addClass('bg-success')
             .html(
               `<i class="fa fa-check-circle-o"></i> SCRCPY Installed (${scrcpy.cmd})<br/><pre style="font-size: x-small;">${scrcpy.version}</pre>`,
             );
@@ -125,7 +125,7 @@
             .getGlobal('platform')
             .replace('win', 'windows')
             .replace('mac', 'macos');
-          el.removeClass('badge-warning').addClass('badge-danger')
+          el.removeClass('bg-warning').addClass('bg-danger')
             .html(`<i class="fa fa-times-circle-o"></i>
           SCRCPY global installation not found, please read the <a class="btn btn-sm btn-info" onclick="shell.openExternal('https://github.com/Genymobile/scrcpy#${tag}')">MANUAL</a>`);
           if (scrcpy.error)

views/js/browse.js

@@ -33,11 +33,11 @@ function addBookmark(name, path, write_cfg = true) {
     return alert("Bookmark name can`t be empty");
   }
   const i = $(".dir-bookmark").length;
-  id("bookmarksdropdown").innerHTML += `<div class="dropdown-item">
-    <a class="dir-bookmark" onclick="getDir('${path}');$id('bookmarksdropdown').toggle()">
+  id("bookmarksdropdown").innerHTML += `<li class="dropdown-item">
+    <a class="dir-bookmark link-underline link-underline-opacity-0 link-underline-opacity-100-hover" onclick="getDir('${path}');">
     <i class="fa fa-star-o"></i> ${name}</a>
-    <a class="float-right text-danger" data-i="${i}" onclick="delBookmark(this)"> x</a>
-  </div>`;
+    <a class="float-end text-danger link-underline link-underline-opacity-0" data-i="${i}" onclick="delBookmark(this)"> x</a>
+  </li>`;
   if (write_cfg) {
     const bookmarks = remote.getGlobal("currentConfiguration").dirBookmarks;
     bookmarks.push({ name, path });
@@ -198,7 +198,7 @@ function loadDir(list) {
     // console.log(item);
     if (!item.createdAt) {
       cards_first.unshift(
-        `<div class="listitem badge badge-danger"><i class="fa fa-times-circle-o"></i> ${item.name}</div>`,
+        `<div class="listitem badge bg-danger"><i class="fa fa-times-circle-o"></i> ${item.name}</div>`,
       );
       continue;
     }
@@ -337,7 +337,6 @@ function sortFiles(key, asc) {
 
   sortElements($id("browseCardBody"), key, asc);
   sortFileElements($id("listTable"), key, asc);
-  $id("searchdropdownmenu").hide();
 
   ipcRenderer.send("change_config", { key: "sortFiles", val: key + suffix });
 }