Skip to content

Commit

Permalink
Tweaks for better experience on mobile (#428)
Browse files Browse the repository at this point in the history 
* Remove app border radius

* Hide shortcut hints on mobile

* Larger buttons and better responsiveness

* Time selection dialog closes when selecting a preset
  • Loading branch information
@almarklein
almarklein authored Nov 16, 2023
1 parent 1bd9b1c commit 7ee1fec
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 55 deletions.
1 change: 0 additions & 1 deletion timetagger/app/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
12 changes: 9 additions & 3 deletions timetagger/app/dialogs.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,9 +530,9 @@ def open(self, callback=None):
<div></div>
<div style='min-height: 6px;'></div>
<div class='grid5'>
<a>today <span class='keyhint'>d</span></a>
<a>this week <span class='keyhint'>w</span></a>
<a>this month <span class='keyhint'>m</span></a>
<a>today</a>
<a>this week</a>
<a>this month</a>
<a>this quarter</a>
<a>this year</a>
<a>yester<wbr>day</a>
Expand Down Expand Up @@ -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 += " <span class='keyhint'>d</span>"
presets.children[1].innerHTML += " <span class='keyhint'>w</span>"
presets.children[2].innerHTML += " <span class='keyhint'>m</span>"

for i in range(presets.children.length):
but = presets.children[i]
but.onclick = lambda e: self._apply_preset(e.target.innerText)
Expand Down Expand Up @@ -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
Expand Down
108 changes: 57 additions & 51 deletions timetagger/app/front.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,21 +799,24 @@ 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)
if given_w:
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)

Expand Down Expand Up @@ -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))
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -1010,83 +1015,82 @@ 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,
x,
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},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 7ee1fec

Please sign in to comment.