Skip to content

Commit a3ba28d

Browse files
pojntfxpojntfx
committed
feat: Add responsive overflow menu for all file actions and hide shortcuts on small screen sizes
Signed-off-by: Felicitas Pojtinger <[email protected]>
1 parent 0d162d1 commit a3ba28d

File tree

1 file changed

+194
-9
lines changed

1 file changed

+194
-9
lines changed

‎pkg/components/file_explorer.go‎

Lines changed: 194 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,60 @@ func (c *FileExplorer) Render() app.UI {
151151
app.Div().
152152
Class("pf-v6-c-toolbar__group pf-m-align-end pf-v6-u-align-items-center").
153153
Body(
154+
app.If(
155+
c.selectedPath != "",
156+
func() app.UI {
157+
return app.Div().
158+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
159+
Body(
160+
app.Button().
161+
Type("button").
162+
Aria("label", "Share file").
163+
Title("Share file").
164+
Class("pf-v6-c-button pf-m-plain").
165+
OnClick(func(ctx app.Context, e app.Event) {
166+
c.sharePath()
167+
}).
168+
Body(
169+
app.Span().
170+
Class("pf-v6-c-button__icon").
171+
Body(
172+
app.I().
173+
Class("fas fa-share-alt").
174+
Aria("hidden", true),
175+
),
176+
),
177+
)
178+
},
179+
),
180+
181+
app.If(
182+
c.selectedPath != "",
183+
func() app.UI {
184+
return app.Div().
185+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
186+
Body(
187+
app.Button().
188+
Type("button").
189+
Aria("label", "Delete file").
190+
Title("Delete file").
191+
Class("pf-v6-c-button pf-m-plain").
192+
OnClick(func(ctx app.Context, e app.Event) {
193+
c.deleteFile()
194+
}).
195+
Body(
196+
app.Span().
197+
Class("pf-v6-c-button__icon").
198+
Body(
199+
app.I().
200+
Class("fas fa-trash").
201+
Aria("hidden", true),
202+
),
203+
),
204+
)
205+
},
206+
),
207+
154208
app.If(
155209
c.selectedPath != "",
156210
func() app.UI {
@@ -230,7 +284,7 @@ func (c *FileExplorer) Render() app.UI {
230284
},
231285
),
232286
app.Li().
233-
Class("pf-v6-c-menu__list-item").
287+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
234288
Role("none").
235289
Body(
236290
app.Button().
@@ -258,7 +312,7 @@ func (c *FileExplorer) Render() app.UI {
258312
}),
259313
),
260314
app.Li().
261-
Class("pf-v6-c-menu__list-item").
315+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
262316
Role("none").
263317
Body(
264318
app.Button().
@@ -287,7 +341,16 @@ func (c *FileExplorer) Render() app.UI {
287341
),
288342

289343
app.Li().
290-
Class("pf-v6-c-divider").
344+
Class(func() string {
345+
base := "pf-v6-c-divider"
346+
347+
// Always show the divider if we have an editable file selected, else make it responsive
348+
if selectedPathContentType == "" {
349+
base += " pf-v6-u-display-inherit pf-v6-u-display-none-on-lg"
350+
}
351+
352+
return base
353+
}()).
291354
Role("separator"),
292355

293356
app.Li().
@@ -358,6 +421,128 @@ func (c *FileExplorer) Render() app.UI {
358421
c.rename()
359422
}),
360423
),
424+
425+
app.Li().
426+
Class("pf-v6-c-divider pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
427+
Role("separator"),
428+
429+
app.Li().
430+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
431+
Role("none").
432+
Body(
433+
app.Button().
434+
Class("pf-v6-c-menu__item").
435+
Type("button").
436+
Aria("role", "menuitem").
437+
Body(
438+
app.Span().
439+
Class("pf-v6-c-menu__item-main").
440+
Body(
441+
app.Span().
442+
Class("pf-v6-c-menu__item-icon").
443+
Body(
444+
app.I().
445+
Class("fas fa-folder-plus").
446+
Aria("hidden", true),
447+
),
448+
app.Span().
449+
Class("pf-v6-c-menu__item-text").
450+
Text("Create directory"),
451+
),
452+
).
453+
OnClick(func(ctx app.Context, e app.Event) {
454+
c.createDirectory()
455+
}),
456+
),
457+
app.Li().
458+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
459+
Role("none").
460+
Body(
461+
app.Button().
462+
Class("pf-v6-c-menu__item").
463+
Type("button").
464+
Aria("role", "menuitem").
465+
Body(
466+
app.Span().
467+
Class("pf-v6-c-menu__item-main").
468+
Body(
469+
app.Span().
470+
Class("pf-v6-c-menu__item-icon").
471+
Body(
472+
app.I().
473+
Class("fas fa-pen-square").
474+
Aria("hidden", true),
475+
),
476+
app.Span().
477+
Class("pf-v6-c-menu__item-text").
478+
Text("Create empty file"),
479+
),
480+
).
481+
OnClick(func(ctx app.Context, e app.Event) {
482+
c.createEmptyFile()
483+
}),
484+
),
485+
app.Li().
486+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
487+
Role("none").
488+
Body(
489+
app.Button().
490+
Class("pf-v6-c-menu__item").
491+
Type("button").
492+
Aria("role", "menuitem").
493+
Body(
494+
app.Span().
495+
Class("pf-v6-c-menu__item-main").
496+
Body(
497+
app.Span().
498+
Class("pf-v6-c-menu__item-icon").
499+
Body(
500+
app.I().
501+
Class("fas fa-cloud-upload-alt").
502+
Aria("hidden", true),
503+
),
504+
app.Span().
505+
Class("pf-v6-c-menu__item-text").
506+
Text("Upload file"),
507+
),
508+
).
509+
OnClick(func(ctx app.Context, e app.Event) {
510+
c.uploadFile()
511+
}),
512+
),
513+
514+
app.Li().
515+
Class("pf-v6-c-divider pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
516+
Role("separator"),
517+
518+
app.Li().
519+
Class("pf-v6-c-menu__list-item pf-v6-u-display-inherit pf-v6-u-display-none-on-lg").
520+
Role("none").
521+
Body(
522+
app.Button().
523+
Class("pf-v6-c-menu__item").
524+
Type("button").
525+
Aria("role", "menuitem").
526+
Body(
527+
app.Span().
528+
Class("pf-v6-c-menu__item-main").
529+
Body(
530+
app.Span().
531+
Class("pf-v6-c-menu__item-icon").
532+
Body(
533+
app.I().
534+
Class("fas fas fa-sync").
535+
Aria("hidden", true),
536+
),
537+
app.Span().
538+
Class("pf-v6-c-menu__item-text").
539+
Text("Refresh"),
540+
),
541+
).
542+
OnClick(func(ctx app.Context, e app.Event) {
543+
c.refresh()
544+
}),
545+
),
361546
),
362547
),
363548
),
@@ -369,12 +554,12 @@ func (c *FileExplorer) Render() app.UI {
369554
app.If(
370555
c.selectedPath != "",
371556
func() app.UI {
372-
return app.Hr().Class("pf-v6-c-divider pf-m-vertical")
557+
return app.Hr().Class("pf-v6-c-divider pf-m-vertical pf-v6-u-display-none pf-v6-u-display-flex-on-lg")
373558
},
374559
),
375560

376561
app.Div().
377-
Class("pf-v6-c-toolbar__item").
562+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
378563
Body(
379564
app.Button().
380565
Type("button").
@@ -395,7 +580,7 @@ func (c *FileExplorer) Render() app.UI {
395580
),
396581
),
397582
app.Div().
398-
Class("pf-v6-c-toolbar__item").
583+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
399584
Body(
400585
app.Button().
401586
Type("button").
@@ -416,7 +601,7 @@ func (c *FileExplorer) Render() app.UI {
416601
),
417602
),
418603
app.Div().
419-
Class("pf-v6-c-toolbar__item").
604+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
420605
Body(
421606
app.Button().
422607
Type("button").
@@ -437,10 +622,10 @@ func (c *FileExplorer) Render() app.UI {
437622
),
438623
),
439624

440-
app.Hr().Class("pf-v6-c-divider pf-m-vertical"),
625+
app.Hr().Class("pf-v6-c-divider pf-m-vertical pf-v6-u-display-none pf-v6-u-display-flex-on-lg"),
441626

442627
app.Div().
443-
Class("pf-v6-c-toolbar__item").
628+
Class("pf-v6-c-toolbar__item pf-v6-u-display-none pf-v6-u-display-flex-on-lg").
444629
Body(
445630
app.Button().
446631
Type("button").

0 commit comments

Comments
 (0)