Making pin tableheader possible

NeoCoderMatrix86 · Dec 13, 2024 · ea5d893 · ea5d893
1 parent f5333c6
commit ea5d893
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 94 deletions.
diff --git a/AudioCuesheetEditor/AudioCuesheetEditor.csproj b/AudioCuesheetEditor/AudioCuesheetEditor.csproj
@@ -51,6 +51,8 @@
     <Content Remove="Resources\Localization\Index\en.json" />
     <Content Remove="Resources\Localization\TrackLinkControl\de.json" />
     <Content Remove="Resources\Localization\TrackLinkControl\en.json" />
+    <Content Remove="Resources\Localization\TrackListControlButtons\de.json" />
+    <Content Remove="Resources\Localization\TrackListControlButtons\en.json" />
     <Content Remove="Resources\Localization\TrackListItemControlColumn\de.json" />
     <Content Remove="Resources\Localization\TrackListItemControlColumn\en.json" />
     <Content Remove="Resources\Localization\TrackListItem\de.json" />
@@ -98,6 +100,8 @@
     <EmbeddedResource Include="Resources\Localization\EditRecordOptions\en.json" />
     <EmbeddedResource Include="Resources\Localization\TrackLinkControl\de.json" />
     <EmbeddedResource Include="Resources\Localization\TrackLinkControl\en.json" />
+    <EmbeddedResource Include="Resources\Localization\TrackListControlButtons\de.json" />
+    <EmbeddedResource Include="Resources\Localization\TrackListControlButtons\en.json" />
     <EmbeddedResource Include="Resources\Localization\TrackListItemControlColumn\de.json" />
     <EmbeddedResource Include="Resources\Localization\TrackListItemControlColumn\en.json" />
     <EmbeddedResource Include="Resources\Localization\TrackListItem\de.json" />

diff --git a/AudioCuesheetEditor/Resources/Localization/TrackList/de.json b/AudioCuesheetEditor/Resources/Localization/TrackList/de.json
@@ -1,13 +1,8 @@
 {
   "culture": "de",
   "translations": {
-    "Add new track": "Neuen Titel hinzufügen",
-    "Display selection of tracks": "Auswahl einblenden",
     "Selection": "Auswahl",
     "Select all": "Wählen Sie alle Spuren für Mehrfachspuroperationen aus",
-    "Delete selected tracks": "Ausgewählte löschen",
-    "Hide selection of tracks": "Auswahl ausblenden",
-    "Delete all tracks": "Alle Titel löschen",
     "Controls": "Steuerung",
     "Artist": "Künstler",
     "Title": "Titel",
@@ -19,7 +14,6 @@
     "Save changes": "Änderungen speichern",
     "Confirmation required": "Bestätigung erforderlich",
     "Do you really want to delete all tracks?": "Möchten Sie wirklich alle Titel löschen?",
-    "Edit selected tracks": "Ausgewählte Titel bearbeiten",
     "Validation errors": "Validierungsfehler"
   }
 }
diff --git a/AudioCuesheetEditor/Resources/Localization/TrackList/en.json b/AudioCuesheetEditor/Resources/Localization/TrackList/en.json
@@ -1,12 +1,8 @@
 {
   "culture": "en",
   "translations": {
-    "Add new track": "Add new track",
-    "Display selection of tracks": "Display selection",
     "Selection": "Selection",
     "Select all": "Select all track for multiple track operations",
-    "Delete selected tracks": "Delete selected",
-    "Hide selection of tracks": "Hide selection",
     "Delete all tracks": "Delete all tracks",
     "Controls": "Controls",
     "Artist": "Artist",
@@ -19,7 +15,6 @@
     "Save changes": "Save changes",
     "Confirmation required": "Confirmation required",
     "Do you really want to delete all tracks?": "Do you really want to delete all tracks?",
-    "Edit selected tracks": "Edit selected tracks",
     "Validation errors": "Validation errors"
   }
 }
diff --git a/AudioCuesheetEditor/Resources/Localization/TrackListControlButtons/de.json b/AudioCuesheetEditor/Resources/Localization/TrackListControlButtons/de.json
@@ -0,0 +1,13 @@
+{
+  "culture": "de",
+  "translations": {
+    "Add new track": "Neuen Titel hinzufügen",
+    "Display selection of tracks": "Auswahl einblenden",
+    "Delete selected tracks": "Ausgewählte löschen",
+    "Hide selection of tracks": "Auswahl ausblenden",
+    "Delete all tracks": "Alle Titel löschen",
+    "Edit selected tracks": "Ausgewählte Titel bearbeiten",
+    "Pin table header": "Tabellenkopf anheften",
+    "Pin the table header to top, displaying all controls above the table while scrolling through the records": "Tabellenkopf anheften, um während des scrollens alle Buttons oberhalb anzuordnen"
+  }
+}
diff --git a/AudioCuesheetEditor/Resources/Localization/TrackListControlButtons/en.json b/AudioCuesheetEditor/Resources/Localization/TrackListControlButtons/en.json
@@ -0,0 +1,13 @@
+{
+  "culture": "en",
+  "translations": {
+    "Add new track": "Add new track",
+    "Display selection of tracks": "Display selection",
+    "Delete selected tracks": "Delete selected",
+    "Hide selection of tracks": "Hide selection",
+    "Delete all tracks": "Delete all tracks",
+    "Edit selected tracks": "Edit selected tracks",
+    "Pin table header": "Pin table header",
+    "Pin the table header to top, displaying all controls above the table while scrolling through the records": "Pin the table header to top, displaying all controls above the table while scrolling through the records"
+  }
+}
diff --git a/AudioCuesheetEditor/Shared/TrackList/TrackList.razor b/AudioCuesheetEditor/Shared/TrackList/TrackList.razor
@@ -42,88 +42,19 @@ along with Foobar.  If not, see
                 }
             }
         </Alert>
