Migliorie grafiche per gli articoli

SteUp.Shared/Components/SingleElements/Modal/ModalFormScheda.razor

@@ -53,12 +53,15 @@
 
                 @if (FileLoading)
                 {
+                    <CardFormModal Title="Immagini">
                         <div class="container-attached">
                             <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-3"/>
                         </div>
+                    </CardFormModal>
                 }
                 else if (!AttachedList.IsNullOrEmpty())
                 {
+                    <CardFormModal Title="Immagini">
                         <div class="container-attached">
                             <div class="scroll-attached">
                                 @foreach (var item in AttachedList!.Select((p, index) => new { p, index }))
@@ -79,11 +82,12 @@
                                 }
                             </div>
                         </div>
+                    </CardFormModal>
                 }
 
                 @if (!IsView)
                 {
-                    <div class="container-button">
+                    <div class="container-button ripple-container">
                         <MudButton Class="button-settings green-icon"
                                    FullWidth="true"
                                    StartIcon="@Icons.Material.Rounded.AttachFile"
@@ -95,6 +99,28 @@
                     </div>
                 }
 
+                <CardFormModal Title="Articoli">
+                    <div class="input-manual-barcode">
+                        <MudTextField FullWidth="true" ReadOnly="IsView" T="string?" Variant="Variant.Text"
+                                      @bind-Value="ManualBarcode" Placeholder="Digita manualmente il codice"/>
+                        <MudIconButton Color="Color.Primary" Size="Size.Small" Icon="@Icons.Material.Rounded.Send" />
+                    </div>
+                </CardFormModal>
+                
+                @if (!IsView)
+                {
+                    <div class="container-button ripple-container">
+                        <MudButton Class="button-settings red-icon"
+                                   FullWidth="true"
+                                   StartIcon="@Icons.Material.Rounded.Balance"
+                                   Size="Size.Medium"
+                                   OnClick="@OpenAddAttached"
+                                   Variant="Variant.Outlined">
+                            Consulta articoli
+                        </MudButton>
+                    </div>
+                }
+
                 <CardFormModal Title="Scadenza">
                     <MudSelectExtended FullWidth="true" ReadOnly="@IsView" T="int" Variant="Variant.Text"
                                        @bind-Value="@Scheda.Scadenza" @bind-Value:after="OnAfterChangeValue">
@@ -118,7 +144,7 @@
                 </CardFormModal>
 
                 <div class="container-button">
-                    <MudButton Class="button-settings blue-icon"
+                    <MudButton Class="button-settings primary-icon"
                                FullWidth="true"
                                StartIcon="@Icons.Material.Rounded.Description"
                                Size="Size.Medium"
@@ -145,6 +171,8 @@
 
     private bool IsView => !NetworkService.ConnectionAvailable;
 
+    private string ManualBarcode { get; set; }
+
     //Overlay
     private bool VisibleOverlay { get; set; }
     private bool SuccessAnimation { get; set; }

SteUp.Shared/Components/SingleElements/Modal/ModalFormScheda.razor.css

@@ -1,5 +1,16 @@
 .container-attached {
     width: 100%;
+    margin-bottom: 1rem;
+}
+
+.container-attached .divider {
+    margin: unset;
+}
+
+.input-manual-barcode {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
 }
 
 .scroll-attached {

SteUp.Shared/wwwroot/css/app.css

@@ -168,8 +168,7 @@ h1:focus {
 .divider {
     display: block;
     width: 100%;
-    border: .05rem solid var(--card-border-color);
+    border: .05rem solid var(--mud-palette-lines-inputs);
-    margin: 1rem 0;
 }
 
 .pb-safe-area {

SteUp.Shared/wwwroot/css/custom-mudBlazor.css

@@ -36,3 +36,19 @@
 .mud-expansion-panels {
     width: 100%;
 }
+
+.ripple-container .mud-ripple-effect {
+    display: none !important;
+}
+
+.ripple-container .mud-ripple-effect-expanding {
+    display: none !important;
+}
+
+.ripple-container .mud-button:focus-visible, .ripple-container .mud-button:active{
+    background-color: unset !important;
+}
+
+.ripple-container .mud-button-outlined:focus-visible, .ripple-container .mud-button-outlined:active{
+    background-color: unset !important;
+}

SteUp.Shared/wwwroot/css/form.css

@@ -144,6 +144,10 @@
     margin-bottom: 2rem;
 }
 
+.container-button.remove-backgroud {
+    background: unset !important;
+}
+
 .container-button.mud-elevation-1 {
     background: unset !important;
 }
@@ -175,8 +179,8 @@
     color: var(--mud-palette-dark);
 }
 
-.container-button .button-settings.blue-icon .mud-icon-root {
+.container-button .button-settings.primary-icon .mud-icon-root {
-    border: 1px solid var(--mud-palette-primary);
+    border: 1px solid hsl(from var(--mud-palette-primary) h s 95%);
     background: hsl(from var(--mud-palette-primary-lighten) h s 95%);
     color: var(--mud-palette-primary-darken);
 }
@@ -199,6 +203,10 @@
     font-size: 1rem;
 }
 
+.container-button.ripple-container{
+    overflow: clip;
+}
+
 .container-button .button-settings.exit {
     padding: 0;
 }