11package vapplication
22
33import (
4+ " fmt"
5+ " github.com/cloudness-io/cloudness/app/utils/routes"
46 " github.com/cloudness-io/cloudness/app/web/views/components/icons"
57 " github.com/cloudness-io/cloudness/app/web/views/components/vfavorite"
68 " github.com/cloudness-io/cloudness/app/web/views/shared"
@@ -9,9 +11,25 @@ import (
911
1012templ appHeader (app *types.Application ) {
1113 <header class =" relative h-16 shrink-0 box-border pl-1 md:pl-4" >
12- <div id =" header-content" class =" flex box-border h-full py-2" >
13- <span id =" header-logo" class =" flex grow shrink-0 basis-auto items-center justify-center mr-2 relative" >
14- @ shared.Icon (icons.ApplicationIcon , " overflow-hidden icon-2xl size-6" )
14+ <div id =" header-content" class =" flex box-border h-full py-2" x-data =" {updateIconModel: false}" >
15+ @ shared.Modal (" updateIconModel" , updateIconForm (app))
16+ <span
17+ id =" header-logo"
18+ class =" flex grow shrink-0 basis-auto items-center justify-center mr-2 relative group"
19+ x-on:click =" updateIconModel = true"
20+ >
21+ if app.Spec .Icon != " " {
22+ @ shared.Icon (app.Spec .Icon , " overflow-hidden icon-2xl size-6" )
23+ } else {
24+ @ shared.Icon (icons.ApplicationIcon , " overflow-hidden icon-2xl size-6" )
25+ }
26+ // show edit icon
27+ <span
28+ id =" edit-icon"
29+ class =" absolute top-[0.2rem] right-[-0.5rem] hidden group-hover:block"
30+ >
31+ <i class ={ icons.EditIcon , " icon-sm" }></i >
32+ </span >
1533 </span >
1634 <div id =" title" class =" flex-auto w-full" >
1735 <div id =" title-top-row" class =" flex items-baseline gap-2" >
@@ -33,3 +51,34 @@ templ appHeader(app *types.Application) {
3351 </div >
3452 </header >
3553}
54+
55+ templ updateIconForm (app *types.Application ) {
56+ <form class =" flex flex-col gap-2" x-data ={ fmt.Sprintf (" {old:'% [1]s', icon:'% [1]s'}" , app.Spec .Icon ) }>
57+ <h2 class =" text-xl font-semibold" >Update Icon</h2 >
58+ <p class =" w-full max-w-full" >
59+ Icon should be an URL to an image file.
60+ </p >
61+ @ shared.Input (&shared.InputProps {
62+ Name : " icon" ,
63+ Attrs : templ.Attributes {
64+ " x-model" : " icon" ,
65+ },
66+ })
67+ <footer class =" flex w-full" >
68+ <div class =" ml-auto flex w-full gap-x-4 sm:w-auto sm:whitespace-nowrap" >
69+ <button type =" button" class =" button-neutral" x-on:click =" updateIconModel= false" >
70+ Close
71+ </button >
72+ <button
73+ type =" submit"
74+ class =" button-primary"
75+ :disabled =" icon == old"
76+ hx-patch ={ routes.AppIcon }
77+ hx-swap =" none"
78+ >
79+ Update
80+ </button >
81+ </div >
82+ </footer >
83+ </form >
84+ }
0 commit comments