MaDgIK
/
graph
13
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

[Graph | Trunk]: Add action point animation 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-graph-portal/trunk@59549 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-10-11 14:12:13 +00:00
parent c161738559
commit d8d60bd1e7
3 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/about/about.component.html
View File

@ -74,41 +74,35 @@
<img [src]="'assets/graph-assets/about/architecture/'+architectureImage"
class="uk-width-4-5 architecture-image">
<a class="uk-position-absolute uk-transform-center" style="left: 27%; top: 48%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 27%; top: 48%"
(click)="goTo('tabs_card'); changeTab(0)"
(mouseenter)="architectureImage = 'aggregation_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'aggregation_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point aggregation">
<action-point [class.uk-invisible]="architectureImage == 'aggregation_hover.png'"></action-point>
</a>
<a class="uk-position-absolute uk-transform-center" style="left: 47%; top: 48%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 47%; top: 48%"
(click)="goTo('tabs_card'); changeTab(1)"
(mouseenter)="architectureImage = 'deduplication_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'deduplication_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point deduplication">
<action-point [class.uk-invisible]="architectureImage == 'deduplication_hover.png'"></action-point>
</a>
<a class="uk-position-absolute uk-transform-center" style="left: 58%; top: 48%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 58%; top: 48%"
(click)="goTo('tabs_card'); changeTab(2)"
(mouseenter)="architectureImage = 'enrichment_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'enrichment_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point enrichment">
<action-point [class.uk-invisible]="architectureImage == 'enrichment_hover.png'"></action-point>
</a>
<a class="uk-position-absolute uk-transform-center" style="left: 70%; top: 48%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 70%; top: 48%"
(click)="goTo('tabs_card'); changeTab(3)"
(mouseenter)="architectureImage = 'post_cleaning_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'post_cleaning_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point post cleaning">
<action-point [class.uk-invisible]="architectureImage == 'post_cleaning_hover.png'"></action-point>
</a>
<a class="uk-position-absolute uk-transform-center" style="left: 76%; top: 32%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 76%; top: 32%"
(click)="goTo('tabs_card'); changeTab(4)"
(mouseenter)="architectureImage = 'indexing_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'indexing_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point indexing">
<action-point [class.uk-invisible]="architectureImage == 'indexing_hover.png'"></action-point>
</a>
<a class="uk-position-absolute uk-transform-center" style="left: 76%; top: 72%"
<a class="uk-position-absolute uk-transform-center uk-padding" style="left: 76%; top: 72%"
(click)="goTo('tabs_card'); changeTab(5)"
(mouseenter)="architectureImage = 'stats_analysis_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
<img [class]="(architectureImage == 'stats_analysis_hover.png' ? 'uk-invisible' : '')+' marker-gif'"
src="assets/graph-assets/about/architecture/marker.gif" alt="action point stats analysis">
<action-point [class.uk-invisible]="architectureImage == 'stats_analysis_hover.png'"></action-point>
</a>
</div>
<div id="tabs_card"

3
src/app/about/about.module.ts
View File

@ -4,6 +4,7 @@ import {RouterModule} from "@angular/router";
import {AboutComponent} from "./about.component";
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {ActionPointComponent} from "./action-point.component";
@NgModule({
imports: [
@ -13,7 +14,7 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
}]),
BreadcrumbsModule
],
declarations: [AboutComponent],
declarations: [AboutComponent, ActionPointComponent],
exports: [AboutComponent]
})
export class AboutModule {

51
src/app/about/action-point.component.ts Normal file
View File

@ -0,0 +1,51 @@
import {AfterViewInit, Component} from "@angular/core";
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'action-point',
template: `
<div class="uk-position-relative" style="width: 15px; height: 15px;">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
<circle cx="7.5" cy="7.5" r="7.5" fill="#ee2540"/>
</svg>
</div>
<div class="uk-position-top-left" [@move]="state" (@move.done)="onEnd($event)">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none">
<circle cx="7.4" cy="6.6" r="5" stroke="#ee2540" stroke-width="2.5" fill="none" />
</svg>
</div>
</div>
`,
animations: [
trigger('move', [
state('in', style({
transform: 'scale(1)',
opacity: 1
})),
state('out', style({
transform: 'scale(3)',
opacity: 0
})),
transition('in => out', animate('2s ease-out'))
]),
]
})
export class ActionPointComponent implements AfterViewInit {
state = 'in';
ngAfterViewInit() {
setTimeout(() => {
this.state = 'out';
}, 0);
}
onEnd(event) {
this.state = 'in';
if (event.toState === 'in') {
setTimeout(() => {
this.state = 'out';
}, 2000);
}
}
}