Browse Source

Merge pull request #8028 from abpframework/cms-kit-visual-improvments

CMS Kit Ui Improvements
pull/8071/head
Enis Necipoglu 5 years ago
committed by GitHub
parent
commit
861b5080d5
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 20
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml
  2. 30
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml
  3. 26
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml
  4. 18
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml
  5. 3
      modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json
  6. 7
      modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json
  7. 28
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
  8. 29
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs
  9. 11
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
  10. 57
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
  11. 105
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
  12. 18
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
  13. 36
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
  14. 15
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs
  15. 12
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
  16. 22
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
  17. 7
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/TagViewComponent.cs
  18. 14
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css
  19. 108
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
  20. 60
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
  21. 23
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
  22. 6
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
  23. 3
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
  24. 6
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/index.css
  25. 27
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Properties/launchSettings.json
  26. 5
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj

20
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml

@ -25,16 +25,20 @@
@await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
}
<div id="CmsKitBlogPostsWrapper">
<abp-card>
<abp-card-body>
<abp-card class="mb-4">
<abp-card-body>
<div id="CmsKitBlogPostsWrapper">
<abp-row>
<abp-column>
@await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
</abp-column>
</abp-row>
</abp-card-body>
</abp-card>
<abp-table striped-rows="true" id="BlogPostsTable" class="nowrap"></abp-table>
</div>
</div>
</abp-card-body>
</abp-card>
<abp-card>
<abp-card-body>
<abp-table striped-rows="true" id="BlogPostsTable" class="nowrap"></abp-table>
</abp-card-body>
</abp-card>

30
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml

@ -15,14 +15,14 @@
PageLayout.Content.Title = L["Comments"].Value;
PageLayout.Content.BreadCrumb.Add(L["Menu:CMS"].Value);
PageLayout.Content.MenuItemName = CmsKitAdminMenus.Comments.CommentsMenu;
var defaultStartDate = DateTime.Now.AddDays(-7).Date.ToShortDateString();
}
@section styles{
<abp-style-bundle>
<abp-style src="/Pages/CmsKit/Comments/index.css" />
</abp-style-bundle>
</abp-style-bundle>
}
@section scripts {
@ -31,9 +31,9 @@
</abp-script-bundle>
}
<div id="CmsKitCommentsWrapper">
<abp-card>
<abp-card-body>
<abp-card class="mb-4">
<abp-card-body>
<div id="CmsKitCommentsWrapper">
<abp-row>
<abp-column>
<form id="CmsKitCommentsFilterForm" method="post">
@ -47,13 +47,13 @@
</abp-column>
</abp-column>
<abp-column size-lg="_2" size-md="_6">
<abp-input asp-for="@Model.EntityType" label="@L["EntityType"].Value" type="text"/>
<abp-input asp-for="@Model.EntityType" label="@L["EntityType"].Value" type="text" />
</abp-column>
<abp-column size-lg="_2" size-md="_6">
<abp-input asp-for="@Model.EntityId" label="@L["EntityId"].Value" type="text"/>
<abp-input asp-for="@Model.EntityId" label="@L["EntityId"].Value" type="text" />
</abp-column>
<abp-column size-lg="_2" size-md="_12">
<abp-input asp-for="@Model.Author" label="@L["Username"].Value" type="text"/>
<abp-input asp-for="@Model.Author" label="@L["Username"].Value" type="text" />
</abp-column>
<abp-column size-lg="_2" size-md="_12">
<abp-button class="mt-md-4" size="Block" button-type="Primary" type="submit">
@ -64,8 +64,12 @@
</form>
</abp-column>
</abp-row>
</abp-card-body>
</abp-card>
<abp-table striped-rows="true" id="CommentsTable" class="nowrap"></abp-table>
</div>
</div>
</abp-card-body>
</abp-card>
<abp-card>
<abp-card-body>
<abp-table striped-rows="true" id="CommentsTable" class="nowrap"></abp-table>
</abp-card-body>
</abp-card>

26
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml

