gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor toast notifications and modal dialog implementation

Browse source 
- Updated SCSS for toast notifications to support multiple toast types (success, info, warning, error) and improved layout.
- Added new SVG icons for error, info, success, and warning notifications.
- Created separate HTML templates for toast notifications and modal dialogs.
- Enhanced the dev panel with buttons to test different toast notifications and modal dialogs.
This commit is contained in:
Greg Burri 2025-04-27 12:49:39 +02:00
parent 7b9df97a32
commit cf9c6b2a3f
15 changed files with 399 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

54
backend/static/error.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="40.905399mm"
height="40.905399mm"
viewBox="0 0 40.905399 40.905399"
version="1.1"
id="svg1"
sodipodi:docname="error.svg"
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.4702524"
inkscape:cx="-96.582055"
inkscape:cy="13.263029"
inkscape:window-width="2560"
inkscape:window-height="1369"
inkscape:window-x="-8"
inkscape:window-y="828"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-80.178404,-120.49168)">
<circle
style="fill:#ff1e1e;fill-opacity:1;stroke:#a00000;stroke-width:7;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path2"
cx="100.6311"
cy="140.94438"
r="16.9527" />
<path
d="m 107.32373,131.05185 -6.61942,6.62988 q -0.0732,0.0628 -0.13595,0 l -6.629879,-6.62988 q -0.658805,-0.6588 -1.599955,-0.6588 -0.930694,0 -1.589499,0.6588 -0.669262,0.66926 -0.669262,1.61042 0,0.93069 0.669262,1.58949 l 6.619425,6.62989 q 0.0732,0.0627 0,0.12548 l -6.619425,6.62988 q -0.669262,0.65881 -0.669262,1.5895 0,0.94115 0.669262,1.61042 0.658805,0.6588 1.589499,0.6588 0.94115,0 1.599955,-0.6588 l 6.629879,-6.62989 q 0.0628,-0.0627 0.13595,0 l 6.61942,6.62989 q 0.65881,0.6588 1.59996,0.6588 0.94115,0 1.59995,-0.6588 0.65881,-0.66927 0.65881,-1.61042 0,-0.93069 -0.65881,-1.5895 l -6.62988,-6.62988 q -0.0627,-0.0627 0,-0.12548 l 6.62988,-6.62989 q 0.65881,-0.6588 0.65881,-1.58949 0,-0.94116 -0.65881,-1.61042 -0.6588,-0.6588 -1.59995,-0.6588 -0.94115,0 -1.59996,0.6588 z"
id="text1"
style="font-size:21.4164px;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, ';fill:#ffffff;stroke-width:8.36709;stroke-linejoin:round;paint-order:stroke fill markers"
aria-label="❌" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

54
backend/static/info.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="40.905399mm"
height="40.905399mm"
viewBox="0 0 40.905399 40.905399"
version="1.1"
id="svg1"
sodipodi:docname="info.svg"
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.4702524"
inkscape:cx="-31.287145"
inkscape:cy="44.550174"
inkscape:window-width="2560"
inkscape:window-height="1369"
inkscape:window-x="-8"
inkscape:window-y="828"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-80.178404,-120.49168)">
<circle
style="fill:#1e22ff;fill-opacity:1;stroke:#0003a0;stroke-width:7;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path2"
cx="100.6311"
cy="140.94438"
r="16.9527" />
<path
d="m 103.30394,136.96938 v 15.44961 q 0,1.60566 -0.76367,2.42808 -0.76367,0.82241 -1.93854,0.82241 -1.174876,0 -1.918964,-0.842 -0.724506,-0.84199 -0.724506,-2.40849 v -15.29296 q 0,-1.58608 0.724506,-2.38891 0.744088,-0.80283 1.918964,-0.80283 1.17487,0 1.93854,0.80283 0.76367,0.80283 0.76367,2.23226 z m -2.64347,-5.52191 q -1.116129,0 -1.91896,-0.68534 -0.78325,-0.68535 -0.78325,-1.93855 0,-1.13571 0.802831,-1.86022 0.822413,-0.74408 1.899379,-0.74408 1.03781,0 1.84064,0.66576 0.80283,0.66576 0.80283,1.93854 0,1.23362 -0.78325,1.93855 -0.78325,0.68534 -1.86022,0.68534 z"
id="text1"
style="font-size:40.1024px;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, ';fill:#ffffff;stroke-width:19.8934;stroke-linejoin:round;paint-order:stroke fill markers"
aria-label="i" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

