Card style dialogs for MD3

danielchalmers · Sep 29, 2024 · a5cf575 · a5cf575
1 parent 94744b9
commit a5cf575
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 59 deletions.
diff --git a/JournalApp/Components/EditCategoryDialog.razor b/JournalApp/Components/EditCategoryDialog.razor
@@ -5,20 +5,7 @@
 
 <MudDialog Class="category-dialog" DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">@(Category == null ? "New" : "Edit") @(Group == "Medications" ? "medication" : "category")</MudText>
-
-            <MudSpacer />
-
-            @if (Category != null)
-            {
-                <MudIconButton Class="delete-button" Icon="@Icons.Material.Rounded.DeleteForever" aria-label="Delete forever" OnClick="Delete" />
-            }
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">@(Category == null ? "New" : "Edit") @(Group == "Medications" ? "medication" : "category")</MudText>
     </TitleContent>
 
     <DialogContent>
@@ -52,6 +39,17 @@
                           Placeholder="@(Group == "Medications" ? "Start date, side effects, etc" : "Explanation, scoring criteria, etc")" />
         </MudForm>
     </DialogContent>
+
+    <DialogActions>
+        @if (Category != null)
+        {
+            <MudButton Class="delete-button" StartIcon="@Icons.Material.Rounded.DeleteForever" aria-label="Delete forever" OnClick="Delete">Delete</MudButton>
+        }
+
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/Components/EditDoseDialog.razor b/JournalApp/Components/EditDoseDialog.razor
@@ -5,15 +5,7 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">Edit day's dose</MudText>
-
-            <MudSpacer />
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">Edit day's dose</MudText>
     </TitleContent>
 
     <DialogContent>
@@ -34,6 +26,12 @@
             }
         </MudForm>
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/Components/EditNoteDialog.razor b/JournalApp/Components/EditNoteDialog.razor
@@ -5,20 +5,18 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">@Title</MudText>
-
-            <MudSpacer />
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">@Title</MudText>
     </TitleContent>
 
     <DialogContent>
         <MudTextField @bind-Value="Text" Typo="Typo.body2" Placeholder="@Placeholder" Lines="10" AutoGrow Underline="false" Immediate />
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/Pages/Calendar/ColorPickerDialog.razor b/JournalApp/Pages/Calendar/ColorPickerDialog.razor
@@ -6,9 +6,19 @@
 @inject KeyEventService KeyEventService
 
 <MudDialog Class="color-picker" DefaultFocus="DefaultFocus.Element" OnBackdropClick="Submit">
+    <TitleContent>
+        <MudText Typo="Typo.h6">Pick color</MudText>
+    </TitleContent>
+
     <DialogContent>
         <MudColorPicker Label="Primary" PickerVariant="PickerVariant.Static" @bind-Value="SelectedColor" ShowToolbar="false" ShowAlpha="false" ThrottleInterval="50" />
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {
@@ -24,6 +34,11 @@
         KeyEventService.Entered(() => Submit());
     }
 
+    void Cancel()
+    {
+        KeyEventService.CancelDialog(MudDialog);
+    }
+
     void Submit()
     {
         KeyEventService.CloseDialog(MudDialog, SelectedColor);

diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css
@@ -62,7 +62,7 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--mud-palette-text-primary);
 }
 
-.mud-dialog .mud-dialog-title, .page-header {
+.page-header {
   z-index: 999;
   display: flex;
   flex-direction: column;
@@ -73,39 +73,18 @@ h1, h2, h3, h4, h5, h6 {
   background-color: var(--mud-palette-background);
 }
 
-.mud-dialog .mud-dialog-content, .page-body {
+.page-body {
   width: 100%;
   max-width: 960px;
   margin: 0 auto !important;
   padding: 0.5em !important;
-}
-
-.mud-dialog .mud-dialog-content {
-  padding-bottom: 1em !important;
-  padding-left: 1em !important;
-  padding-right: 1em !important;
-}
-
-.mud-message-box :not(:has(.mud-dialog-title)) .mud-dialog-content {
-  padding-top: 1em !important;
-}
-
-.mud-dialog .mud-dialog-actions {
-  padding: 0.5em !important;
-}
-
-.page-body {
   padding-bottom: 15vh !important;
 }
 
 .mud-dialog-width-full {
   width: calc(100% - 1em) !important;
 }
 
-.color-picker .mud-dialog-content {
-  padding: 0 !important;
-}
-
 .mud-form {
   display: flex;
   flex-direction: column;
@@ -144,12 +123,22 @@ h1, h2, h3, h4, h5, h6 {
   flex-grow: 1;
 }
 
-.mud-card-header {
-  padding: 1em 1em 0 1em !important;
+.mud-dialog, .mud-card {
+  padding: 1em !important;
+  gap: 1em !important;
 }
 
-.mud-card-content {
-  padding: 1em !important;
+.mud-dialog-title, .mud-card-header {
+  padding: 0 !important;
+}
+
+.mud-dialog-content, .mud-card-content {
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
+
+.mud-dialog-actions, .mud-card-actions {
+  padding: 0 !important;
 }
 
 #blazor-error-ui {