feat: update forms to mudblazor

sitkoru · Jan 17, 2022 · 023a11e · 023a11e
1 parent 3456112
commit 023a11e
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 88 deletions.
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudCutBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudCutBlockForm.razor
@@ -1,4 +1,8 @@
-@inherits CutBlockForm<MudBlazorBlocklyFormOptions>
-<AntFormItem Label="@LocalizationProvider["Button text"]" Hint="@LocalizationProvider["Text on button when block rendered in preview list mode"]">
-    <Input @bind-Value="@Block.ButtonText"/>
-</AntFormItem>
+@using global::MudBlazor
+@inherits CutBlockForm<MudBlazorBlocklyFormOptions>
+<MudItem>
+    <MudTextField @bind-Value="@Block.ButtonText" Label="@LocalizationProvider["Button text"]" />
+    <MudTooltip Text="@LocalizationProvider["Text on button when block rendered in preview list mode"]">
+         <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
+     </MudTooltip>
+</MudItem >
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudFilesBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudFilesBlockForm.razor
@@ -3,25 +3,24 @@
 @inherits FilesBlockForm<MudBlazorBlocklyFormOptions>
 @if (FormOptions.Storage is not null)
 {
-    <AntFormItem>
-        <AntStorageFilesInput
+    <MudItem>
+        <MudFilesUpload
             TValue="ValueCollection<StorageItem>"
             Storage="FormOptions.Storage"
             ContentTypes="@FormOptions.ImagesOptions.AllowedTypes"
             UploadPath="@FormOptions.ImagesOptions.UploadPath"
             MaxFileSize="@FormOptions.ImagesOptions.MaxFileSize"
-            MaxFiles="@FormOptions.ImagesOptions.MaxAllowedFiles"
+            MaxAllowedFiles="@FormOptions.ImagesOptions.MaxAllowedFiles"
             GenerateMetadata="FormOptions.ImagesOptions.GenerateMetadata"
             UploadText="@LocalizationProvider["Upload"]"
             RemoveText="@LocalizationProvider["Remove"]"
             LeftText="@LocalizationProvider["Move left"]"
             RightText="@LocalizationProvider["Move right"]"
-            @bind-Value="Block.Files">
-        </AntStorageFilesInput>
-        <AntBlockValidationMessage BlockForm="this"></AntBlockValidationMessage>
-    </AntFormItem>
+            @bind-Value="Block.Files"/>
+        <MudBlockValidationMessage BlockForm="this"></MudBlockValidationMessage>
+    </MudItem>
 }
 else
 {
-    <AntBlockFormErrorComponent Error="@LocalizationProvider["Storage is not configured in form options"]"></AntBlockFormErrorComponent>
+    <MudBlockFormErrorComponent Error="@LocalizationProvider["Storage is not configured in form options"]"></MudBlockFormErrorComponent>
 }
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudGalleryBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudGalleryBlockForm.razor
@@ -3,26 +3,25 @@
 @inherits GalleryBlockForm<MudBlazorBlocklyFormOptions>
 @if (FormOptions.Storage is not null)
 {
-    <AntFormItem>
-        <AntStorageImagesInput
+    <MudItem>
+        <MudFilesUpload
             TValue="ValueCollection<StorageItem>"
             Storage="FormOptions.Storage"
             ContentTypes="@FormOptions.ImagesOptions.AllowedTypes"
             UploadPath="@FormOptions.ImagesOptions.UploadPath"
             MaxFileSize="@FormOptions.ImagesOptions.MaxFileSize"
-            MaxFiles="@FormOptions.ImagesOptions.MaxAllowedFiles"
+            MaxAllowedFiles="@FormOptions.ImagesOptions.MaxAllowedFiles"
             GenerateMetadata="FormOptions.ImagesOptions.GenerateMetadata"
             UploadText="@LocalizationProvider["Upload"]"
             RemoveText="@LocalizationProvider["Remove"]"
             PreviewText="@LocalizationProvider["Preview"]"
             LeftText="@LocalizationProvider["Move left"]"
             RightText="@LocalizationProvider["Move right"]"
-            @bind-Value="Block.Pictures">
-        </AntStorageImagesInput>
-        <AntBlockValidationMessage BlockForm="this"></AntBlockValidationMessage>
-    </AntFormItem>
+            @bind-Value="Block.Pictures"/>
+        <MudBlockValidationMessage BlockForm="this"></MudBlockValidationMessage>
+    </MudItem>
 }
 else
 {
-    <AntBlockFormErrorComponent Error="@LocalizationProvider["Storage is not configured in form options"]"></AntBlockFormErrorComponent>
+    <MudBlockFormErrorComponent Error="@LocalizationProvider["Storage is not configured in form options"]"></MudBlockFormErrorComponent>
 }
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudIFrameBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudIFrameBlockForm.razor
@@ -1,8 +1,12 @@
-@inherits IFrameBlockForm<MudBlazorBlocklyFormOptions>
+@using global::MudBlazor
+@inherits IFrameBlockForm<MudBlazorBlocklyFormOptions>
 <!--suppress HtmlDeprecatedAttribute -->
