Skip to content

Commit

Permalink
[FIX] sizing issues
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander van Delft committed Jan 9, 2025
1 parent ee5cfb3 commit a67b0dd
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 65 deletions.
2 changes: 1 addition & 1 deletion COMET.Web.Common/Components/CardView/CardView.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</tr>
</table>
</p>
<div class="container" style="height:calc(100% - 40px); overflow:auto;">
<div class="container" style="height:calc(100% - 40px); overflow:auto;max-width: inherit !important;">
<div class="row">
<Virtualize ItemSize="@this.ItemSize" ItemsProvider="this.LoadItemsAsync" @ref="this.virtualize">
<ItemContent>
Expand Down
6 changes: 3 additions & 3 deletions COMET.Web.Common/wwwroot/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,6 +613,6 @@
}

.treeview-item-drag-over {
background-color: burlywood;
box-shadow: 0px 0px 2px 10px burlywood;
}
background-color: burlywood !important;
box-shadow: 0px 0px 2px 10px burlywood !important;
}
84 changes: 44 additions & 40 deletions COMETwebapp/Components/MultiModelEditor/ElementDefinitionTree.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
@using COMETwebapp.ViewModels.Components.MultiModelEditor.Rows
@inject IJSRuntime JSRuntime

<div style = "height:50px">
<div style = "height:50px;">
@if (this.IsModelSelectionEnabled)
{
<DxComboBox TData="IterationData"
Expand All @@ -46,46 +46,50 @@ else
@ondragenter="@(() => this.DragEnterAsync(this.TreeView))"
@ondragleave="@(() => this.DragLeaveAsync(this.TreeView))"
@ondrop="@(() => this.DropAsync(null))"
style="height:25px;width:inherit;color:cadetblue;@(this.AllowDrop ? "" : "visibility:hidden;")">
style="height:25px;color:cadetblue;@(this.AllowDrop ? "" : "visibility:hidden;")">
Drop here to create new element...
</div>
<DxTreeView @ref="this.TreeView" Data="@this.ViewModel.Rows"
CssClass="sticky-scrollable-column"
SelectionChanged="args => {this.SelectionChanged.InvokeAsync(args.NodeInfo?.DataItem as ElementBaseTreeRowViewModel); }"
AllowSelectNodes="true"
SizeMode="SizeMode.Small"
AnimationType="LayoutAnimationType.None">
<NodeTextTemplate>
@{
var dataItem = (ElementBaseTreeRowViewModel)context.DataItem;
var draggable = this.AllowDrag && this.AllowNodeDrag.Invoke(this, dataItem);
var isTopElement = dataItem is ElementDefinitionTreeRowViewModel { IsTopElement: true };
var cssClass = isTopElement ? "font-weight-bold" : string.Empty;
}
<div style="overflow-y:auto;height: calc(90vh - 175px);">
<DxTreeView @ref="this.TreeView" Data="@this.ViewModel.Rows"
CssClass="sticky-scrollable-column"
SelectionChanged="args => {this.SelectionChanged.InvokeAsync(args.NodeInfo?.DataItem as ElementBaseTreeRowViewModel); }"
AllowSelectNodes="true"
SizeMode="SizeMode.Small"
ShowFilterPanel="true"
FilterMode="NavigationFilterMode.ParentBranch"
AnimationType="LayoutAnimationType.None">
<NodeTextTemplate>
@{
var dataItem = (ElementBaseTreeRowViewModel)context.DataItem;
var draggable = this.AllowDrag && this.AllowNodeDrag.Invoke(this, dataItem);
var isTopElement = dataItem is ElementDefinitionTreeRowViewModel { IsTopElement: true };
var cssClass = isTopElement ? "font-weight-bold" : string.Empty;
}

@if (draggable)
{
<ElementDefinitionTreeItem
CssClass="@($"{cssClass} {(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "treeview-item-drag-over" : "")}")"
ElementBaseTreeRowViewModel="@dataItem"
draggable="@(this.AllowDrag ? "true" : "false")"
dropzone="@(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "move" : "")"
@ondragstart="@(async () => await this.DragStartAsync(dataItem))"
@ondragend="@(async () => await this.DragEndAsync(dataItem))"
ondragover="@(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "event.preventDefault();" : "")"
@ondragenter="@(async () => await this.DragEnterAsync(dataItem))"
@ondragleave="@(async () => await this.DragLeaveAsync(dataItem))"
@ondrop="@(async () => await this.DropAsync(dataItem))"
/>
}
else
{
<ElementDefinitionTreeItem CssClass="@cssClass" ElementBaseTreeRowViewModel="@dataItem" />
}
@if (draggable)
{
<ElementDefinitionTreeItem
CssClass="@($"{cssClass} {(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "treeview-item-drag-over" : "")}")"
ElementBaseTreeRowViewModel="@dataItem"
draggable="@(this.AllowDrag ? "true" : "false")"
dropzone="@(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "move" : "")"
@ondragstart="@(async () => await this.DragStartAsync(dataItem))"
@ondragend="@(async () => await this.DragEndAsync(dataItem))"
ondragover="@(this.AllowDrop && this.dragOverNode == dataItem && this.AllowNodeDrop ? "event.preventDefault();" : "")"
@ondragenter="@(async () => await this.DragEnterAsync(dataItem))"
@ondragleave="@(async () => await this.DragLeaveAsync(dataItem))"
@ondrop="@(async () => await this.DropAsync(dataItem))"
/>
}
else
{
<ElementDefinitionTreeItem CssClass="@cssClass" ElementBaseTreeRowViewModel="@dataItem" />
}

</NodeTextTemplate>
<DataMappings>
<DxTreeViewDataMapping Children="Rows" Text="ElementName"/>
<DxTreeViewDataMapping Level="1" Text="ElementName" />
</DataMappings>
</DxTreeView>
</NodeTextTemplate>
<DataMappings>
<DxTreeViewDataMapping Children="Rows" Text="ElementName"/>
<DxTreeViewDataMapping Level="1" Text="ElementName" />
</DataMappings>
</DxTreeView>
</div>
42 changes: 21 additions & 21 deletions COMETwebapp/Components/MultiModelEditor/MultiModelEditor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@

<LoadingComponent IsVisible="@this.ViewModel.IsLoading">
<ValidationMessageComponent ValidationMessage="@(this.ErrorMessage)" />
<div class="selected-data-item-page">
<div class="selected-data-item-table d-flex" style="flex: 1 1 58%!important;">
<div>
<div class="selected-data-item-page" style="flex-wrap:nowrap!important;">
<div class="selected-data-item-table d-flex" style="flex: 1 1 50%!important;gap: 10px;min-width:600px;">
<div style="width:50%; height:100%; border: dashed 1px;padding:15px;border-radius: 10px;max-width: fit-content;">
<h4>Source Model</h4>
<ElementDefinitionTree
@ref="this.SourceTree"
Expand All @@ -53,7 +53,7 @@
IsModelSelectionEnabled="true">
</ElementDefinitionTree>
</div>
<div>
<div style="width:50%; height:100%; border: dashed 1px;padding:15px;border-radius: 10px;max-width: fit-content;">
<h4>Target Model</h4>
<ElementDefinitionTree
@ref="this.TargetTree"
Expand All @@ -78,25 +78,25 @@
IsModelSelectionEnabled="false">
</ElementDefinitionTree>
</div>
</div>
<DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
NotSelectedText="Select an item to view or edit"
Width="100%"
CssClass="model-editor-details">
<div class="mb-2 row">
<div class="float-end">
@if (this.ViewModel.SelectedElementDefinition is not null)
{
<DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
}
<DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
NotSelectedText="Select an item to view or edit"
Width="100%"
CssClass="model-editor-details">
<div class="mb-2 row">
<div class="float-end">
@if (this.ViewModel.SelectedElementDefinition is not null)
{
<DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
}

<DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
<DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
</div>
</div>
</div>
<div style="height: 73vh!important;" class="sticky-scrollable-column justify-content-between">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
</div>
</DataItemDetailsComponent>
<div style="height: 73vh!important;" class="sticky-scrollable-column justify-content-between">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
</div>
</DataItemDetailsComponent>
</div>
</div>
<DxPopup CloseOnOutsideClick="false" HeaderText="Create Element Definition" @bind-Visible="@this.ViewModel.IsOnCreationMode" Width="40vw">
<BodyContentTemplate>
Expand Down

0 comments on commit a67b0dd

Please sign in to comment.