@ -1,6 +1,6 @@
@page
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageToolbar
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageSearchBox
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageSearchBox
@using Volo.CmsKit.Admin.Web.Pages
@using Volo.CmsKit.Admin.Web.Menus
@using Volo.CmsKit.Admin.Web.Pages.CmsKit.Pages
@ -16,23 +16,27 @@
}
@section scripts {
<abp-script src="/Pages/CmsKit/Pages/index.js"/>
<abp-script src="/Pages/CmsKit/Pages/index.js" />
}
@section content_toolbar {
@await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new {pageName = typeof(IndexModel).FullName})
@await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
}
<div id="CmsKitPagesWrapper">
<abp-card>
<abp-card-body>
<abp-card class="mb-4">
<abp-card-body>
<div id="CmsKitPagesWrapper">
<abp-row>
<abp-column>
@await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
</abp-column>
</abp-row>
</abp-card-body>
</abp-card>
<abp-table striped-rows="true" id="PagesTable" class="nowrap"></abp-table>
</div>
</div>
</abp-card-body>
</abp-card>
<abp-card>
<abp-card-body>
<abp-table striped-rows="true" id="PagesTable" class="nowrap"></abp-table>
</abp-card-body>
</abp-card>

18
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml

@ -23,16 +23,20 @@
@await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
}
<div id="CmsKitTagsWrapper">
<abp-card>
<abp-card-body>
<abp-card class="mb-4">
<abp-card-body>
<div id="CmsKitTagsWrapper">
<abp-row>
<abp-column>
@await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
</abp-column>
</abp-row>
</abp-card-body>
</abp-card>
<abp-table striped-rows="true" id="TagsTable"></abp-table>
</div>
</div>
</abp-card-body>
</abp-card>
<abp-card>
<abp-card-body>
<abp-table striped-rows="true" id="TagsTable"></abp-table>
</abp-card-body>
</abp-card>

3
modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@ -45,6 +45,7 @@
"LastModification": "Last Modification",
"LoginToAddComment": "Login to add comment",
"LoginToRate": "Login to rate",
"LoginToReact": "Login to react",
"LoginToReply": "Login to reply",
"Menu:CMS": "CMS",
"Message": "Message",
@ -82,7 +83,9 @@
"Permission:TagManagement.Delete": "Delete",
"Permission:TagManagement.Update": "Update",
"PickYourReaction": "Pick your reaction",
"Rating": "Rating",
"RatingUndoMessage": "Your rating will be undo.",
"Reactions": "Reactions",
"Read": "Read",
"RepliesToThisComment": "Replies to this comment",
"Reply": "Reply",

7
modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json

@ -13,13 +13,13 @@
"CmsKit.Ratings": "Puanlama",
"CmsKit.Reactions": "Tepkiler",
"CmsKit.Tags": "Etiketler",
"CmsKit:Comments:0001": "{0} ögesi yorumlanabilir değil.",
"CmsKit:0002": "İçerik zaten mevcut!",
"CmsKit:0003": "{0} ögesi etiketlenebilir değil.",
"CmsKit:BlogPost:0001": "Aynı url etiketi zaten mevcut.",
"CmsKit:Comments:0001": "{0} ögesi yorumlanabilir değil.",
"CmsKit:Media:0002": "Bu öge için medya eklenemez.",
"CmsKit:Reaction:0001": "Bu ögeye tepki verilemez.",
"CmsKit:Page:0001": "Girilen url ({0}) kullanımdadır.",
"CmsKit:Reaction:0001": "Bu ögeye tepki verilemez.",
"CmsKit:Tag:0002": "Bu öge etiketlenebilir değil.",
"CommentAuthorizationExceptionMessage": "Bu yorumları görebilmek için yetki gerekir.",
"CommentDeletionConfirmationMessage": "Bu yorum ve buna yapılan tüm yorumlan silinecektir!",
@ -44,6 +44,7 @@
"LastModification": "Son Güncellenme",
"LoginToAddComment": "Yorum yapmak için giriş yap",
"LoginToRate": "Oylamak için giriş yapın",
"LoginToReact": "Reaksiyon vermek için giriş yap",
"LoginToReply": "Cevap vermek için giriş yap",
"Menu:CMS": "CMS",
"Message": "Mesaj",
@ -72,7 +73,9 @@
"Permission:TagManagement.Delete": "Etiket Silme",
"Permission:TagManagement.Update": "Etiket Güncelleme",
"PickYourReaction": "Tepkinizi seçin",
"Rating": "Puan",
"RatingUndoMessage": "Oylamanız geri alınacak.",
"Reactions": "Reaksiyonlar",
"Read": "Oku",
"RepliesToThisComment": "Bu yoruma yapılan yorumlar",
"Reply": "Cevapla",

