MarcoE/TaskHybrid
1
0
Fork 0
generated from Integry/Template_NetMauiBlazorHybrid
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migliorata UI

Browse Source
This commit is contained in:
Marco Elefante
2025-09-22 12:26:10 +02:00
parent c61093a942
commit ce56e9e57d
12 changed files with 230 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
salesbook.Shared/Components/Pages/Calendar.razor.css
View File

@@ -80,13 +80,12 @@
}
.day {
background: var(--mud-palette-surface);
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
font-size: 0.95rem;
box-shadow: var(--custom-box-shadow);
background: var(--mud-palette-background-gray);
width: 38px;
height: 38px;
display: flex;
@@ -94,7 +93,7 @@
justify-content: center;
align-items: center;
color: var(--mud-palette-text-primary);
border: 1px solid var(--mud-palette-surface);
border: 1px solid var(--mud-palette-background-gray);
margin: 0 auto;
}

3
salesbook.Shared/Components/Pages/Commessa.razor.css
View File

@@ -118,7 +118,7 @@
display: flex;
flex-direction: column;
width: -webkit-fill-available;
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
border-radius: 16px;
overflow: clip;
margin-bottom: 1rem;
@@ -135,7 +135,6 @@
display: flex;
position: relative;
z-index: 1;
background: var(--mud-palette-surface);
}
/* la lineetta */

2
salesbook.Shared/Components/Pages/PersonalInfo.razor.css
View File

@@ -1,5 +1,5 @@
.container-primary-info {
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
width: 100%;
margin-bottom: 2rem;
border-radius: 12px;

337
salesbook.Shared/Components/Pages/User.razor
View File

@@ -96,179 +96,188 @@ else
}
</div>
</div>
<div class="tab-section">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked="@(ActiveTab == 0)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab2" checked="@(ActiveTab == 1)">
<input type="radio" class="tab-toggle" name="tab-toggle" id="tab3" checked="@(ActiveTab == 2)">
<div class="box">
<ul class="tab-list">
<li class="tab-item">
<label class="tab-trigger" for="tab1" @onclick="() => SwitchTab(0)">Contatti</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="tab2" @onclick="() => SwitchTab(1)">Commesse</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="tab3" @onclick="() => SwitchTab(2)">Attivit<69></label>
</li>
</ul>
</div>
<div class="box">
<ul class="tab-list">
<li class="tab-item">
<label class="tab-trigger" for="tab1" @onclick="() => SwitchTab(0)">Contatti</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="tab2" @onclick="() => SwitchTab(1)">Commesse</label>
</li>
<li class="tab-item">
<label class="tab-trigger" for="tab3" @onclick="() => SwitchTab(2)">Attivit<69></label>
</li>
</ul>
</div>
<div class="tab-container">
<!-- Tab Contatti -->
<div class="tab-content" style="display: @(ActiveTab == 0 ? "block" : "none")">
@if (PersRif?.Count > 0)
{
<div class="container-pers-rif">
@foreach (var person in PersRif)
{
<ContactCard Contact="person"/>
@if (person != PersRif.Last())
<div class="tab-container">
<!-- Tab Contatti -->
<div class="tab-content" style="display: @(ActiveTab == 0 ? "block" : "none")">
@if (PersRif?.Count > 0)
{
<div class="container-pers-rif">
@foreach (var person in PersRif)
{
<div class="divider"></div>
<ContactCard Contact="person"/>
@if (person != PersRif.Last())
{
<div class="divider"></div>
}
}
}
</div>
}
</div>
}
<div class="container-button">
<MudButton Class="button-settings infoText"
FullWidth="true"
Size="Size.Medium"
OnClick="OpenPersRifForm"
Variant="Variant.Outlined">
Aggiungi contatto
</MudButton>
<div class="container-button">
<div class="divider"></div>
<MudButton Class="button-settings infoText"
FullWidth="true"
Size="Size.Medium"
StartIcon="@Icons.Material.Rounded.Add"
OnClick="OpenPersRifForm"
Variant="Variant.Outlined">
Aggiungi contatto
</MudButton>
</div>
</div>
<!-- Tab Commesse -->
<div class="tab-content" style="display: @(ActiveTab == 1 ? "block" : "none")">
@if (IsLoadingCommesse)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
}
else if (Commesse?.Count == 0)
{
<NoDataAvailable Text="Nessuna commessa presente"/>
}
else if (Commesse != null)
{
<!-- Filtri e ricerca -->
<div class="input-card clearButton custom-border-bottom">
<MudTextField T="string?"
Placeholder="Cerca..."
Variant="Variant.Text"
@bind-Value="SearchTermCommesse"
AdornmentIcon="@Icons.Material.Rounded.Search"
Adornment="Adornment.Start"
OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()"
DebounceInterval="500"/>
</div>
<div class="commesse-container">
@if (IsLoadingSteps)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-3"/>
}
@foreach (var commessa in CurrentPageCommesse)
{
<div class="commessa-wrapper" style="@(IsLoadingStep(commessa.CodJcom) ? "opacity: 0.7;" : "")">
@if (Steps.TryGetValue(commessa.CodJcom, out var steps))
{
<CommessaCard Steps="@steps" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
}
else
{
<CommessaCard Steps="null" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
@if (IsLoadingStep(commessa.CodJcom))
{
<MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="my-1" Style="height: 2px;"/>
}
}
</div>
}
@if (TotalPagesCommesse > 1)
{
<div class="custom-pagination">
<MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesCommesse"
@bind-Selected="SelectedPageCommesse"
Color="Color.Primary"/>
</div>
<div class="SelectedPageSize">
<MudSelect @bind-Value="SelectedPageSizeCommesse"
Variant="Variant.Text"
Label="Elementi per pagina"
Dense="true"
Style="width: 100%;">
<MudSelectItem Value="5">5</MudSelectItem>
<MudSelectItem Value="10">10</MudSelectItem>
<MudSelectItem Value="15">15</MudSelectItem>
</MudSelect>
</div>
}
</div>
}
</div>
<!-- Tab Attivit<69> -->
<div class="tab-content" style="display: @(ActiveTab == 2 ? "block" : "none")">
@if (ActivityIsLoading)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
}
else if (ActivityList?.Count == 0)
{
<NoDataAvailable Text="Nessuna attivit<69> presente"/>
}
else if (ActivityList != null)
{
<!-- Filtri e ricerca -->
<div class="input-card clearButton custom-border-bottom">
<MudTextField T="string?"
Placeholder="Cerca..."
Variant="Variant.Text"
AdornmentIcon="@Icons.Material.Rounded.Search"
Adornment="Adornment.Start"
@bind-Value="SearchTermActivity"
OnDebounceIntervalElapsed="() => ApplyFiltersActivity()"
DebounceInterval="500"/>
</div>
<div class="attivita-container">
@foreach (var activity in CurrentPageActivity)
{
<ActivityCard ShowDate="true" Activity="activity"/>
}
@if (TotalPagesActivity > 1)
{
<div class="custom-pagination">
<MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesActivity"
@bind-Selected="CurrentPageActivityIndex"
Color="Color.Primary"/>
</div>
<div class="SelectedPageSize">
<MudSelect @bind-Value="SelectedPageSizeActivity"
Variant="Variant.Text"
Label="Elementi per pagina"
Dense="true"
Style="width: 100%;">
<MudSelectItem Value="5">5</MudSelectItem>
<MudSelectItem Value="15">15</MudSelectItem>
<MudSelectItem Value="30">30</MudSelectItem>
</MudSelect>
</div>
}
</div>
}
</div>
</div>
<!-- Tab Commesse -->
<div class="tab-content" style="display: @(ActiveTab == 1 ? "block" : "none")">
@if (IsLoadingCommesse)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
}
else if (Commesse?.Count == 0)
{
<NoDataAvailable Text="Nessuna commessa presente"/>
}
else if (Commesse != null)
{
<!-- Filtri e ricerca -->
<div class="input-card clearButton">
<MudTextField T="string?"
Placeholder="Cerca..."
Variant="Variant.Text"
@bind-Value="SearchTermCommesse"
OnDebounceIntervalElapsed="() => ApplyFiltersCommesse()"
DebounceInterval="500"/>
</div>
<div class="commesse-container">
@if (IsLoadingSteps)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-3"/>
}
@foreach (var commessa in CurrentPageCommesse)
{
<div class="commessa-wrapper" style="@(IsLoadingStep(commessa.CodJcom) ? "opacity: 0.7;" : "")">
@if (Steps.TryGetValue(commessa.CodJcom, out var steps))
{
<CommessaCard Steps="@steps" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
}
else
{
<CommessaCard Steps="null" RagSoc="@Anag.RagSoc" Commessa="commessa"/>
@if (IsLoadingStep(commessa.CodJcom))
{
<MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="my-1" Style="height: 2px;"/>
}
}
</div>
}
@if (TotalPagesCommesse > 1)
{
<div class="custom-pagination">
<MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesCommesse"
@bind-Selected="SelectedPageCommesse"
Color="Color.Primary"/>
</div>
<div class="SelectedPageSize">
<MudSelect @bind-Value="SelectedPageSizeCommesse"
Variant="Variant.Text"
Label="Elementi per pagina"
Dense="true"
Style="width: 100%;">
<MudSelectItem Value="5">5</MudSelectItem>
<MudSelectItem Value="10">10</MudSelectItem>
<MudSelectItem Value="15">15</MudSelectItem>
</MudSelect>
</div>
}
</div>
}
</div>
<!-- Tab Attivit<69> -->
<div class="tab-content" style="display: @(ActiveTab == 2 ? "block" : "none")">
@if (ActivityIsLoading)
{
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7"/>
}
else if (ActivityList?.Count == 0)
{
<NoDataAvailable Text="Nessuna attivit<69> presente"/>
}
else if (ActivityList != null)
{
<!-- Filtri e ricerca -->
<div class="input-card clearButton">
<MudTextField T="string?"
Placeholder="Cerca..."
Variant="Variant.Text"
@bind-Value="SearchTermActivity"
OnDebounceIntervalElapsed="() => ApplyFiltersActivity()"
DebounceInterval="500"/>
</div>
<div class="attivita-container">
@foreach (var activity in CurrentPageActivity)
{
<ActivityCard ShowDate="true" Activity="activity"/>
}
@if (TotalPagesActivity > 1)
{
<div class="custom-pagination">
<MudPagination BoundaryCount="1" MiddleCount="1" Count="@TotalPagesActivity"
@bind-Selected="CurrentPageActivityIndex"
Color="Color.Primary"/>
</div>
<div class="SelectedPageSize">
<MudSelect @bind-Value="SelectedPageSizeActivity"
Variant="Variant.Text"
Label="Elementi per pagina"
Dense="true"
Style="width: 100%;">
<MudSelectItem Value="5">5</MudSelectItem>
<MudSelectItem Value="15">15</MudSelectItem>
<MudSelectItem Value="30">30</MudSelectItem>
</MudSelect>
</div>
}
</div>
}
</div>
<MudScrollToTop Selector="#topPage" VisibleCssClass="visible absolute" TopOffset="100" HiddenCssClass="invisible">
<MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/>
</MudScrollToTop>
</div>
<MudScrollToTop Selector="#topPage" VisibleCssClass="visible absolute" TopOffset="100" HiddenCssClass="invisible">
<MudFab Size="Size.Small" Color="Color.Primary" StartIcon="@Icons.Material.Rounded.KeyboardArrowUp"/>
</MudScrollToTop>
</div>
}