54
backend/static/success.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="40.905399mm"
height="40.905399mm"
viewBox="0 0 40.905399 40.905399"
version="1.1"
id="svg1"
sodipodi:docname="success.svg"
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.73512621"
inkscape:cx="-352.32046"
inkscape:cy="-74.13693"
inkscape:window-width="2560"
inkscape:window-height="1369"
inkscape:window-x="-8"
inkscape:window-y="828"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-80.178404,-120.49168)">
<circle
style="fill:#03b500;fill-opacity:1;stroke:#027500;stroke-width:7;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path2"
cx="100.6311"
cy="140.94438"
r="16.9527" />
<path
d="m 112.46328,132.63911 q -0.58288,-0.62262 -1.37771,-0.84782 -0.78159,-0.2252 -1.58967,-0.0397 -0.79483,0.17221 -1.41745,0.75509 l -11.962235,11.27338 -3.85494,-3.96092 q -0.596125,-0.60937 -1.390958,-0.82132 -0.781586,-0.21196 -1.576419,-0.0132 -0.794833,0.18546 -1.417452,0.78158 -0.609372,0.59613 -0.821328,1.39096 -0.211955,0.79484 -0.02649,1.58967 0.198708,0.79483 0.794833,1.4042 l 5.974495,6.14671 q 0.887563,0.91406 2.159296,0.94055 1.271733,0.0265 2.199038,-0.84782 l 14.174524,-13.36644 q 0.62262,-0.58288 0.84782,-1.36446 0.2252,-0.79484 0.0397,-1.58967 -0.17221,-0.80808 -0.75509,-1.4307 z"
id="text1"
style="font-size:27.1303px;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, ';fill:#ffffff;stroke-width:13.4584;stroke-linejoin:round;paint-order:stroke fill markers"
aria-label="✔️" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

53
backend/static/warning.svg Normal file
View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="40.905399mm"
height="40.905399mm"
viewBox="0 0 40.905399 40.905399"
version="1.1"
id="svg1"
sodipodi:docname="warning.svg"
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.0396254"
inkscape:cx="-80.79833"
inkscape:cy="65.889115"
inkscape:window-width="2560"
inkscape:window-height="1369"
inkscape:window-x="-8"
inkscape:window-y="828"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-80.178404,-120.49168)">
<path
style="fill:#ffff1a;fill-opacity:1;stroke:#616100;stroke-width:5.513;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 84.523721,157.05141 16.107569,-32.21437 16.10679,32.21437 z"
id="path1"
sodipodi:nodetypes="cccc" />
<path
style="font-size:37.4875px;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, ';fill:#000000;fill-opacity:1;stroke-width:2.49752"
d="m 98.737968,144.66325 -0.550671,-8.24286 q -0.154876,-2.40918 -0.154876,-3.4589 0,-1.4283 0.739965,-2.2199 0.757173,-0.80879 1.978984,-0.80879 1.47992,0 1.97897,1.03251 0.49904,1.01529 0.49904,2.94265 0,1.13576 -0.12046,2.30593 l -0.73996,8.48378 q -0.12047,1.51435 -0.51626,2.32314 -0.39579,0.8088 -1.30784,0.8088 -0.929259,0 -1.290638,-0.77438 -0.361377,-0.79159 -0.516254,-2.39198 z m 1.910142,11.32318 q -1.049718,0 -1.841307,-0.67113 -0.774382,-0.68834 -0.774382,-1.91015 0,-1.06692 0.739965,-1.80688 0.757173,-0.75717 1.841304,-0.75717 1.08413,0 1.84131,0.75717 0.77438,0.73996 0.77438,1.80688 0,1.2046 -0.77438,1.89294 -0.77438,0.68834 -1.80689,0.68834 z"
id="text1"
aria-label="!" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB