Skip to content

Commit

Permalink
Restyled default address block (#8289)
Browse files Browse the repository at this point in the history 
* This commit adds a different style for the `default` address block in the metadata page:
- labels are added
- it now has a bordered address card
- the title is in a header
- an address card icon is added to the heading

Furthermore, it changes the style for the `icon` layout a bit:
- the circled letter is smaller in size
- texts are now all right of the circle
- italic is changed to bold

* Add print styles to enable the printing of the address popover

* Fix for the print styles, the popup style now not only works in the emulated styles but also in the print preview and print.

This commit also contains a fix for the SVG 'named circle' that was displayed too big

* Fix failing unit tests.

Refactor variables used in the view and global styles.

---------

Co-authored-by: Jose García <[email protected]>
  • Loading branch information
@MichelGabriel @josegar74
MichelGabriel and josegar74 committed Dec 23, 2024
1 parent 546ca24 commit 2283169
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 101 deletions.
221 changes: 133 additions & 88 deletions web-ui/src/main/resources/catalog/components/search/mdview/partials/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
>
<div gn-popover-anchor class="row">
<div
class="col-md-4"
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>

<div class="col-md-8">
<div class="col-md-9">
<div class="gn-contact-card-role">{{c.role | translate}}</div>
<div class="gn-contact-card-org">{{c.organisation}}</div>
</div>
Expand All @@ -29,12 +29,14 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<span data-translate="">call</span> {{c.phone}}
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</address>

Expand All @@ -56,20 +58,16 @@
gn-popover
gn-popover-dismiss=".content"
>
<div gn-popover-anchor class="row">
<div class="col-md-12">
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
<div class="col-md-12" data-ng-repeat="c in cnts | orderBy:'organisation'">
<div class="row">
<div
class="col-md-4"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>
<div class="col-md-8">
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
</div>
</div>
<div gn-popover-anchor>
<div class="row" data-ng-repeat="c in cnts | orderBy:'organisation'">
<div
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="c.organisation"
data-org-key="c.email | getMailDomain"
></div>
<div class="col-md-9">
<div class="gn-contact-card-role">{{cnts[0].role | translate}}</div>
<div class="gn-contact-card-org-group">{{c.organisation}}</div>
</div>
</div>
</div>
Expand All @@ -78,6 +76,9 @@
<!-- Removing for now, because if you close open popup
the title disappear. <h3 class="popover-title">{{cnts[0].role | translate}}</h3>-->
<div data-ng-repeat="c in cnts | orderBy:'organisation'">
<label class="visible-print" data-ng-if="::c.website" data-translate=""
>mdWebsite</label
>
<a data-ng-href="{{::c.website}}" data-ng-if="::c.website">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
Expand All @@ -86,12 +87,14 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<span data-translate="">call</span> {{c.phone}}
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</address>

Expand All @@ -118,12 +121,12 @@
>
<div gn-popover-anchor class="row">
<div
class="col-md-4"
class="col-md-3 gn-nopadding-left"
data-gn-circle-letter-icon="org"
data-org-key="contactByOrgRole[0].email | getMailDomain"
></div>

<div class="col-md-8" ng-repeat="c in contactByOrgRole">
<div class="col-md-9" ng-repeat="c in contactByOrgRole">
<div class="gn-contact-card-org-group">{{c.organisation}}</div>

<div class="gn-contact-card-group-role" data-ng-repeat="r in ::c.roles">
Expand All @@ -142,12 +145,14 @@
<div data-gn-metadata-individual="c"></div>

<address data-ng-if="c.address != '' || c.phone != ''">
<label class="visible-print" data-translate="">mdAddress</label>
<div data-ng-if="c.address != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{c.address}}
</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<span data-translate="">call</span> {{c.phone}}
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</address>

Expand All @@ -171,29 +176,41 @@
data-ng-if="mode == 'default'"
data-ng-repeat="c in mdContacts track by $index"
>
<h3>
<i class="fa fa-envelope"></i>
{{c.role | translate}}
</h3>
<div class="row">
<div class="col-md-8">
<div class="panel panel-address">
<div class="panel-heading">
<h3>
<i class="fa fa-fw fa-address-card-o"></i>
{{c.role | translate}}
</h3>
</div>
<div class="panel-body">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
<address>
<strong data-ng-if="::c.website">
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
</strong>
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
<div data-ng-if="::c.website">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::c.website}}">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
</a>
</div>
<div data-ng-if="::!c.website">
<label data-translate="">mdOrganization</label>
{{c.organisation}}
</div>

<div data-gn-metadata-individual="c"></div>

<div data-ng-if="c.address != ''">{{c.address}}</div>
<div data-ng-if="c.address != ''">
<label data-translate="">mdAddress</label>
{{c.address}}
</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<span data-translate="">call</span> {{c.phone}}
<label data-translate="">mdPhone</label>
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</address>
</div>
<div class="col-md-4">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
</div>
</div>
</div>

