Use CSS for capitalization of AppButton and title

In order to ensure that we can use the same strings for titles and other buttons with different capitalization requirements, we simply apply this with css. AppButtons They require that ONLY the first letter is capitalized Title The title should be in title case (more or less, words like And get capitalized)
LiamMorrow · Dec 8, 2024 · a3c4500 · a3c4500
1 parent 3bc063e
commit a3c4500
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 40 deletions.
diff --git a/LiftLog.Ui/Pages/Feed/FeedUserPlanPage.razor b/LiftLog.Ui/Pages/Feed/FeedUserPlanPage.razor
@@ -17,7 +17,7 @@
         <SessionSummary Session="context.GetEmptySession()" ShowSets="true" ShowWeight="false"/>
     </CardList>
     <div>
-        <AppButton OnClick="() => importPlanDialog?.Open()"><md-icon slot="icon">assignment</md-icon>@UiStrings.ImportTheirPlan</AppButton>
+        <AppButton OnClick="() => importPlanDialog?.Open()" Icon="assignment">@UiStrings.ImportTheirPlan</AppButton>
     </div>
 </div>
 

diff --git a/LiftLog.Ui/Pages/Index.razor b/LiftLog.Ui/Pages/Index.razor
@@ -29,17 +29,11 @@
                 <md-icon>info</md-icon>
             </div>
             <div class="grid grid-cols-2 gap-2">
-                <AppButton Type="AppButtonType.Secondary" OnClick=@(() => Dispatcher.Dispatch(new NavigateAction("/settings/manage-workouts?planId="+ProgramState.Value.ActivePlanId)))>
-                    <md-icon
-                        slot="icon">
-                        add
-                    </md-icon>@UiStrings.AddWorkouts
+                <AppButton Type="AppButtonType.Secondary" Icon="add" OnClick=@(() => Dispatcher.Dispatch(new NavigateAction("/settings/manage-workouts?planId="+ProgramState.Value.ActivePlanId)))>
+                    @UiStrings.AddWorkouts
                 </AppButton>
-                <AppButton OnClick=@(() => NavigationManager.NavigateTo("/settings/program-list"))>
-                    <md-icon
-                        slot="icon">
-                        assignment
-                    </md-icon>@UiStrings.SelectAPlan
+                <AppButton Icon="assignment" OnClick=@(() => NavigationManager.NavigateTo("/settings/program-list"))>
+                    @UiStrings.SelectAPlan
                 </AppButton>
             </div>
         </Card>

diff --git a/LiftLog.Ui/Pages/Settings/AiPlannerPage.razor b/LiftLog.Ui/Pages/Settings/AiPlannerPage.razor
@@ -26,16 +26,17 @@ else if (SettingsState.Value.AiPlan != null)
         </CardList>
         <p class="text-on-surface">@UiStrings.NoteAboutTweakingAiPlan</p>
         <div class="flex flex-col gap-2 mt-2">
-            <AppButton OnClick="() => AcceptAiPlan(SettingsState.Value.AiPlan)">
-                <md-icon slot="icon">done</md-icon>@UiStrings.Accept
+            <AppButton Icon="done" OnClick="() => AcceptAiPlan(SettingsState.Value.AiPlan)">
+                @UiStrings.Accept
             </AppButton>
             <div class="grid grid-cols-2 grid-rows-1 gap-2">
-                <AppButton Type="AppButtonType.Secondary" OnClick="() => Dispatcher.Dispatch(new SetAiPlanAction(null))">
-                    <md-icon slot="icon">close</md-icon>@UiStrings.Cancel
+                <AppButton Icon="close" Type="AppButtonType.Secondary" OnClick="() => Dispatcher.Dispatch(new SetAiPlanAction(null))">
+                    @UiStrings.Cancel
                 </AppButton>
                 <AppButton Type="AppButtonType.Secondary"
-                           OnClick="() => Dispatcher.Dispatch(new GenerateAiPlanAction(SettingsState.Value.AiWorkoutAttributes!))">
-                    <md-icon slot="icon">refresh</md-icon>@UiStrings.Regenerate
+                            Icon="refresh"
+                            OnClick="() => Dispatcher.Dispatch(new GenerateAiPlanAction(SettingsState.Value.AiWorkoutAttributes!))">
+                    @UiStrings.Regenerate
                 </AppButton>
             </div>
         </div>
@@ -46,12 +47,13 @@ else if (SettingsState.Value.AiPlanError != null)
     <div class="flex flex-col gap-2">
         <p class="text-on-surface">@SettingsState.Value.AiPlanError</p>
         <div class="grid grid-cols-2 grid-rows-1 gap-2">
