Replaced categories dropdown with select buttons

LarsBergqvist · Nov 21, 2023 · bfdae6d · bfdae6d
1 parent 1257ec3
commit bfdae6d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 53 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -10,7 +10,6 @@ import { AccordionModule } from 'primeng/accordion';
 import { MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
-import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
 import { SidebarModule } from 'primeng/sidebar';
 import { TableModule } from 'primeng/table';
@@ -36,6 +35,7 @@ import { HttpInterceptorService } from './services/http-interceptor.service';
 import { LoggingService } from './services/logging.service';
 import { MessageBrokerService } from './services/message-broker.service';
 import { TranslatePipe } from './translations/translate.pipe';
+import { SelectButtonModule } from 'primeng/selectbutton';
 
 registerLocaleData(locale);
 
@@ -70,8 +70,8 @@ registerLocaleData(locale);
     ButtonModule,
     InputTextModule,
     CheckboxModule,
-    DropdownModule,
-    AccordionModule
+    AccordionModule,
+    SelectButtonModule
   ],
   providers: [
     { provide: LOCALE_ID, useValue: 'sv' },

diff --git a/src/app/components/programs/programs-list.component.html b/src/app/components/programs/programs-list.component.html
@@ -3,20 +3,27 @@
         [globalFilterFields]="['name','channel.name','description']" styleClass="sr-table">
         <ng-template pTemplate="caption">
             <span class="p-d-flex">
-                <span class="fav-chk">
-                    <p-checkbox (onChange)="onFilterFavClicked($event, dt2)" [(ngModel)]="localState.showOnlyFavs"
-                        [binary]="true" label="{{'OnlyFavs' | translate }}" class="fav-checkbox"></p-checkbox>
-                </span>
-                <span class="cat-dd">
-                    <p-dropdown [options]="categoryOptions" (onChange)="onCategoryChanged($event, dt2)"
-                        placeholder="Category" [(ngModel)]="localState.selectedCategory"></p-dropdown>
-                </span>
-                <span class="p-input-icon-left p-ml-auto">
-                    <i class="pi pi-search"></i>
-                    <input pInputText class="p-inputtext-sm kw-input" type="text" [(ngModel)]="localState.searchString"
-                        (input)="dt2.filterGlobal($event.target.value, 'contains')"
-                        placeholder="{{'SearchKeyword' | translate | uppercase}}" />
-                </span>
+                <div [ngStyle]="{'margin-bottom': '10px' }">
+                    <span class="fav-chk">
+                        <p-checkbox (onChange)="onFilterFavClicked($event, dt2)" [(ngModel)]="localState.showOnlyFavs"
+                            [binary]="true" label="{{'OnlyFavs' | translate }}" class="fav-checkbox"></p-checkbox>
+                    </span>
+                    <span class="p-input-icon-left p-ml-auto" [ngStyle]="{'margin-left': '10px' }">
+                        <i class="pi pi-search"></i>
+                        <input pInputText class="p-inputtext-sm kw-input" type="text" [(ngModel)]="localState.searchString"
+                            (input)="dt2.filterGlobal($event.target.value, 'contains')"
+                            placeholder="{{'SearchKeyword' | translate | uppercase}}" />
+                    </span>    
+                </div>
+
+                <p-accordion [activeIndex]="0">
+                    <p-accordionTab header="{{'Categories' | translate}}">
+                        <p-selectButton [options]="categoryOptions" [(ngModel)]="localState.selectedCategory" optionLabel="label" optionValue="value"
+                        (onChange)="onCategoryChanged($event, dt2)"
+                        ></p-selectButton>
+                            </p-accordionTab>
+                </p-accordion>
+
             </span>
         </ng-template>
         <ng-template pTemplate="header">

diff --git a/src/app/translations/res-en.json b/src/app/translations/res-en.json
@@ -55,5 +55,6 @@
   "AudioPrefixChannel": "Live",
   "AudioPrefixEpisode": "Episode",
   "LinkToProgramDetailsText": "Show details and all episodes for ",
-  "ShowOnlyCurrentAndFuture": "Show only current and upcoming"
+  "ShowOnlyCurrentAndFuture": "Show only current and upcoming",
+  "Categories": "Categories"
 }
diff --git a/src/app/translations/res-sv.json b/src/app/translations/res-sv.json
@@ -55,5 +55,6 @@
   "AudioPrefixChannel": "Direkt",
   "AudioPrefixEpisode": "Avsnitt",
   "LinkToProgramDetailsText": "Visa detaljer och alla avsnitt för ",
-  "ShowOnlyCurrentAndFuture": "Visa bara pågående och kommande"
+  "ShowOnlyCurrentAndFuture": "Visa bara pågående och kommande",
+  "Categories": "Kategorier"
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -10,7 +10,6 @@
 
 .play-button {
   font-size: base.$iconsize;
-//  padding: 5px;
 }
 
 .clickable {
@@ -47,21 +46,10 @@
   max-width: 300px;
 }
 
-.cat-dd {
-  margin-left: 100px;
-  max-width: 150px;
-  margin-right: 5px;
-}
 @media only screen and (max-width: 800px) {
   .kw-input {
     max-width: 180px;
   }
-  .cat-dd {
-    margin-left: 30px;
-    .p-dropdown.p-component {
-      max-width: 200px;
-    }
-  }
 }
 
 @media only screen and (max-width: 960px) {
@@ -89,12 +77,6 @@
   .kw-input {
     max-width: 150px;
   }
-  .cat-dd {
-    margin-left: 10px;
-    .p-dropdown.p-component {
-      max-width: 200px;
-    }
-  }
   .desc-col {
     border: none !important;
   }
@@ -104,24 +86,11 @@
   .kw-input {
     max-width: 100px;
   }
-  .cat-dd {
-    margin-left: 10px;
-    .p-dropdown.p-component {
-      max-width: 100px;
-    }
-  }
 }
 @media only screen and (max-width: 320px) {
   .kw-input {
     max-width: 80px;
   }
-
-  .cat-dd {
-    margin-left: 2px;
-    .p-dropdown.p-component {
-      max-width: 80px;
-    }
-  }
 }
 
 .details-btn {
@@ -171,9 +140,6 @@
 .bottom-padding {
   padding-bottom: 100px;
 }
-.p-dropdown-label.p-inputtext.ng-star-inserted {
-  padding-top: 2px !important;
-}
 
 .onlycurrentandfuture-chk {
   padding: 10px;
@@ -193,3 +159,8 @@
   padding-top: 5px;
   padding-bottom: 5px;
 }
+
+.p-selectbutton > * {
+  border-radius: 10px;
+  margin: 5px;
+}