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" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
[fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect> [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({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'diagram-task', selector: 'diagram-task',
templateUrl: './diagram-task.component.html' templateUrl: './diagram-task.component.html',
styleUrls: ['./tooltip-style.css']
}) })
export class DiagramTaskComponent { export class DiagramTaskComponent {
@Input() @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 { RaphaelBase } from './raphael-base';
import { RaphaelService } from './raphael.service'; import { RaphaelService } from './raphael.service';
@Directive({selector: 'raphael-rect'}) @Directive({ selector: 'raphael-rect' })
export class RaphaelRectDirective extends RaphaelBase implements OnInit { export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input() @Input()
paper: any; paper: any;
@ -49,6 +49,9 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
@Input() @Input()
fillOpacity: any; fillOpacity: any;
@Input()
elementId: string;
@Output() @Output()
onError = new EventEmitter(); onError = new EventEmitter();
@ -59,8 +62,14 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
ngOnInit() { ngOnInit() {
console.log(this.elementRef); console.log(this.elementRef);
let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity}; let opts = {
this.draw(this.leftCorner, this.width, this.height, this.radius, 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) { public draw(leftCorner: Point, width: number, height: number, radius: number, opts: any) {