28
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml

@ -1,28 +0,0 @@
@model Volo.CmsKit.Public.Blogs.BlogPostPublicDto
@using Volo.CmsKit.Localization
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<CmsKitResource> L
@{
const string dummyImageSource = "https://dummyimage.com/300x200/a3a3a3/fff.png";
}
<abp-card>
<img src="/api/cms-kit/media/@Model.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
<abp-card-body>
<abp-card-title>@Model.Title</abp-card-title>
<abp-card-subtitle>@Model.Author?.UserName</abp-card-subtitle>
@Html.Raw(Model.Content)
</abp-card-body>
<abp-card-footer>
<abp-card-subtitle>@Model.CreationTime</abp-card-subtitle>
@if (Model.LastModificationTime != null)
{
<abp-card-text><i>@L["LastModification"].Value : @Model.LastModificationTime</i></abp-card-text>
}
</abp-card-footer>
</abp-card>

29
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs

@ -1,29 +0,0 @@
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Mvc;
using Volo.CmsKit.Public.Blogs;
namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Blogs.BlogPost
{
[ViewComponent(Name = "CmsDefaultBlogPost")]
public class DefaultBlogPostViewComponent : AbpViewComponent
{
protected IBlogPostPublicAppService BlogPostPublicAppService { get; }
public DefaultBlogPostViewComponent(IBlogPostPublicAppService blogPostPublicAppService)
{
BlogPostPublicAppService = blogPostPublicAppService;
}
public virtual async Task<IViewComponentResult> InvokeAsync(string blogSlug, string blogPostSlug)
{
var blogPost = await BlogPostPublicAppService.GetAsync(blogSlug, blogPostSlug);
return View("~/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml", blogPost);
}
}
}

11
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml

@ -7,16 +7,9 @@
@model DefaultBlogPostCommentViewComponent.DefaultBlogPostCommentViewModel
<abp-card>
<abp-card-header>
<abp-card-title>@L["Comments"]</abp-card-title>
</abp-card-header>
<abp-card-body>
@await Component.InvokeAsync(typeof(CommentingViewComponent), new
{
entityType = Model.EntityType,
entityId = Model.EntityId
})
</abp-card-body>
</abp-card>
})

57
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

@ -25,7 +25,7 @@
}
@{
Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
@<div class="cms-comment-form-area bg-light card p-3 mx-0 mt-4 @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
@<div class="cms-comment-form-area bg-light card p-3 mx-0 @(repliedCommentId.HasValue ? "my-3" : "mt-3")"
data-reply-id="@(repliedCommentId?.ToString() ?? "")"
style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
<form class="cms-comment-form">
@ -113,7 +113,7 @@
</div>;
}
<div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
<div class="cms-comment-area mb-5" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
@if (CurrentUser.IsAuthenticated)
{
<div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
@ -129,28 +129,28 @@
@foreach (var comment in Model.Comments)
{
<div class="comment">
<div class="card p-3 mx-0 my-4">
<div class="card p-3 mx-0 my-3">
<h5>
@GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
</h5>
@GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
</div>
</div>
</div>
<div class="col-auto">
<div class="reaction-in-comment">
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
}
<div class="col-auto">
<div class="reaction-in-comment">
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
}
</div>
</div>
</div>
</div>
@GetEditArea(comment.Id, comment.Text).Invoke(null)
@if (comment.Replies.Any())
@ -165,21 +165,21 @@
@GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
</div>
</div>
</div>
<div class="col-auto">
<div class="reaction-in-comment">
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
}
<div class="col-auto">
<div class="reaction-in-comment">
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
}
</div>
</div>
</div>
</div>
@GetEditArea(reply.Id, reply.Text).Invoke(null)
</div>
@ -190,7 +190,7 @@
<div class=" mt-2">
@if (CurrentUser.IsAuthenticated)
{
<a href="#" class="comment-links comment-reply-link btn btn-primary btn-sm" data-reply-id="@comment.Id.ToString()">
<a href="#" class="comment-links comment-reply-link btn btn-primary btn-sm" data-reply-id="@comment.Id.ToString()">
<i class="fa fa-reply mr-1"></i> @L["Reply"]
</a>
}
@ -210,3 +210,4 @@
</div>
}
</div>

