Skip to content

Retile mode ts#237

Open
Abasz wants to merge 10 commits into
0.9.8-In-Developmentfrom
retile-mode-ts
Open

Retile mode ts#237
Abasz wants to merge 10 commits into
0.9.8-In-Developmentfrom
retile-mode-ts

Conversation

@Abasz
Copy link
Copy Markdown
Collaborator

@Abasz Abasz commented Apr 13, 2026

This is the continuation of #213

Technically this feature works (and the GUI works too) but there are things that are still missing:

  • Styling issues (retile button text)
  • I dont think we have the grid size change integrated into the settings
  • We have not removed the original settings table from the settings
  • Unit test coverage

DXCanas and others added 5 commits April 12, 2026 17:56
@DXCanas @Abasz
Add grid configuration to app state
5297322 
- Add GridOrientationConfig and GridConfig types to store/types.ts
- Add gridConfig defaults (landscape: 4x2, portrait: 2x4) to appState.ts
- Update test fixtures to include the new gridConfig property

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
@DXCanas @Abasz
Add slot support to dashboard metrics
e74810b 
Add slotContent parameter to all metric template functions in
dashboardMetrics.ts and the simpleMetricFactory helper. Restructure
DashboardMetric render to use CSS classes (with-icon) instead of inline
styles, and move slot inside the icon/label div.
Add :host positioning to BatteryIcon.
Add :host grid-column span and slot support to DashboardForceCurve.
Update DashboardMetric tests for new class-based rendering.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
@DXCanas @Abasz
Add retile mode to toolbar
762324d 
- Add retile/submit toggle button with active state styling.
- Add reset-to-default button (visible only in retile mode).
- Move settings dialog ownership to parent via open-settings event.
- Add toggleRetileMode and resetToDefault methods that dispatch
  custom events for PerformanceDashboard to handle.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
@DXCanas @Abasz
Implement retile mode in PerformanceDashboard
56a55a5 
- Replace fixed grid layout with CSS custom properties (--grid-columns,
  --grid-rows) driven by gridConfig from app state.
- Add retile mode state management: local metrics copy on enter,
  save via changeGuiSetting on submit, reset-to-default support.
- Add metric controls (remove/replace dropdown) rendered as slot content.
- Add 'add tile' panel with available metrics filtered by remaining slots.
- Handle settings dialog and workout dialog from PerformanceDashboard.
- Use component factory pattern returning (slotContent) => TemplateResult
  to support both retile controls and normal rendering.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
@Abasz
Fix retile dropdown cursor and click area
8afeba2 
- Make cursor:pointer and @click on distance/calories/timer tiles
  conditional on onWorkoutOpen being defined (not shown in retile mode)
- Add stopPropagation to retile controls to prevent parent click handler
  from intercepting dropdown interactions
- Increase retile select padding and min-width for larger click area
- Add z-index to retile controls for reliable click targeting
@Abasz Abasz added this to the 0.9.8 milestone Apr 13, 2026
@JaapvanEkris
Copy link
Copy Markdown
Owner

JaapvanEkris commented Apr 17, 2026

Is this PR considered complete now?

@Abasz Abasz marked this pull request as draft April 17, 2026 08:13
@Abasz
Copy link
Copy Markdown
Collaborator Author

Abasz commented Apr 18, 2026

Sorry for my late response, This is not ready, those things in the PR message needs implementation.

I iced this temporarily in favour of the fit file which I though will be easy to review but the whole thing is a mess :). I will try to complete that this weekend and get back to this next week.

@JaapvanEkris
Copy link
Copy Markdown
Owner

JaapvanEkris commented Apr 18, 2026

I iced this temporarily in favour of the fit file which I though will be easy to review but the whole thing is a mess :).

Where are you running into issues?

@Abasz
Copy link
Copy Markdown
Collaborator Author

Abasz commented Apr 18, 2026 •
edited
Loading

Where are you running into issues?

  1. First it was the missing field definition with the official SDK (the undocumented fileds).
  2. Then I moved to Mark's library, and I realised there is an issue with the prescaling (which I spent a lot of time to figure out but I think I got it now as written in the issue :) ).
  3. Then moving time is different in garmin connect than in any other app, because somehow GC recalculates it but not sure how (its wrong for your sample fit file too by the way, interestingly the diff is around 4 sec in many cases) :D
  4. Then normalized power somehow is not showing up (it does for orm).
  5. For some reason laps are merged by GC (currently I dont have splits) when there are two active laps next to each other. But If I have the same with my garmin watch this works, i.e. a separate lap is shown in GC. EDIT: Is it possibel that it requires heart rate? EDIT2: or is may be the activity is not long enough?

And I have not even started with the splits which seemingly used by intervals.icu to track the laps (simply adding laps do not show up in intervals.icu which was a shock to me).

@JaapvanEkris
Copy link
Copy Markdown
Owner

JaapvanEkris commented Apr 18, 2026

  1. Then moving time is different in garmin connect than in any other app, because somehow GC recalculates it but not sure how (its wrong for your sample fit file too by the way, interestingly the diff is around 4 sec in many cases) :D

