Refactored collection/community logo and name as shared components.

This commit is contained in:
Christian Scheible
2017-06-13 14:35:57 +02:00
parent 3ad3df7568
commit 90840d949b
21 changed files with 51 additions and 78 deletions

View File

@@ -1,6 +1,11 @@
<div class="collection-page" *ngIf="collectionData.hasSucceeded | async"> <div class="collection-page" *ngIf="collectionData.hasSucceeded | async">
<ds-collection-page-name [name]="(collectionData.payload | async)?.name"></ds-collection-page-name> <!-- Collection Name -->
<ds-collection-page-logo *ngIf="logoData" [logo]="logoData.payload | async"></ds-collection-page-logo> <ds-dso-name [name]="(collectionData.payload | async)?.name"></ds-dso-name>
<!-- Collection logo -->
<ds-dso-logo *ngIf="logoData"
[logo]="logoData.payload | async"
[alternateText]="'Collection Logo'">
</ds-dso-logo>
<!-- Introductionary text --> <!-- Introductionary text -->
<ds-content-with-optional-title <ds-content-with-optional-title
[content]="(collectionData.payload | async)?.introductoryText" [content]="(collectionData.payload | async)?.introductoryText"

View File

@@ -6,8 +6,6 @@ import { TranslateModule } from "@ngx-translate/core";
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { CollectionPageComponent } from './collection-page.component'; import { CollectionPageComponent } from './collection-page.component';
import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component'; import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component';
import { CollectionPageNameComponent } from './name/collection-page-name.component';
import { CollectionPageLogoComponent } from './logo/collection-page-logo.component';
import { CollectionPageRoutingModule } from './collection-page-routing.module'; import { CollectionPageRoutingModule } from './collection-page-routing.module';
@NgModule({ @NgModule({
@@ -20,8 +18,6 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
declarations: [ declarations: [
CollectionPageComponent, CollectionPageComponent,
FieldWrapperComponent, FieldWrapperComponent,
CollectionPageNameComponent,
CollectionPageLogoComponent,
] ]
}) })
export class CollectionPageModule { } export class CollectionPageModule { }

View File

@@ -1,3 +0,0 @@
<ds-field-wrapper *ngIf="logo" class="collection-page-logo">
<img [src]="logo.url" class="img-responsive" alt="Collection logo" />
</ds-field-wrapper>

View File

@@ -1,13 +0,0 @@
import { Component, Input } from '@angular/core';
import { Bitstream } from "../../core/shared/bitstream.model";
@Component({
selector: 'ds-collection-page-logo',
styleUrls: ['./collection-page-logo.component.css'],
templateUrl: './collection-page-logo.component.html',
})
export class CollectionPageLogoComponent {
@Input() logo: Bitstream;
}

View File

@@ -1,11 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ds-collection-page-name',
styleUrls: ['./collection-page-name.component.css'],
templateUrl: './collection-page-name.component.html',
})
export class CollectionPageNameComponent {
@Input() name: String;
}

View File

@@ -1,6 +1,11 @@
<div class="community-page" *ngIf="communityData.hasSucceeded | async"> <div class="community-page" *ngIf="communityData.hasSucceeded | async">
<ds-community-page-name [name]="(communityData.payload | async)?.name"></ds-community-page-name> <!-- Community name -->
<ds-community-page-logo *ngIf="logoData" [logo]="logoData.payload | async"></ds-community-page-logo> <ds-dso-name [name]="(communityData.payload | async)?.name"></ds-dso-name>
<!-- Community logo -->
<ds-dso-logo *ngIf="logoData"
[logo]="logoData.payload | async"
[alternateText]="'Community Logo'">
</ds-dso-logo>
<!-- Introductionary text --> <!-- Introductionary text -->
<ds-content-with-optional-title <ds-content-with-optional-title
[content]="(communityData.payload | async)?.introductoryText" [content]="(communityData.payload | async)?.introductoryText"
@@ -17,10 +22,5 @@
[content]="(communityData.payload | async)?.copyrightText" [content]="(communityData.payload | async)?.copyrightText"
[hasInnerHtml]="true"> [hasInnerHtml]="true">
</ds-content-with-optional-title> </ds-content-with-optional-title>
<!-- Licence -->
<ds-content-with-optional-title
[content]="(communityData.payload | async)?.license"
[title]="'community.page.license'">
</ds-content-with-optional-title>
<ds-community-page-sub-collection-list></ds-community-page-sub-collection-list> <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
</div> </div>

View File

