-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added modal window style options (#379)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
b17a2df
commit 17e15ce
Showing
11 changed files
with
302 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
162 changes: 162 additions & 0 deletions
162
src/TagzApp.Blazor/Components/Admin/Pages/ModalCustomization.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| @page "/admin/modalcustomization" | ||
|
|
||
| @attribute [Authorize(policy: RolesAndPolicies.Policy.AdminRoleOnly)] | ||
| @using System.ComponentModel.DataAnnotations | ||
| @using Microsoft.AspNetCore.Authorization | ||
| @using System.Drawing | ||
| @layout AdminLayout | ||
| @inject IJSRuntime JSRuntime | ||
| @inject ModalConfiguration Config | ||
| @rendermode InteractiveServer | ||
|
|
||
| <div class="row" style="min-height: 300px"> | ||
| <div class="col-md-6"> | ||
| <dl> | ||
|
|
||
| <dt><label for="Caption">Text on back of card:</label></dt> | ||
| <dd><textarea name="Caption" width="30" height="5" @bind="@Config.Caption" @bind:event="oninput" /></dd> | ||
|
|
||
| <dt><label for="FontColor">Font Color on the back of card:</label></dt> | ||
| <dd> | ||
| <input type="color" name="FontColor" @bind-value="@Config.FontColor" /> | ||
| </dd> | ||
|
|
||
| <dt><label for="Font">Font on the back of card:</label></dt> | ||
| <dd> | ||
| <input name="Font" @bind-value="@Config.Font" /> | ||
| </dd> | ||
|
|
||
| <dt><label for="FontIsBold">Font is Bold on the back of card:</label> | ||
| <input name="FontIsBold" type="checkbox" @bind-value="@Config.FontIsBold" /> | ||
| </dt> | ||
|
|
||
| <dt><label for="BackColor">Background color of the back of card:</label></dt> | ||
| <dd> | ||
| <input type="color" name="BackColor" @bind-value="@Config.BackgroundColor" /> | ||
| </dd> | ||
|
|
||
| <dt><label for="BackgroundImage">Background Image:</label> | ||
| @if (!string.IsNullOrWhiteSpace(Config.BackgroundImage)) | ||
| { | ||
| <button @onclick="RemoveBackgroundImage"> | ||
| @* Bootstrap icon trashcan *@ | ||
| <i class="bi bi-trash"></i> | ||
|
|
||
| </button> | ||
| } | ||
| </dt> | ||
| <dd> | ||
| <InputFile OnChange="LoadBackgroundImage"></InputFile> | ||
| </dd> | ||
|
|
||
| <dt><label for="BackgroundSize">Background Image Size:</label></dt> | ||
| <dd> | ||
| <select name="BackgroundSize" @bind="@Config.BackgroundImageSize"> | ||
| <option value="cover">Cover</option> | ||
| <option value="contain">Contain</option> | ||
| <option value="auto">Auto</option> | ||
| </select> | ||
| </dd> | ||
|
|
||
| @* Background image repeat *@ | ||
| <dt><label for="BackgroundRepeat">Background Image Repeat:</label> | ||
| <input type="checkbox" name="BackgroundRepeat" @bind-value="@Config.BackgroundImageRepeat" /> | ||
| </dt> | ||
|
|
||
| <dt><label for="BackgroundPosition">Background Image Position:</label></dt> | ||
| <dd> | ||
| <select name="BackgroundPosition" @bind="@Config.BackgroundImagePosition"> | ||
| <option>Left Top</option> | ||
| <option>Left Center</option> | ||
| <option>Left Bottom</option> | ||
| <option>Right Top</option> | ||
| <option>Right Center</option> | ||
| <option>Right Bottom</option> | ||
| <option>Center Top</option> | ||
| <option>Center Center</option> | ||
| <option>Center Bottom</option> | ||
| </select> | ||
| </dd> | ||
|
|
||
|
|
||
| </dl> | ||
|
|
||
| <input type="submit" value="Save Changes" class="btn btn-primary" @onclick="SaveChanges" /> | ||
| @* Cancel changes button *@ | ||
| <input type="button" value="Cancel" class="btn btn-secondary" @onclick="CancelChanges" /> | ||
|
|
||
| </div> | ||
| <div class="col-md-6"> | ||
| <h3>Demo:</h3> | ||
| <div style="width: 50%; " class="modal-dialog modal-dialog-centered"> | ||
| <div class="modal-inner" style="height: 150px!important;"> | ||
| <div style=" position: relative;" class="modal-back modal-content"><div class="modal-back-content"></div></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| @((MarkupString)Config.GetCssWithBackgroundImage(_BackgroundImage, _BackgroundImageMimeType)) | ||
| </style> | ||
|
|
||
| @code { | ||
|
|
||
| private string _BackgroundImage; | ||
| private string _BackgroundImageMimeType; | ||
|
|
||
| async Task SaveChanges() | ||
| { | ||
|
|
||
| Config.BackgroundImage = _BackgroundImage; | ||
| Config.BackgroundImageMimeType = _BackgroundImageMimeType; | ||
|
|
||
| Console.WriteLine($"Caption: {Config.Caption}"); | ||
| await Config.SaveConfiguration(ConfigureTagzAppFactory.Current); | ||
|
|
||
| } | ||
|
|
||
| async Task LoadBackgroundImage(InputFileChangeEventArgs args) | ||
| { | ||
|
|
||
| if (!args.File.ContentType.StartsWith("image/")) | ||
| { | ||
| Console.WriteLine("Invalid file type"); | ||
| return; | ||
| } | ||
|
|
||
| _BackgroundImageMimeType = args.File.ContentType; | ||
|
|
||
| var stream = args.File.OpenReadStream(); | ||
|
|
||
| byte[] bytes; | ||
| using (var memoryStream = new MemoryStream()) | ||
| { | ||
| await stream.CopyToAsync(memoryStream); | ||
| bytes = memoryStream.ToArray(); | ||
| } | ||
|
|
||
| _BackgroundImage = Convert.ToBase64String(bytes); | ||
|
|
||
| } | ||
|
|
||
| async Task CancelChanges() | ||
| { | ||
| Config = await ModalConfiguration.LoadFromConfiguration(ConfigureTagzAppFactory.Current); | ||
| _BackgroundImage = Config.BackgroundImage; | ||
| _BackgroundImageMimeType = Config.BackgroundImageMimeType; | ||
| } | ||
|
|
||
| async Task RemoveBackgroundImage() | ||
| { | ||
|
|
||
| Console.WriteLine("Removing background image"); | ||
|
|
||
| _BackgroundImage = null; | ||
| _BackgroundImageMimeType = null; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -82,5 +82,3 @@ public async Task SaveConfiguration(IConfigureTagzApp configure) | |
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
Oops, something went wrong.