42
salesbook.Shared/Components/Pages/User.razor.css
View File

@@ -1,5 +1,11 @@
.tab-section {
width: 100%;
border-radius: var(--mud-default-borderradius);
background: var(--light-card-background);
}
.container-primary-info {
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
width: 100%;
margin-bottom: 2rem;
border-radius: 16px;
@@ -85,8 +91,9 @@
.container-button {
width: 100%;
box-shadow: var(--custom-box-shadow);
padding: .25rem 0;
background: var(--light-card-background);
padding: 0 !important;
padding-bottom: .5rem !;
border-radius: 16px;
margin-bottom: 0 !important;
}
@@ -138,8 +145,7 @@
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
border-radius: 16px;
max-height: 32vh;
overflow: auto;
@@ -147,7 +153,12 @@
padding: 1rem 0;
}
.container-pers-rif::-webkit-scrollbar { display: none; }
.container-pers-rif::-webkit-scrollbar { width: 3px; }
.container-pers-rif::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 2px;
}
.container-pers-rif .divider {
margin: 0 0 0 3.5rem;
@@ -176,12 +187,14 @@
/*--------------
TabPanel
----------------*/
.box {
display: flex;
flex-direction: column;
width: -webkit-fill-available;
box-shadow: var(--custom-box-shadow);
border-radius: 16px;
background: var(--light-card-background);
border-radius: 20px 20px 0 0;
border-bottom: .1rem solid var(--card-border-color);
overflow: clip;
margin-bottom: 1rem;
}
@@ -197,7 +210,6 @@
display: flex;
position: relative;
z-index: 1;
background: var(--mud-palette-surface);
}
/* la lineetta */
@@ -268,9 +280,7 @@
#tab1:checked ~ .tab-container .tab-content:nth-child(1),
#tab2:checked ~ .tab-container .tab-content:nth-child(2),
#tab3:checked ~ .tab-container .tab-content:nth-child(3) {
display: block;
}
#tab3:checked ~ .tab-container .tab-content:nth-child(3) { display: block; }
@keyframes fade {
from {
@@ -286,10 +296,6 @@
.custom-pagination ::deep ul { padding-left: 0 !important; }
.SelectedPageSize {
width: 100%;
}
.SelectedPageSize { width: 100%; }
.FilterSection {
display: flex;
}
.FilterSection { display: flex; }

17
salesbook.Shared/Components/SingleElements/Card/ActivityCard.razor.css
View File

@@ -5,14 +5,23 @@
padding: .5rem .5rem;
border-radius: 12px;
line-height: normal;
box-shadow: var(--custom-box-shadow);
/*box-shadow: var(--custom-box-shadow);*/
}
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
.activity-card.memo {
border-left: 5px solid var(--mud-palette-info-darken);
background-color: hsl(from var(--mud-palette-info-darken) h s 98%);
}
.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
.activity-card.interna {
border-left: 5px solid var(--mud-palette-success-darken);
background-color: hsl(from var(--mud-palette-success-darken) h s 98%);
}
.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
.activity-card.commessa {
border-left: 5px solid var(--mud-palette-warning);
background-color: hsl(from var(--mud-palette-warning) h s 98%);
}
.activity-left-section {
display: flex;

2
salesbook.Shared/Components/SingleElements/Card/AttachCard.razor.css
View File

@@ -5,7 +5,7 @@
padding: .5rem .5rem;
border-radius: 12px;
line-height: normal;
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
}
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }

10
salesbook.Shared/Components/SingleElements/Card/CommessaCard.razor.css
View File

@@ -5,15 +5,11 @@
padding: .5rem .5rem;
border-radius: 12px;
line-height: normal;
box-shadow: var(--custom-box-shadow);
border-left: 5px solid var(--card-border-color);
background-color: hsl(from var(--card-border-color) h s 98%);
}
.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
.activity-left-section {
display: flex;
align-items: center;

3
salesbook.Shared/Components/SingleElements/Card/ContactCard.razor.css
View File

@@ -2,8 +2,7 @@
width: 100%;
display: flex;
flex-direction: row;
padding: 0 .75rem;
border-radius: 16px;
padding: 0 .5rem;
line-height: normal;
justify-content: space-between;
align-items: center;

3
salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css
View File

@@ -2,7 +2,6 @@
position: relative;
overflow: hidden;
border-radius: var(--mud-default-borderradius);
box-shadow: var(--custom-box-shadow);
width: 100%;
}
@@ -39,7 +38,7 @@
align-items: center;
padding: 12px;
gap: 12px;
background: var(--mud-palette-background);
background: var(--light-card-background);
transition: transform .2s ease;
touch-action: pan-y;
will-change: transform;

2
salesbook.Shared/wwwroot/css/default-theme.css
View File

@@ -8,4 +8,6 @@
--mud-default-borderradius: 20px !important;
--m-page-x: 1rem;
--mh-header: 4rem;
--light-card-background: hsl(from var(--mud-palette-background-gray) h s 97%);
}

24
salesbook.Shared/wwwroot/css/form.css
View File

@@ -5,13 +5,9 @@
margin-bottom: 1rem;
}
.customDialog-form.disable-safe-area .mud-dialog-content {
margin-top: unset !important;
}
.customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
.customDialog-form.disable-safe-area .content {
height: 100% !important;
}
.customDialog-form.disable-safe-area .content { height: 100% !important; }
.customDialog-form .content {
height: calc(100vh - (.6rem + 40px));
@@ -21,17 +17,11 @@
}
@supports (-webkit-touch-callout: none) {
.customDialog-form .content {
height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important;
}
.customDialog-form .content { height: calc(100vh - (.6rem + 40px) - env(safe-area-inset-top)) !important; }
.customDialog-form.disable-safe-area .content {
height: 100% !important;
}
.customDialog-form.disable-safe-area .content { height: 100% !important; }
.customDialog-form.disable-safe-area .mud-dialog-content {
margin-top: unset !important;
}
.customDialog-form.disable-safe-area .mud-dialog-content { margin-top: unset !important; }
}
.customDialog-form .header { padding: 0 !important; }
@@ -53,6 +43,8 @@
padding: .4rem 1rem !important;
}
.input-card.clearButton.custom-border-bottom { border-bottom: .1rem solid var(--card-border-color); }
.input-card > .divider { margin: 0 !important; }
.form-container {
@@ -114,7 +106,7 @@
.container-button {
width: 100%;
box-shadow: var(--custom-box-shadow);
background: var(--light-card-background);
padding: .5rem 0;
border-radius: 12px;
margin-bottom: 2rem;