@@ -7,8 +7,6 @@ import { TranslateModule } from "@ngx-translate/core";
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { CommunityPageComponent } from './community-page.component'; import { CommunityPageComponent } from './community-page.component';
import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component'; import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component';
import { CommunityPageNameComponent } from './name/community-page-name.component';
import { CommunityPageLogoComponent } from './logo/community-page-logo.component';
import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component'; import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component';
import { CommunityPageRoutingModule } from './community-page-routing.module'; import { CommunityPageRoutingModule } from './community-page-routing.module';
@@ -23,8 +21,6 @@ import { CommunityPageRoutingModule } from './community-page-routing.module';
declarations: [ declarations: [
CommunityPageComponent, CommunityPageComponent,
FieldWrapperComponent, FieldWrapperComponent,
CommunityPageNameComponent,
CommunityPageLogoComponent,
CommunityPageSubCollectionListComponent, CommunityPageSubCollectionListComponent,
] ]
}) })

View File

@@ -1,3 +0,0 @@
<ds-field-wrapper *ngIf="logo" class="community-page-logo">
<img [src]="logo.url" class="img-responsive" alt="Community logo" />
</ds-field-wrapper>

View File

@@ -1 +0,0 @@
@import '../../../styles/variables.scss';

View File

@@ -1,13 +0,0 @@
import { Component, Input } from '@angular/core';
import { Bitstream } from "../../core/shared/bitstream.model";
@Component({
selector: 'ds-community-page-logo',
styleUrls: ['./community-page-logo.component.css'],
templateUrl: './community-page-logo.component.html',
})
export class CommunityPageLogoComponent {
@Input() logo: Bitstream;
}

View File

@@ -1 +0,0 @@
<h1 *ngIf="name">{{ name }}</h1>

View File

@@ -1 +0,0 @@
@import '../../../styles/variables.scss';

View File

@@ -1,11 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ds-community-page-name',
styleUrls: ['./community-page-name.component.css'],
templateUrl: './community-page-name.component.html',
})
export class CommunityPageNameComponent {
@Input() name: String;
}

View File

@@ -1,5 +1,5 @@
<div *ngIf="content" class="content-with-optional-title"> <div *ngIf="content" class="content-with-optional-title">
<h2 *ngIf="title">{{ title | translate }}</h2> <h2 *ngIf="title">{{ title | translate }}</h2>
<p *ngIf="hasInnerHtml" [innerHtml]="content"></p> <div *ngIf="hasInnerHtml" [innerHtml]="content"></div>
<p *ngIf="!hasInnerHtml">{{content}}</p> <div *ngIf="!hasInnerHtml">{{content}}</div>
</div> </div>

View File

@@ -0,0 +1,3 @@
<div *ngIf="logo" class="dso-logo">
<img [src]="logo.url" class="img-responsive" [attr.alt]="alternateText ? alternateText : null" />
</div>

View File

@@ -0,0 +1,15 @@
import { Component, Input } from '@angular/core';
import { Bitstream } from "../../core/shared/bitstream.model";
@Component({
selector: 'ds-dso-logo',
styleUrls: ['./dso-logo.component.css'],
templateUrl: './dso-logo.component.html',
})
export class DsoLogoComponent {
@Input() logo: Bitstream;
@Input() alternateText: string;
}

View File

@@ -0,0 +1,11 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ds-dso-name',
styleUrls: ['./dso-name.component.css'],
templateUrl: './dso-name.component.html',
})
export class DsoNameComponent {
@Input() name: String;
}

View File

@@ -15,6 +15,8 @@ import { SafeUrlPipe } from "./utils/safe-url-pipe";
import { HostWindowService } from "./host-window.service"; import { HostWindowService } from "./host-window.service";
import { NativeWindowFactory, NativeWindowService } from "./window.service"; import { NativeWindowFactory, NativeWindowService } from "./window.service";
import { ContentWithOptionalTitleComponent } from "./content-with-optional-title/content-with-optional-title.component"; import { ContentWithOptionalTitleComponent } from "./content-with-optional-title/content-with-optional-title.component";
import { DsoNameComponent } from "./dso-name/dso-name.component";
import { DsoLogoComponent } from "./dso-logo/dso-logo.component";
const MODULES = [ const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -37,7 +39,9 @@ const COMPONENTS = [
// put shared components here // put shared components here
PaginationComponent, PaginationComponent,
ThumbnailComponent, ThumbnailComponent,
ContentWithOptionalTitleComponent ContentWithOptionalTitleComponent,
DsoNameComponent,
DsoLogoComponent
]; ];
const PROVIDERS = [ const PROVIDERS = [