Skip to content

Commit

Permalink
Merge pull request #201 from europeana/feat/MET-6087-UI-Changes-Post-…
Browse files Browse the repository at this point in the history 
…Feedback

MET-6087 UI Changes Post Feedback
  • Loading branch information
@andyjmaclean
andyjmaclean authored Aug 30, 2024
2 parents 2443c8a + 477fb68 commit 83299b6
Show file tree
Hide file tree
Showing 13 changed files with 451 additions and 166 deletions.
10 changes: 10 additions & 0 deletions src/app/_data/static-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,16 @@ export const externalLinks = {
}
};

const tooltipLink = `<a target="_blank" href="${externalLinks.europeana}">Europeana.eu</a>`;

export const targetDescriptions = {
// eslint-disable-next-line max-len
three_d: $localize`:@@targetDescriptions3D:Digital objects found in ${tooltipLink} conforming to content tier 1 and higher which consist of three dimensions (such as 3D models or landscapes).`,
// eslint-disable-next-line max-len
high_quality: $localize`:@@targetDescriptionsHQ:Digital objects found in ${tooltipLink} which conform to content tiers 2, 3 or 4 and metadata tiers A, B or C according to the Europeana Publishing Framework.`,
total: $localize`:@@targetDescriptionsTOTAL:All digital objects found in ${tooltipLink} conforming to content tier 1 and higher.`
};

