sidebar icons replaced

COMET.Web.Common/Model/Application.cs

@@ -1,25 +1,24 @@
 // --------------------------------------------------------------------------------------------------------------------
 //  <copyright file="Application.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
+//     Copyright (c) 2024 Starion Group S.A.
 // 
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, 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.
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
 // 
-//    Licensed under the Apache License, Version 2.0 (the "License");
-//    you may not use this file except in compliance with the License.
-//    You may obtain a copy of the License at
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
 // 
-//        http://www.apache.org/licenses/LICENSE-2.0
-// 
-//    Unless required by applicable law or agreed to in writing, software
-//    distributed under the License is distributed on an "AS IS" BASIS,
-//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//    See the License for the specific language governing permissions and
-//    limitations under the License.
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//    Affero General Public License for more details.
 // 
+//    You should have received a copy of the GNU Affero General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 //  </copyright>
 //  --------------------------------------------------------------------------------------------------------------------
 
@@ -50,13 +49,19 @@ public class Application
         /// </summary>
         public string Icon { get; set; }
 
+        /// <summary>
+        /// The icon type to be displayed as a dynamic component, instead of a css class
+        /// </summary>
+        /// <remarks>Setting this value will likely override the selected <see cref="Icon" /> property when displayed</remarks>
+        public Type IconType { get; set; }
+
         /// <summary>
         /// The navigation url for the current application
         /// </summary>
         public string Url { get; set; }
 
         /// <summary>
-        /// Value asserting that the current <see cref="Application"/> is currently disabled
+        /// Value asserting that the current <see cref="Application" /> is currently disabled
         /// </summary>
         public bool IsDisabled { get; set; }
     }

COMETwebapp/Model/Applications.cs

@@ -1,26 +1,26 @@
 // --------------------------------------------------------------------------------------------------------------------
