Skip to content

Commit

Permalink
blogifierdotnet#267 - Editor part 3
Browse files Browse the repository at this point in the history
  • Loading branch information
@farzindev
farzindev committed Apr 6, 2021
1 parent 2ac1352 commit d9beb60
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 90 deletions.
2 changes: 1 addition & 1 deletion src/Blogifier.Admin/Pages/Blog/Editor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
154 changes: 65 additions & 89 deletions src/Blogifier.Admin/Pages/Pages/Editor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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;

Expand Down

0 comments on commit d9beb60

Please sign in to comment.