Improve app frame buttons

src/yasi_applets/disks/routes.py

@@ -19,9 +19,12 @@ def disks_welcome():
     blockdevs = lsblk.list_block_devices()
 
     return render_template('disks_welcome.html',
-                           menu=current_app.config['CONFIG']['settings']['menu'],
-                           menu_order=current_app.config['CONFIG']['settings']['menu_order'].split(),
-	                       previous_step = previous_step_url,
+                           menu=current_app.config['CONFIG']
+                                                  ['settings']['menu'],
+                           menu_order=current_app.config['CONFIG']
+                                                        ['settings']
+                                                        ['menu_order'].split(),
+                           previous_step=previous_step_url,
                            next_step=next_step_url, blockdevs=blockdevs
                            )
 
@@ -41,8 +44,11 @@ def disks_choose_disk_erase():
     blockdevs = lsblk.list_block_devices()
 
     return render_template('disks_erase_menu.html',
-                           menu=current_app.config['CONFIG']['settings']['menu'],
-                           menu_order=current_app.config['CONFIG']['settings']['menu_order'].split(),
+                           menu=current_app.config['CONFIG']
+                                                  ['settings']['menu'],
+                           menu_order=current_app.config['CONFIG']
+                                                        ['settings']
+                                                        ['menu_order'].split(),
 	                       previous_step = previous_step_url,
                            next_step=next_step_url, blockdevs=blockdevs
                            )

src/yasi_applets/main/header.html

@@ -21,7 +21,7 @@ than a proper webapp.
 
 <div style="position: absolute; top: 15px; right: 15px;">
     <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <i class="fa fa-question" aria-hidden="true"></i>  </button></a>
-    <a hx-get="/main/quit" hx-swap="outerHTML"/><button onclick="closeApp()" class="button is-danger" >  🗙 </button></a>
+    <a hx-trigger="click, keydown[altKey&&code=='F4'] from:body" hx-get="/main/quit" hx-swap="outerHTML"/><button class="button is-danger" >  🗙 </button></a>
 </div>
 
 </div> <!-- end pywebview-drag-region -->

src/yasi_applets/main/help.html

@@ -11,8 +11,8 @@
     <p>Some keyboard tips:<p>
     <br>
     <ul>
-    <li>ALT+n or CTRL+PGDn moves to the next page.</li>
-    <li>ALT+p or CTRL+PGUp moves to the previous page.</li>
+	<li><button>ALT</button> + <button>n</button> or <button>CTRL</button>+<button>PGDn</button> moves to the next page.</li>
+	<li><button>ALT</button> + <button>p</button> or <button>CTRL</button>+<button>PGUp</button> moves to the previous page.</li>
     </ul>
 
     <br>

src/yasi_applets/main/menu.html

@@ -2,7 +2,8 @@
   <div class="modal-background"></div>
   <div class="modal-content">
 
-    <div style="background-color: #424242;  padding: 15px; border-radius: 15px; borders: none; color: white;">
+    <div style="background-color: #424242; height: 180px;  padding: 15px; border-radius: 15px; borders: none; color: white; position: fixed; left: 15px; top: 15px; bottom: 15px;">
+
     <h1 class="is-size-4"> Main menu </h1>
 
     <br />

src/yasi_applets/main/quit.html

@@ -4,15 +4,14 @@
 
     <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
     <h1 class="is-size-4"> Exit system installer </h1>
-    <br /><p class="title is-6"><span class="tag is-danger">Quitting is not yet implemented.</span>
 
-    <br />
+    <br>
+    <p> Are you sure you want to quit? </p>
+    <br>
 
-    <p> ALT+F4 will bring up a dialog that works though. </p>
-
-    <br />
     <div class="columns">
-      <a href="/welcome"><div class="column"><button class="button is-link">Continue</button></div></a>
+      <a href="/welcome"><div class="column"><button class="button is-link">Back</button></div></a>
+      <a href=""><div class="column"><button onclick='pywebview.api.close()' class="button is-danger">Quit</button></div></a>
     </div>
   </div>
 </div>

src/yasi_applets/welcome/welcome.html

@@ -18,6 +18,10 @@
 <p><b> {{ string_dict['welcome_text'] }} </b></p>
 <p>{{ string_dict['confirm_text'] }} </p> <br />
 
+<!-- pywebview api example
+<button onclick='pywebview.api.log("Woah dude")'>Click me</button>
+-->
+
 <div style="left: 25px; display: flex; align-items: center; gap: 1rem;">
   <img style="width: 80px;" src="/welcome/static/img/lang_w.svg" alt="Language icon" />
   <form action="/welcome" method="POST" style="display: flex; flex-direction: column; gap: 0.5rem;">