-<AntFormItem Label="@LocalizationProvider["Url"]" Hint="@LocalizationProvider["Page url to embed"]">
-    <Input @bind-Value="@Block.Src" Placeholder="@LocalizationProvider["Source"]"/>
-</AntFormItem>
+<MudItem>
+    <MudTextField @bind-Value="@Block.Src" Placeholder="@LocalizationProvider["Source"]" Label="@LocalizationProvider["Url"]" />
+    <MudTooltip Text="@LocalizationProvider["Page url to embed"]">
+             <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
+         </MudTooltip>
+</MudItem>
 @if (!string.IsNullOrEmpty(Block.Src))
 {
     <div class="iframe-container-wrapper">

diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudQuoteBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudQuoteBlockForm.razor
@@ -1,47 +1,43 @@
-@inherits QuoteBlockForm<MudBlazorBlocklyFormOptions>
-<Row Gutter="(24,20)">
-    <AntDesign.Col Span="24">
-        <AntFormItem>
-            <CKEditor Config="FormOptions.CKEditorConfig" Placeholder="@LocalizationProvider["Quote text"]" @bind-Value="Block.Text"></CKEditor>
-            <AntBlockValidationMessage BlockForm="this"></AntBlockValidationMessage>
-        </AntFormItem>
-    </AntDesign.Col>
-    <AntDesign.Col Span="24">
-        <Row Gutter="24">
-            <AntDesign.Col Md="8" Xs="24">
-                <AntFormItem Label="@LocalizationProvider["Source"]" Hint="@LocalizationProvider["Author name, site title, etc..."]">
-                    <Input Placeholder="@LocalizationProvider["Author name, site title, etc..."]" @bind-Value="@Block.Author"/>
-                </AntFormItem>
-            </AntDesign.Col>
-            <AntDesign.Col Md="8" Xs="24">
-                <AntFormItem Label="@LocalizationProvider["Url"]" Hint="@LocalizationProvider["Link to page where this quote comes from"]">
-                    <Input Placeholder="@LocalizationProvider["Link"]" @bind-Value="@Block.Link"/>
-                </AntFormItem>
-            </AntDesign.Col>
-        </Row>
-    </AntDesign.Col>
-    <AntDesign.Col Span="24">
-        <Row Gutter="24">
-            <AntDesign.Col Span="24">
-                @if (FormOptions.Storage is not null)
-                {
-                    <AntFormItem Label="@LocalizationProvider["Source picture"]" Hint="@LocalizationProvider["Author photo, site logo, etc..."]">
-                        <AntStorageImageInput
-                            Avatar="true"
-                            Size="small"
-                            Storage="FormOptions.Storage"
-                            ContentTypes="@FormOptions.ImagesOptions.AllowedTypes"
-                            UploadPath="@FormOptions.ImagesOptions.UploadPath"
-                            MaxFileSize="@FormOptions.ImagesOptions.MaxFileSize"
-                            UploadText="@LocalizationProvider["Upload"]"
-                            RemoveText="@LocalizationProvider["Remove"]"
-                            PreviewText="@LocalizationProvider["Preview"]"
-                            GenerateMetadata="FormOptions.ImagesOptions.GenerateMetadata"
-                            @bind-Value="Block.Picture">
-                        </AntStorageImageInput>
-                    </AntFormItem>
-                }
-            </AntDesign.Col>
-        </Row>
-    </AntDesign.Col>
-</Row>
+@using global::MudBlazor
+@inherits QuoteBlockForm<MudBlazorBlocklyFormOptions>
+<MudGrid>
+    <MudItem xs="12">
+        <CKEditor Config="FormOptions.CKEditorConfig" Placeholder="@LocalizationProvider["Quote text"]" @bind-Value="Block.Text"></CKEditor>
+        <MudBlockValidationMessage BlockForm="this"></MudBlockValidationMessage>
+    </MudItem>
+
+    <MudItem md="4" xs="12">
+        <MudTextField Placeholder="@LocalizationProvider["Author name, site title, etc..."]" @bind-Value="@Block.Author" Label="@LocalizationProvider["Source"]"/>
+        <MudTooltip Text="@LocalizationProvider["Author name, site title, etc..."]">
+            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info"/>
+        </MudTooltip>
+    </MudItem>
+
+    <MudItem md="4" xs="12">
+        <MudTextField Placeholder="@LocalizationProvider["Link"]" @bind-Value="@Block.Link" Label="@LocalizationProvider["Url"]"/>
+        <MudTooltip Text="@LocalizationProvider["Link to page where this quote comes from"]">
+            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info"/>
+        </MudTooltip>
+    </MudItem>
+
+
+    @if (FormOptions.Storage is not null)
+    {
+        <MudItem  xs="12">
+            <MudFileUpload
+                Storage="FormOptions.Storage"
+                ContentTypes="@FormOptions.ImagesOptions.AllowedTypes"
+                UploadPath="@FormOptions.ImagesOptions.UploadPath"
+                MaxFileSize="@FormOptions.ImagesOptions.MaxFileSize"
+                UploadText="@LocalizationProvider["Upload"]"
+                RemoveText="@LocalizationProvider["Remove"]"
+                PreviewText="@LocalizationProvider["Preview"]"
+                GenerateMetadata="FormOptions.ImagesOptions.GenerateMetadata"
+                @bind-Value="Block.Picture"/>
+            <MudTooltip Text="@LocalizationProvider["Author photo, site logo, etc..."]">
+                <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info"/>
+            </MudTooltip>
+        </MudItem>
+    }
+
+</MudGrid>
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTextBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTextBlockForm.razor
@@ -1,5 +1,5 @@
 @inherits TextBlockForm<MudBlazorBlocklyFormOptions>
-<AntFormItem>
+<MudItem>
     <CKEditor Config="FormOptions.CKEditorConfig" TextareaClass="ant-input" Placeholder="@LocalizationProvider["Block content"]" @bind-Value="Block.Text"></CKEditor>
-    <AntBlockValidationMessage BlockForm="this"></AntBlockValidationMessage>
-</AntFormItem>
+    <MudBlockValidationMessage BlockForm="this"></MudBlockValidationMessage>
+</MudItem>
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTwitchBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTwitchBlockForm.razor
@@ -1,6 +1,10 @@
-@inherits TwitchBlockForm<MudBlazorBlocklyFormOptions>
+@using global::MudBlazor
+@inherits TwitchBlockForm<MudBlazorBlocklyFormOptions>
 
-<AntFormItem Label="@LocalizationProvider["Url"]" Hint="@LocalizationProvider["Twitch video, channel or collection url"]">
-    <Input @bind-Value="Block.Url" Placeholder="@LocalizationProvider["Twitch link"]" AllowClear="true" OnChange="OnChangeAsync" TValue="string"/>
-</AntFormItem>
+<MudITem>
+    <MudTextField T="string" @bind-Value="Block.Url" Placeholder="@LocalizationProvider["Twitch link"]" OnChange="OnChangeAsync" AllowClear="true" Label="@LocalizationProvider["Url"]"/>
+    <MudTooltip Text="@LocalizationProvider["Twitch video, channel or collection url"]">
+        <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
+    </MudTooltip>
+</MudITem>
 <div @ref="ContainerRef" class="twitch-video" id="twitch-@Block.Id"></div>
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTwitterBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudTwitterBlockForm.razor
@@ -1,7 +1,11 @@
-@inherits TwitterBlockForm<MudBlazorBlocklyFormOptions>
+@using global::MudBlazor
+@inherits TwitterBlockForm<MudBlazorBlocklyFormOptions>
 
-<AntFormItem Label="@LocalizationProvider["Url"]" Hint="@LocalizationProvider["Full tweet url"]">
-    <Input @bind-Value="Block.Url" Placeholder="@LocalizationProvider["Tweet link"]" AllowClear="true" OnChange="OnChangeAsync" TValue="string"/>
-</AntFormItem>
+<MudItem>
+    <MudTextField @bind-Value="Block.Url" Label="@LocalizationProvider["Url"]" Placeholder="@LocalizationProvider["Tweet link"]" AllowClear="true" OnChange="OnChangeAsync" T="string"/>
+    <MudTooltip Text="@LocalizationProvider["Full tweet url"]">
+        <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
+    </MudTooltip>
+</MudItem>
 <div @ref="ContainerRef" class="tweet">
 </div>
diff --git a/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudYoutubeBlockForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/Blocks/MudYoutubeBlockForm.razor
@@ -1,8 +1,12 @@
-@inherits YoutubeBlockForm<MudBlazorBlocklyFormOptions>
+@using global::MudBlazor
+@inherits YoutubeBlockForm<MudBlazorBlocklyFormOptions>
 <!--suppress HtmlDeprecatedAttribute -->
-<AntFormItem Label="@LocalizationProvider["Url"]" Hint="@LocalizationProvider["Full YouTube video url"]">
-    <Input placeholder="@LocalizationProvider["Video url"]" @bind-Value="@Block.Url"/>
-</AntFormItem>
+<MudItem>
+    <MudTextField Label="@LocalizationProvider["Url"]" Placeholder="@LocalizationProvider["Video url"]" @bind-Value="@Block.Url"/>
+    <MudTooltip Text="@LocalizationProvider["Full YouTube video url"]">
+        <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
+    </MudTooltip>
+</MudItem>
 @if (!string.IsNullOrEmpty(Block.YoutubeId))
 {
     <div class="youtube-container-wrapper">

diff --git a/src/Sitko.Blockly.MudBlazor/Forms/MudBlocklyForm.razor b/src/Sitko.Blockly.MudBlazor/Forms/MudBlocklyForm.razor
@@ -30,14 +30,14 @@
                             </MudButton>
                         </span>
                         <span title="@LocalizationProvider["Delete block"]">
-                            <AntDesign.Popconfirm Disabled="!CanDeleteBlock(block)" Placement="@Placement.Left" Title="@LocalizationProvider["Delete block?"]"
+                            <MudPopover Disabled="!CanDeleteBlock(block)" Placement="@Placement.Left" Title="@LocalizationProvider["Delete block?"]"
                                                   OnConfirm="@(async () => await DeleteBlockAsync(block))"
                                                   OkText="@LocalizationProvider["Delete block"]"
                                                   CancelText="@LocalizationProvider["Cancel"]">
                                 <MudButton Disabled="!CanDeleteBlock(block)" Size="Size.Medium">
                                     <MudIcon Icon="@Icons.Filled.Delete"></MudIcon>
                                 </MudButton>
-                            </AntDesign.Popconfirm>
+                            </MudPopover>
                         </span>
                         <span title="@LocalizationProvider["Move up"]">
                             <MudButton Size="Size.Medium" Disabled="!CanMoveBlockUp(block)" OnClick="@(() => MoveBlockUpAsync(block))">