Skip to content

Commit

Permalink
Theme selection in settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@rxtur
rxtur committed May 10, 2020
1 parent b219029 commit b9a3c9c
Show file tree
Hide file tree
Showing 11 changed files with 88 additions and 164 deletions.
104 changes: 22 additions & 82 deletions src/Blogifier.Widgets/Themes.razor
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,33 @@
@using Blogifier.Widgets

<div class="card dash draft">
<div class="card-header">

<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/280" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
<a href="#" class="btn btn-primary">BUTTON</a>
</div>
</div>
</div>

</div>
<div class="card dash themes">
<div class="card-body">
@if (Posts == null || Posts.Count() == 0)
{
<div class="notfound">@Localizer["empty"]</div>
}
else
{
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/180x180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/180x180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card theme-active">
<img src="@CurrentTheme.Cover" class="card-img-top" alt="@CurrentTheme.Title">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h5 class="card-title">
@CurrentTheme.Title
<span><i class="fa fa-check-square-o fa-4" aria-hidden="true"></i></span>
</h5>
</div>
</div>
</div>
@foreach (var item in ThemeItems)
{
<div class="col mb-4">
<div class="card">
<img class="card-img" src="https://via.placeholder.com/180x180" alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="@item.Cover" class="card-img-top" alt="@item.Title">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h5 class="card-title">
@item.Title
<span>
<a href="#" @onclick="()=> SelectTheme(item.Title)" @onclick:preventDefault>@Localizer["select"]</a>
</span>
</h5>
</div>
</div>
</div>
}
}
</div>
</div>
</div>
96 changes: 42 additions & 54 deletions src/Blogifier.Widgets/Themes.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
using Askmethat.Aspnet.JsonLocalizer.Localizer;
using Blogifier.Core;
using Blogifier.Core.Data;
using Blogifier.Core.Helpers;
using Blogifier.Core.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.FeatureManagement;
using Sotsera.Blazor.Toaster;
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Threading.Tasks;

namespace Blogifier.Widgets
Expand All @@ -20,20 +18,14 @@ public partial class Themes
[Inject]
protected IDataService DataService { get; set; }
[Inject]
protected IEmailService EmailService { get; set; }
protected IStorageService StorageService { get; set; }
[Inject]
IJsonStringLocalizer<Drafts> Localizer { get; set; }
[Inject]
public NavigationManager NavigationManager { get; set; }
[Inject]
protected IToaster Toaster { get; set; }
[Inject]
IFeatureManager FeatureManager { get; set; }

protected int PostId { get; set; }
protected bool Edit { get; set; }

IEnumerable<BlogPost> Posts { get; set; }
List<ThemeItem> ThemeItems { get; set; }
ThemeItem CurrentTheme { get; set; }

protected override async Task OnInitializedAsync()
{
Expand All @@ -42,58 +34,54 @@ protected override async Task OnInitializedAsync()

public async Task Load()
{
Posts = await Task.FromResult(DataService.BlogPosts.Find(
p => p.Published == DateTime.MinValue));
StateHasChanged();
}

protected async Task Publish(int id)
{
try
var blogSettings = await DataService.CustomFields.GetBlogSettings();
ThemeItems = new List<ThemeItem>();
foreach (var theme in StorageService.GetThemes())
{
var post = await DataService.BlogPosts.GetItem(p => p.Id == id);
post.Published = DateTime.UtcNow;
var saved = await DataService.BlogPosts.SaveItem(post);
DataService.Complete();

if (FeatureManager.IsEnabledAsync(nameof(AppFeatureFlags.Email)).Result)
if(theme.ToLower() == blogSettings.Theme.ToLower())
{
// send newsletters on post publish when email feature enabled
var pager = new Pager(1, 10000);
var items = await DataService.Newsletters.GetList(e => e.Id > 0, pager);
var emails = items.Select(i => i.Email).ToList();
var blogPost = DataService.BlogPosts.Single(p => p.Id == saved.Id);

int count = await EmailService.SendNewsletters(blogPost, emails, NavigationManager.BaseUri);
if (count > 0)
CurrentTheme = new ThemeItem
{
Toaster.Success(string.Format(Localizer["email-sent-count"], count));
}
Title = theme.Capitalize(),
IsCurrent = (blogSettings.Theme.ToLower() == theme.ToLower()),
Cover = GetCover(theme)
};
}
Toaster.Success("Saved");

await OnUpdate.InvokeAsync("publish");
StateHasChanged();
}
catch (Exception ex)
{
Toaster.Error(ex.Message);
else
{
ThemeItems.Add(new ThemeItem
{
Title = theme.Capitalize(),
IsCurrent = (blogSettings.Theme.ToLower() == theme.ToLower()),
Cover = GetCover(theme)
});
}

}

StateHasChanged();
}