export const memberStateCountryCodes = [
'AT',
'BE',
Expand Down
1 change: 1 addition & 0 deletions src/app/_translate/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export * from './rename-facet.pipe';
export * from './rename-facet-short.pipe';
export * from './rename-target-type.pipe';
export * from './rename-target-type-long.pipe';
export * from './strip-markup.pipe';
16 changes: 16 additions & 0 deletions src/app/_translate/strip-markup.pipe.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/** StripMarkupPipe
/*
/* a translation utility for stripping markup from strings
/* (supplies tooltip-safe strings)
*/
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'stripMarkup',
standalone: true
})
export class StripMarkupPipe implements PipeTransform {
transform(value: string): string {
return value.replace(/<.*?>/g, '');
}
}
6 changes: 5 additions & 1 deletion src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,11 @@ export class AppComponent extends SubscriptionManager implements OnInit {
* if it's a CountryComponent or a LandingComponent:
* - updates the compenent ref and ctZero control value
* - assigns landing data
* @param { LandingComponent | OverviewComponent | CountryComponent| PrivacyStatementComponent | CookiePolicyComponent: component } - the loaded component
*
* @param { LandingComponent | OverviewComponent |
* CountryComponent| PrivacyStatementComponent |
* CookiePolicyComponent: component } - the loaded component
*
**/
onOutletLoaded(
component:
Expand Down
103 changes: 72 additions & 31 deletions src/app/country/country.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h1 class="page-title">

<ng-template
#cardSummary
let-name="name"
let-valName="valName"
let-dimension="dimension"
let-percent="percent"
let-value="value"
Expand All @@ -86,10 +86,10 @@ <h1 class="page-title">
i18n="landing chart summary percentage@@countryChartSummaryData"
class="help-opener"
>
Data
Target
</span>
</span>
<span class="total bold">{{ name | renameTargetType }}</span>
<span class="total bold">{{ valName | renameTargetType }}</span>
</span>
<span class="container-v">
<span
Expand All @@ -112,19 +112,29 @@ <h1 class="page-title">
<ng-container *ngIf="isPowerLevel; else defaultCopy">
<span
class="hide-on-triple"
i18n="landing chart summary percentage@@countryChartSummaryTotal"
>Total {{ name | renameTargetType }} items count</span
>
<span
class="show-on-triple"
i18n="
landing chart summary percentage@@countryChartSummaryTotalShort"
>Items</span
landing chart summary percentage@@countryChartSummaryTotalLong"
>Current items</span
>
<span class="show-on-triple">
<span
class="xxl-only"
i18n="
landing chart summary percentage@@countryChartSummaryTotal"
>Current Items</span
>
<span
class="xxl-fallback"
i18n="
landing chart summary
percentage@@countryChartSummaryTotalShort"
>Items</span
>
</span>
<div class="help-speech-bubble-wrapper help-items">
<app-speech-bubble [arrowBottomRight]="true">
<span class="help-speech-bubble-content">
{{ tooltipsTotal[name] }}
{{ tooltipsTotal[valName] }}
</span>
</app-speech-bubble>
</div>
Expand All @@ -137,12 +147,12 @@ <h1 class="page-title">
}"
>
<span class="hide-on-triple">{{ value | number }}</span>
<span class="show-on-triple" [attr.title]="tooltipsTotal[name]">
<span class="show-on-triple" [attr.title]="tooltipsTotal[valName]">
{{ value | abbreviateNumber }}
</span>
</span>
</span>
<span class="container-v" *ngIf="name !== TargetFieldName.TOTAL">
<span class="container-v" *ngIf="valName !== TargetFieldName.TOTAL">
<span
class="total-title"
[ngClass]="{
Expand All @@ -151,18 +161,23 @@ <h1 class="page-title">
>
<span
class="hide-on-triple"
i18n="
landing chart summary percentage@@countryChartSummaryPercentage"
>
Corresponding percentage
</span>
<span
class="show-on-triple"
i18n="
landing chart summary
percentage@@countryChartSummaryPercentageShort"
percentage@@countryChartSummaryPercentageNonTriple"
>
Percent of all items
Percent of all country items
</span>
<span class="show-on-triple">
<span
class="xxl-only"
i18n="landing chart summary@@countryChartSummaryPercentage"
>Pct. of country items</span
>
<span
class="xxl-fallback"
i18n="landing chart summary@@countryChartSummaryPercentageShort"
>Pct. of all</span
>
</span>
</span>

Expand All @@ -173,7 +188,7 @@ <h1 class="page-title">
}"
>
<span class="hide-on-triple">{{ percent | number: "1.0-2" }}%</span>
<span class="show-on-triple" [attr.title]="tooltipsPercent[name]">
<span class="show-on-triple" [attr.title]="tooltipsPercent[valName]">
{{ percent | number: "1.0-1" }}%</span
>
</span>
Expand All @@ -199,7 +214,7 @@ <h1 class="page-title">
*ngTemplateOutlet="
cardSummary;
context: {
name: valName,
valName: valName,
value: latestCountryData[valName],
percent: latestCountryPercentages[valName] || 0,
isPowerLevel: true
Expand Down Expand Up @@ -276,11 +291,21 @@ <h1 class="page-title">
>
<ng-content *ngTemplateOutlet="tmpRestoreColumn"></ng-content>
<a
[attr.title]="
targetDescriptions[TargetFieldName.THREE_D] | stripMarkup
"
class="entry-card-header column-close"
(click)="toggleColumn(TargetFieldName.THREE_D)"
><span i18n="@@countryEntry3D">3D Data</span><span class="x"></span
></a>

<span class="main-speech-bubble-wrapper">
<app-speech-bubble [arrowBottomLeft]="true">
<span
class="help-speech-bubble-content"
[innerHTML]="targetDescriptions[TargetFieldName.THREE_D]"
></span>
</app-speech-bubble>
</span>
<div
class="entry-card-content"
*ngIf="
Expand All @@ -298,7 +323,7 @@ <h1 class="page-title">
"
></ng-content>

<span class="powerbar-subtitle">targets</span>
<span class="powerbar-subtitle">progress</span>

<ng-content
*ngTemplateOutlet="
Expand Down Expand Up @@ -353,9 +378,17 @@ <h1 class="page-title">
<a
class="entry-card-header column-close"
(click)="toggleColumn(TargetFieldName.HQ)"
[attr.title]="targetDescriptions[TargetFieldName.HQ] | stripMarkup"
><span i18n="@@countryEntryHQ">HQ Data</span><span class="x"></span
></a>

<span class="main-speech-bubble-wrapper">
<app-speech-bubble [arrowBottomLeft]="true">
<span
class="help-speech-bubble-content"
[innerHTML]="targetDescriptions[TargetFieldName.HQ]"
></span>
</app-speech-bubble>
</span>
<div
class="entry-card-content"
*ngIf="targetMetaData[country][TargetFieldName.HQ]; let targetsHQ"
Expand All @@ -370,7 +403,7 @@ <h1 class="page-title">
"
></ng-content>

<span class="powerbar-subtitle">targets</span>
<span class="powerbar-subtitle">progress</span>

<ng-content
*ngTemplateOutlet="
Expand Down Expand Up @@ -425,9 +458,17 @@ <h1 class="page-title">
<a
class="entry-card-header column-close"
(click)="toggleColumn(TargetFieldName.TOTAL)"
[attr.title]="targetDescriptions[TargetFieldName.TOTAL] | stripMarkup"
><span i18n="@@countryEntryAll">All Data</span><span class="x"></span
></a>

<span class="main-speech-bubble-wrapper">
<app-speech-bubble [arrowBottomLeft]="true">
<span
class="help-speech-bubble-content"
[innerHTML]="targetDescriptions[TargetFieldName.TOTAL]"
></span>
</app-speech-bubble>
</span>
<div
class="entry-card-content entry-card-totals"
*ngIf="
Expand All @@ -445,7 +486,7 @@ <h1 class="page-title">
"
></ng-content>

<span class="powerbar-subtitle">targets</span>
<span class="powerbar-subtitle">progress</span>

<ng-content
*ngTemplateOutlet="
Expand Down Expand Up @@ -570,7 +611,7 @@ <h1 class="page-title">
cardSummary;
context: {
dimension: DimensionName.type,
name: cardData[DimensionName.type][0].name,
valName: cardData[DimensionName.type][0].name,
value: cardData[DimensionName.type][0].value,
percent: cardData[DimensionName.type][0].percent,
isPowerLevel: false
Expand Down
Loading

0 comments on commit 83299b6

Please sign in to comment.