-            <AppButton Type="AppButtonType.Secondary" OnClick="() => Dispatcher.Dispatch(new SetAiPlanErrorAction(null))">
-                <md-icon slot="icon">close</md-icon>@UiStrings.Cancel
+            <AppButton Icon="close" Type="AppButtonType.Secondary" OnClick="() => Dispatcher.Dispatch(new SetAiPlanErrorAction(null))">
+                @UiStrings.Cancel
             </AppButton>
             <AppButton
+                Icon="refresh"
                 OnClick="() => Dispatcher.Dispatch(new GenerateAiPlanAction(SettingsState.Value.AiWorkoutAttributes!))">
-                <md-icon slot="icon">refresh</md-icon>@UiStrings.Retry
+                @UiStrings.Retry
             </AppButton>
         </div>
     </div>

diff --git a/LiftLog.Ui/Pages/Settings/AiSessionCreatorPage.razor b/LiftLog.Ui/Pages/Settings/AiSessionCreatorPage.razor
@@ -41,10 +41,10 @@ else if (AiSessionCreatorState.Value.GeneratedSession is not null)
         </Card>
         <div class="flex flex-col gap-2 justify-end h-full">
             <div class="grid grid-cols-2 gap-2">
-                <AppButton Type=AppButtonType.Secondary OnClick=@AddToPlan>
-                    <md-icon slot="icon">assignment_add</md-icon>@UiStrings.AddToPlan
+                <AppButton Icon="assignment_add" Type=AppButtonType.Secondary OnClick=@AddToPlan>
+                    @UiStrings.AddToPlan
                 </AppButton>
-                <AppButton OnClick=@StartSession><md-icon slot="icon">fitness_center</md-icon>@UiStrings.Start</AppButton>
+                <AppButton Icon="fitness_center" OnClick=@StartSession>@UiStrings.Start</AppButton>
             </div>
         </div>
     </div>

diff --git a/LiftLog.Ui/Shared/MainLayout.razor b/LiftLog.Ui/Shared/MainLayout.razor
@@ -23,7 +23,7 @@
                         <div class="flex items-center gap-2 p-4 text-2xl">
                             @RenderBackButton()
                             <div class="h-[48px] flex items-center justify-center">
-                                <span class="m-0 text-on-surface">@AppState.Value.Title</span>
+                                <span class="m-0 text-on-surface capitalize">@AppState.Value.Title</span>
                             </div>
                             <div class="flex ml-auto flex-1 justify-end">
                                 <Microsoft.AspNetCore.Components.Sections.SectionOutlet SectionName="TrailingTitleButton"></Microsoft.AspNetCore.Components.Sections.SectionOutlet>

diff --git a/LiftLog.Ui/Shared/Presentation/AppButton.razor b/LiftLog.Ui/Shared/Presentation/AppButton.razor
@@ -3,25 +3,41 @@
     case AppButtonType.Primary:
         <md-filled-button
             @attributes="AdditionalAttributes" class="@(AdditionalAttributes.GetValueOrDefault("class"))  pointer-events-auto" @onclick="Clicked" disabled=@Disabled @onclick:stopPropagation="true" @onclick:preventDefault="@(!AdditionalAttributes.ContainsKey("href"))" >
-            @ChildContent
+            <span class="block first-letter:uppercase lowercase">@ChildContent</span>
+            @if(Icon is not null)
+            {
+                <md-icon slot="icon">@Icon</md-icon>
+            }
         </md-filled-button>
         break;
     case AppButtonType.Secondary:
         <md-filled-tonal-button
             @attributes="AdditionalAttributes" class="@(AdditionalAttributes.GetValueOrDefault("class"))  pointer-events-auto" @onclick="Clicked" disabled=@Disabled @onclick:stopPropagation="true" @onclick:preventDefault="@(!AdditionalAttributes.ContainsKey("href"))" >
-            @ChildContent
+            <span class="block first-letter:uppercase lowercase">@ChildContent</span>
+            @if(Icon is not null)
+            {
+                <md-icon slot="icon">@Icon</md-icon>
+            }
         </md-filled-tonal-button>
         break;
     case AppButtonType.OutlineSecondary:
         <md-outlined-button
             @attributes="AdditionalAttributes" class="@(AdditionalAttributes.GetValueOrDefault("class"))  pointer-events-auto" @onclick="Clicked" disabled=@Disabled @onclick:stopPropagation="true" @onclick:preventDefault="@(!AdditionalAttributes.ContainsKey("href"))" >
-            @ChildContent
+            <span class="block first-letter:uppercase lowercase">@ChildContent</span>
+            @if(Icon is not null)
+            {
+                <md-icon slot="icon">@Icon</md-icon>
+            }
         </md-outlined-button>
         break;
     case AppButtonType.Text:
         <md-text-button
             @attributes="AdditionalAttributes" class="@(AdditionalAttributes.GetValueOrDefault("class"))  pointer-events-auto" @onclick="Clicked" disabled=@Disabled @onclick:stopPropagation="true" @onclick:preventDefault="@(!AdditionalAttributes.ContainsKey("href"))" >
