From d9beb609058bc84bc3c69cdc527ba64e71796d43 Mon Sep 17 00:00:00 2001
From: Farzin <francisdotbio@gmail.com>
Date: Wed, 7 Apr 2021 02:57:30 +0430
Subject: [PATCH] #267 - Editor part 3

---
 src/Blogifier.Admin/Pages/Blog/Editor.razor  |   2 +-
 src/Blogifier.Admin/Pages/Pages/Editor.razor | 154 ++++++++-----------
 2 files changed, 66 insertions(+), 90 deletions(-)

diff --git a/src/Blogifier.Admin/Pages/Blog/Editor.razor b/src/Blogifier.Admin/Pages/Blog/Editor.razor
index 89a8be43a..dabb3321f 100644
--- a/src/Blogifier.Admin/Pages/Blog/Editor.razor
+++ b/src/Blogifier.Admin/Pages/Blog/Editor.razor
@@ -58,7 +58,7 @@
 
                 <div class="editor-header-inner">
 
-                    <textarea class="editor-header-textarea editor-header-title autosize" @bind="Post.Title" name="title" placeholder="@PostTile" rows="1" autofocus></textarea>
+                    <textarea class="editor-header-textarea editor-header-title autosize" @bind="Post.Title" name="title" placeholder="@_localizer["page-title"]" rows="1" autofocus></textarea>
                     <textarea class="editor-header-textarea editor-header-desc autosize" @bind="Post.Description" name="description" placeholder="@_localizer["description"]..." rows="1"></textarea>
 
                     <div class="editor-meta d-flex">