Total time seems OK. It somehow does a recalc, but I couldn't figure out why. But all others do it right, so it might be Garmin who is sloppy...

  1. Then normalized power somehow is not showing up (it does for orm).

I put a lot of effort in also filling in undocumented fields, as they seem to trigger internal behaviour of GC.

  1. For some reason laps are merged by GC (currently I dont have splits) when there are two active laps next to each other. But If I have the same with my garmin watch this works, i.e. a separate lap is shown in GC. EDIT: Is it possibel that it requires heart rate? EDIT2: or is may be the activity is not long enough?

Look at the FIT-file via fitfileviewer and see where they differ. It is the only way to reverse engineer this thing.

And I have not even started with the splits which seemingly used by intervals.icu to track the laps (simply adding laps do not show up in intervals.icu which was a shock to me).

Yeah, created a bugreport there, as they are butchering good lap data: https://forum.intervals.icu/t/intervals-icu-messes-up-fit-lapdata/127532

@JaapvanEkris JaapvanEkris added enhancement New feature or request Development branch Concerns a development branch labels May 4, 2026
Abasz added 5 commits May 20, 2026 08:36
@Abasz
Normalize retile button sizing in toolbar
9b24948 
The Retile/Submit and Reset text buttons were visually wider than the
square icon buttons, breaking visual consistency.

Key changes:
- Add button.label-button CSS variant with auto width and padding
- Apply label-button class to Retile/Submit and Reset buttons
- Remove permanent active/highlight class from Submit button
- Add unit tests for the changes
@Abasz
Extract PerformanceDashboard styles
eaa8d0a 
The component's inline css\` template was growing large and pushing the
file toward the 300-line lint limit. Moving styles to a dedicated module
keeps the component file concise and the styles easy to locate.

Key changes:
- Add PerformanceDashboard.styles.ts with performanceDashboardStyles
- Import and assign performanceDashboardStyles as static styles
- Remove css named import from AppElement in PerformanceDashboard.ts
@Abasz
Add per-orientation dashboard metric layouts
d9c353b 
The dashboard now keeps independent tile layouts for landscape and
portrait orientations. Rotating the device loads the saved layout for
that orientation rather than sharing a single list.

Key changes:
- Rename dashboardMetrics to landscapeDashboardMetrics for symmetry
- Add portraitDashboardMetrics field to GuiConfig and app state defaults
- Migrate old dashboardMetrics key on first load and remove legacy key
- Seed portraitDashboardMetrics from landscape when never saved before
- Add _getOrientationMetrics() to pick the active orientation array
- Add orientation change listener to recompute grid and reload metrics
- Reload _localMetrics from the new orientation on rotation in retile
- Save to the correct orientation slot on Submit
- Simplify _getAvailableMetrics to slot-count-only filtering
@Abasz
Refactor Settings dialog to single grid slider
7e96ad0 
Replace the dual landscape/portrait fieldsets and the metric selector UI
with one fieldset and a single slider pair. Portrait is always the
transpose of landscape (columns swap with rows).

Key changes:
- Remove maxNumberOfTiles from GuiConfig, appState and consumers
- Replace dual-fieldset grid UI with one orientation-aware fieldset
- Legend shows current orientation (landscape or portrait)
- Sliders show the active orientation's values and correct max limits
- Rotating while the dialog is open swaps columns/rows live
- close() derives the other orientation as the transpose
- Update SettingsDialog tests for orientation-aware behaviour
@Abasz
Add unit tests for retile logic and rendering
3a36c49 
Cover the previously untested retile methods and the render output of
PerformanceDashboard including orientation-specific behaviour.

Key changes:
- Add _getOrientationMetrics tests for landscape and portrait selection
- Add _handleRetileModeChanged tests for activate and deactivate state
- Add _handleResetToDefault tests for orientations and inactive state
- Add _removeMetric, _addMetricDirect and _replaceMetricDirect tests
- Add template tests verifying layout in html template
@Abasz
Copy link
Copy Markdown
Collaborator Author

Abasz commented May 20, 2026 •
edited
Loading

I made some changes and finalized this feature from our side. I have added independent metric layouts per orientation as that is the best UX.

Summary of the changes:

  • I fixed retile related button styling (now there is no overflow and they render nicely)
  • I added per-orientation metric lists, rotating loads the saved layout for that orientation; Submit writes back to the correct slot
  • I changed the grid behaviour by maximising rows (in portrait orientation the columns) in 4; layout driven by CSS custom properties
  • I made the settings dialog orientation-aware fieldset; sliders reflect the current orientation; rotating live-swaps columns/rows; OK derives the other orientation as the transpose
  • I extracted styles to a to dedicated module (probably this should be done for all files as the css styles becomes bigger
  • Completed test coverage of retile logic, render output, settings dialog orientation behaviour

Screenshots below show the default landscape layout, retile mode active, and the updated settings dialog.

image image settings

@Abasz Abasz marked this pull request as ready for review May 20, 2026 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Development branch Concerns a development branch enhancement New feature or request

Projects

None yet

Milestone

0.9.8

Development

Successfully merging this pull request may close these issues.

3 participants

@Abasz @JaapvanEkris @DXCanas