From c467a5cb67e320a0a322d3b08ddd30cb0047b983 Mon Sep 17 00:00:00 2001
From: Pavel Vesely <pavel@vesely.dev>
Date: Sat, 7 Mar 2020 00:10:03 +0100
Subject: [PATCH] EditHtml fix second part

---
 .../Modules/Controls/RichTextEditor.razor     |  15 +-
 Oqtane.Client/Modules/HtmlText/Edit.razor     | 160 ++++++++++--------
 2 files changed, 95 insertions(+), 80 deletions(-)

diff --git a/Oqtane.Client/Modules/Controls/RichTextEditor.razor b/Oqtane.Client/Modules/Controls/RichTextEditor.razor
index 60d4fe6d..d3d68870 100644
--- a/Oqtane.Client/Modules/Controls/RichTextEditor.razor
+++ b/Oqtane.Client/Modules/Controls/RichTextEditor.razor
@@ -16,11 +16,14 @@
         <button type="button" class="btn btn-secondary" @onclick="CloseFileManager">Close</button>
     }
 </div>
-<br />
-<div @ref="@ToolBar">
-    @ToolbarContent
-</div>
-<div @ref="@EditorElement">
+<div class="row">
+    <div class ="col">
+        <div @ref="@ToolBar">
+            @ToolbarContent
+        </div>
+        <div @ref="@EditorElement">
+        </div>
+    </div>
 </div>
 
 @code {
@@ -128,4 +131,4 @@
         StateHasChanged();
     }
 
-}
\ No newline at end of file
+}
diff --git a/Oqtane.Client/Modules/HtmlText/Edit.razor b/Oqtane.Client/Modules/HtmlText/Edit.razor
index 7404634e..c5829d05 100644
--- a/Oqtane.Client/Modules/HtmlText/Edit.razor
+++ b/Oqtane.Client/Modules/HtmlText/Edit.razor
@@ -7,64 +7,64 @@
 @inject HttpClient http
 @inject SiteState sitestate
 
-<table class="table table-borderless">
-    <tr>
-        <td>
-            <label for="Name" class="control-label">Content: </label>
-        </td>
-        <td>
-            @if (!RichTextEditorMode)
-            {
-                <textarea class="form-control" @bind="@content" rows="5" />
-            }
-            else
-            {
-                <RichTextEditor @ref="@RichTextEditorHtml">
-                    <ToolbarContent>
-                        <select class="ql-header">
-                            <option selected=""></option>
-                            <option value="1"></option>
-                            <option value="2"></option>
-                            <option value="3"></option>
-                            <option value="4"></option>
-                            <option value="5"></option>
-                        </select>
-                        <span class="ql-formats">
-                            <button class="ql-bold"></button>
-                            <button class="ql-italic"></button>
-                            <button class="ql-underline"></button>
-                            <button class="ql-strike"></button>
-                        </span>
-                        <span class="ql-formats">
-                            <select class="ql-color"></select>
-                            <select class="ql-background"></select>
-                        </span>
-                        <span class="ql-formats">
-                            <button class="ql-list" value="ordered"></button>
-                            <button class="ql-list" value="bullet"></button>
-                        </span>
-                        <span class="ql-formats">
-                            <button class="ql-link"></button>
-                        </span>
-                    </ToolbarContent>
-                </RichTextEditor>
-            }
-        </td>
-    </tr>
-</table>
-@if (!RichTextEditorMode)
-{
-    <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
-}
-else
-{
-    <button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button>
-}
-<button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
-<br/>
-<br/>
-<AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+<div class="row" style="margin-bottom: 50px;">
+    <div class="col @_visibleText">
+        <textarea class="form-control" @bind="@content" rows="10"></textarea>
+    </div>
+
+    <div class="col @_visibleRich">
+        <RichTextEditor @ref="@RichTextEditorHtml">
+            <ToolbarContent>
+                <select class="ql-header">
+                    <option selected=""></option>
+                    <option value="1"></option>
+                    <option value="2"></option>
+                    <option value="3"></option>
+                    <option value="4"></option>
+                    <option value="5"></option>
+                </select>
+                <span class="ql-formats">
+                    <button class="ql-bold"></button>
+                    <button class="ql-italic"></button>
+                    <button class="ql-underline"></button>
+                    <button class="ql-strike"></button>
+                </span>
+                <span class="ql-formats">
+                    <select class="ql-color"></select>
+                    <select class="ql-background"></select>
+                </span>
+                <span class="ql-formats">
+                    <button class="ql-list" value="ordered"></button>
+                    <button class="ql-list" value="bullet"></button>
+                </span>
+                <span class="ql-formats">
+                    <button class="ql-link"></button>
+                </span>
+            </ToolbarContent>
+        </RichTextEditor>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col">
+        @if (!RichTextEditorMode)
+        {
+            <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
+        }
+        else
+        {
+            <button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button>
+        }
+        <button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>        
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col">
+        <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+    </div>
+</div>
 
 @code {
 
@@ -78,8 +78,30 @@ else
         get { return "Edit Html/Text"; }
     }
 
-    bool RichTextEditorMode = true;
-    bool _richTextEditorLoading = false;
+    public bool RichTextEditorMode
+    {
+        get => _richTextEditorMode;
+        set
+        {
+            _richTextEditorMode = value;
+            
+            if (_richTextEditorMode)
+            {
+                _visibleText = "d-none";
+                _visibleRich = "";
+            }
+            else
+            {
+                _visibleText = "";
+                _visibleRich = "d-none";
+            }
+        }
+    }
+
+    string _visibleText;
+    string _visibleRich;
+    bool _richTextEditorMode;
+
     RichTextEditor RichTextEditorHtml;
     string content;
     string createdby;
@@ -95,17 +117,10 @@ else
             {
                 if (content == null)
                 {
+                    RichTextEditorMode = true;
                     await LoadText();
                 }
             }
-            else
-            {
-                if (_richTextEditorLoading)
-                {
-                    await RichTextEditorHtml.LoadContent(content);
-                    _richTextEditorLoading = false;
-                }
-            }
         }
         catch (Exception ex)
         {
@@ -137,18 +152,15 @@ else
     private async Task RichTextEditor()
     {
         RichTextEditorMode = true;
-        _richTextEditorLoading = true;
+        await RichTextEditorHtml.LoadContent(content);
         StateHasChanged();
     }
 
     private async Task RawHtmlEditor()
     {
-        if (RichTextEditorMode)
-        {
-            content = await this.RichTextEditorHtml.GetHTML();
-        }
+        content = await this.RichTextEditorHtml.GetHTML();
         RichTextEditorMode = false;
-    // await LoadText();
+        StateHasChanged();
     }
 
     private async Task SaveContent()