Expand All @@ -203,37 +220,55 @@ <h3>
data-ng-if="mode == 'role'"
data-ng-repeat="(roles, contactByRole) in mdContactsByRole"
>
<h3>
<i class="fa fa-envelope"></i>
<span> {{translateRoles(roles)}} </span>
</h3>
<div
class="row"
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
>
<div class="col-md-8">
<address>
<strong data-ng-if="::c.website">
<a data-ng-href="{{::c.website}}">{{c.organisation}}</a><br />
</strong>
<strong data-ng-if="::!c.website"> {{c.organisation}}<br /> </strong>
<div class="panel panel-address">
<div class="panel-heading">
<h3>
<i class="fa fa-fw fa-address-card-o"></i>
<span> {{translateRoles(roles)}} </span>
</h3>
</div>
<div class="panel-body">
<div
data-ng-repeat="(organisation, contact) in contactByRole | groupBy:'organisation'"
>
<!-- Logo for organisation: display for 1st contact in organisation -->
<div data-ng-repeat="c in contact | limitTo:1">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
</div>
<address>
<div data-ng-if="::c.website">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::c.website}}">
<i class="fa fa-fw fa-link"></i>
{{c.organisation}}
</a>
</div>
<div data-ng-if="::!c.website">
<label data-translate="">mdOrganization</label>
{{c.organisation}}
</div>

<span data-ng-repeat="c in contact track by $index">
<div data-gn-metadata-individual="c"></div>
</span>
<div data-ng-repeat="c in contact track by $index">
<div data-gn-metadata-individual="c"></div>
</div>

<!-- Address for organisation: display for 1st contact in organisation -->
<span data-ng-repeat="c in contact | limitTo:1">
<div data-ng-if="c.address != ''">{{c.address}}</div>
<a href="tel:{{c.phone}}" data-ng-if="c.phone != ''">
<span data-translate="">call</span> {{c.phone}}
</a>
</span>
</address>
</div>
<!-- Logo for organisation: display for 1st contact in organisation -->
<div class="col-md-4" data-ng-repeat="c in contact | limitTo:1">
<img data-ng-if="c.logo" class="gn-source-logo" data-ng-src="{{::c.logo}}" />
<!-- Address for organisation: display for 1st contact in organisation -->
<div data-ng-repeat="c in contact | limitTo:1">
<div data-ng-if="c.address != ''">
<label data-translate="">mdAddress</label>
{{c.address}}
</div>

<div data-ng-if="c.phone != ''">
<label data-translate="">mdPhone</label>
<a href="tel:{{c.phone}}">
<i class="fa fa-fw fa-phone"></i>
{{c.phone}}
</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
Expand All @@ -244,32 +279,42 @@ <h3>
data-ng-if="mode == 'org-role'"
data-ng-repeat="(org, contactByOrgRole) in mdContactsByOrgRole"
>
<address>
<strong data-ng-if="::orgWebsite[org]">
<i class="fa fa-fw fa-link"></i>
<a data-ng-href="{{::orgWebsite[org]}}">{{org}}</a><br />
</strong>
<strong data-ng-if="::!orgWebsite[org]"> {{org}} </strong>
<div class="panel panel-address">
<div class="panel-body">
<address>
<div data-ng-if="::orgWebsite[org]">
<label data-translate="">mdWebsite</label>
<a data-ng-href="{{::orgWebsite[org]}}">
<i class="fa fa-fw fa-link"></i>
{{org}}
</a>
</div>
<div data-ng-if="::!orgWebsite[org]">
<label data-translate="">mdOrganization</label>
{{org}}
</div>

<div
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
>
<span data-ng-if="key != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{key}}<br />
</span>
<ul>
<li
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
<div
ng-repeat="(key, contactGroupByAddress) in contactByOrgRole | groupBy:'address'"
>
{{translateRoles(roles)}}:<br />
<span data-ng-repeat="c in contactGroupByRole track by $index">
<div data-gn-metadata-individual="c"></div>
<span data-ng-if="!$last"><hr /></span>
<span data-ng-if="key != ''">
<i class="fa fa-fw fa-map-marker"></i>
{{key}}<br />
</span>
</li>
</ul>
<ul>
<li
ng-repeat="(roles, contactGroupByRole) in contactGroupByAddress | groupBy:'roles'"
>
{{translateRoles(roles)}}:<br />
<div data-ng-repeat="c in contactGroupByRole track by $index">
<div data-gn-metadata-individual="c"></div>
<span data-ng-if="!$last"><hr /></span>
</div>
</li>
</ul>
</div>
</address>
</div>
</address>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions web-ui/src/main/resources/catalog/components/search/mdview/partials/individual.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div data-ng-if="c.email != ''">
<label data-translate="">mdEmail</label>
<a href="mailto:{{c.email}}">
<i class="fa fa-fw fa-envelope"></i>
<span data-ng-hide="c.individual">{{c.email}}</span>
Expand Down
7 changes: 6 additions & 1 deletion web-ui/src/main/resources/catalog/locales/en-v4.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,5 +409,10 @@
"lastCreatedRecords": "Last created records",
"associationType": "Association type",
"initiativeType": "Initiative type",
"associatedTo": "Associated "
"associatedTo": "Associated ",
"mdEmail": "Email",
"mdWebsite": "Website",
"mdOrganization": "Organization",
"mdAddress": "Address",
"mdPhone": "Phone"
}
Loading

0 comments on commit 2283169

Please sign in to comment.