Add disabled "Show as a image" placeholder button

CSCfi · Feb 27, 2024 · e0f4103 · e0f4103
1 parent 9ddd66f
commit e0f4103
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 26 deletions.
diff --git a/src/app/portal/components/results/publications2/publications2.component.html b/src/app/portal/components/results/publications2/publications2.component.html
@@ -600,8 +600,24 @@ <h2>Julkaisut - {{total$ | async}}</h2>
     </div>
   </ng-container>
 
-  <div class='search-filters' style='background-color: #e8e8f5; padding: 16px' #filterDialog2>
-    <ng-container *ngTemplateOutlet="searchFilters"></ng-container>
+  <div class='search-filters' >
+    <!-- showAsVisual = $localize`:@@showAsVisual:Näytä kuvana`; -->
+    <!-- *ngIf="(tab === 'publications' || tab === 'fundings') && !mobile" -->
+
+    <div style='background-color: #e8e8f5; padding: 15px 0; margin-bottom: 10px'>
+      <div class="justify-content-center align-items-center d-none d-lg-flex visual-button-container">
+        <app-primary-action-button
+          content="Näytä kuvana"
+          i18n-content="@@showAsVisual"
+          [icon]="faChartBar"
+          [disabled]="true"
+        ></app-primary-action-button>
+      </div>
+    </div>
+
+    <div style='background-color: #e8e8f5; padding: 16px'>
+      <ng-container *ngTemplateOutlet="searchFilters"></ng-container>
+    </div>
   </div>
 
   <div class='search-summary'>

diff --git a/src/app/portal/components/results/publications2/publications2.component.scss b/src/app/portal/components/results/publications2/publications2.component.scss
@@ -97,21 +97,30 @@ cdk-table {
 }
 
 /* Add some spacing and border to the cells */
-cdk-header-cell, cdk-cell {
-  // padding: 16px;
+cdk-cell {
   padding: 1rem 0.5rem;
+  display: table-cell;
+  text-align: start;
+}
 
-  // border-bottom: 1px solid #e0e0e0;
-  display: table-cell; /* This ensures they behave like traditional table cells */
-
+cdk-header-cell {
+  padding: 0.25rem 0.5rem 1rem 0.5rem;
+  display: table-cell;
   text-align: start;
+
+  position: sticky;
+  top: 0;
+  background: white;
+  z-index: 1;
 }
 
 /* Define the header row and data row to behave like traditional table rows */
 cdk-header-row, cdk-row {
   display: table-row;
 }
 
+
+
 /* Define columns to ensure they take equal widths - adjust as required */
 /*[cdkColumnDef="publicationName"] {
   width: 35%;

diff --git a/src/app/portal/components/results/publications2/publications2.component.ts b/src/app/portal/components/results/publications2/publications2.component.ts
@@ -37,7 +37,7 @@ import { FirstDigitPipe } from '@shared/pipes/first-digit.pipe';
 import { FirstLetterPipe } from '@shared/pipes/first-letter.pipe';
 import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout';
 import { ColumnSorterComponent } from '@shared/components/column-sorter/column-sorter.component';
-import { faSlidersH } from '@fortawesome/free-solid-svg-icons';
+import { faChartBar, faSlidersH } from '@fortawesome/free-solid-svg-icons';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@@ -61,7 +61,6 @@ export class Publications2Component implements OnDestroy {
   breakpointObserver = inject(BreakpointObserver);
   dialog = inject(Dialog);
 
-
   keywords = "";
   page = 1;
   size = 10;
@@ -72,20 +71,6 @@ export class Publications2Component implements OnDestroy {
 
   @ViewChild('searchDialog') dialogTemplate: TemplateRef<any>;
 
-  openDialog() {
-    this.dialogRef = this.dialog.open(this.dialogTemplate, {
-      panelClass: 'fullscreen-panel',
-    });
-
-    this.dialogRef.closed.subscribe(() => {
-      console.log('The dialog2 was closed');
-    });
-  }
-
-  closeDialog() {
-    this.dialogRef?.close();
-  }
-
   labelText = {
     yearOfPublication: $localize`:@@yearOfPublication:Julkaisuvuosi`,
     organization: $localize`:@@organization:Organisaatio`,
@@ -115,10 +100,26 @@ export class Publications2Component implements OnDestroy {
     {id: "I", text: $localize`:@@publicationClassI:Audiovisuaaliset julkaisut ja tieto- ja viestintätekniset sovellukset`},
   ];
 
-
   filterCount$ = new BehaviorSubject(0);
   filterCountLookup: Record<string, number> = {};
 
+  faSlidersH = faSlidersH;
+  faChartBar = faChartBar;
+
+  openDialog() {
+    this.dialogRef = this.dialog.open(this.dialogTemplate, {
+      panelClass: 'fullscreen-panel',
+    });
+
+    this.dialogRef.closed.subscribe(() => {
+      console.log('The dialog2 was closed');
+    });
+  }
+
+  closeDialog() {
+    this.dialogRef?.close();
+  }
+
   updateFilterCount(key: string, value: number) {
     this.filterCountLookup[key] = value;
     const count = Object.values(this.filterCountLookup).reduce((a, b) => a + b, 0);
@@ -565,8 +566,6 @@ export class Publications2Component implements OnDestroy {
   clamp(value: number, min: number, max: number) {
     return Math.min(Math.max(value, min), max);
   }
-
-  faSlidersH = faSlidersH;
 }
 
 export class PublicationDataSource extends DataSource<HighlightedPublication> {