ydeng/props
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added dark mode for drag and drop list component.

Browse Source
This commit is contained in:
Harrison Deng 2021-06-05 03:21:48 -05:00
parent c9d9d5bc62
commit 21fe7845f8
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/MultiShop/Client/Shared/DragAndDropList.razor
View File

@ -1,10 +1,11 @@
@using MultiShop.Shared.Models
@typeparam TItem @typeparam TItem
@inject IJSRuntime JS @inject IJSRuntime JS
<ul class=@ListGroupCss style="width: max-content;" ondragover="event.preventDefault()"> <ul class=@ListGroupCss style="width: max-content;" ondragover="event.preventDefault()">
@foreach (TItem item in Items) @foreach (TItem item in Items)
{ {
<li class="list-group-item" draggable=@((!processingDropChange).ToString()) @ondragstart="@(() => itemDraggedIndex = Items.IndexOf(item))" @ondrop="@(async () => await OnDrop(item))"> <li class="list-group-item list-group-item-action" draggable=@((!processingDropChange).ToString()) @ondragstart="@(() => itemDraggedIndex = Items.IndexOf(item))" @ondrop="@(async () => await OnDrop(item))">
<div class="d-inline-flex"> <div class="d-inline-flex">
<div class="mr-3"> <div class="mr-3">
<button class="btn" type="button" style="padding: 0px;" @onclick="@(() => OnButtonClickMove(Items.IndexOf(item), true))" disabled="@(processingDropChange || Items.IndexOf(item) <= 0)"><span class="oi oi-caret-top"></span></button> <button class="btn" type="button" style="padding: 0px;" @onclick="@(() => OnButtonClickMove(Items.IndexOf(item), true))" disabled="@(processingDropChange || Items.IndexOf(item) <= 0)"><span class="oi oi-caret-top"></span></button>
@ -20,6 +21,11 @@
@code { @code {
[CascadingParameter(Name = "RuntimeDependencyManager")]
private RuntimeDependencyManager RuntimeDependencyManager {get; set;}
private ApplicationProfile ApplicationProfile {get; set;}
[Parameter] [Parameter]
public IList<TItem> Items { get; set; } public IList<TItem> Items { get; set; }
@ -47,6 +53,12 @@
await base.OnParametersSetAsync(); await base.OnParametersSetAsync();
} }
protected override void OnInitialized()
{
base.OnInitialized();
this.ApplicationProfile = RuntimeDependencyManager.Get<ApplicationProfile>();
}
private async Task OnDrop(TItem dropped) private async Task OnDrop(TItem dropped)

9
src/MultiShop/Client/Shared/DragAndDropList.razor.css
View File

@ -1,3 +1,8 @@
li.list-group-item:hover { .bg-dark .list-group-item {
background-color: #F5F5F5; background-color: #697F85;
color: whitesmoke;
}
.bg-dark .list-group-item-action:hover {
background-color: #85A6A6;
} }