feat: provide a button to cancel selection

Author: streamtw

public/css/lfm.css

@@ -191,6 +191,47 @@ a {
   color: #333844;
 }
 
+.action-bar {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  padding: 16px;
+}
+
+@media screen and (min-width: 992px) {
+  .action-bar {
+    flex-direction: row;
+    align-items: center;
+    padding: unset;
+  }
+}
+
+.multiple-selection-toggle-label {
+  display: inline-flex;
+  align-items: center;
+}
+
+@media screen and (min-width: 992px) {
+  .multiple-selection-toggle-label {
+    margin: unset;
+  }
+}
+
+.search-bar {
+  display: inline-flex;
+  align-items: center;
+}
+
+.search-bar > * + * {
+  margin-left: 8px;
+}
+
+@media screen and (min-width: 992px) {
+  .search-bar {
+    margin-left: auto;
+  }
+}
+
 /* Items */
 
 #pagination > ul.pagination {
@@ -333,6 +374,10 @@ time {
   position: fixed;
 }
 
+.fab-wrapper.shifted-up {
+  bottom: 80px;
+}
+
 .fab-wrapper .fab-button {
   position: relative;
   background-color: #333844;

public/js/script.js

@@ -97,16 +97,10 @@ $(document).ready(function () {
 // ==  Navbar actions  ==
 // ======================
 
-$('#multi_selection_toggle').click(function () {
-  multi_selection_enabled = !multi_selection_enabled;
+$('#cancel_selection').click(clearSelected);
 
-  $('#multi_selection_toggle i')
-    .toggleClass('fa-times', multi_selection_enabled)
-    .toggleClass('fa-check-double', !multi_selection_enabled);
-
-  if (!multi_selection_enabled) {
-    clearSelected();
-  }
+$('#multiple-selection-toggle').change(function () {
+  multi_selection_enabled = $(this).is(':checked');
 });
 
 $('#to-previous').click(function () {
@@ -182,9 +176,6 @@ function toggleSelected (e) {
 
 function clearSelected () {
   selected = [];
-
-  multi_selection_enabled = false;
-
   updateSelectedStyle();
 }
 
@@ -228,9 +219,9 @@ function toggleActions() {
   $('[data-action=crop]').toggleClass('d-none', !(one_selected && only_image));
   $('[data-action=trash]').toggleClass('d-none', !many_selected);
   $('[data-action=open]').toggleClass('d-none', !one_selected || only_file);
-  $('#multi_selection_toggle').toggleClass('d-none', usingWysiwygEditor() || !many_selected);
+  $('#cancel_selection').toggleClass('d-none', selected.length === 0);
   $('#actions').toggleClass('d-none', selected.length === 0);
-  $('#fab').toggleClass('d-none', selected.length !== 0);
+  $('#fab').toggleClass('shifted-up', selected.length !== 0);
 }
 
 // ======================
@@ -475,7 +466,7 @@ function loadItems(page) {
 
           template.find('.square').append(image);
           template.find('.item_name').text(item.name);
-          template.find('time').text((new Date(item.time * 1000)).toLocaleString());
+          template.find('time').text(item.time ? (new Date(item.time * 1000)).toLocaleString() : '');
 
           $('#content').append(template);
         });

resources/lang/en/lfm.php

@@ -18,6 +18,7 @@
     'menu-crop'         => 'Crop',
     'menu-move'         => 'Move',
     'menu-multiple'     => 'Multi-selection',
+    'menu-cancel-selection' => 'Cancel selection',
 
     'title-page'        => 'File Manager',
     'title-panel'       => 'Laravel FileManager',

resources/lang/zh-TW/lfm.php

@@ -18,6 +18,7 @@
     'menu-crop'         => '裁剪',
     'menu-move'         => '搬移',
     'menu-multiple'     => '多選',
+    'menu-cancel-selection' => '取消選取',
 
     'title-page'        => '檔案管理',
     'title-panel'       => '檔案管理',

resources/views/index.blade.php

@@ -36,9 +36,9 @@
     <a class="navbar-brand d-block d-lg-none" id="current_folder"></a>
     <a id="loading" class="navbar-brand"><i class="fas fa-spinner fa-spin"></i></a>
     <div class="ml-auto px-2">
-      <a class="navbar-link d-none" id="multi_selection_toggle">
-        <i class="fa fa-check-double fa-fw"></i>
-        <span class="d-none d-lg-inline">{{ trans('laravel-filemanager::lfm.menu-multiple') }}</span>
+      <a class="navbar-link d-none" id="cancel_selection">
+        <i class="fa fa-times fa-fw"></i>
+        <span class="d-none d-lg-inline">{{ trans('laravel-filemanager::lfm.menu-cancel-selection') }}</span>
       </a>
     </div>
     <a class="navbar-toggler collapsed border-0 px-1 py-2 m-0" data-toggle="collapse" data-target="#nav-buttons">
@@ -86,10 +86,17 @@
         </ol>
       </nav>
 
-      <div style="margin-bottom: 16px;">
-        <input type="text" name="keyword" id="keyword" placeholder="keyword">
-        <button type="button" id="keyword-button" >Search</button>
-        <button type="button" id="keyword-reset-button" >Reset</button>
+      <div class="action-bar">
+        <label class="multiple-selection-toggle-label">
+          <input type="checkbox" id="multiple-selection-toggle" style="width: 18px; height: 18px; margin-right: 8px">
+          {{ trans('laravel-filemanager::lfm.menu-multiple') }}
+        </label>
+
+        <div class="search-bar">
+          <input type="text" name="keyword" id="keyword" placeholder="keyword">
+          <button type="button" id="keyword-button" >Search</button>
+          <button type="button" id="keyword-reset-button" >Reset</button>
+        </div>
       </div>
 
       <div id="empty" class="d-none">