Merge pull request #404 from NeoCoderMatrix86/289-fixed-table-header

Fixed table header
NeoCoderMatrix86 · Dec 16, 2024 · 75cae88 · 75cae88
2 parents f5333c6 + 9e5f8c8
commit 75cae88
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 98 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/Model/Options/ApplicationOptions.cs b/AudioCuesheetEditor/Model/Options/ApplicationOptions.cs
@@ -92,6 +92,8 @@ public String? ViewModename
         public Boolean LinkTracksWithPreviousOne { get; set; } = true;
         public String? ProjectFilename { get; set; } = Projectfile.DefaultFilename;
         public TimeSpanFormat? TimeSpanFormat { get; set; }
+        public Boolean TracksTableSelectionVisible { get; set; } = false;
+        public Boolean TracksTableHeaderPinned { get; set; } = false;
 
         protected override ValidationResult Validate(string property)
         {

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="PinnedTableHeader"
+            FixedTableHeaderChanged="(newValue) => PinnedTableHeader = newValue"
+            TrackSelectionVisible="TrackSelectionVisible" 
+            TrackSelectionVisibleChanged="(newValue) => TrackSelectionVisible = newValue" />
     }
 
-    <Table Bordered Resizable ResizeMode="TableResizeMode.Columns" Narrow>
+    <Table Bordered Resizable ResizeMode="TableResizeMode.Columns" Narrow FixedHeader="PinnedTableHeader" FixedHeaderTableHeight="" FixedHeaderTableMaxHeight="70vh">
         <TableHeader ThemeContrast="ThemeContrast.Light">
             <TableRow>
                 @if ((_sessionStateContainer.CurrentViewMode == ViewMode.ViewModeFull) && (TrackSelectionVisible))
@@ -171,10 +102,10 @@ along with Foobar.  If not, see
     ModalDialog? modalDialog;
     EditTrackModal? modalTrackEdit;
     List<Track> selectedTracks = new();
-    Boolean _trackSelectionVisible = false;
     Validations? validations;
     Boolean revalidate = false;
     List<Track> TracksAttachedToValidateablePropertyChanged = new();
+    ApplicationOptions? applicationOptions;
 
     [Parameter]
     public AudioPlayer? AudioPlayer { get; set; }
@@ -199,28 +130,52 @@ along with Foobar.  If not, see
 
     public Boolean TrackSelectionVisible
     {
-        get => _trackSelectionVisible;
+        get
+        {
+            if (applicationOptions != null)
+            {
+                return applicationOptions.TracksTableSelectionVisible;
+            }
+            return false;
+        }
         set
         {
-            _trackSelectionVisible = value;
+            _localStorageOptionsProvider.SaveOptionsValue<ApplicationOptions>(x => x.TracksTableSelectionVisible, value);
             selectedTracks = new();
         }
     }
 
+    public Boolean PinnedTableHeader
+    {
+        get
+        {
+            if (applicationOptions != null)
+            {
+                return applicationOptions.TracksTableHeaderPinned;
+            }
+            return false;
+        }
+        set
+        {
+            _localStorageOptionsProvider.SaveOptionsValue<ApplicationOptions>(x => x.TracksTableHeaderPinned, value);
+        }
+    }
+
     public void Dispose()
     {
         _localizationService.LocalizationChanged -= LocalizationService_LocalizationChanged;
         _sessionStateContainer.CuesheetChanged -= SessionStateContainer_CuesheetChanged;
         _sessionStateContainer.ImportCuesheetChanged -= SessionStateContainer_ImportCuesheetChanged;
         _sessionStateContainer.Cuesheet.TracksRemoved -= Cuesheet_TracksRemoved;
         _sessionStateContainer.Cuesheet.TracksAdded -= Cuesheet_TracksAdded;
+        _localStorageOptionsProvider.OptionSaved -= LocalStorageOptionsProvider_OptionsSaved;
         DetachTrackFromValidateablePropertyChanged();
         DetachCuesheetFromSplitPointsAddedRemoved();
     }
 
-    protected override void OnInitialized()
+    protected override async Task OnInitializedAsync()
     {
-        base.OnInitialized();
+        await base.OnInitializedAsync();
 
         _localizationService.LocalizationChanged += LocalizationService_LocalizationChanged;
 
@@ -232,6 +187,9 @@ along with Foobar.  If not, see
 
         AttachTracksToValidateablePropertyChanged();
         AttachCuesheetToSplitPointsAddedRemoved();
+
+        applicationOptions = await _localStorageOptionsProvider.GetOptions<ApplicationOptions>();
+        _localStorageOptionsProvider.OptionSaved += LocalStorageOptionsProvider_OptionsSaved;
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -245,9 +203,8 @@ along with Foobar.  If not, see
         }
     }
 
-    async Task OnAddTrackClicked()
+    void OnAddTrackClicked()
     {
-        var applicationOptions = await _localStorageOptionsProvider.GetOptions<ApplicationOptions>();
         var newTrack = new Track();
         Cuesheet?.AddTrack(newTrack, applicationOptions);
         _traceChangeManager.TraceChanges(newTrack);
@@ -471,4 +428,13 @@ along with Foobar.  If not, see
                 break;
         }
     }
+
+    void LocalStorageOptionsProvider_OptionsSaved(object? sender, IOptions options)
+    {
+        if (options is ApplicationOptions applicationOption)
+        {
+            applicationOptions = applicationOption;
+            StateHasChanged();
+        }
+    }
 }