-// <copyright file="Applications.cs" company="Starion Group S.A.">
-//    Copyright (c) 2023-2024 Starion Group S.A.
-//
-//    Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft
-//
-//    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.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+//  <copyright file="Applications.cs" company="Starion Group S.A.">
+//     Copyright (c) 2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
+// 
+//     This file is part of COMET WEB Community Edition
+//     The COMET WEB Community Edition is the Starion Group Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
+// 
+//     The COMET WEB Community Edition is free software; you can redistribute it and/or
+//     modify it under the terms of the GNU Affero General Public
+//     License as published by the Free Software Foundation; either
+//     version 3 of the License, or (at your option) any later version.
+// 
+//     The COMET WEB Community Edition is distributed in the hope that it will be useful,
+//     but WITHOUT ANY WARRANTY; without even the implied warranty of
+//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 //    Affero General Public License for more details.
-//
+// 
 //    You should have received a copy of the GNU Affero General Public License
 //    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
 
 namespace COMETwebapp.Model
 {
@@ -34,9 +34,10 @@ namespace COMETwebapp.Model
     using COMETwebapp.Components.SubscriptionDashboard;
     using COMETwebapp.Components.SystemRepresentation;
     using COMETwebapp.Components.Viewer;
-    using COMETwebapp.Pages.ModelEditor;
     using COMETwebapp.Utilities;
 
+    using Feather.Blazor.Icons;
+
     /// <summary>
     /// Provides all available application contained into the current web application
     /// </summary>
@@ -60,31 +61,31 @@ private static List<Application> InitializesApplications()
         {
             applications =
             [
-                new TabbedApplication
-                {
-                    Name = "Parameter Editor",
-                    Color = "#76b8fc",
-                    Icon = "spreadsheet",
-                    Description = "Table of element usages with their associated parameters.",
-                    Url = WebAppConstantValues.ParameterEditorPage,
-                    ComponentType = typeof(ParameterEditorBody)
-                },
-
                 new TabbedApplication
                 {
                     Name = "Model Dashboard",
                     Color = "#c3cffd",
-                    Icon = "task",
+                    IconType = typeof(FeatherPieChart),
                     Description = "Summarize the model progress.",
                     Url = WebAppConstantValues.ModelDashboardPage,
                     ComponentType = typeof(ModelDashboardBody)
                 },
 
+                new TabbedApplication
+                {
+                    Name = "Parameter Editor",
+                    Color = "#76b8fc",
+                    IconType = typeof(FeatherLayout),
+                    Description = "Table of element usages with their associated parameters.",
+                    Url = WebAppConstantValues.ParameterEditorPage,
+                    ComponentType = typeof(ParameterEditorBody)
+                },
+
                 new TabbedApplication
                 {
                     Name = "Subscription Dashboard",
                     Color = "#76fd98",
-                    Icon = "person",
+                    IconType = typeof(FeatherActivity),
                     Description = "Table of subscribed values.",
                     Url = WebAppConstantValues.SubscriptionDashboardPage,
                     ComponentType = typeof(SubscriptionDashboardBody)
@@ -94,7 +95,7 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "System Representation",
                     Color = "#a7f876",
-                    Icon = "fork",
+                    IconType = typeof(FeatherShare2),
                     Description = "Represent relations between elements.",
                     Url = WebAppConstantValues.SystemRepresentationPage,
                     ComponentType = typeof(SystemRepresentationBody)
@@ -124,7 +125,7 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "3D Viewer",
                     Color = "#76fd98",
-                    Icon = "eye",
+                    IconType = typeof(FeatherPackage),
                     Description = "Show 3D Viewer",
                     Url = WebAppConstantValues.ViewerPage,
                     ComponentType = typeof(ViewerBody)
@@ -134,7 +135,7 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "Reference Data",
                     Color = "#fc3a1aad",
-                    Icon = "file",
+                    IconType = typeof(FeatherFile),
                     Description = "Visualize reference data",
                     Url = WebAppConstantValues.ReferenceDataPage
                 },
@@ -143,7 +144,7 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "Server Administration",
                     Color = "#fc3a1aad",
-                    Icon = "folder",
+                    IconType = typeof(FeatherServer),
                     Description = "Visualize site directory data",
                     Url = WebAppConstantValues.SiteDirectoryPage
                 },
@@ -152,7 +153,7 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "Engineering Model",
                     Color = "#c3cffd",
-                    Icon = "cog",
+                    IconType = typeof(FeatherSettings),
                     Description = "Visualize the engineering model data",
                     Url = WebAppConstantValues.EngineeringModelPage,
                     ComponentType = typeof(EngineeringModelBody)
@@ -162,17 +163,17 @@ private static List<Application> InitializesApplications()
                 {
                     Name = "Model Editor",
                     Color = "#76fd98",
-                    Icon = "box",
+                    IconType = typeof(FeatherBox),
                     Description = "Populate model",
                     Url = WebAppConstantValues.ModelEditorPage,
                     ComponentType = typeof(ElementDefinitionTable)
                 },
 
-                new TabbedApplication()
+                new TabbedApplication
                 {
                     Name = "Book Editor",
                     Color = "#76fd98",
-                    Icon = "book",
+                    IconType = typeof(FeatherBook),
                     Description = "Manage books",
                     Url = WebAppConstantValues.BookEditorPage,
                     ComponentType = typeof(BookEditorBody)
@@ -184,7 +185,7 @@ private static List<Application> InitializesApplications()
                     Url = WebAppConstantValues.TabsPage,
                     Color = "#76fd98",
                     Icon = "list",
-                    Description = "Access applications via tabs",
+                    Description = "Access applications via tabs"
                 }
             ];
 

COMETwebapp/Shared/SideBarEntry/AboutSideBar.razor

@@ -23,7 +23,7 @@
 
 <SideBarItem Text="About"
              OnClick="@(() => this.SetVisibility(true))"
-             IconCssClass="oi oi-info"/>
+             Icon="@(typeof(FeatherInfo))"/>
 
 <DxPopup @bind-Visible="this.IsVisible" HeaderText="CDP4-COMET-WEB CE">
     <About/>

COMETwebapp/Shared/SideBarEntry/ApplicationsSideBar.razor

@@ -32,7 +32,7 @@
     <SideBarItem Text="@applicationEntry.Name"
                  OnClick="@(() => this.NavigateToTabbedApplication(applicationEntry))"
                  CssClass="@(this.IsCurrentApplication(applicationEntry) ? "selected-application-item" : "")"
-                 IconCssClass="@($"oi oi-{applicationEntry.Icon}")"
+                 Icon="@(applicationEntry.IconType)"
                  Enabled="@(this.IsApplicationEnabled(applicationEntry))"/>
 }
 
@@ -45,7 +45,7 @@
     <SideBarItem Text="@applicationEntry.Name"
                  OnClick="@(() => this.NavigationManager.NavigateTo(applicationEntry.Url))"
                  CssClass="@(this.IsCurrentApplication(applicationEntry) ? "selected-application-item" : "")"
-                 IconCssClass="@($"oi oi-{applicationEntry.Icon}")"
+                 Icon="@(applicationEntry.IconType)"
                  Enabled="@(this.IsApplicationEnabled(applicationEntry))" />
 }
 

COMETwebapp/Shared/SideBarEntry/ModelSideBar.razor

@@ -37,7 +37,7 @@
 <SideBarItem Text="@(this.ConfigurationService.GetText(TextConfigurationKind.NavigationModelSelectorTitle))"
              OnClick="@(this.ExpandDropdown)"
              Enabled="@(this.AuthorizedMenuEntryViewModel.IsAuthenticated)"