protected void EditPost(int id)
protected async Task SelectTheme(string theme)
{
Edit = true;
PostId = id;
StateHasChanged();
var blogSettings = await DataService.CustomFields.GetBlogSettings();
blogSettings.Theme = theme.ToLower();
await DataService.CustomFields.SaveBlogSettings(blogSettings);

Toaster.Success("Saved");
await Load();
}

protected async Task HideEditor(string arg)
private string GetCover(string theme)
{
Edit = false;
PostId = 0;
await OnUpdate.InvokeAsync(arg);
StateHasChanged();
string slash = Path.DirectorySeparatorChar.ToString();
string file = $"{AppSettings.WebRootPath}{slash}themes{slash}{theme}{slash}screenshot.png";
if (File.Exists(file))
{
return $"themes/{theme}/screenshot.png";
}
return "admin/img/img-placeholder.png";
}

}
}
Binary file modified src/Blogifier/Blog.db
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/Blogifier/Blogifier.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
<Version>1.0.8.0</Version>
<Version>1.0.9.0</Version>
<CopyRazorGenerateFilesToPublishDirectory>true</CopyRazorGenerateFilesToPublishDirectory>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>
Expand Down
20 changes: 4 additions & 16 deletions src/Blogifier/Pages/Admin/Settings.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">@Localizer["settings"]</a>
</li>

@*<li class="nav-item">
<li class="nav-item">
<a class="nav-link" id="themes-tab" data-toggle="tab" href="#themes" role="tab" aria-controls="themes" aria-selected="false">Themes</a>
</li>*@
</li>

<li class="nav-item">
<a class="nav-link" id="social-tab" data-toggle="tab" href="#social" role="tab" aria-controls="social" aria-selected="false">Social</a>
Expand Down Expand Up @@ -78,18 +78,6 @@
}
</select>
</div>
<div class="input-group">
<label>@Localizer["theme"]</label>
<select @bind="Model.Theme">
@if (Themes != null)
{
@foreach (var theme in Themes)
{
<option value="@theme.Value">@theme.Text</option>
}
}
</select>
</div>
<div>
<label>&nbsp;</label>
<input type="submit" value="@Localizer["save"]" class="btn btn-primary" />
Expand All @@ -100,9 +88,9 @@
</div>

</div>
@*<div class="tab-pane fade" id="themes" role="tabpanel" aria-labelledby="themes-tab">
<div class="tab-pane fade" id="themes" role="tabpanel" aria-labelledby="themes-tab">
<Themes />
</div>*@
</div>
<div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
<SocialAdmin Level="blog" />
</div>
Expand Down
30 changes: 19 additions & 11 deletions src/Blogifier/wwwroot/admin/css/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,20 +162,28 @@ app {
max-width: 100%;
}

.card-group .card {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 15px;
.theme-active {
border: 2px solid #35c21f;
}

.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
.card-title span {
float: right;
}

@include media-breakpoint-only(xl) {
column-count: 5;
}
.card-title a {
font-size: .7em;
font-weight: 600;
text-decoration: none;
color: #5731b3;
}

.card.dash.themes .card {
width: 285px;
height: 340px;
}

.card.dash.themes .col .card-body {
border-top: 1px solid #dedede;
}

/* post lists */
Expand Down
Binary file added src/Blogifier/wwwroot/themes/cleanblog/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Blogifier/wwwroot/themes/html5/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Blogifier/wwwroot/themes/philosophy/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Blogifier/wwwroot/themes/standard/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Blogifier/wwwroot/themes/vizew/screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b9a3c9c

Please sign in to comment.