Add button to show guide inside the app

timetagger/app/dialogs.py

@@ -3922,6 +3922,34 @@ def _on_stopwatch_check(self):
         window.simplesettings.set("show_stopwatch", show_stopwatch)
 
 
+class GuideDialog(BaseDialog):
+    """Dialog to have quick access to the guide."""
+
+    def __init__(self, canvas):
+        super().__init__(canvas)
+        self._initialized = 0
+
+    def open(self, callback=None):
+        # Only init once, so that the guide stays in the state as the
+        # user tries something and then opens it again. Up to 24 hours.
+        if dt.now() < self._initialized + 86400:
+            return super().open(callback)
+        self._initialized = dt.now()
+
+        self.maindiv.innerHTML = """
+            <h1><i class='fas'>\uf05a</i>&nbsp;&nbsp;Guide
+                <button type='button'><i class='fas'>\uf00d</i></button>
+            </h1>
+            <iframe src='https://timetagger.app/guide_headless'
+            display:block; style='width:100%; height:calc(90vh - 100px); border:none;'
+            />
+        """
+
+        self._cancel_but = self.maindiv.children[0].children[-1]
+        self._cancel_but.onclick = self.close
+        super().open(callback)
+
+
 class PomodoroDialog(BaseDialog):
     """Dialog to control the Pomodoro timer."""
 

timetagger/app/front.py

@@ -178,6 +178,7 @@ def __init__(self, canvas):
         self.search_dialog = dialogs.SearchDialog(self)
         self.export_dialog = dialogs.ExportDialog(self)
         self.import_dialog = dialogs.ImportDialog(self)
+        self.guide_dialog = dialogs.GuideDialog(self)
         self.pomodoro_dialog = dialogs.PomodoroDialog(self)
 
         # The order here is also the draw-order. Records must come after analytics.
@@ -975,7 +976,7 @@ def on_draw(self, ctx, menu_only=False):
         ha = 0.7 * h
         yc = y3 + h / 2
         updown_w = 0
-        if avail_width > 330:
+        if avail_width > 310:
             updown_w = self._draw_button(
                 ctx,
                 xc,
@@ -1004,7 +1005,7 @@ def on_draw(self, ctx, menu_only=False):
         x = xc - updown_w / 2 - 3
 
         zoom_w = 0
-        if avail_width > 400:
+        if avail_width > 350:
             zoom_w = self._draw_button(
                 ctx,
                 x,
@@ -1054,7 +1055,7 @@ def on_draw(self, ctx, menu_only=False):
 
         x = xc + updown_w / 2 + 3
 
-        if avail_width > 400:
+        if avail_width > 350:
             zoom_w = self._draw_button(
                 ctx,
                 x,
@@ -1074,11 +1075,24 @@ def on_draw(self, ctx, menu_only=False):
             y3,
             None,
             h,
-            ["fas-\uf15c", "Report"],
+            ["fas-\uf15c"] + (["Report"] if avail_width > 420 else []),
             "report",
             "Show report [r]",
             {"ref": "topleft", "font": FONT.condensed},
         )
+        x += margin
+
+        x += self._draw_button(
+            ctx,
+            x,
+            y3,
+            None,
+            h,
+            ["fas-\uf05a"],
+            "guide",
+            "Show guide [i]",
+            {"ref": "topleft"},
+        )
 
     def _draw_menu_button(self, ctx, x1, y1, x2, y2):
         if window.store.__name__.startswith("Demo"):
@@ -1417,6 +1431,8 @@ def _on_key(self, e):
             self._handle_button_press("record_stopall")
         elif e.key.lower() == "r":
             self._handle_button_press("report")
+        elif e.key.lower() == "i":
+            self._handle_button_press("guide")
         else:
             return
         e.preventDefault()
@@ -1446,6 +1462,9 @@ def _handle_button_press(self, action):
         elif action == "report":
             self._canvas.report_dialog.open()
 
+        elif action == "guide":
+            self._canvas.guide_dialog.open()
+
         elif action == "pomo":
             self._canvas.pomodoro_dialog.open()