Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat #702 Reduce the need to horizontally scroll when split screen is applied #709

Merged
merged 3 commits into from
Jul 24, 2024
Merged

Feat #702 Reduce the need to horizontally scroll when split screen is applied #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05ed811
webapp page are now responsive
joao4all Jul 24, 2024
c462b51
fixed error on engineering models updates
joao4all Jul 24, 2024
f1b8e8d
fixed sonarqube issue
joao4all Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions COMETwebapp/Components/Common/DataItemDetailsComponent.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.

@namespace COMETwebapp.Components.Common

<div class="ps-3 data-items-panel-container" style="width: @this.Width;">
<div class="data-items-panel-container @(this.CssClass)" style="width: @this.Width;">
<div class="data-item-details-section">
@if (this.IsSelected)
{
Expand All @@ -43,4 +43,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
</div>
}
</div>
</div>
</div>
6 changes: 6 additions & 0 deletions COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,11 @@ public partial class DataItemDetailsComponent
/// </summary>
[Parameter]
public string Width { get; set; } = "50%";

/// <summary>
/// The custom css class to be used in the container component
/// </summary>
[Parameter]
public string CssClass { get; set; }
}
}
6 changes: 0 additions & 6 deletions COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@
overflow: auto;
}

.data-items-panel-container {
max-height: 90vh;
position: sticky;
top: 10px;
}

.data-item-details-image {
margin: auto;
display: block;
Expand Down
4 changes: 2 additions & 2 deletions COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
------------------------------------------------------------------------------->
@inherits SelectedDataItemBase<CommonFileStore, CommonFileStoreRowViewModel>

<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>
Expand Down
6 changes: 3 additions & 3 deletions COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
------------------------------------------------------------------------------->
@inherits SelectedDataItemBase<DomainFileStore, DomainFileStoreRowViewModel>

<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>
Expand All @@ -55,4 +55,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
<DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
<DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
</div>
</DxPopup>
</DxPopup>
6 changes: 3 additions & 3 deletions COMETwebapp/Components/EngineeringModel/OptionsTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
------------------------------------------------------------------------------->
@inherits SelectedDataItemBase<Option, OptionRowViewModel>

<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -33,7 +33,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(OptionRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(OptionRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand All @@ -57,4 +57,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
<DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
<DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
</div>
</DxPopup>
</DxPopup>
118 changes: 59 additions & 59 deletions COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,69 +26,69 @@

<LoadingComponent IsVisible="@this.ViewModel.IsLoading">
<ValidationMessageComponent ValidationMessage="@(this.ErrorMessage)" />
<div style="display: flex">
<div>
<h4>Source Model</h4>
<div class="model-elements-column sticky-scrollable-column">
<DxGrid @ref="this.SecondGrid"
Data="this.ViewModel.RowsSource"
ShowAllRows="true"
CssClass="second-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
<DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
</Columns>
</DxGrid>
<div class="selected-data-item-page">
<div class="selected-data-item-table d-flex" style="flex: 1 1 58%!important;">
<div>
<h4>Source Model</h4>
<div class="sticky-scrollable-column">
<DxGrid @ref="this.SecondGrid"
Data="this.ViewModel.RowsSource"
ShowAllRows="true"
CssClass="second-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
<DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
</Columns>
</DxGrid>
</div>
</div>
</div>
<div style="padding-left: 10px">
<h4>Target Model</h4>
<div class="model-elements-column sticky-scrollable-column">
<DxGrid @ref="this.FirstGrid"
Data="this.ViewModel.RowsTarget"
ShowAllRows="true"
CssClass="first-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
</Columns>
</DxGrid>
<div>
<h4>Target Model</h4>
<div class="sticky-scrollable-column">
<DxGrid @ref="this.FirstGrid"
Data="this.ViewModel.RowsTarget"
ShowAllRows="true"
CssClass="first-grid"
AllowSort="false"
RowClick="this.OnElementSelected"
AllowSelectRowByClick="true"
SelectionMode="GridSelectionMode.Single"
VerticalScrollBarMode="ScrollBarMode.Visible"
CustomizeElement="@(OnCustomizeElement)">
<Columns>
<DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
<DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
</Columns>
</DxGrid>
</div>
</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">
<h4 class="d-inline">Panel Editor</h4>
<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)"/>
}

<div style="width: 1300px;">
<DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
NotSelectedText="Select an item to view or edit"
Width="100%">
<div class="mb-2">
<h4 class="d-inline">Panel Editor</h4>
<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"/>
</div>
<DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
</div>
<div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
</div>
</DataItemDetailsComponent>
</div>
</div>
<div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
<DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
</div>
</DataItemDetailsComponent>
</div>
<DxPopup CloseOnOutsideClick="false" HeaderText="Create Element Definition" @bind-Visible="@this.ViewModel.IsOnCreationMode" Width="40vw">
<Content>
Expand All @@ -101,4 +101,4 @@
<AddParameter ViewModel="@this.ViewModel.AddParameterViewModel"/>
</Content>
</DxPopup>
</LoadingComponent>
</LoadingComponent>
2 changes: 1 addition & 1 deletion COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

.table-container {
min-width: 1400px;
width: fit-content;
margin-top: 15px;
max-height: 80vh;
}
6 changes: 3 additions & 3 deletions COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!------------------------------------------------------------------------------
Copyright (c) 2023-2024 Starion Group S.A.

Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft, Nabil Abbar
Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua

This file is part of CDP4-COMET WEB Community Edition
The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
Expand All @@ -22,7 +22,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
@inherits SelectedDeprecatableDataItemBase<Category, CategoryRowViewModel>

<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -39,7 +39,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand Down
6 changes: 3 additions & 3 deletions COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Copyright (c) 2024 Starion Group S.A.

@inherits SelectedDeprecatableDataItemBase<MeasurementScale, MeasurementScaleRowViewModel>

<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -39,7 +39,7 @@ Copyright (c) 2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand All @@ -59,4 +59,4 @@ Copyright (c) 2024 Starion Group S.A.
ShouldCreate="@(this.ShouldCreateThing)"
OnSaved="@(this.OnSaved)"/>
</DataItemDetailsComponent>
</div>
</div>
4 changes: 2 additions & 2 deletions COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
@inherits SelectedDeprecatableDataItemBase<MeasurementUnit, MeasurementUnitRowViewModel>

<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -34,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand Down
7 changes: 3 additions & 4 deletions COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
@inherits SelectedDeprecatableDataItemBase<ParameterType, ParameterTypeRowViewModel>

<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
<div class="d-flex justify-content-between">

<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -35,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand All @@ -53,7 +52,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
<ParameterTypeForm ViewModel="@(this.ViewModel)"
@bind-IsVisible="@(this.IsOnEditMode)"
ShouldCreate="@(this.ShouldCreateThing)"
OnSaved="@(this.OnSaved)" />
OnSaved="@(this.OnSaved)"/>
</DataItemDetailsComponent>
</div>
</LoadingComponent>
4 changes: 2 additions & 2 deletions COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
@inherits SelectedDeprecatableDataItemBase<DomainOfExpertise, DomainOfExpertiseRowViewModel>

<LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
<div class="d-flex justify-content-between">
<div class="selected-data-item-page">
<DxGrid @ref="this.Grid"
Data="this.ViewModel.Rows.Items"
ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
Expand All @@ -35,7 +35,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
PageSizeSelectorAllRowsItemVisible="true"
FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
CssClass="height-fit-content">
CssClass="selected-data-item-table">
<Columns>
<DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.Name)" MinWidth="150"/>
<DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
Expand Down
Loading
Loading