frontend: "select all" button

rejetto · Mar 18, 2022 · f60c788 · f60c788
1 parent 0b4c7b6
commit f60c788
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 22 deletions.
diff --git a/frontend/src/BrowseFiles.ts b/frontend/src/BrowseFiles.ts
@@ -2,7 +2,7 @@
 
 import { Link, useLocation } from 'react-router-dom'
 import { createElement as h, Fragment, memo, useEffect, useMemo, useState } from 'react'
-import { formatBytes, hError, hfsEvent, hIcon } from './misc'
+import { formatBytes, hError, hfsEvent, hIcon, isMobile } from './misc'
 import { Checkbox, Html, Spinner } from './components'
 import { Head } from './Head'
 import { state, useSnapState } from './state'
@@ -85,10 +85,6 @@ function useMidnight() {
     }
 }
 
-function isMobile() {
-    return window.innerWidth < 800
-}
-
 const Entry = memo(function(entry: DirEntry & { midnight: Date }) {
     let { n: relativePath, isFolder } = entry
     const base = usePath()

diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
@@ -22,6 +22,7 @@ const SYS_ICONS = {
     download: ':📥',
     invert: 'retweet:🙃',
     admin: 'crown:👑',
+    check: ':✔️',
 }
 
 document.fonts.ready.then(async ()=> {

diff --git a/frontend/src/index.scss b/frontend/src/index.scss
@@ -155,6 +155,7 @@ header input {
 #filter-bar {
     display: flex;
     gap: .3em;
+    margin: 0.5em 0;
     & input { flex: 1 }
     & button {
         padding: 0 0.5em;
@@ -206,6 +207,11 @@ ul.dir {
         margin: 0.1em;
     }
 }
+#menu-bar {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
 #searched {
     margin: .2em;
 }
@@ -264,14 +270,14 @@ button label {
     border: 1px solid var(--faint-contrast)
 }
 
-@media (max-width: 40em) {
+@media (max-width: 42em) {
     body, button, select { font-size: 14pt; }
     #menu-bar {
-        display: flex;
-        justify-content: space-between;
-        align-content: stretch;
         & button label { display: none } /* icons only */
     }
+    #filter-bar {
+        margin: 0.2em 0;
+    }
     #filter-bar label { display:none }
     #filter-bar button { /* make it same size of top bar */
         width: 17.6vw;

diff --git a/frontend/src/menu.ts b/frontend/src/menu.ts
@@ -4,7 +4,7 @@ import { state, useSnapState } from './state'
 import { createElement as h, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import { confirmDialog, promptDialog } from './dialog'
-import { hIcon, prefix } from './misc'
+import { hIcon, isMobile, prefix } from './misc'
 import { login } from './login'
 import { showOptions } from './options'
 import showUserPanel from './UserPanel'
@@ -34,7 +34,7 @@ export function MenuPanel() {
             h(LoginButton),
             h(MenuButton, {
                 icon: 'filter',
-                label: 'Filter',
+                label: "Filter list",
                 toggled: showFilter,
                 onClick() {
                     state.showFilter = !showFilter
@@ -62,29 +62,38 @@ export function MenuPanel() {
         showFilter && h('div', { id: 'filter-bar' },
             h('input', {
                 id: 'filter',
-                placeholder: 'Filter list',
+                placeholder: "Type here to filter the list below",
                 autoComplete: 'off',
                 value: filter,
                 autoFocus: true,
                 onChange(ev) {
                     setFilter(ev.target.value)
                 }
             }),
+            !isMobile() && h(MenuButton, {
+                icon: 'check',
+                label: "Select all",
+                onClick() { workSel(() => true) }
+            }),
             h(MenuButton, {
                 icon: 'invert',
                 label: 'Invert selection',
-                onClick() {
-                    const sel = state.selected
-                    for (const { n } of state.filteredList || state.list)
-                        if (sel[n])
-                            delete sel[n]
-                        else
-                            sel[n] = true
-                }
-            })
+                onClick() { workSel(x => !x) }
+            }),
         )
     )
 
+    function workSel(cb: (b:boolean) => boolean) {
+        const sel = state.selected
+        for (const { n } of state.filteredList || state.list) {
+            const was = sel[n]
+            if (was !== cb(was))
+                if (was)
+                    delete sel[n]
+                else
+                    sel[n] = true
+        }
+    }
 
     function getSearchProps() {
         return stopSearch && started1secAgo ? {
@@ -103,7 +112,7 @@ export function MenuPanel() {
             }
         } : {
             icon: 'search',
-            label: 'Search',
+            label: "Search deep",
             async onClick() {
                 state.remoteSearch = await promptDialog('Search for...') || ''
             }

diff --git a/frontend/src/misc.ts b/frontend/src/misc.ts
@@ -16,6 +16,10 @@ export function hError(err: Error | string | null) {
     return err && h('div', { className:'error-msg' }, typeof err === 'string' ? err : err.message)
 }
 
+export function isMobile() {
+    return window.innerWidth < 800
+}
+
 let isWorking = false // we want the 'working' thing to be singleton
 export function working() {
     if (isWorking)