New styling and files functionality

This commit is contained in:
2020-04-17 00:50:23 +02:00
parent 4912e56b1b
commit ae1726ce7a
19 changed files with 432 additions and 58 deletions

View File

@ -1,6 +1,6 @@
@inherits FileItemBase
<div class="level">
<a class="level">
<div class="level-left">
<div class="level-item">
<p class="is-size-7"><sub>@File.Folder</sub></p>
@ -9,4 +9,4 @@
</p>
</div>
</div>
</div>
</a>

View File

@ -1,61 +1,65 @@
@typeparam CFile
<div class="tile is-ancestor">
<div class="filesWithEditor">
<div class="tile is-parent is-vertical is-3">
<div class="content">
<p>
<div class="tile is-parent is-4 is-vertical">
<div class="tile is-child">
<div class="buttons are-small">
<button class="button is-static is-outlined"><span class="icon is-small"><i class="mdi mdi-filter-outline"></i></span></button>
@foreach (var filter in Filters)
{
<span class="tag is-light">@filter</span>
<button @onclick="e => OnFilterClick(e,filter)" class="button is-outlined">@filter</button>
}
</p>
</div>
<div class="content">
<div class="field">
<div class="control">
<InputText Value="SearchInput" ValueChanged="SearchInputChanged" class="input is-primary" type="text" placeholder="Search..." />
</div>
</div>
</div>
<div class="content">
<div class="tile is-child">
<div class="field">
<p class="control has-icons-left">
<input formnovalidate value="@SearchInput" @onchange="e => SearchInputChanged(e)" class="input is-small is-primary" type="text" placeholder="Search...">
<span class="icon is-small is-left">
<i class="mdi mdi-search-web"></i>
</span>
</p>
</div>
</div>
<div class="tile is-child is-vertical">
<aside class="menu">
<ul class="menu-list">
@foreach (var file in Files)
{
<li @onclick="e => OnFileClick(file)" @key="file" class="@file.IsVisible">
<FileItem File="file"></FileItem>
<li @onclick="e => OnFileClick(e,file)" @key="file" class="@file.IsVisible">
<FileItem File="file" @key="file"></FileItem>
</li>
}
</ul>
</aside>
</div>
<div class="content">
<div class="buttons has-addons">
<div class="tile is-child">
<div class="buttons are-small is-centered has-addons">
<button class="button is-primary" @onclick="OnAddDialog">
<span class="icon is-small">
<i class="mdi mdi-plus-box-outline"></i>
</span>
Add
<span>Add</span>
</button>
<button class="button is-warning" @onclick="OnUpdateDialog">
<span class="icon is-small">
<i class="mdi mdi-pencil-box-outline"></i>
</span>
Update
<span>Update</span>
</button>
<button class="button is-danger" @onclick="OnDeleteDialog">
<span class="icon is-small">
<i class="mdi mdi-minus-box-outline"></i>
</span>
Delete
<span>Delete</span>
</button>
</div>
</div>
</div>
<div class="tile is-parent is-vertical is-9">
<div class="tile is-parent is-vertical is-8">
@Editor
</div>

View File

@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Seenginx.Models;
using System;
using System.Collections.Generic;
@ -47,7 +48,7 @@ namespace Seenginx.Components
[Parameter]
public CFile SelectedFile { get; set; }
protected string SearchInput { get; set; }
protected string SearchInput { get; set; } = string.Empty;
protected async Task OnDeselectClick()
{
@ -55,20 +56,20 @@ namespace Seenginx.Components
await SelectedFileChanged.InvokeAsync(SelectedFile);
}
protected async Task OnFilterClick(EventArgs e, string filter)
protected async Task OnFilterClick(MouseEventArgs e, string filter)
{
await ApplyFilter.InvokeAsync(filter);
for (int index = 0; index < Files.Count; index++)
if (FilteredOutFiles.Contains(index))
Files[index].Hide();
else
Files[index].Unhide();
//for (int index = 0; index < Files.Count; index++)
// if (FilteredOutFiles.Contains(index))
// Files[index].Hide();
// else
// Files[index].Unhide();
}
protected void SearchInputChanged()
protected async Task SearchInputChanged(ChangeEventArgs e)
{
if (string.IsNullOrEmpty(SearchInput))
Files.ForEach(f => f.Hide());
Files.ForEach(f => f.Unhide());
else
Files.ForEach(f =>
{
@ -79,7 +80,7 @@ namespace Seenginx.Components
});
}
protected async Task OnFileClick(CFile file)
protected async Task OnFileClick(MouseEventArgs e, CFile file)
{
await SelectedFileChanged.InvokeAsync(file);
}