105
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml

@ -5,57 +5,68 @@
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
@inject IHtmlLocalizer<CmsKitResource> L
<div class="text-center text-md-left">
<div class="cms-rating-area d-inline-block px-2 py-1 my-2 card border-0 shadow-sm " data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
@if (CurrentUser.IsAuthenticated)
{
<span class="my-rating" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
<small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + " " : 0 + "")</small>
@if (Model.CurrentRating != null)
{
<a href="#" class="rating-undo-link">
<small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
</a>
}
if (Model.Ratings != null)
{
<a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
<i class="fas fa-info-circle"></i>
</a>
<div class="p-3 my-3 card">
<div class="row form-row">
<div class="col-auto text-left">
<span class="area-title">
@L["Rating"]
</span>
</div>
<div class="col text-right">
<div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
@if (CurrentUser.IsAuthenticated)
{
@if (Model.CurrentRating != null)
{
<a href="#" class="rating-undo-link">
<small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
</a>
}
if (Model.Ratings != null)
{
<a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
<i class="far fa-question-circle"></i>
</a>
<div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row text-center">
@foreach (var rating in Model.Ratings)
{
<div class="col">
<label>@rating.StarCount @L["Star"]</label>
<div class="bar-container">
<div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
</div>
<div><small class="text-muted">@rating.Count Rate(s)</small> </div>
<div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row text-center">
@foreach (var rating in Model.Ratings)
{
<div class="col">
<label>@rating.StarCount @L["Star"]</label>
<div class="bar-container">
<div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
</div>
<div><small class="text-muted">@rating.Count Rate(s)</small> </div>
</div>
}
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
}
}
else
{
<span class="my-rating" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
<span class="rating-login"></span>
}
}
<small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + " " : 0 + "")</small>
<span class="my-rating btn btn-secondary btn-sm py-1 ml-2" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)">
</span>
}
else
{
<span class="my-rating btn btn-secondary btn-sm py-1 ml-2" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
<span class="rating-login"></span>
}
</div>
</div>
</div>
</div>

18
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css

@ -49,4 +49,22 @@
}
.rating-undo-link:hover {
text-decoration:none;
}
.reaction-in-comment span.area-title {
display: none;
}
span.area-title {
font-weight: 600;
padding: 3px;
display: block;
}
.reaction-in-comment .card {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.popover {
min-width: 276px;
}

36
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml

@ -1,17 +1,32 @@
@inject ICurrentUser CurrentUser
@inject IHtmlLocalizer<CmsKitResource> L
@using Volo.Abp.Users
@using Volo.CmsKit.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewComponent.ReactionSelectionViewModel
@if (CurrentUser.IsAuthenticated || Model.Reactions.Count(r => r.Count > 0) > 0)
{
<div class="text-center text-md-right">
<div class="px-2 py-1 my-2 card border-0 shadow-sm d-inline-block">
<div class="p-3 my-3 card">
<div class="row form-row">
<div class="col-auto text-left">
<span class="area-title">
@L["Reactions"]
</span>
</div>
<div class="col text-right">
<span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
@foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
{
<span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
<i class="@reaction.Icon"></i>
<small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
</span>
}
@if (CurrentUser.IsAuthenticated)
{
<a class="cms-reaction-select-icon" href="javascript:;">
<i class="fa fa-smile-o text-muted"></i>
<a class="cms-reaction-select-icon btn btn-secondary text-light btn-sm py-1 ml-2" href="javascript:;">
<i class="fa fa-smile-o"></i>
</a>
<div class="cms-reaction-selection-popover-content" style="display: none">
@foreach (var reaction in Model.Reactions)
@ -22,14 +37,13 @@
}
</div>
}
@foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
else
{
<span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
<i class="@reaction.Icon"></i>
<small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
<span class="ms-reaction-select-icon btn btn-secondary text-light btn-sm py-1 ml-2" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToReact"]</a></div>">
<i class="fa fa-smile-o"></i>
</span>
}
</span>
</div>
</div>
}
</div>

15
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs

