Skip to content

Commit

Permalink
blogifierdotnet#267 - Editor part 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@farzindev
farzindev committed Apr 5, 2021
1 parent 6d19606 commit 8acb950
Show file tree
Hide file tree
Showing 9 changed files with 150 additions and 362 deletions.
31 changes: 7 additions & 24 deletions src/Blogifier.Admin/Components/Editor/CategoriesComponent.razor
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,20 @@
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer

<div class="app-editor-cats d-flex">

<div class="d-flex">
@if (PostCategories != null)
{
foreach (var item in PostCategories)
{
<div class="app-editor-cats-item">


<button class="app-editor-cats-button" @onclick="()=> Remove(item.Content)" @onclick:preventDefault type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16" >
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hash" viewBox="0 0 16 16">
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z" />
</svg>
</button>
<label class="app-editor-cats-label">@item.Content</label>

<div>
<label>@item.Content</label>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16" @onclick="()=> Remove(item.Content)">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</div>
}
}

<div class="app-editor-cats-add">
<input type="text" id="add_category_control" class="app-editor-cats-control" @bind="Tag" @onkeyup="KeyPressed" name="tagItem" placeholder="@_localizer["Add"] @_localizer["Category"]" data-bs-toggle="tooltip" title="Type and hit 'Enter'" />
<label for="add_category_control">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
</label>
</div>
<input type="text" id="add_category_control" @bind="Tag" @onkeyup="KeyPressed" name="tagItem" placeholder="@_localizer["Add"] @_localizer["Category"]" data-bs-toggle="tooltip" title="Type and hit 'Enter'" />
</div>

@code {
Expand Down
162 changes: 73 additions & 89 deletions src/Blogifier.Admin/Pages/Blog/Editor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,107 +9,90 @@

<PageTitle Title="@_localizer["Editor"]" />

<div class="app-editor">
<div class="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="@PostTile" 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" />
</svg>
</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 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="app-editor-meta d-flex">
<div class="editor-header-inner">

<CategoriesComponent Post="Post" @ref="Categories" />
<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-desc autosize" @bind="Post.Description" name="description" placeholder="@_localizer["description"]..." rows="1"></textarea>

<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="editor-meta d-flex">

<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>
<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>
<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>

<CategoriesComponent Post="Post" @ref="Categories" />

</div>

</div>

</div>
<div class="editor-editor bf-editor">
<PostEditorComponent Content="@Post.Content" />
</div>
</div>

}
</div>
<ToasterComponent @ref="Toaster" />
Expand Down Expand Up @@ -156,7 +139,8 @@
Post.Content = await _jsruntime.InvokeAsync<string>("commonJsFunctions.getEditorValue", "");
Post.PostType = _stateprovider.PostType;

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
2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/admin/css/app.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/admin/css/app.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/admin/js/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ window.commonJsFunctions = {
},
loadEditor: function () {
easymde = getEditor();
autosize(document.querySelectorAll('textarea'));
autosize(document.querySelectorAll('.autosize'));
},
setEditorValue: function (txt) {
easymde.value(txt
Expand Down
3 changes: 3 additions & 0 deletions src/Blogifier.Admin/wwwroot/admin/scss/include/_blazor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ strong,
b {
font-weight: 500;
}
img {
max-width: 100%;
}

#blazor-error-ui {
display: none;
Expand Down
15 changes: 10 additions & 5 deletions src/Blogifier.Admin/wwwroot/admin/scss/pages/editor/_easymde.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,9 +258,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {

.CodeMirror-scroll {
overflow: scroll !important;
margin-bottom: -50px;
margin-right: -50px;
padding-bottom: 50px;
margin-right: -4.125rem;
margin-bottom: -4.125rem;
padding-bottom: 4.125rem;
height: 100%;
outline: 0;
position: relative;
Expand Down Expand Up @@ -506,7 +506,7 @@ span.CodeMirror-selectedtext {
.EasyMDEContainer .CodeMirror {
box-sizing: border-box;
height: auto;
padding: 2rem;
padding: 3rem;
z-index: 0;
word-wrap: break-word;
}
Expand Down Expand Up @@ -587,8 +587,13 @@ span.CodeMirror-selectedtext {
display: block;
}

// TODO: Review this
.disabled-for-preview + .CodeMirror-wrap {
padding: 6rem;
}

.editor-preview {
padding: 2.25rem;
padding: 3rem 3.25rem;
background: #fff;
}

Expand Down
2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/admin/scss/pages/editor/_easymde_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
border-radius: 0;
user-select: none;
position: relative;
border-bottom: 1px solid rgba(#000, 0.1);
border-bottom: 1px solid $gray-300;

&:after,
&:before {
Expand Down
Loading

0 comments on commit 8acb950

Please sign in to comment.