Fix overview scrolling on mobile (almarklein#427)

* Fix overview scrolling on mobile

* Alow wee bit of extra scroll

* Reduce wobble when scrolling

* try this ...

* try this

* maybe this?

* Add comment

* Can remove the extra scrolling then

timetagger/app/app.scss

@@ -1,9 +1,11 @@
 body { background: $bg1; }
 body.darkmode { background: $bg3; }
 
+main div.content { padding: 0; } /* prevent empty space at bottom on iPhone */
+
 #canvas {
  position: absolute;
- top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh;
+ 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;

timetagger/app/front.py

@@ -2901,6 +2901,7 @@ class AnalyticsWidget(Widget):
  """Widget that draws the analytics, and handles corresponding interaction."""
 
  def on_init(self):
+ self._interaction_mode = 0
  self._picker = utils.Picker()
  self.selected_tags = []
  self._need_more_drawing_flag = False
@@ -3078,7 +3079,7 @@ def _draw_stats(self, ctx, x1, y1, x2, y2):
  y_bottom = y2 - 8
  avail_height2 = y_bottom - y_top
 
- # From that we can derive how many bars we can show, and the max scroll offset
+ # From that we can derive how many bars we can show, and the max scroll offset.
  n_bars = int(avail_height2 / self._npixels_each)
  max_scroll_offset = max(0, (len(bars) - n_bars) * self._npixels_each)
  self._target_scroll_offset = min(max_scroll_offset, self._target_scroll_offset)
@@ -3374,7 +3375,7 @@ def _draw_one_bar(self, ctx, bar):
  t1, t2 = self._canvas.range.get_range()
  x1, x2 = bar.x1, bar.x2
  y1, y2 = bar.y1, bar.y2
- npixels = min(y2 - y1, self._npixels_each)
+ npixels = Math.round(min(y2 - y1, self._npixels_each))
 
  # Get whether the current tag combi corresponds to the currently running record.
  # The clock only ticks per second if now is within range, so we don't show seconds unless we can.
@@ -3520,7 +3521,26 @@ def _draw_one_bar(self, ctx, bar):
  def on_pointer(self, ev):
  x, y = ev.pos[0], ev.pos[1]
 
+ last_interaction_mode = self._interaction_mode
  if "down" in ev.type:
+ if self._interaction_mode == 0 and ev.ntouches == 1:
+ self._interaction_mode = 1 # mode undecided
+ self._last_pointer_down_event = ev
+ self.update()
+ else: # multi-touch -> tick-widget-behavior-mode
+ self._interaction_mode = 2
+ elif "move" in ev.type:
+ if self._interaction_mode == 1:
+ downx, downy = self._last_pointer_down_event.pos
+ if Math.sqrt((x - downx) ** 2 + (y - downy) ** 2) > 10:
+ self._last_pointer_move_event = self._last_pointer_down_event
+ self._interaction_mode = 2 # tick-widget-behavior-mode
+ elif "up" in ev.type:
+ if "mouse" in ev.type or ev.ntouches == 0:
+ self._interaction_mode = 0
+
+ if last_interaction_mode == 1 and "up" in ev.type:
+ # Clicks
  picked = self._picker.pick(x, y)
  if picked is None or picked == "":
  pass
@@ -3548,6 +3568,12 @@ def on_pointer(self, ev):
  self._canvas.tag_combo_dialog.open(tagz, self.update)
  self.update()
 
+ if self._interaction_mode == 2 and "move" in ev.type:
+ dy = self._last_pointer_move_event.pos[1] - y
+ self._last_pointer_move_event = ev
+ self._target_scroll_offset = max(0, self._target_scroll_offset + dy)
+ self.update()
+
  def on_wheel(self, ev):
  """Handle wheel event."""
  if len(ev.modifiers) == 0 and ev.vscroll != 0: