diff --git a/LiftLog.Ui/Shared/Presentation/ItemTitle.razor b/LiftLog.Ui/Shared/Presentation/ItemTitle.razor index 789f3253..a4926ca8 100644 --- a/LiftLog.Ui/Shared/Presentation/ItemTitle.razor +++ b/LiftLog.Ui/Shared/Presentation/ItemTitle.razor @@ -1,6 +1,10 @@ -@Title +@Title @code { [Parameter][EditorRequired] public string Title { get; set; } = null!; + + [Parameter] public EventCallback OnClick { get; set; } + + [Parameter] public string Id { get; set; } = ""; } diff --git a/LiftLog.Ui/Shared/Presentation/WeightedExercise.razor b/LiftLog.Ui/Shared/Presentation/WeightedExercise.razor index 431776f7..f4d4bad4 100644 --- a/LiftLog.Ui/Shared/Presentation/WeightedExercise.razor +++ b/LiftLog.Ui/Shared/Presentation/WeightedExercise.razor @@ -1,4 +1,5 @@ -@{ +@inject IJSRuntime JSRuntime +@{ var (displayedExercise, repToStartNext) = (PreviousRecordedExercises?.FirstOrDefault()?.RecordedExercise) switch { null => (RecordedExercise, -1), @@ -11,7 +12,8 @@
- + + @displayedExercise.Blueprint.Name @if(!IsReadonly) {
@@ -115,6 +117,9 @@ @code { private string moreButtonId = "a" + Guid.NewGuid(); + private string exerciseNameId = "a" + Guid.NewGuid(); + + private ElementReference exerciseNameTooltip; private Menu? _menu; private Dialog? notesDialog; @@ -167,4 +172,9 @@ { previousDialog?.Open(); } + + private async Task OnExerciseNameClick() + { + await JSRuntime.InvokeVoidAsync("AppUtils.showPopupAndAnchorTo", exerciseNameTooltip, exerciseNameId); + } } diff --git a/LiftLog.Ui/wwwroot/app-utils.ts b/LiftLog.Ui/wwwroot/app-utils.ts index 8e210bb1..2dc264f3 100644 --- a/LiftLog.Ui/wwwroot/app-utils.ts +++ b/LiftLog.Ui/wwwroot/app-utils.ts @@ -20,6 +20,20 @@ AppUtils.vibrate = function (ms: number) { } }; +AppUtils.showPopupAndAnchorTo = async function (element: HTMLElement, anchorId: string) { + const anchor = document.getElementById(anchorId); + + element.style.transition = "transform 0.2s"; + element.style.transform = "scale(0)"; + await new Promise((resolve) => setTimeout(resolve, 5)); + element?.showPopover(); + element.style.top = anchor?.getBoundingClientRect().top + "px"; + element.style.left = anchor?.getBoundingClientRect().left + "px"; + element.style.position = "absolute"; + element.style.margin = "0"; + element.style.transform = "scale(1)"; +}; + /** * Creates a new event for the dialog close event. * This new event has bubbles, which allows blazor components to intercept it