inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

#1052 - start adding tooltip to diagram elements

Browse Source
This commit is contained in:
Vito Albano 2016-11-30 00:32:36 +00:00
parent 613384dd90
commit 91d9503b37
4 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.html
View File

@ -1,4 +1,10 @@
<raphael-rect [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
<raphael-rect [elementId]="data.id" [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
[stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
<raphael-text [text]="data.name" [position]="textPosition"></raphael-text>
<div class="mdl-tooltip mdl-tooltip--large" [attr.for]="data.id">
<div>
<h6 class="mdl-tooltip-header__message"><span>{{data.name}}</span></h6>
<span class="mdl-tooltip-body__message">0 hours</span>
</div>
</div>

3
ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts
View File

@ -21,7 +21,8 @@ import { DiagramColorService } from '../../services/diagram-color.service';
@Component({
moduleId: module.id,
selector: 'diagram-task',
templateUrl: './diagram-task.component.html'
templateUrl: './diagram-task.component.html',
styleUrls: ['./tooltip-style.css']
})
export class DiagramTaskComponent {
@Input()

19
ng2-components/ng2-activiti-diagrams/src/components/activities/tooltip-style.css Normal file
View File

@ -0,0 +1,19 @@
.mdl-tooltip {
will-change: unset;
}
.mdl-tooltip-diagram {
background: white;
padding: 0px;
}
.mdl-tooltip-header__message {
background: black;
color: white;
margin-top: 0px;
width:100%;
}
.mdl-tooltip-body__message {
color: black;
}

15
ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts
View File

@ -20,7 +20,7 @@ import { Point } from './models/point';
import { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-rect'})
@Directive({ selector: 'raphael-rect' })
export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input()
paper: any;
@ -49,6 +49,9 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input()
fillOpacity: any;
@Input()
elementId: string;
@Output()
onError = new EventEmitter();
@ -59,8 +62,14 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
ngOnInit() {
console.log(this.elementRef);
let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
let opts = {
'stroke-width': this.strokeWidth,
'fill': this.fillColors,
'stroke': this.stroke,
'fill-opacity': this.fillOpacity
};
let elementDraw = this.draw(this.leftCorner, this.width, this.height, this.radius, opts);
elementDraw.node.id = this.elementId;
}
public draw(leftCorner: Point, width: number, height: number, radius: number, opts: any) {