111321: Made ComColPageContentComponent themeable

alexandrevryghem · Jan 26, 2024 · 106182d · 106182d
1 parent ca86437
commit 106182d
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 21 deletions.
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -11,11 +11,11 @@
             [title]="parentContext.type+'.page.handle'" >
         </ds-themed-comcol-page-handle>
         <!-- Introductory text -->
-        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
-        </ds-comcol-page-content>
+        <ds-themed-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
+        </ds-themed-comcol-page-content>
         <!-- News -->
-        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
-        </ds-comcol-page-content>
+        <ds-themed-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
+        </ds-themed-comcol-page-content>
       </header>
       <!-- Browse-By Links -->
       <ds-themed-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-themed-comcol-page-browse-by>
@@ -49,8 +49,8 @@
     <div >
 
       <!-- Copyright -->
-      <ds-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
-      </ds-comcol-page-content>
+      <ds-themed-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
+      </ds-themed-comcol-page-content>
     </div>
   </footer>
 </ng-container>

diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
@@ -22,16 +22,16 @@
                           [title]="'collection.page.handle'" >
                   </ds-themed-comcol-page-handle>
                   <!-- Introductory text -->
-                  <ds-comcol-page-content
+                  <ds-themed-comcol-page-content
                           [content]="collection.introductoryText"
                           [hasInnerHtml]="true">
-                  </ds-comcol-page-content>
+                  </ds-themed-comcol-page-content>
                   <!-- News -->
-                  <ds-comcol-page-content
+                  <ds-themed-comcol-page-content
                           [content]="collection.sidebarText"
                           [hasInnerHtml]="true"
                           [title]="'collection.page.news'">
-                  </ds-comcol-page-content>
+                  </ds-themed-comcol-page-content>
                 </header>
                 <div class="pl-2 space-children-mr">
                   <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
@@ -65,10 +65,10 @@ <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
             </section>
             <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
           <!-- Copyright -->
-          <ds-comcol-page-content
+          <ds-themed-comcol-page-content
                       [content]="collection.copyrightText"
                       [hasInnerHtml]="true">
-          </ds-comcol-page-content>
+          </ds-themed-comcol-page-content>
         </footer>
       </div>
     </div>

diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
@@ -13,12 +13,12 @@
           <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
           </ds-themed-comcol-page-handle>
           <!-- Introductory text -->
-          <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
-          </ds-comcol-page-content>
+          <ds-themed-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
+          </ds-themed-comcol-page-content>
           <!-- News -->
-          <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
+          <ds-themed-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
             [title]="'community.page.news'">
-          </ds-comcol-page-content>
+          </ds-themed-comcol-page-content>
         </header>
         <div class="pl-2 space-children-mr">
           <ds-dso-page-edit-button *ngIf="isCommunityAdmin$ | async" [pageRoute]="communityPageRoute$ | async" [dso]="communityPayload" [tooltipMsg]="'community.page.edit'"></ds-dso-page-edit-button>
@@ -35,8 +35,8 @@
       </section>
       <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
         <!-- Copyright -->
-        <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
-        </ds-comcol-page-content>
+        <ds-themed-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
+        </ds-themed-comcol-page-content>
       </footer>
     </div>
   </div>

diff --git a/src/app/shared/comcol/comcol-page-content/comcol-page-content.component.ts b/src/app/shared/comcol/comcol-page-content/comcol-page-content.component.ts
@@ -13,13 +13,19 @@ import { Component, Input } from '@angular/core';
 })
 export class ComcolPageContentComponent {
 
-  // Optional title
+  /**
+   * Optional title
+   */
   @Input() title: string;
 
-  // The content to render. Might be html
+  /**
+   * The content to render. Might be html
+   */
   @Input() content: string;
 
-  // flag whether the content contains html syntax or not
+  /**
+   * flag whether the content contains html syntax or not
+   */
   @Input() hasInnerHtml: boolean;
 
 }
diff --git a/src/app/shared/comcol/comcol-page-content/themed-comcol-page-content.component.ts b/src/app/shared/comcol/comcol-page-content/themed-comcol-page-content.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../theme-support/themed.component';
+import { ComcolPageContentComponent } from './comcol-page-content.component';
+
+/**
+ * Themed wrapper for {@link ComcolPageContentComponent}
+ */
+@Component({
+  selector: 'ds-themed-comcol-page-content',
+  templateUrl: '../../theme-support/themed.component.html',
+})
+export class ThemedComcolPageContentComponent extends ThemedComponent<ComcolPageContentComponent> {
+
+  @Input() title: string;
+
+  @Input() content: string;
+
+  @Input() hasInnerHtml: boolean;
+
+  protected inAndOutputNames: (keyof ComcolPageContentComponent & keyof this)[] = [
+    'title',
+    'content',
+    'hasInnerHtml',
+  ];
+
+  protected getComponentName(): string {
+    return 'ComcolPageContentComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-sidebar/admin-sidebar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./comcol-page-content.component');
+  }
+
+}
diff --git a/src/app/shared/comcol/comcol.module.ts b/src/app/shared/comcol/comcol.module.ts
@@ -15,9 +15,11 @@ import { ThemedComcolPageBrowseByComponent } from './comcol-page-browse-by/theme
 import { ComcolRoleComponent } from './comcol-forms/edit-comcol-page/comcol-role/comcol-role.component';
 import { SharedModule } from '../shared.module';
 import { FormModule } from '../form/form.module';
+import { ThemedComcolPageContentComponent } from './comcol-page-content/themed-comcol-page-content.component';
 
 const COMPONENTS = [
   ComcolPageContentComponent,
+  ThemedComcolPageContentComponent,
   ComcolPageHandleComponent,
   ComcolPageHeaderComponent,
   ComcolPageLogoComponent,