@ -4,6 +4,7 @@ using JetBrains.Annotations;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Volo.Abp.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc.UI;
using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
using Volo.CmsKit.Public.Reactions;
using Volo.CmsKit.Web;
@ -23,12 +24,16 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelectio
protected CmsKitUiOptions Options { get; }
public AbpMvcUiOptions AbpMvcUiOptions { get; }
public ReactionSelectionViewComponent(
IReactionPublicAppService reactionPublicAppService,
IOptions<CmsKitUiOptions> options)
IOptions<CmsKitUiOptions> options,
IOptions<AbpMvcUiOptions> abpMvcUiOptions)
{
ReactionPublicAppService = reactionPublicAppService;
Options = options.Value;
AbpMvcUiOptions = abpMvcUiOptions.Value;
}
public virtual async Task<IViewComponentResult> InvokeAsync(
@ -37,11 +42,15 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelectio
{
var result = await ReactionPublicAppService.GetForSelectionAsync(entityType, entityId);
var loginUrl =
$"{AbpMvcUiOptions.LoginUrl}?returnUrl={HttpContext.Request.Path.ToString()}&returnUrlHash=#cms-rating_{entityType}_{entityId}";
var viewModel = new ReactionSelectionViewModel
{
EntityType = entityType,
EntityId = entityId,
Reactions = new List<ReactionViewModel>()
Reactions = new List<ReactionViewModel>(),
LoginUrl = loginUrl
};
foreach (var reactionDto in result.Items)
@ -67,6 +76,8 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelectio
public string EntityId { get; set; }
public List<ReactionViewModel> Reactions { get; set; }
public string LoginUrl { get; set; }
}
public class ReactionViewModel

12
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css

@ -5,4 +5,16 @@
width: 25%;
display: inline-block;
float: left;
}
.reaction-in-comment span.area-title {
display: none;
}
span.area-title {
font-weight: 600;
padding: 3px;
display: block;
}
.popover {
min-width: 276px;
}

22
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml

@ -2,12 +2,16 @@
@model TagViewComponent.TagViewModel
@if (Model.Tags != null)
{
foreach (var tag in Model.Tags)
{
<span class="cmskit-tag">
@tag.Name
</span>
}
}
<div class="my-3">
<div class="cms-tags-area">
@if (Model.Tags != null)
{
foreach (var tag in Model.Tags)
{
<span class="badge badge-light px-3 py-2 cmskit-tag font-weight-normal">
@tag.Name
</span>
}
}
</div>
</div>

7
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/TagViewComponent.cs