-        <Buttons Role="ButtonsRole.Toolbar">
-            <Buttons Margin="Margin.Is2.FromEnd">
-                <Tooltip Text="@_localizer["Add new track"]">
-                    <Button Color="Color.Primary" Clicked="OnAddTrackClicked" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
-                            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
-                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
-                        </svg>
-                        <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Inline.OnWidescreen">
-                            @_localizer["Add new track"]
-                        </Span>
-                    </Button>
-                </Tooltip>
-            </Buttons>
-            <Buttons Margin="Margin.Is2.FromEnd">
-                @if (TrackSelectionVisible == false)
-                {
-                    <Tooltip Text="@_localizer["Display selection of tracks"]">
-                        <Button Color="Color.Info" Clicked="() => TrackSelectionVisible = !TrackSelectionVisible" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
-                                <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z" />
-                                <path d="M8.354 10.354l7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z" />
-                            </svg>
-                            <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.None.OnWidescreen.Inline.OnFullHD">
-                                @_localizer["Display selection of tracks"]
-                            </Span>
-                        </Button>
-                    </Tooltip>
-                }
-                else
-                {
-                    <Tooltip Text="@_localizer["Hide selection of tracks"]">
-                        <Button Color="Color.Info" Clicked="() => TrackSelectionVisible = !TrackSelectionVisible" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
-                                <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z" />
-                                <path d="M8.354 10.354l7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z" />
-                            </svg>
-                            <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.None.OnWidescreen.Inline.OnFullHD">
-                                @_localizer["Hide selection of tracks"]
-                            </Span>
-                        </Button>
-                    </Tooltip>
-                }
-            </Buttons>
-            <Buttons>
-                <Tooltip Text="@_localizer["Edit selected tracks"]">
-                    <Button Color="Color.Secondary" Clicked="EditSelectedTracksClicked" Disabled="selectedTracks.Count == 0" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stickies" viewBox="0 0 16 16">
-                            <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"/>
-                            <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"/>
-                        </svg>
-                        <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Inline.OnWidescreen">
-                            @_localizer["Edit selected tracks"]
-                        </Span>
-                    </Button>
-                </Tooltip>
-                <Tooltip Text="@_localizer["Delete selected tracks"]">
-                    <Button Color="Color.Warning" Clicked="DeleteSelectedTracksClicked" Disabled="selectedTracks.Count == 0" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
-                            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
-                        </svg>
-                        <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.None.OnWidescreen.Inline.OnFullHD">
-                            @_localizer["Delete selected tracks"]
-                        </Span>
-                    </Button>
-                </Tooltip>
-                <Tooltip Text="@_localizer["Delete all tracks"]">
-                    <Button Color="Color.Danger" Clicked="OnDeleteAllTracksClicked" Margin="Margin.Is2.OnY.OnMobile.Is0.OnTablet">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
-                            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
-                        </svg>
-                        <Span Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.None.OnWidescreen.Inline.OnFullHD">
-                            @_localizer["Delete all tracks"]
-                        </Span>
-                    </Button>
-                </Tooltip>
-            </Buttons>
-        </Buttons>
-        <br />
+        <TrackListControlButtons 
+            SelectedTracks="selectedTracks" 
+            AddButtonClicked="OnAddTrackClicked" 
+            EditSelectedTracksClicked="EditSelectedTracksClicked" 
+            DeleteSelectedTracksClicked="DeleteSelectedTracksClicked" 
+            DeleteAllTracksClicked="OnDeleteAllTracksClicked" 
+            FixedTableHeader="fixedTableHeader" 
+            FixedTableHeaderChanged="(newValue) => fixedTableHeader = newValue" 
+            TrackSelectionVisible="TrackSelectionVisible" 
+            TrackSelectionVisibleChanged="(newValue) => TrackSelectionVisible = newValue" />
     }
 
-    <Table Bordered Resizable ResizeMode="TableResizeMode.Columns" Narrow>
+    <Table Bordered Resizable ResizeMode="TableResizeMode.Columns" Narrow FixedHeader="fixedTableHeader" FixedHeaderTableHeight="" FixedHeaderTableMaxHeight="70vh">
         <TableHeader ThemeContrast="ThemeContrast.Light">
             <TableRow>
                 @if ((_sessionStateContainer.CurrentViewMode == ViewMode.ViewModeFull) && (TrackSelectionVisible))
@@ -168,13 +99,15 @@ along with Foobar.  If not, see
 <EditTrackModal @ref="modalTrackEdit" SaveClicked="() => StateHasChanged()" />
 
 @code {
+    //TODO: Save trackselectionvisible and fixedheader to applicationOptions
     ModalDialog? modalDialog;
     EditTrackModal? modalTrackEdit;
     List<Track> selectedTracks = new();
-    Boolean _trackSelectionVisible = false;
+    Boolean trackSelectionVisible = false;
     Validations? validations;
     Boolean revalidate = false;
     List<Track> TracksAttachedToValidateablePropertyChanged = new();
+    Boolean fixedTableHeader = false;
 
     [Parameter]
     public AudioPlayer? AudioPlayer { get; set; }
@@ -199,10 +132,10 @@ along with Foobar.  If not, see
 
     public Boolean TrackSelectionVisible
     {
-        get => _trackSelectionVisible;
+        get => trackSelectionVisible;
         set
         {
-            _trackSelectionVisible = value;
+            trackSelectionVisible = value;
             selectedTracks = new();
         }
     }