From c4493452f9e6258d3e44cf8e76e37e707c5a5eae Mon Sep 17 00:00:00 2001
From: MaxymGorn <maximus56132@gmail.com>
Date: Sat, 4 Nov 2023 15:02:03 +0200
Subject: [PATCH] fix UI / UI for crop page

---
 .../Client/Components/Docs/CodeInline.razor   |  3 +-
 .../Client/Pages/Crop/CropPage.razor          | 30 +++++++++----------
 .../Client/Styles/components/docspage.scss    |  4 +++
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/Cropper.Blazor/Client/Components/Docs/CodeInline.razor b/src/Cropper.Blazor/Client/Components/Docs/CodeInline.razor
index 6087bb4a..d9bbdd54 100644
--- a/src/Cropper.Blazor/Client/Components/Docs/CodeInline.razor
+++ b/src/Cropper.Blazor/Client/Components/Docs/CodeInline.razor
@@ -1,4 +1,4 @@
-<code class="docs-code @(SecondaryColor? $"docs-code-secondary {Class}": $"docs-code-primary {Class}")">
+<code style="@Style" class="docs-code @(SecondaryColor? $"docs-code-secondary {Class}": $"docs-code-primary {Class}")">
     @if (Tag) {<span>&lt;</span>}@Code@ChildContent@if (Tag) {<span>&gt;</span>}
 </code>
 
@@ -7,6 +7,7 @@
     [Parameter] public RenderFragment? ChildContent { get; set; } = null;
 
     [Parameter] public string? Code { get; set; } = null;
+    [Parameter] public string Style { get; set; } = string.Empty;
 
     [Parameter] public bool SecondaryColor { get; set; }
 
diff --git a/src/Cropper.Blazor/Client/Pages/Crop/CropPage.razor b/src/Cropper.Blazor/Client/Pages/Crop/CropPage.razor
index d9fab66b..8f1fa816 100644
--- a/src/Cropper.Blazor/Client/Pages/Crop/CropPage.razor
+++ b/src/Cropper.Blazor/Client/Pages/Crop/CropPage.razor
@@ -58,31 +58,31 @@
                             <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/system.threading.cancellationtokensource">CancellationToken</MudLink> (not required)</CodeInline> - used to propagate notifications that the operation should be canceled.
                         </MudListItem>
                     </MudList>
-                    <br>
-                    This <CodeInline Class="docs-code-tertiary">GetCroppedCanvasAsync</CodeInline> method returns <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline>.
-                    Use <CodeInline>JSRuntimeObjectRef</CodeInline> in the
-                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> which represents a reference to a JavaScript cropped canvas object.
-                    After then, you can display the canvas as an image directly, or use <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink></CodeInline> to get a Data URL, or use <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob</MudLink></CodeInline> to get a blob and upload it to server with <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</MudLink></CodeInline> if the browser supports these APIs.
-                    <br><br>
-                    In Blazor framework we can invoke JavaScript functions and read a returned value through <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntimeextensions.invokeasync">JSRuntimeExtensions.InvokeAsync</MudLink></CodeInline>.
-                    <br>
-                    Example invoking function for get a canvas drawn in URL format from the cropped image with reference to a JavaScript cropped canvas object: <CodeInline Class="docs-code-tertiary">await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync&lt;string&gt;("toDataURL", "image/png", 1);</CodeInline>
                     <MudAlert Class="mt-3" Severity="Severity.Info">
                         <b>Note:</b> The aspect ratio of the output canvas will be fitted to the aspect ratio of the crop box automatically.
                     </MudAlert>
                     <MudAlert Class="mt-3" Severity="Severity.Info">
                         <b>Note:</b> If you intend to get a JPEG image from the output canvas, you should set the <CodeInline>fillColor</CodeInline> option first, if not, the transparent part in the JPEG image will become black by default.
                     </MudAlert>
-                    <MudAlert Class="mt-3" Severity="Severity.Warning">
+                    <br>
+                    This <CodeInline Class="docs-code-tertiary">GetCroppedCanvasAsync</CodeInline> method returns <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline>.
+                    Use <CodeInline>JSRuntimeObjectRef</CodeInline> in the
+                    <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> which represents a reference to a JavaScript cropped canvas object.
+                    After then, you can display the canvas as an image directly, or use <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink> to get a Data URL, or use <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob</MudLink> to get a blob and upload it to server with <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">FormData</MudLink> if the browser supports these APIs.
+                    <br><br>
+                    In Blazor framework we can invoke JavaScript functions and read a returned value through <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntimeextensions.invokeasync">JSRuntimeExtensions.InvokeAsync</MudLink>.
+                    <br>
+                    Example invoking function for get a canvas drawn in URL format from the cropped image with reference to a JavaScript cropped canvas object: <CodeInline Style="color: var(--mud-palette-text-primary);" Class="text-anywhere-wrap">await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync&lt;string&gt;("toDataURL", "image/png", 1);</CodeInline>
+                    <MudAlert Class="mt-3 text-anywhere-wrap" Severity="Severity.Warning">
                         <b>Note:</b> If you gathering get a Data URL using <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> by <CodeInline>JSRuntimeObjectRef</CodeInline> property.
-                        <b>Don't use</b> <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink></CodeInline> without arguments default method and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL(type)</MudLink></CodeInline> method due to image quality was little lost through
-                        default value <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline>.
+                        <b>Don't use</b> <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL</MudLink> without arguments default method and <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL(type)</MudLink> method due to image quality was little lost through
+                        default value <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink>.
                         In addition, different browsers have different image encoder compression, usually it is 92 or 80 percent of the full image quality.
                     </MudAlert>
-                    <MudAlert Class="mt-3" Severity="Severity.Warning">
+                    <MudAlert Class="mt-3 text-anywhere-wrap" Severity="Severity.Warning">
                         <b>Note:</b> if you gathering to get a blob using <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="/contract/CroppedCanvas">CroppedCanvas</MudLink></CodeInline> by <CodeInline>JSRuntimeObjectRef</CodeInline> property.
-                        <b>Don't use</b> <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback)</MudLink></CodeInline> and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback, type)</MudLink></CodeInline> without <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline> argument due to image quality was little lost through
-                        default value <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink></CodeInline>.
+                        <b>Don't use</b> <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback)</MudLink> and <CodeInline><MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">HTMLCanvasElement.toBlob(callback, type)</MudLink></CodeInline> without <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink> argument due to image quality was little lost through
+                        default value <MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })" Target="_blank" Href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#encoderoptions">encoderOptions</MudLink>.
                         In addition, different browsers have different image encoder compression, usually it is 92 or 80 percent of the full image quality.
                     </MudAlert>
                 </Description>
diff --git a/src/Cropper.Blazor/Client/Styles/components/docspage.scss b/src/Cropper.Blazor/Client/Styles/components/docspage.scss
index 520a3133..2b43cb98 100644
--- a/src/Cropper.Blazor/Client/Styles/components/docspage.scss
+++ b/src/Cropper.Blazor/Client/Styles/components/docspage.scss
@@ -88,3 +88,7 @@
         }
     }
 }
+
+.text-anywhere-wrap {
+    overflow-wrap: anywhere;
+}