From 7ee1fec5b4ca0e69fab60948830faea05d20fc3c Mon Sep 17 00:00:00 2001 From: Almar Klein Date: Thu, 16 Nov 2023 13:24:22 +0100 Subject: [PATCH] Tweaks for better experience on mobile (#428) * Remove app border radius * Hide shortcut hints on mobile * Larger buttons and better responsiveness * Time selection dialog closes when selecting a preset --- timetagger/app/app.scss | 1 - timetagger/app/dialogs.py | 12 +++-- timetagger/app/front.py | 108 ++++++++++++++++++++------------------ 3 files changed, 66 insertions(+), 55 deletions(-) diff --git a/timetagger/app/app.scss b/timetagger/app/app.scss index 3c96b9b1..fffa3219 100644 --- a/timetagger/app/app.scss +++ b/timetagger/app/app.scss @@ -8,7 +8,6 @@ main div.content { padding: 0; } /* prevent empty space at bottom on iPhone */ top: 0; left: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; outline: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); - border-radius: 2px; background: $sec2_clr; } body.darkmode #canvas { background: #171E28; } diff --git a/timetagger/app/dialogs.py b/timetagger/app/dialogs.py index ce2c2440..b4390632 100644 --- a/timetagger/app/dialogs.py +++ b/timetagger/app/dialogs.py @@ -530,9 +530,9 @@ def open(self, callback=None):
- today d - this week w - this month m + today + this week + this month this quarter this year yesterday @@ -566,6 +566,11 @@ def open(self, callback=None): # quicknav.children[1].onclick = lambda e: self._apply_quicknav("out") # quicknav.children[2].onclick = lambda e: self._apply_quicknav("in") + if utils.looks_like_desktop(): + presets.children[0].innerHTML += " d" + presets.children[1].innerHTML += " w" + presets.children[2].innerHTML += " m" + for i in range(presets.children.length): but = presets.children[i] but.onclick = lambda e: self._apply_preset(e.target.innerText) @@ -620,6 +625,7 @@ def _apply_preset(self, text): self._t1_input.value = dt.time2localstr(t1).split(" ")[0] self._t2_input.value = dt.time2localstr(t2).split(" ")[0] self._update_range() + self.close() def _update_range(self): t1_date = self._t1_input.value diff --git a/timetagger/app/front.py b/timetagger/app/front.py index 486c1062..428a0734 100644 --- a/timetagger/app/front.py +++ b/timetagger/app/front.py @@ -799,6 +799,7 @@ def _draw_button(self, ctx, x, y, given_w, h, text, action, tt, options): texts = list(text) # Measure texts + texts2 = [] widths = [] fonts = [] fontsize = int(0.5 * h) @@ -806,14 +807,16 @@ def _draw_button(self, ctx, x, y, given_w, h, text, action, tt, options): fontsize = min(fontsize, int(0.6 * given_w)) for i in range(len(texts)): text = texts[i] - if text.startswith("fas-"): + if len(text) == 0: + continue + elif text.startswith("fas-"): text = text[4:] font = fontsize + "px FontAwesome" else: font = fontsize + "px " + opt.font ctx.font = font width = ctx.measureText(text).width - texts[i] = text + texts2.push(text) fonts.push(font) widths.push(width) @@ -888,8 +891,8 @@ def _draw_button(self, ctx, x, y, given_w, h, text, action, tt, options): ctx.textBaseline = "middle" ctx.textAlign = "left" ctx.fillStyle = opt.color - for i in range(len(texts)): - text, width, font = texts[i], widths[i], fonts[i] + for i in range(len(texts2)): + text, width, font = texts2[i], widths[i], fonts[i] ctx.font = font if text.startsWith("#"): draw_tag(ctx, text, x, 0.5 * (y1 + y2)) @@ -922,32 +925,35 @@ def on_init(self): def on_draw(self, ctx, menu_only=False): self._picker.clear() x1, y1, x2, y2 = self.rect + avail_width = x2 - x1 + avail_height = y2 - y1 # Guard for small screen space during resize - if x2 - x1 < 50 or y2 - y1 < 20: + if avail_width < 50 or avail_height < 20: return y4 = y2 # noqa - bottom y2 = y1 + 60 - y3 = y2 + 20 + y3 = y2 + 16 - margin = 8 - h = 36 + h = 40 + margin = 8 if avail_width < 900 else 20 # Top band background ctx.fillStyle = COLORS.top_bg ctx.fillRect(0, 0, x2, 60) # Draw icon in top-right - iconsize = (y2 - y1) - 2 * margin + icon_margin = 8 + icon_size = (y2 - y1) - 2 * icon_margin - if iconsize: + if icon_size: ctx.drawImage( window.document.getElementById("ttlogo_sl"), - x2 - iconsize - margin, - y1 + margin, - iconsize, - iconsize, + x2 - icon_size - icon_margin, + y1 + icon_margin, + icon_size, + icon_size, ) # Always draw the menu button @@ -980,14 +986,13 @@ def on_draw(self, ctx, menu_only=False): xc = (x1 + x2) / 2 # Move a bit to the right on smaller screens - avail_width = x2 - x1 - xc += max(0, 600 - avail_width) * 0.18 + xc += min(h, max(0, 800 - avail_width) * 0.18) - # Draw arrows - ha = 0.7 * h + # Draw up-down arrows + ha = 0.75 * h yc = y3 + h / 2 - updown_w = 0 - if avail_width > 310: + center_margin = -margin / 2 + if avail_width > 315: updown_w = self._draw_button( ctx, xc, @@ -1010,75 +1015,74 @@ def on_draw(self, ctx, menu_only=False): "Step forward [↓/pageDown]", {"ref": "topcenter"}, ) + center_margin = updown_w / 2 + 3 # -- move to the left - x = xc - updown_w / 2 - 3 + x = xc - center_margin - zoom_w = 0 - if avail_width > 350: - zoom_w = self._draw_button( + if avail_width > 400: + x -= self._draw_button( ctx, x, y3, - ha, + h, h, "fas-\uf010", "nav_zoom_" + self._current_scale["out"], "Zoom out [←]", {"ref": "ropright"}, ) - x -= zoom_w + 5 + x -= margin nav_width = ha - x -= nav_width + 3 + 5 # tiny extra margin between nav button groups - today_w = 0 - today_w = self._draw_button( + x -= self._draw_button( ctx, x, y3, - None, - h, - "Today", - "nav_snap_today", # "nav_snap_now" + now_scale, - "Snap to today [d]", # "Snap to now [Home]", - {"ref": "topright", "color": now_clr, "font": FONT.condensed}, - ) - - self._draw_button( - ctx, - x + nav_width + 3, - y3, nav_width, h, - "fas-\uf0d7", # ["fas-\uf073", "fas-\uf0d7"], + "fas-\uf073", # ["fas-\uf073", "fas-\uf0d7"], "nav_menu", "Select time range [t]", {"ref": "topright"}, ) - x -= today_w + margin + if avail_width > 510: + x -= 3 + x -= self._draw_button( + ctx, + x, + y3, + None, + h, + "Today", + "nav_snap_today", # "nav_snap_now" + now_scale, + "Snap to today [d]", # "Snap to now [Home]", + {"ref": "topright", "color": now_clr, "font": FONT.condensed}, + ) + x -= margin self._draw_tracking_buttons(ctx, x, y3, h) # -- move to the right - x = xc + updown_w / 2 + 3 + x = xc + center_margin - if avail_width > 350: - zoom_w = self._draw_button( + if avail_width > 400: + x += self._draw_button( ctx, x, y3, - ha, + h, h, "fas-\uf00e", "nav_zoom_" + self._current_scale["in"], "Zoom in [→]", {"ref": "ropleft"}, ) - x += zoom_w + margin + x += margin x += self._draw_button( ctx, @@ -1086,7 +1090,7 @@ def on_draw(self, ctx, menu_only=False): y3, None, h, - ["fas-\uf15c"] + (["Report"] if avail_width > 420 else []), + ["fas-\uf15c", "Report" if avail_width > 490 else ""], "report", "Show report [r]", {"ref": "topleft", "font": FONT.condensed}, @@ -1296,6 +1300,8 @@ def _draw_tracking_buttons(self, ctx, x, y, h): ) x -= dx else: + # This but takes more space, but there it no stop but. So no reason + # to reduce size when avail_width is low. dx = self._draw_button( ctx, x, @@ -1692,7 +1698,7 @@ def on_draw(self, ctx): ctx.fillText("⬋ drag to create new record", x4, y1 - 2) # Draw title text - if self._canvas.w > 700: + if self._canvas.w > 800: text1 = "Timeline" ctx.textAlign = "left" ctx.textBaseline = "top" @@ -3074,7 +3080,7 @@ def on_draw(self, ctx): self._time_since_last_draw = 0 # Draw title text - if self._canvas.w > 700: + if self._canvas.w > 800: text1 = "Overview" ctx.textAlign = "right" ctx.textBaseline = "top"