-             IconCssClass="icon icon-folder mx-2"
+             Icon="@(typeof(FeatherFolder))"
              Id="model-entry"
              DropdownSelector="true"/>
 

COMETwebapp/Shared/SideBarEntry/SessionSideBar.razor

@@ -25,7 +25,7 @@
 <SideBarItem Text="Session"
              Enabled="@(this.AuthorizedMenuEntryViewModel.IsAuthenticated)"
              OnClick="@(this.ExpandDropdown)"
-             IconCssClass="icon icon-database mx-2"
+             Icon="@(typeof(FeatherDatabase))"
              Id="session-side-bar-item"
              DropdownSelector="true"/>
 

COMETwebapp/Shared/SideBarEntry/ShowHideDeprecatedThingsSideBar.razor

@@ -23,6 +23,6 @@
 
 <SideBarItem Text="@(this.ViewModel.ShowHideDeprecatedThingsService.ShowDeprecatedThings ? "Hide Deprecated Things" : "Show Deprecated Things")"
              OnClick="@(() => this.ViewModel.OnShowHideDeprecatedItems())"
-             IconCssClass="@($"{(this.ViewModel.ShowHideDeprecatedThingsService.ShowDeprecatedThings ? "icon icon-eye-hide" : "icon icon-eye-show")} mx-2")"
+             Icon="@(this.ViewModel.ShowHideDeprecatedThingsService.ShowDeprecatedThings ? typeof(FeatherEyeOff) : typeof(FeatherEye))"
              Enabled="@(this.AuthorizedMenuEntryViewModel.IsAuthenticated)"
              Id="showHideIcon"/>

COMETwebapp/Shared/SideBarEntry/SideBarItem.razor

@@ -28,8 +28,18 @@
     }
     else
     {
-        <div style="display: flex; align-items: center;">
-            <span class="@(this.IconCssClass) display-flex justify-content-center application-sidebar-icon" aria-hidden="true"></span>
+        <div class="application-item-content">
+            @if (this.Icon is not null)
+            {
+                <div class="application-sidebar-icon">
+                    <DynamicComponent Type="@(this.Icon)"
+                                      Parameters="IconConfiguration"/>
+                </div>
+            }
+            else
+            {
+                <span class="@(this.IconCssClass) display-flex justify-content-center application-sidebar-icon" aria-hidden="true"></span>
+            }
             <span class="not-displayed-on-collapse">@(this.Text)</span>
         </div>
         if (this.DropdownSelector)

COMETwebapp/Shared/SideBarEntry/SideBarItem.razor.cs

@@ -55,6 +55,12 @@ public partial class SideBarItem
         [Parameter]
         public string IconCssClass { get; set; }
 
+        /// <summary>
+        /// Gets or sets the icon to be displayed, overriding the selected <see cref="IconCssClass" />, if set
+        /// </summary>
+        [Parameter]
+        public Type Icon { get; set; }
+
         /// <summary>
         /// Gets or sets the text to be displayed
         /// </summary>
@@ -79,6 +85,17 @@ public partial class SideBarItem
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets the icon configuration to display
+        /// </summary>
+        private static Dictionary<string, object> IconConfiguration => new()
+        {
+            { "Size", 22 },
+            { "Color", "currentColor" },
+            { "StrokeWidth", 1.8f },
+            { "CssClass", "cursor-pointer" }
+        };
+
         /// <summary>
         /// Executes the onclick action if the component is enabled
         /// </summary>

COMETwebapp/Shared/SideBarEntry/SideBarItem.razor.css

@@ -29,7 +29,11 @@
 }
 
 .application-sidebar-icon {
-    padding-right: 10px;
     margin-top: -1.5px;
-    padding-left: 10px;
 }
+
+.application-item-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}

COMETwebapp/wwwroot/css/app.css

@@ -244,6 +244,7 @@ div[id^="dropdown-customization-target-container-"] { display: flex; }
 
 .collapsed .application-item-container {
     width: 70px !important;
+    padding: 22px;
 }
 
 sub {

COMETwebapp/wwwroot/css/overwrite.css

@@ -78,4 +78,9 @@ h3, .h3 {
 
 .dxbl-toolbar.dxbl-toolbar-adaptive > .dxbl-btn-toolbar{
     bottom: 0!important;
+}
+
+.open-tab-box-container .dxbl-fl-cpt.dxbl-text {
+    color: var(--colors-gray-950);
+    font-weight: 500;
 }

COMETwebapp/wwwroot/css/vars.css

@@ -9,7 +9,7 @@
     --colors-gray-700: #374151;
     --colors-gray-800: #1F2937;
     --colors-gray-900: #111827;
-    --colors-gray-950: #030712;
+    --colors-gray-950: #0B0C0E;
     --colors-primary-25: #F9FBFC;
     --colors-primary-50: #F4F5F8;
     --colors-primary-100: #EAECF1;