diff --git a/src/Blogifier.Admin/Pages/Pages/Editor.razor b/src/Blogifier.Admin/Pages/Pages/Editor.razor
index 979617e13..f2d2d6a55 100644
--- a/src/Blogifier.Admin/Pages/Pages/Editor.razor
+++ b/src/Blogifier.Admin/Pages/Pages/Editor.razor
@@ -10,102 +10,78 @@
 <div class="app-editor">
     @if (Post != null)
     {
-        <div class="app-editor-header row">
-            <div class="col-md-7">
-                <textarea class="app-editor-control app-editor-control-title" @bind="Post.Title" name="title" placeholder="@_localizer["page-title"]" rows="1" autofocus></textarea>
-                <textarea class="app-editor-control app-editor-control-desc" @bind="Post.Description" name="description" placeholder="@_localizer["description"]..." rows="1"></textarea>
-            </div>
-            <div class="col-md-4 ms-auto">
-                <div class="app-editor-actions d-flex justify-content-end">
-                    @if (Post.Id > 0)
-                    {
-                        <button class="btn btn-icon btn-link me-2" @onclick="(() => Remove(Post.Id))" title="@_localizer["delete"]">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                            </svg>
-                        </button>
-                    }
-                    @if (Post.Id == 0)
-                    {
-                        <button type="button" class="btn btn-default" @onclick="() => Save()" @onclick:preventDefault>@_localizer["save"]</button>
-                        <button type="button" class="btn btn-blogifier" @onclick="() => Publish()">@_localizer["publish"]</button>
-                    }
-                    else
-                    {
-                        if (Post.Published > DateTime.MinValue)
-                        {
-                            <a href="posts/@Post.Slug" class="btn btn-icon btn-link me-3" target="_blank">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
+        <div class="editor-actions d-flex">
+            @if (Post.Id == 0)
+            {
+                <button type="button" class="btn btn-blogifier me-3 px-4" @onclick="() => Publish()">@_localizer["publish"]</button>
+                <button type="button" class="btn btn-default me-auto" @onclick="() => Save()" @onclick:preventDefault>@_localizer["save"]</button>
+            }
+            else
+            {
+                if (Post.Published > DateTime.MinValue)
+                {
+                    <button type="button" class="btn btn-blogifier me-3 px-4" @onclick="() => Save()">@_localizer["save"]</button>
+                    <button type="button" class="btn btn-default me-auto" @onclick="() => Unpublish()" @onclick:preventDefault>@_localizer["unpublish"]</button>
+                    <button class="btn btn-link me-1" @onclick="(() => Remove(Post.Id))" title="@_localizer["delete"]">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                        </svg>
+                        <span class="ms-2 d-none d-lg-inline">Delete</span>
+                    </button>
+                    <a href="posts/@Post.Slug" class="btn btn-link" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
+                        </svg>
+                        <span class="ms-2 d-none d-lg-inline">View</span>
+                    </a>
+                }
+                else
+                {
+                    <button type="button" class="btn btn-blogifier me-3 px-4" @onclick="() => Publish()">@_localizer["publish"]</button>
+                    <button type="button" class="btn btn-default me-auto" @onclick="() => Save()" @onclick:preventDefault>@_localizer["save"]</button>
+                    <button class="btn btn-link" @onclick="(() => Remove(Post.Id))" title="@_localizer["delete"]">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                        </svg>
+                        <span class="ms-2 d-none d-lg-inline">Delete</span>
+                    </button>
+                }
+            }
+        </div>
+        <div class="editor-wrap">
+            <div class="editor-header">
+                <img class="editor-cover" src="/@Post.Cover" alt="Cover" id="post-cover">
+                <div class="editor-header-inner">
+                    <textarea class="editor-header-textarea editor-header-title autosize" @bind="Post.Title" name="title" placeholder="@_localizer["page-title"]" rows="1" autofocus></textarea>
+                    <textarea class="editor-header-textarea editor-header-desc autosize" @bind="Post.Description" name="description" placeholder="@_localizer["description"]..." rows="1"></textarea>
+                    <div class="editor-meta d-flex">
+                        <div class="dropdown me-3">
+                            <a class="editor-meta-link" href="#" id="coverDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image me-1" viewBox="0 0 16 16">
+                                    <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+                                    <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
                                 </svg>
+                                @_localizer["Cover"]
                             </a>
-                            <button type="button" class="btn btn-default" @onclick="() => Unpublish()" @onclick:preventDefault>@_localizer["unpublish"]</button>
-                            <button type="button" class="btn btn-blogifier" @onclick="() => Save()">@_localizer["save"]</button>
-                        }
-                        else
-                        {
-                            <button type="button" class="btn btn-default" @onclick="() => Save()" @onclick:preventDefault>@_localizer["save"]</button>
-                            <button type="button" class="btn btn-blogifier" @onclick="() => Publish()">@_localizer["publish"]</button>
-                        }
-                    }
-                </div>
-            </div>
-        </div>
-
-        <div class="app-editor-meta d-flex">
-
-            <a class="app-editor-addcover ms-auto" data-bs-toggle="modal" data-bs-target="#exampleModal" disabled="@(string.IsNullOrEmpty(Post.Slug) ? true : false)" href="#">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
-                    <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
-                    <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
-                </svg>
-                <span>
-                    @_localizer["cover"]
-                </span>
-            </a>
-        </div>
-
-        <div class="app-editor-content bf-editor">
-            <PostEditorComponent Content="@Post.Content" />
-        </div>
-
-        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="exampleModalLabel">@_localizer["cover"]</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body p-5">
-                        <div class="form-item">
-                            <div class="row">
-                                <div class="col-6">
-                                    <button class="btn btn-blogifier btn-block" onclick="return fileManager.uploadClick('@UploadType.PostCover', @Post.Id);" type="button">@_localizer["change"]</button>
+                            <ul class="dropdown-menu" aria-labelledby="coverDropdown">
+                                <li>
+                                    <button class="dropdown-item" onclick="return fileManager.uploadClick('@UploadType.PostCover', @Post.Id);" type="button">@_localizer["Change"]</button>
                                     <input type="hidden" class="txt-upload" @bind="Post.Cover" name="cover" id="cover" readonly />
-                                </div>
-                                <div class="col-6">
-                                    <button class="btn btn-danger btn-block" type="button" @onclick="() => ResetCover()">@_localizer["reset"]</button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form-item">
-                            <label class="form-label">@_localizer["preview"]</label>
-                            <img id="post-cover" name="post-cover" src="@Post.Cover" class="rounded-3">
-                        </div>
-                        <div class="form-item">
-                            <label class="form-label">Alt</label>
-                            <input type="text" class="form-control" value="@Post.Title">
-                        </div>
-                        <div class="form-item mb-0">
-                            <label class="form-label">@_localizer["url"]</label>
-                            <input id="post-cover-txt" name="post-cover-txt" type="text" class="form-control" value="@Post.Cover" disabled>
+                                </li>
+                                <li>
+                                    <button class="dropdown-item" type="button" @onclick="() => ResetCover()">@_localizer["Reset"]</button>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
+            <div class="editor-editor bf-editor">
+                <PostEditorComponent Content="@Post.Content" />
+            </div>
         </div>
-
     }
 </div>
 <ToasterComponent @ref="Toaster" />
@@ -143,7 +119,7 @@
        Post.Content = await _jsruntime.InvokeAsync<string>("commonJsFunctions.getEditorValue", "");
        Post.PostType = PostType.Page;
 
-       Post.Cover = await _jsruntime.InvokeAsync<string>("commonJsFunctions.getTxtValue", "post-cover-txt");
+       Post.Cover = await _jsruntime.InvokeAsync<string>("commonJsFunctions.getTxtValue", "post-cover");
        if(string.IsNullOrEmpty(Post.Cover))
            Post.Cover = Constants.DefaultCover;