-            @ChildContent
+            <span class="block first-letter:uppercase lowercase">@ChildContent</span>
+            @if(Icon is not null)
+            {
+                <md-icon slot="icon">@Icon</md-icon>
+            }
         </md-text-button>
         break;
     default:
@@ -33,6 +49,8 @@
 
     [EditorRequired] [Parameter] public RenderFragment ChildContent { get; set; } = null!;
 
+    [Parameter] public string? Icon { get; set; }
+
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
     [Parameter] public AppButtonType Type { get; set; } = AppButtonType.Primary;

diff --git a/LiftLog.Ui/Shared/Presentation/Select.razor b/LiftLog.Ui/Shared/Presentation/Select.razor
@@ -2,8 +2,8 @@
 @typeparam T where T : IEquatable<T>
 
 <div class="relative" @attributes="AdditionalAttributes">
-    <AppButton id="@btnId" trailing-icon Type="AppButtonType.Text" OnClick="@(() => JsRuntime.InvokeVoidAsync("AppUtils.toggleOpen", menuRef))">
-        @(Options.FirstOrDefault(x => (x.Value == null && Value is null) || x.Value?.Equals(Value) == true)?.Title) <md-icon slot="icon">keyboard_arrow_down</md-icon>
+    <AppButton id="@btnId" trailing-icon Type="AppButtonType.Text" OnClick="@(() => JsRuntime.InvokeVoidAsync("AppUtils.toggleOpen", menuRef))" Icon="keyboard_arrow_down">
+        @(Options.FirstOrDefault(x => (x.Value == null && Value is null) || x.Value?.Equals(Value) == true)?.Title)
     </AppButton>
 
     <md-menu @ref="menuRef" id="usage-menu" anchor="@btnId">

diff --git a/LiftLog.Ui/Shared/Presentation/WeightDialog.razor b/LiftLog.Ui/Shared/Presentation/WeightDialog.razor
@@ -6,11 +6,11 @@
         <div class="flex flex-col gap-2">
             <TextField data-cy="weight-input" label="@(Label ?? UiStrings.Weight)" required="@(!AllowNull)" suffix-text="@WeightSuffix" TextFieldType="TextFieldType.Outlined" Value="@(EditorWeight.ToString())" OnChange="HandleInputChange" type="text" inputmode="decimal" step="@NonZeroIncrement"/>
             <div class="flex justify-between">
-                <AppButton data-cy="decrement-weight" Type="AppButtonType.OutlineSecondary" OnClick="OnWeightDecrementClick">
-                    <md-icon slot="icon">remove</md-icon><WeightFormat Weight="NonZeroIncrement"/>
+                <AppButton Icon="remove" data-cy="decrement-weight" Type="AppButtonType.OutlineSecondary" OnClick="OnWeightDecrementClick">
+                    <WeightFormat Weight="NonZeroIncrement"/>
                 </AppButton>
-                <AppButton autofocus data-cy="increment-weight" Type="AppButtonType.OutlineSecondary" OnClick="OnWeightIncrementClick">
-                    <md-icon slot="icon">add</md-icon><WeightFormat Weight="NonZeroIncrement"/>
+                <AppButton Icon="add" autofocus data-cy="increment-weight" Type="AppButtonType.OutlineSecondary" OnClick="OnWeightIncrementClick">
+                    <WeightFormat Weight="NonZeroIncrement"/>
                 </AppButton>
             </div>
         </div>

diff --git a/LiftLog.Ui/Shared/Smart/ProFeatures.razor b/LiftLog.Ui/Shared/Smart/ProFeatures.razor
@@ -57,7 +57,7 @@
             return null;
         }
 
-        return @<AppButton class="mr-2" OnClick="() => { upgradeDialog?.Open(); }"><md-icon slot="icon">lock</md-icon>@UiStrings.Unlock</AppButton>;
+        return @<AppButton Icon="lock" class="mr-2" OnClick="() => { upgradeDialog?.Open(); }">@UiStrings.Unlock</AppButton>;
     }
 
     private RenderFragment RenderPrice()

diff --git a/LiftLog.Ui/Shared/Smart/SessionComponent.razor b/LiftLog.Ui/Shared/Smart/SessionComponent.razor
@@ -52,11 +52,8 @@ else
     <div class="flex  justify-center gap-2 mt-6">
         @if (!SessionInPlan && Session.RecordedExercises.Any())
         {
-            <AppButton Type="AppButtonType.Secondary" OnClick="@(() => _updatePlanDialog?.Open())">
-                <md-icon
-                    slot="icon">
-                    assignment_add
-                </md-icon>@UiStrings.UpdatePlan
+            <AppButton Icon="assignment_add" Type="AppButtonType.Secondary" OnClick="@(() => _updatePlanDialog?.Open())">
+                @UiStrings.UpdatePlan
             </AppButton>
         }
     </div>