frontend: moved 'filtered' and 'selected' counters to filter-bar
Massimo Melina committed
Feb 15, 2023 at 11:05 UTC
35110ea3994a5c34eecbc385e1e44311de2e476d
3 files changed
+14
-11
frontend/src/FilterBar.ts
+7
-1
@@ -4,7 +4,7 @@ import { useDebounce } from 'use-debounce'
4
import { Checkbox } from './components'
5
6
export function FilterBar() {
7
- const { patternFilter, showFilter } = useSnapState()
7
+ const { list, filteredList, selected, patternFilter, showFilter } = useSnapState()
8
const [all, setAll] = useState(false)
9
const [filter, setFilter] = useState(patternFilter)
10
useEffect(() => setAll(false), [patternFilter]) // reset on change
@@ -13,6 +13,8 @@ export function FilterBar() {
13
14
if (!showFilter)
15
return null
16
+ const sel = Object.keys(selected).length
17
+ const fil = filteredList?.length
18
return h('div', { id: 'filter-bar' },
19
h(Checkbox, {
20
value: all,
@@ -41,5 +43,9 @@ export function FilterBar() {
43
setFilter(ev.target.value)
44
}
45
}),
46
+ h('span', {}, [
47
+ sel && `${sel} selected`,
48
+ fil !== undefined && fil < list.length && `${fil} filtered`,
49
+ ].filter(Boolean).join(', ') ),
50
)
51
}
\ No newline at end of file
frontend/src/Head.ts
+1
-5
@@ -19,7 +19,7 @@ export function Head() {
19
}
20
21
function FolderStats() {
22
- const { list, loading, filteredList, selected, stoppedSearch } = useSnapState()
22
+ const { list, loading, stoppedSearch } = useSnapState()
23
const stats = useMemo(() =>{
24
let files = 0, folders = 0, size = 0
25
for (const x of list) {
@@ -31,8 +31,6 @@ function FolderStats() {
31
}
32
return { files, folders, size }
33
}, [list])
34
- const sel = Object.keys(selected).length
35
- const fil = filteredList?.length
34
return h(Fragment, {},
35
h('div', { id:'folder-stats' },
36
stoppedSearch ? hIcon('interrupted', { title:'Search was interrupted' })
@@ -41,8 +39,6 @@ function FolderStats() {
39
prefix('', stats.files,' file(s)'),
40
prefix('', stats.folders, ' folder(s)'),
41
stats.size ? formatBytes(stats.size) : '',
44
- sel && sel+' selected',
45
- fil !== undefined && fil < list.length && fil+' displayed',
42
].filter(Boolean).join(', '),
43
),
44
h('div', { style:{ clear:'both' }}),
frontend/src/index.scss
+6
-5
@@ -149,8 +149,10 @@ header {
149
.breadcrumb:nth-child(-n+3) .icon {
150
padding: 0 0.2em;
151
}
152
-#folder-stats {
152
+#folder-stats, #filter-bar>span {
153
font-size: 90%;
154
+}
155
+#folder-stats {
156
margin: 0.4em 0 0 0.5em;
157
float: right;
158
& .icon {
@@ -159,16 +161,15 @@ header {
161
}
162
#filter {
163
flex: 1;
162
- margin: 0.2em auto;
164
box-sizing: border-box;
165
}
166
#filter-bar {
167
display: flex;
168
align-items: center;
168
- gap: .3em;
169
+ gap: .8em;
170
margin: 0.2em 0 0;
171
padding-left: 11px;
171
- & input[type=checkbox] { margin-right: .7em; margin-top: .5em; }
172
+ & input[type=checkbox] { margin-top: .5em; }
173
}
174
175
ul.dir {
@@ -362,7 +363,7 @@ button label {
363
& button label { display: none } /* icons only */
364
}
365
#filter-bar {
365
- margin: 0.2em 0;
366
+ margin-top: 0.4em;
367
}
368
#filter-bar button { /* make it same size of top bar */
369
width: 17.6vw;