Improving sorting follow UI

src/frontend/app/app.module.ts

@@ -170,6 +170,7 @@ import {
   ionTimeOutline,
   ionTimerOutline,
   ionTrashOutline,
+  ionUnlinkOutline,
   ionVideocamOutline,
   ionVolumeMediumOutline,
   ionVolumeMuteOutline,
@@ -243,7 +244,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
       ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
       ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
-      ionBrowsersOutline
+      ionBrowsersOutline, ionUnlinkOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css

@@ -54,9 +54,17 @@ app-gallery-filter {
   color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
 }
 
-.grouping-icon{
+.grouping-icon {
   display: inline-block;
   font-size: xx-small;
   vertical-align: top;
   line-height: 1;
 }
+
+.btn-group-follow {
+  float: right;
+  margin-right: -0.25em;
+  transform: translateX(50%);
+  padding: 0;
+  border: none;
+}

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -79,7 +79,17 @@
              role="menu" aria-labelledby="button-alignment">
           <div class="row flex-nowrap">
             <div class="col  p-1 border-end">
-              <h6 class="ps-2">Sorting</h6>
+              <h6 class="ps-2" i18n>Sorting
+                <button class="btn btn-outline-primary btn-group-follow btn-sm"
+                        [class.btn-outline-primary]="groupingFollowSorting"
+                        [class.btn-outline-secondary]="!groupingFollowSorting"
+                        (click)="groupingFollowSorting=!groupingFollowSorting"
+                        title="Grouping follows sorting" i18n-title>
+                  <ng-icon class="" name="ionLinkOutline"></ng-icon>
+                </button>
+
+              </h6>
+
               <div class="row">
                 <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
                      [class.active]="sortingService.sorting.value.method == type.key"
@@ -114,30 +124,7 @@
               </div>
             </div>
             <div class="col p-1">
-              <h6 class="ps-2">Grouping
-                <div class="btn-group  btn-group-sm" dropdown #dropdown="bs-dropdown" placement="bottom right">
-                  <button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
-                          [class.btn-primary]="groupingFollowSorting"
-                          [class.btn-secondary]="!groupingFollowSorting"
-                          aria-controls="dropdown-basic">
-                    <ng-container *ngIf="groupingFollowSorting" i18n>Follow</ng-container>
-                    <ng-container *ngIf="!groupingFollowSorting" i18n>Indep.</ng-container>
-                  </button>
-                  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
-                      role="menu" aria-labelledby="button-basic">
-                    <li class="dropdown-item"
-                        [class.active]="groupingFollowSorting"
-                        (click)="groupingFollowSorting=true"
-                        role="menuitem" i18n>Follow Sorting
-                    </li>
-                    <li class="dropdown-item"
-                        [class.active]="!groupingFollowSorting"
-                        (click)="groupingFollowSorting=false"
-                        role="menuitem" i18n>Independent
-                    </li>
-                  </ul>
-                </div>
-              </h6>
+              <h6 class="ps-2" i18n>Grouping</h6>
               <div class="row">
                 <div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
                      [class.active]="sortingService.grouping.value.method == type.key"

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts

@@ -159,11 +159,10 @@ export class GalleryNavigatorComponent {
       s.ascending = true;
     }
     this.sortingService.setSorting(s);
-
     // you cannot group by random
-    if (this.isDirectionalSort(sorting) ||
+    if (!this.isDirectionalSort(sorting) ||
       // if grouping is disabled, do not update it
-      Utils.isValidEnumInt(GroupByTypes,sorting) || !this.groupingFollowSorting
+      this.sortingService.grouping.value.method === GroupByTypes.NoGrouping || !this.groupingFollowSorting
     ) {
       return;
     }
@@ -176,7 +175,7 @@ export class GalleryNavigatorComponent {
     this.sortingService.setSorting(s);
 
     // if grouping is disabled, do not update it
-    if (this.sortingService.grouping.value.method !== GroupByTypes.NoGrouping || !this.groupingFollowSorting) {
+    if (this.sortingService.grouping.value.method == GroupByTypes.NoGrouping || !this.groupingFollowSorting) {
       return;
     }
     this.sortingService.setGrouping(s as GroupingMethod);