@ -5,12 +5,17 @@ using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Volo.Abp.AspNetCore.Mvc;
using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
using Volo.CmsKit.Public.Tags;
using Volo.CmsKit.Tags;
namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
{
[ViewComponent(Name = "CmsTags")]
[Widget(
StyleFiles = new[]
{
"/Pages/CmsKit/Shared/Components/Tags/default.css"
})]
public class TagViewComponent : AbpViewComponent
{
protected readonly ITagAppService TagAppService;

14
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css

@ -0,0 +1,14 @@

.reaction-in-comment span.area-title {
display: none;
}
span.area-title {
font-weight: 600;
padding: 3px;
display: block;
}
.popover {
min-width: 276px;
}

108
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml

@ -1,6 +1,5 @@
@page
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Blogs.BlogPost
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Blogs.BlogPostComment
@using Volo.CmsKit.Public.Web.Pages
@using Volo.Abp.GlobalFeatures
@ -13,49 +12,82 @@
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
@await Component.InvokeAsync(typeof(DefaultBlogPostViewComponent), new
{
Model.BlogSlug,
Model.BlogPostSlug
})
@if (GlobalFeatureManager.Instance.IsEnabled<TagsFeature>())
{
if (Model.TagsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(TagViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
@section styles{
<abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
}
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
if (Model.ReactionsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
@{
string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.BlogPost.Title;
}
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
if (Model.RatingsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
<abp-card class="mb-4">
<img src="/api/cms-kit/media/@Model.BlogPost.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
<abp-card-body>
<abp-row>
<div class="col-lg-8 col-md-10 mx-auto pb-4">
<h1 class="mt-lg-4 mt-md-3">@Model.BlogPost.Title</h1>
<p class="mb-lg-5 mb-md-3">
<span class="font-weight-bold">@@@Model.BlogPost.Author?.UserName</span>
<small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
</p>
@Html.Raw(Model.BlogPost.Content)
<p class="mb-3">
@if (Model.BlogPost.LastModificationTime != null)
{
<small style="opacity:.65;">@L["LastModification"].Value : @Model.BlogPost.LastModificationTime</small>
}
</p>
<hr />
@if (GlobalFeatureManager.Instance.IsEnabled<TagsFeature>())
{
if (Model.TagsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(TagViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
</div>
</abp-row>
<abp-row class="form-row">
<abp-column size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
if (Model.ReactionsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
</abp-column>
<abp-column size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
if (Model.RatingsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.BlogPost.Id.ToString()
})
}
}
</abp-column>
</abp-row>
</abp-card-body>
</abp-card>
<hr />
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{

60
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml

@ -7,53 +7,45 @@
@model IndexModel
@section styles{
<abp-style src="/Pages/Public/CmsKit/Blogs/index.css" />
}
@{
const string dummyImageSource = "https://dummyimage.com/300x200/a3a3a3/fff.png";
const string dummyImageSource = "https://dummyimage.com/320x180/a3a3a3/fff.png";
}
<abp-row id="blogs-container">
@foreach (var blog in Model.Blogs.Items)
{
<abp-column size="_12" class="m-3">
<abp-column size="_12" size-md="_6" size-lg="_4">
<abp-card>
<abp-card-header>
<abp-card-title>
@blog.Title
</abp-card-title>
<abp-card-subtitle>
@@@blog.Author?.UserName
</abp-card-subtitle>
</abp-card-header>
<abp-card-body>
@if (blog.CoverImageMediaId != null)
{
<img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" style="max-width:200px;max-height:200px;" onerror="this.src='@dummyImageSource'" />
}
else
{
<img src="@dummyImageSource" class="card-img-top" style="max-width:200px;max-height:200px;" />
}
<abp-card-text>
@blog.ShortDescription
</abp-card-text>
<abp-card-text>
<a href="/blogs/@Model.BlogSlug/@blog.Slug">
<abp-button text="@L["Read"]"
button-type="Outline_Primary" />
</a>
</abp-card-text>
@if (blog.CoverImageMediaId != null)
{
<img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
}
else
{
<img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
}
<abp-card-body class="p-4">
<h5>@blog.Title</h5>
<p class="mb-2">
<span class="font-weight-bold">@@@blog.Author?.UserName</span>
<small style="opacity:.65;">@blog.CreationTime</small>
</p>
<p style="min-height: 60px;">@blog.ShortDescription</p>
<a href="/blogs/@Model.BlogSlug/@blog.Slug" class="btn btn-block btn-light">
@L["Read"]
</a>
</abp-card-body>
<abp-card-footer>
<abp-card-text>
@blog.CreationTime
</abp-card-text>
</abp-card-footer>
</abp-card>
</abp-column>
}
</abp-row>
<abp-row>
<abp-paginator model="Model.PagerModel" />
<abp-column>
<abp-paginator model="Model.PagerModel" />
</abp-column>
</abp-row>

23
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css

@ -0,0 +1,23 @@
.card-body img {
max-width: 100%;
border-radius: 4px;
margin: 20px 0;
}
.badge.badge-light {
color: #757575;
background: #f2f2f2;
}
.reaction-in-comment span.area-title {
display: none;
}
span.area-title {
font-weight: 600;
padding: 3px;
display: block;
}
.popover {
min-width: 276px;
}

6
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css

@ -0,0 +1,6 @@
.card-img-top {
}
.popover {
min-width: 276px;
}

3
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml

@ -5,6 +5,9 @@
@model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
@inject IHtmlLocalizer<CmsKitResource> L
@section styles{
<abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
}
@await Component.InvokeAsync(typeof(DefaultPageViewComponent),
new
{

6
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/index.css

@ -0,0 +1,6 @@
.card-img-top {
}
.popover {
min-width: 276px;
}

27
modules/cms-kit/src/Volo.CmsKit.Public.Web/Properties/launchSettings.json

@ -1,27 +0,0 @@
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:60873/",
"sslPort": 44300
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"Volo.CmsKit.Public.Web": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:5001;http://localhost:5000"
}
}
}

5
modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj

@ -29,4 +29,9 @@
<Content Remove="Components\**\*.css" />
</ItemGroup>
<ItemGroup>
<None Remove="Pages\Public\CmsKit\Blogs\index.css" />
<None Remove="Pages\Public\CmsKit\Pages\index.css" />
</ItemGroup>
</Project>

Loading…
Cancel
Save