Aggiunto componente per gruppi elementi della barra laterale
This commit is contained in:
Annamaria Sassi
@@ -4,7 +4,7 @@
|
||||
<TargetFramework>net8.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<Version>1.1.2605.1809</Version>
|
||||
<Version>1.1.2605.1909</Version>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
<div class="nav-item px-3 py-1">
|
||||
<div class="button d-flex justify-content-between align-items-center w-100" style="cursor: pointer; color:#d7d7d7;" @onclick="Toggle">
|
||||
<div>
|
||||
<i class="fa-solid fa-chevron-@(isMenuOpen ? "up" : "down") small ps-2"></i>
|
||||
<span class="fa-solid @IconList.FirstOrDefault() pe-2 fs-4" aria-hidden="true"></span>
|
||||
@if (ShowText)
|
||||
{
|
||||
<span>@NameList.FirstOrDefault()</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (isMenuOpen)
|
||||
{
|
||||
foreach(var elem in subElement)
|
||||
{
|
||||
<div class="nav-item py-0 @subArtCss">
|
||||
<NavLink class="nav-link" href="@GetPage(elem)">
|
||||
<span class="fa-solid @GetSubIcon(elem) px-1 fs-4" aria-hidden="true"></span> <span class="@hideText">@elem</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
@* <div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="Dealer">
|
||||
<span class="fa-solid fa-stamp px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">@GetElementName(2)</span>
|
||||
</NavLink>
|
||||
</div> *@
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
|
||||
using Microsoft.EntityFrameworkCore.Migrations.Operations;
|
||||
|
||||
namespace Lux.UI.Components.Layout
|
||||
{
|
||||
public partial class GroupElem
|
||||
{
|
||||
[Parameter]
|
||||
public List<string> NameList { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> PageList { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> IconList { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public bool ShowText { get; set; } = true;
|
||||
|
||||
protected string hideText { get => ShowText ? "" : "invisible"; }
|
||||
protected string subArtCss { get => ShowText ? "ps-5 pe-3" : "ps-5 pe-2"; }
|
||||
|
||||
private bool isMenuOpen = false;
|
||||
|
||||
public List<string> subElement { get; set; } = new List<string>();
|
||||
public List<string> subIcon { get; set; } = new List<string>();
|
||||
|
||||
private void Toggle()
|
||||
{
|
||||
isMenuOpen = !isMenuOpen;
|
||||
UpdateData();
|
||||
}
|
||||
|
||||
private void UpdateData()
|
||||
{
|
||||
subElement = new List<string>();
|
||||
subIcon = new List<string>();
|
||||
for(int i = 1; i <NameList.Count; i++)
|
||||
{
|
||||
subElement.Add(NameList[i]);
|
||||
subIcon.Add(IconList[i]);
|
||||
}
|
||||
}
|
||||
|
||||
private string GetSubIcon(string elem)
|
||||
{
|
||||
int indice = subElement.IndexOf(elem);
|
||||
return subIcon.ElementAt(indice);
|
||||
}
|
||||
|
||||
private string GetPage(string elem)
|
||||
{
|
||||
int indice = subElement.IndexOf(elem);
|
||||
return PageList.ElementAt(indice);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 2.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
color: white;
|
||||
}
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 2.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.navbar-toggler{background-color:rgba(255,255,255,.1);}.top-row{height:3.5rem;background-color:rgba(0,0,0,.5);}.navbar-brand{font-size:1.1rem;}.oi{width:2rem;font-size:1.1rem;vertical-align:text-top;top:-2px;}.nav-item{font-size:.9rem;padding-bottom:.1rem;}.nav-item:first-of-type{padding-top:.5rem;}.nav-item:last-of-type{padding-bottom:.5rem;}.nav-item ::deep a{color:#d7d7d7;border-radius:4px;height:2.7rem;display:flex;align-items:center;line-height:2.7rem;}.nav-item ::deep a.active{background-color:rgba(255,255,255,.25);color:#fff;}.nav-item ::deep a:hover{background-color:rgba(255,255,255,.1);color:#fff;}@media(min-width:641px){.navbar-toggler{display:none;}.collapse{display:block;}}
|
||||
@@ -60,7 +60,7 @@ main {
|
||||
top: 0;
|
||||
}
|
||||
.sidebarSmall {
|
||||
width: 4.5rem;
|
||||
width: 6rem;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
@@ -68,7 +68,7 @@ main {
|
||||
}
|
||||
|
||||
.sidebarSmall {
|
||||
width: 4.5rem;
|
||||
width: 6rem;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
.page{position:relative;display:flex;flex-direction:column;}main{flex:1;}.sidebar,.sidebarSmall{background:-webkit-linear-gradient(to bottom,#053787,#00a5ff);background:linear-gradient(to bottom,#053787,#00a5ff);}.top-row{background-color:#f7f7f7;border-bottom:1px solid #d6d5d5;height:3.5rem;display:flex;align-items:center;}.top-row ::deep a,.top-row .btn-link{white-space:nowrap;margin-left:1.5rem;}.top-row a:first-child{overflow:hidden;text-overflow:ellipsis;}.bottom-row{color:#dedede;background-color:#000;height:1.6rem;align-items:center;}@media(max-width:640.98px){.top-row:not(.auth){display:none;}.top-row.auth{justify-content:space-between;}.top-row a,.top-row .btn-link{margin-left:0;}}@media(min-width:641px){.page{flex-direction:row;}.sidebar{width:13.5rem;height:100vh;position:sticky;top:0;}.sidebarSmall{width:4.5rem;height:100vh;position:sticky;top:0;}.top-row{position:sticky;top:0;z-index:1;}.top-row,article{padding-left:.5rem!important;padding-right:.5rem!important;}}
|
||||
.page{position:relative;display:flex;flex-direction:column;}main{flex:1;}.sidebar,.sidebarSmall{background:-webkit-linear-gradient(to bottom,#053787,#00a5ff);background:linear-gradient(to bottom,#053787,#00a5ff);}.top-row{background-color:#f7f7f7;border-bottom:1px solid #d6d5d5;height:3.5rem;display:flex;align-items:center;}.top-row ::deep a,.top-row .btn-link{white-space:nowrap;margin-left:1.5rem;}.top-row a:first-child{overflow:hidden;text-overflow:ellipsis;}.bottom-row{color:#dedede;background-color:#000;height:1.6rem;align-items:center;}@media(max-width:640.98px){.top-row:not(.auth){display:none;}.top-row.auth{justify-content:space-between;}.top-row a,.top-row .btn-link{margin-left:0;}}@media(min-width:641px){.page{flex-direction:row;}.sidebar{width:13.5rem;height:100vh;position:sticky;top:0;}.sidebarSmall{width:6rem;height:100vh;position:sticky;top:0;}.top-row{position:sticky;top:0;z-index:1;}.top-row,article{padding-left:.5rem!important;padding-right:.5rem!important;}}
|
||||
@@ -33,101 +33,9 @@
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 py-1">
|
||||
<div class="button d-flex justify-content-between align-items-center w-100" style="cursor: pointer; color:#d7d7d7;" @onclick="ToggleArticoli">
|
||||
<div>
|
||||
<i class="fa-solid fa-chevron-@(isArticoliOpen ? "up" : "down") small ps-2"></i>
|
||||
<span class="fa-solid fa-book-open pe-2 fs-4" aria-hidden="true"></span>
|
||||
@if (showText)
|
||||
{
|
||||
<span>Articoli</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (isArticoliOpen)
|
||||
{
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="Items">
|
||||
<span class="fa-solid fa-book px-2 fs-5" aria-hidden="true"></span> <span class="@hideText">Buy</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="SellItems">
|
||||
<span class="fa-solid fa-book-bookmark px-2 fs-5" aria-hidden="true"></span> <span class="@hideText">Sell</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
<div class="nav-item px-3 py-1">
|
||||
<div class="button d-flex justify-content-between align-items-center w-100" style="cursor: pointer; color:#d7d7d7;" @onclick="ToggleCicloProd">
|
||||
<div>
|
||||
<i class="fa-solid fa-chevron-@(isArticoliOpen ? "up" : "down") small ps-2"></i>
|
||||
<span class="fa-solid fa-industry pe-2 fs-4" aria-hidden="true"></span>
|
||||
@if (showText)
|
||||
{
|
||||
<span>Ciclo Prod</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (isCicloProdOpen)
|
||||
{
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="Resources">
|
||||
<span class="fa-solid fa-location-dot px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Risorse</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="JobRoute">
|
||||
<span class="fa-solid fa-route px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Cicli</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
@* <div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Resources">
|
||||
<span class="fa-solid fa-location-dot px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Risorse</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="JobRoute">
|
||||
<span class="fa-solid fa-route px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Cicli</span>
|
||||
</NavLink>
|
||||
</div>*@
|
||||
<div class="nav-item px-3 py-1">
|
||||
<div class="button d-flex justify-content-between align-items-center w-100" style="cursor: pointer; color:#d7d7d7;" @onclick="ToggleContatti">
|
||||
<div>
|
||||
<i class="fa-solid fa-chevron-@(isContattiOpen ? "up" : "down") small ps-2"></i>
|
||||
<span class="fa-solid fa-address-book pe-2 fs-4" aria-hidden="true"></span>
|
||||
@if (showText)
|
||||
{
|
||||
<span>Contatti</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (isContattiOpen)
|
||||
{
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="Customer">
|
||||
<span class="fa-solid fa-users px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Clienti</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3 @subArtCss">
|
||||
<NavLink class="nav-link" href="Dealer">
|
||||
<span class="fa-solid fa-stamp px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Fornitori</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
@* <div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Customer">
|
||||
<span class="fa-solid fa-users px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Customer</span>
|
||||
</NavLink>
|
||||
</div> *@
|
||||
@* <div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Dealer">
|
||||
<span class="fa-solid fa-stamp px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Dealer</span>
|
||||
</NavLink>
|
||||
</div> *@
|
||||
<GroupElem NameList="@(NameDict.GetValueOrDefault("Articoli"))" PageList="@(PageDict.GetValueOrDefault("Articoli"))" IconList="@(IconDict.GetValueOrDefault("Articoli"))" ShowText="@(showText)"></GroupElem>
|
||||
<GroupElem NameList="@(NameDict.GetValueOrDefault("Ciclo prod"))" PageList="@(PageDict.GetValueOrDefault("Ciclo prod"))" IconList="@(IconDict.GetValueOrDefault("Ciclo prod"))" ShowText="@(showText)"></GroupElem>
|
||||
<GroupElem NameList="@(NameDict.GetValueOrDefault("Contatti"))" PageList="@(PageDict.GetValueOrDefault("Contatti"))" IconList="@(IconDict.GetValueOrDefault("Contatti"))" ShowText="@(showText)"></GroupElem>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="Template">
|
||||
<span class="fa-solid fa-book-bookmark px-2 fs-4" aria-hidden="true"></span> <span class="@hideText">Cataloghi</span>
|
||||
|
||||
@@ -38,6 +38,7 @@ namespace Lux.UI.Components.Layout
|
||||
{
|
||||
currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
|
||||
NavigationManager.LocationChanged += OnLocationChanged;
|
||||
UpdateDict();
|
||||
}
|
||||
|
||||
protected void ToggleCompress()
|
||||
@@ -55,12 +56,13 @@ namespace Lux.UI.Components.Layout
|
||||
#region Private Fields
|
||||
|
||||
private bool collapseNavMenu = true;
|
||||
private bool isArticoliOpen = false;
|
||||
private bool isCicloProdOpen = false;
|
||||
private bool isContattiOpen = false;
|
||||
private string? currentUrl;
|
||||
private bool onlyIcon = false;
|
||||
|
||||
private Dictionary<string, List<string>> NameDict = new Dictionary<string, List<string>>();
|
||||
private Dictionary<string, List<string>> IconDict = new Dictionary<string, List<string>>();
|
||||
private Dictionary<string, List<string>> PageDict = new Dictionary<string, List<string>>();
|
||||
|
||||
#endregion Private Fields
|
||||
|
||||
#region Private Properties
|
||||
@@ -76,17 +78,26 @@ namespace Lux.UI.Components.Layout
|
||||
currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
|
||||
StateHasChanged();
|
||||
}
|
||||
private void ToggleArticoli()
|
||||
|
||||
/// <summary>
|
||||
/// Aggiornamento dizionari per pagine raggruppate in sottomenu
|
||||
/// </summary>
|
||||
private void UpdateDict()
|
||||
{
|
||||
isArticoliOpen = !isArticoliOpen;
|
||||
}
|
||||
private void ToggleCicloProd()
|
||||
{
|
||||
isCicloProdOpen = !isCicloProdOpen;
|
||||
}
|
||||
private void ToggleContatti()
|
||||
{
|
||||
isContattiOpen = !isContattiOpen;
|
||||
// Inserimento nomi segnaposto nav-item
|
||||
NameDict.Add("Articoli", new List<string>() { "Articoli", "Buy", "Sell" });
|
||||
NameDict.Add("Ciclo prod", new List<string>() { "Ciclo prod", "Risorse", "Cicli" });
|
||||
NameDict.Add("Contatti", new List<string>() { "Contatti", "Clienti", "Fornitori" });
|
||||
|
||||
// Inserimento icone
|
||||
IconDict.Add("Articoli", new List<string>() { "fa-book-open", "fa-book", "fa-book-bookmark" });
|
||||
IconDict.Add("Ciclo prod", new List<string>() { "fa-industry", "fa-location-dot", "fa-route" });
|
||||
IconDict.Add("Contatti", new List<string>() { "fa-address-book", "fa-users", "fa-stamp" });
|
||||
|
||||
// Inserimento reindirizzamento elementi sotto menu
|
||||
PageDict.Add("Articoli", new List<string>() { "Items", "SellItems" });
|
||||
PageDict.Add("Ciclo prod", new List<string>() { "Resources", "JobRoute" });
|
||||
PageDict.Add("Contatti", new List<string>() { "Customer", "Dealer" });
|
||||
}
|
||||
|
||||
#endregion Private Methods
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<UserSecretsId>aspnet-Lux.UI-a758c101-a2f4-4e38-977d-1c4887dbbd50</UserSecretsId>
|
||||
<Version>1.1.2605.1809</Version>
|
||||
<Version>1.1.2605.1909</Version>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@@ -18,5 +18,9 @@
|
||||
{
|
||||
"outputFile": "wwwroot/css/textures.css",
|
||||
"inputFile": "wwwroot/css/textures.less"
|
||||
},
|
||||
{
|
||||
"outputFile": "Components/Layout/Item.razor.css",
|
||||
"inputFile": "Components/Layout/Item.razor.less"
|
||||
}
|
||||
]
|
||||
@@ -1,6 +1,6 @@
|
||||
<body>
|
||||
<i>LUX - Web Windows MES</i>
|
||||
<h4>Versione: 1.1.2605.1809</h4>
|
||||
<h4>Versione: 1.1.2605.1909</h4>
|
||||
<br /> Note di rilascio:
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@@ -1 +1 @@
|
||||
1.1.2605.1809
|
||||
1.1.2605.1909
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<item>
|
||||
<version>1.1.2605.1809</version>
|
||||
<version>1.1.2605.1909</version>
|
||||
<url>http://nexus.steamware.net/repository/SWS/GPW/stable/GPW.UI.zip</url>
|
||||
<changelog>http://nexus.steamware.net/repository/SWS/GPW/stable/ChangeLog.html</changelog>
|
||||
<mandatory>false</mandatory>
|
||||
|
||||
Reference in New Issue
Block a user