Skip to content

Commit

Permalink
MudDropZone: New Drag and Drop component (#3860)
Browse files Browse the repository at this point in the history 
Recommited by Mike Surcouf
Authored-by: Jonny Larsson
Co-authored-by: Benjamin Kappel
  • Loading branch information
Mike Surcouf committed Feb 3, 2022
1 parent fc0f8b9 commit bbcfb70
Show file tree
Hide file tree
Showing 38 changed files with 2,542 additions and 119 deletions.
81 changes: 0 additions & 81 deletions src/MudBlazor.Docs.Server/Pages/_Layout.cshtml
View file

This file was deleted.

12 changes: 0 additions & 12 deletions src/MudBlazor.Docs.Server/_Imports.razor
View file

This file was deleted.

Binary file removed src/MudBlazor.Docs.Server/wwwroot/favicon.ico
View file
Binary file not shown.
Binary file removed src/MudBlazor.Docs.Server/wwwroot/images/logo.png
View file
Binary file not shown.
2 changes: 0 additions & 2 deletions src/MudBlazor.Docs.Server/wwwroot/robots.txt
View file

This file was deleted.

131 changes: 131 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/DropZone/DropZonePage.razor
View file
@@ -0,0 +1,131 @@
@page "/components/dropzone"

<DocsPage>
<DocsPageHeader Title="Drop Zone" SubTitle="Drag and Drop">
</DocsPageHeader>

<DocsPageContent>
<DocsPageSection>
<SectionHeader Title="Basic Usage">
<Description>

</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneUsageExample">
<DropZoneUsageExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Transfer items between Drop Zones">
<Description>
The <CodeInline>MudDropContainer</CodeInline> supports transferring dragged items between its drop zones.
The <CodeInline>MudDropContainer</CodeInline> holds the collection of items used for dragging.
</Description>
</SectionHeader>
<SectionSubGroups>
<DocsPageSection>
<SectionHeader Title="Drop Item Selector">
<Description>
Each <CodeInline>MudDropZone</CodeInline> has a unique settable <CodeInline>Identifier</CodeInline> that is used used to determine what item should be placed in what dropzone.
Provide the <CodeInline>MudDropContainer</CodeInline> with a selector function (<CodeInline>@("Func<T, string, bool>")</CodeInline>) for the property <CodeInline>ItemSelector</CodeInline> to place the items correctly. This method can be overriden by each drop zone.
The callback <CodeInline>ItemDropped</CodeInline> should be used to update the data item, when a drag operation has finished.
</Description>
</SectionHeader>
<SectionContent DarkenBackground="true" ShowCode="false" Code="DropZoneItemSelectorExample">
<DropZoneItemSelectorExample />
</SectionContent>
</DocsPageSection>
</SectionSubGroups>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Drop Rules">
<Description>
If a draggable item can be dropped or not can be controlled with the <CodeInline>CanDrop</CodeInline> function, either globally in the <CodeInline>MudDropContainer</CodeInline> or per <CodeInline>MudDropZone</CodeInline>.
</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneDropRulesExample">
<DropZoneDropRulesExample />
</SectionContent>
<SectionSubGroups>
<DocsPageSection>
<SectionHeader Title="Drop Rule Styling">
<Description>
The cursor will change if a item can or cannot be dropped but it's also possible to effect the whole drop zone.<br />
Add one of our or one of your own CSS class to <CodeInline>CanDropClass</CodeInline> and <CodeInline>NoDropClass</CodeInline> to change the styling of eatch behavior.
</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneCanDropStylesExample">
<DropZoneCanDropStylesExample />
</SectionContent>
</DocsPageSection>
</SectionSubGroups>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Dragging Styles">
<Description>
Its possible to style the drop zone from which the dragged item starts from as well as the item itself with the <CodeInline>DraggingClass</CodeInline> parameter and the <CodeInline>ItemDraggingClass</CodeInline> property.
</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneDraggingStyleExample">
<DropZoneDraggingStyleExample />
</SectionContent>
<SectionSubGroups>

<DocsPageSection>
<SectionHeader Title="Override Values">
<Description>
Like the selector functions, the container also provides other values, like <CodeInline>DraggingClass</CodeInline>, that act as default values for all drop zones but can be overridden by the drop zone itself.
</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneOverrideExample">
<DropZoneOverrideExample />
</SectionContent>
</DocsPageSection>

</SectionSubGroups>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Disabled items">
<Description>
Drop items can be preveted from being draged by using the <CodeInline>ItemIsDisbaled</CodeInline> property.
</Description>
</SectionHeader>
<SectionContent ShowCode="false" Code="DropZoneDisabledExample">
<DropZoneDisabledExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Mics">
<Description>

</Description>
</SectionHeader>
<SectionSubGroups>

<DocsPageSection>
<SectionHeader Title="Kanban">
<Description></Description>
</SectionHeader>
<SectionContent Code="DropZoneKanbanExample" Block="true" FullWidth="true">
<DropZoneKanbanExample/>
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Chess Board">
<Description></Description>
</SectionHeader>
<SectionContent Code="DropZoneChessBoardExample">
<DropZoneChessBoardExample/>
</SectionContent>
</DocsPageSection>

</SectionSubGroups>
</DocsPageSection>
</DocsPageContent>
</DocsPage>
66 changes: 66 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/DropZone/Examples/DropZoneCanDropStylesExample.razor
View file
@@ -0,0 +1,66 @@
@namespace MudBlazor.Docs.Examples

<MudDropContainer T="DropItem" Items="_items" ApplyDropClassesOnDragStarted="_applyDropClassesOnDragStarted" ItemsSelector="@((item,dropzone) => item.Place == dropzone)" CanDropClass="mud-border-success" NoDropClass="mud-border-error" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
<ChildContent>
<div class="d-flex flex-wrap justify-space-between">
<MudDropZone T="DropItem" Identifier="Fridge" CanDrop="@((item) => false)" Class="rounded-lg border-2 border-solid mud-border-lines-default pa-6 ma-8">
<MudText Typo="Typo.h6" Class="mb-4">Fridge</MudText>
</MudDropZone>
<MudDropZone T="DropItem" Identifier="Dinner" CanDrop="@((item) => item.IsPicked == false && item.IsRotten == false)" Class="rounded-lg border-2 border-solid mud-border-lines-default pa-6 ma-8 flex-grow-1">
<MudText Typo="Typo.h6" Class="mb-4">Soup</MudText>
</MudDropZone>
<MudDropZone T="DropItem" Identifier="Trash" CanDrop="@((item) => item.IsPicked == false && item.IsRotten == true)" Class="rounded-lg border-2 border-dashed mud-border-lines-default pa-6 ma-8 flex-grow-1">
<MudText Typo="Typo.h6" Class="mb-4">Trash</MudText>
</MudDropZone>
</div>
<MudToolBar>
<MudCheckBox @bind-Checked="_applyDropClassesOnDragStarted" Label="Apply Drop Classes On Drag Started" />
<MudSpacer/>
<MudButton OnClick="Reset">Reset</MudButton>
</MudToolBar>
</ChildContent>
<ItemRenderer>
<MudPaper Height="54px" Width="54px" Class="pa-2" Elevation="0">
<MudBadge Visible="@(context.IsRotten ? true : false)" Overlap="true" Icon="@Icons.Custom.Uncategorized.Bacteria" Color="Color.Dark">
<MudIcon Icon="@context.Icon" Color="@context.Color" Size="Size.Large"/>
</MudBadge>
</MudPaper>
</ItemRenderer>
</MudDropContainer>

@code {
private bool _applyDropClassesOnDragStarted = false;

private void Reset()
{
foreach (var item in _items)
{
item.Place = "Fridge";
item.IsPicked = false;
}
}

private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
{
dropItem.Item.IsPicked = true;
dropItem.Item.Place = dropItem.DropzoneIdentifier;
}

private List<DropItem> _items = new()
{
new DropItem() { Icon = @Icons.Custom.Uncategorized.FoodApple, Color = Color.Error, IsRotten = false, Place = "Fridge" },
new DropItem() { Icon = @Icons.Custom.Uncategorized.Baguette, Color = Color.Warning, IsRotten = false, Place = "Fridge" },
new DropItem() { Icon = @Icons.Custom.Uncategorized.Sausage, Color = Color.Secondary, IsRotten = true, Place = "Fridge" },
new DropItem() { Icon = @Icons.Custom.Uncategorized.WaterMelon, Color = Color.Success, IsRotten = false, Place = "Fridge" },
new DropItem() { Icon = @Icons.Custom.Uncategorized.Fish, Color = Color.Info, IsRotten = true, Place = "Fridge" },
};

public class DropItem
{
public string Icon { get; init; }
public Color Color { get; init; }
public bool IsRotten { get; set; }
public bool IsPicked { get; set; }
public string Place { get; set; }
}
}
73 changes: 73 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/DropZone/Examples/DropZoneChessBoardExample.razor
View file
@@ -0,0 +1,73 @@
@namespace MudBlazor.Docs.Examples

<MudDropContainer T="DropItem" Items="_items" CanDropClass="mud-border-info" NoDropClass="mud-border-error" CanDrop="@( (item,identifier ) => _items.Count(x => x.Identifier == identifier ) == 0)" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated" Class="border-1 border-solid mud-border-lines-default">
<ChildContent>
@for(int r = 0; r < 8; r++)
{
var row = r.ToString();
<div class="d-flex">
@for (int c = 0; c < 8; c++)
{
var col = c.ToString();
<MudDropZone T="DropItem" Identifier="@($"{row}{col}")" DraggingClass="mud-theme-success" Class="mud-width-full mud-height-full d-flex justify-center align-center border-1 border-solid docs-gray-bg mud-border-lines-default" Style="height:64px;width:64px;"/>
}
</div>
}
</ChildContent>
<ItemRenderer>
<div class="d-flex justify-center align-center flex-grow-1">
<MudIcon Icon="@context.Icon" Color="@context.Color" Size="Size.Large" />
</div>
</ItemRenderer>
</MudDropContainer>

@code {
private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
{
dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
}

private List<DropItem> _items = new()
{
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessRook, Color = Color.Primary, Identifier = "00" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKnight, Color = Color.Primary, Identifier = "01" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessBishop, Color = Color.Primary, Identifier = "02" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessQueen, Color = Color.Primary, Identifier = "03" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKing, Color = Color.Primary, Identifier = "04" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessBishop, Color = Color.Primary, Identifier = "05" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKnight, Color = Color.Primary, Identifier = "06" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessRook, Color = Color.Primary, Identifier = "07" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "10" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "11" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "12" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "13" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "14" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "15" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "16" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Primary, Identifier = "17" },

new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "60" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "61" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "62" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "63" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "64" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "65" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "66" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessPawn, Color = Color.Secondary, Identifier = "67" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessRook, Color = Color.Secondary, Identifier = "70" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKnight, Color = Color.Secondary, Identifier = "71" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessBishop, Color = Color.Secondary, Identifier = "72" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessQueen, Color = Color.Secondary, Identifier = "73" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKing, Color = Color.Secondary, Identifier = "74" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessBishop, Color = Color.Secondary, Identifier = "75" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessKnight, Color = Color.Secondary, Identifier = "76" },
new DropItem(){ Icon = @Icons.Custom.Uncategorized.ChessRook, Color = Color.Secondary, Identifier = "77" },
};

public class DropItem
{
public string Icon { get; init; }
public Color Color { get; init; }
public string Identifier { get; set; }
}
}

0 comments on commit bbcfb70

Please sign in to comment.