Adds tool tips in every listing View and changes position of the existing ones.

This commit is contained in:
gkolokythas 2019-07-18 12:50:51 +03:00
parent b69b98accc
commit 844ac467f6
7 changed files with 47 additions and 32 deletions

View File

@ -11,12 +11,10 @@
</div>
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" matTooltipPosition="above"
class="draft-bookmark">
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" class="draft-bookmark">
bookmark
</mat-icon>
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" matTooltipPosition="above"
class="finalized-bookmark">
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
bookmark
</mat-icon>
<h4 *ngIf="isDraft">
@ -33,18 +31,18 @@
<div class="col-12 about-item">
<div class="links">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}"
matTooltipPosition="above" class="gray-icon pt-2">
class="gray-icon pt-2">
storage
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<mat-icon (click)="$event.stopImmediatePropagation(); projectClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.PROJECT' | translate}}"
matTooltipPosition="above" class="gray-icon pt-2">
class="gray-icon pt-2">
work_outline
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); projectClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.project }}</h4>
</div>
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" matTooltipPosition="above" class="gray-icon pt-2">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
assignment
</mat-icon>
<div class="pt-1">

View File

@ -28,14 +28,13 @@
</div>
<div class="row">
<div class="col-12 d-flex flex-wrap">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" matTooltipPosition="above"
class="draft-icon">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
lock
</mat-icon>
<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}" matTooltipPosition="above">
<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}">
lock
</mat-icon>
<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" matTooltipPosition="above" class="published-icon">
<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
radio_button_checked
</mat-icon>
<h4 class="title" *ngIf="isDraft">
@ -50,21 +49,20 @@
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" matTooltipPosition="above">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
<div class="datasets-counter">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}"
matTooltipPosition="above">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp)" class="mt-1 ml-1 mr-3 p-1">
{{dmp.datasets.length}}</h4>
</div>
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" matTooltipPosition="above">assignment</mat-icon>
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>

View File

@ -14,7 +14,7 @@
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="editClicked(dmp)" class="menu-item">
<button mat-menu-item (click)="editClicked(dmp)" class="menu-item">
<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
</button>
<button mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
@ -58,11 +58,11 @@
<p>{{ dmp.description }}</p>
<div class="row total-info">
<div class="col-12 d-flex flex-row">
<mat-icon class="gray-icon pt-2">settings</mat-icon>
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" class="gray-icon pt-2">settings</mat-icon>
<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>
<div class="datasets-counter">
<mat-icon class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
</mat-icon>
<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
{{ dmp.datasets.length }}</p>
@ -70,11 +70,11 @@
{{'NAV-BAR.DATASETS' | translate}}</p>
</div>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>
<mat-icon class="gray-icon pt-2">person</mat-icon>
<mat-icon matTooltip="{{'DMP-OVERVIEW.RESEARCHERS' | translate}}" class="gray-icon pt-2">person</mat-icon>
<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
</div>

View File

@ -11,9 +11,7 @@
</div>
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="isDraft"><span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
@ -24,13 +22,13 @@
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="gray-icon pt-2">storage</mat-icon>
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<mat-icon class="gray-icon pt-2">work_outline</mat-icon>
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.PROJECT' | translate}}" class="gray-icon pt-2">work_outline</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.project }}</h4>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>

View File

@ -7,7 +7,7 @@
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon>lock</mat-icon>
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
<h4 class="title">{{dmp.label}}</h4>
</div>
</div>
@ -21,10 +21,10 @@
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
<mat-icon class="gray-icon pt-2">storage</mat-icon>
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>

View File

@ -45,6 +45,11 @@
color: #aaaaaa;
}
.published-icon {
padding-top: 1px;
color: #92d050;
}
// .explore-dmp-listing-item {
// margin-top: 2em;
// margin-bottom: 2em;

View File

@ -315,7 +315,12 @@
"TITLE": "Published Dataset Managment Plans",
"OWNER": "Owner",
"MEMBER": "Member",
"VIEW-ONLY": "View Only"
"VIEW-ONLY": "View Only",
"TOOLTIP": {
"PUBLISHED": "Public access - Closed DMP",
"INVOLVED-DATASETS": "Involved Dataset Descriptions",
"TEMPLATES-INVOLVED": "Dataset Templates Involved"
}
},
"DMP-UPLOAD": {
"TITLE": "Import Data Managment Plan",
@ -379,7 +384,12 @@
}
},
"DMP-OVERVIEW": {
"RESEARCHERS": "Researchers"
"RESEARCHERS": "Researchers",
"TOOLTIP": {
"LEVEL-OF-ACCESS": "Level of Access",
"INVOLVED-DATASETS": "Involved Dataset Descriptions",
"TEMPLATES-INVOLVED": "Dataset Templates Involved"
}
},
"DATASET-LISTING": {
"TITLE": "Dataset Descriptions",
@ -419,7 +429,13 @@
}
},
"DATASET-PUBLIC-LISTING": {
"TITLE": "Published Dataset Descriptions"
"TITLE": "Published Dataset Descriptions",
"TOOLTIP": {
"FINALIZED": "Private access - Closed Dataset Description",
"DMP": "DMP",
"PROJECT": "Project",
"TEMPLATES-INVOLVED": "Dataset Template"
}
},
"DATASET-PROFILE-LISTING": {
"TITLE": "Dataset Templates",