[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:
parent
c161738559
commit
d8d60bd1e7
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue