mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-402] Diagram tooltips bug (#2043)
* Getting rid of MDL from dialog tooltips * Tooltip message body fix and stylings * Add adf prefix and sass compilation * build fix
This commit is contained in:
Popovics András
committed by
Eugenio Romano
Eugenio Romano
parent
8a3d157cf1
commit
44446b73c4
@@ -60,10 +60,19 @@ module.exports = {
|
||||
test: /\.css$/,
|
||||
loader: ['to-string-loader', 'css-loader'],
|
||||
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
|
||||
},
|
||||
}
|
||||
{
|
||||
test: /\.component.scss$/,
|
||||
use: ['to-string-loader', 'raw-loader', 'sass-loader'],
|
||||
test: /\.scss$/,
|
||||
use: [{
|
||||
loader: "to-string-loader"
|
||||
}, {
|
||||
loader: "raw-loader"
|
||||
}, {
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [ path.resolve(__dirname, '../../ng2-alfresco-core/styles')]
|
||||
}
|
||||
}],
|
||||
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
.mdl-tooltip {
|
||||
will-change: unset;
|
||||
}
|
||||
|
||||
.mdl-tooltip-diagram {
|
||||
background: white;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mdl-tooltip-header__message {
|
||||
background: black;
|
||||
color: white;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 3px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.mdl-tooltip-body__message {
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,6 +1,13 @@
|
||||
<div alfresco-mdl-tooltip class="mdl-tooltip--large mdl-tooltip-diagram" [attr.for]="data.id">
|
||||
<div>
|
||||
<div class="mdl-tooltip-header__message"><span>{{getTooltipHeader(data)}}</span></div>
|
||||
<span class="mdl-tooltip-body__message">{{getTooltipMessage(data)}}</span>
|
||||
<div #tooltipContent class="{{adf}}-diagram-tooltip">
|
||||
<div class="{{adf}}-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
|
||||
<div class="{{adf}}-diagram-tooltip-body">
|
||||
<div *ngIf="data.name">
|
||||
<span class="{{adf}}-propertyName">Name:</span>
|
||||
<span class="{{adf}}-propertyValue">{{ data.name }}</span>
|
||||
</div>
|
||||
<div *ngFor="let property of data.properties">
|
||||
<span class="{{adf}}-propertyName">{{ property.name }}:</span>
|
||||
<span class="{{adf}}-propertyValue">{{ property.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
@import 'theming';
|
||||
|
||||
.#{$ADF} {
|
||||
&-diagram-tooltip {
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
z-index: 999;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
top: -500px;
|
||||
left: -500px;
|
||||
text-align: left;
|
||||
will-change: unset;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
&-diagram-tooltip.is-active {
|
||||
animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-header {
|
||||
background-color: rgba(43, 65, 79, 0.9);
|
||||
color: #FFF;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
min-width: 200px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body {
|
||||
color: #4a4a4a;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:first-child {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:last-child {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
&-propertyName {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&-propertyValue {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltipAnimation {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@@ -15,24 +15,120 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, ElementRef, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'};
|
||||
const IS_ACTIVE_CLASS = 'is-active';
|
||||
|
||||
@Component({
|
||||
selector: 'diagram-tooltip',
|
||||
templateUrl: './diagram-tooltip.component.html',
|
||||
styleUrls: ['./diagram-tooltip-style.css']
|
||||
styleUrls: ['./diagram-tooltip.component.scss']
|
||||
})
|
||||
export class DiagramTooltip {
|
||||
export class DiagramTooltip implements AfterViewInit, OnDestroy {
|
||||
|
||||
private tooltipElement: any;
|
||||
private targetElement: any;
|
||||
private boundMouseEnterHandler: EventListenerObject;
|
||||
private boundMouseLeaveAndScrollHandler: EventListenerObject;
|
||||
public adf: string = 'adf';
|
||||
|
||||
@ViewChild('tooltipContent') tooltipContent: ElementRef;
|
||||
|
||||
@Input()
|
||||
data: any;
|
||||
|
||||
getTooltipHeader(data: any) {
|
||||
let headerValue = data.name || data.id;
|
||||
return data.type + ' ' + headerValue;
|
||||
@Input()
|
||||
position: string = 'bottom';
|
||||
|
||||
/**
|
||||
* Set up event listeners for the target element (defined in the data.id)
|
||||
*/
|
||||
public ngAfterViewInit() {
|
||||
this.tooltipElement = this.tooltipContent.nativeElement;
|
||||
|
||||
if (this.data.id) {
|
||||
this.targetElement = document.getElementById(this.data.id);
|
||||
}
|
||||
|
||||
if (this.targetElement) {
|
||||
if (!this.targetElement.hasAttribute('tabindex')) {
|
||||
this.targetElement.setAttribute('tabindex', '0');
|
||||
}
|
||||
|
||||
this.boundMouseEnterHandler = this.handleMouseEnter.bind(this);
|
||||
this.boundMouseLeaveAndScrollHandler = this.hideTooltip.bind(this);
|
||||
this.targetElement.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
|
||||
this.targetElement.addEventListener('touchend', this.boundMouseEnterHandler, false);
|
||||
this.targetElement.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
|
||||
window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
|
||||
window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
|
||||
}
|
||||
}
|
||||
|
||||
getTooltipMessage(data: any) {
|
||||
return (data.value !== undefined && data.value !== null ) ? data.value + ' ' + data.dataType : '';
|
||||
/**
|
||||
* Clear all bound eventlisteners
|
||||
*/
|
||||
ngOnDestroy() {
|
||||
window.removeEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
|
||||
window.removeEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the tooltip
|
||||
*/
|
||||
private hideTooltip(): void {
|
||||
this.tooltipElement.classList.remove(IS_ACTIVE_CLASS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the tooltip
|
||||
*/
|
||||
private showTooltip(): void {
|
||||
this.tooltipElement.classList.add(IS_ACTIVE_CLASS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the tooltip's position and displays it
|
||||
*
|
||||
* @param event mouseenter/touchend event
|
||||
*/
|
||||
private handleMouseEnter(event): void {
|
||||
const props = event.target.getBoundingClientRect(),
|
||||
top = props.top + (props.height / 2),
|
||||
marginLeft = -1 * (this.tooltipElement.offsetWidth / 2),
|
||||
marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
|
||||
|
||||
let left = props.left + (props.width / 2);
|
||||
|
||||
if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) {
|
||||
left = (props.width / 2);
|
||||
if (top + marginTop < 0) {
|
||||
this.tooltipElement.style.top = '0';
|
||||
this.tooltipElement.style.marginTop = '0';
|
||||
} else {
|
||||
this.tooltipElement.style.top = top + 'px';
|
||||
this.tooltipElement.style.marginTop = marginTop + 'px';
|
||||
}
|
||||
} else {
|
||||
if (left + marginLeft < 0) {
|
||||
this.tooltipElement.style.left = '0';
|
||||
this.tooltipElement.style.marginLeft = '0';
|
||||
} else {
|
||||
this.tooltipElement.style.left = left + 'px';
|
||||
this.tooltipElement.style.marginLeft = marginLeft + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
if (this.position === POSITION.TOP) {
|
||||
this.tooltipElement.style.top = props.top - this.tooltipElement.offsetHeight - 10 + 'px';
|
||||
} else if (this.position === POSITION.RIGHT) {
|
||||
this.tooltipElement.style.left = props.left + props.width + 10 + 'px';
|
||||
} else if (this.position === POSITION.LEFT) {
|
||||
this.tooltipElement.style.left = props.left - this.tooltipElement.offsetWidth - 10 + 'px';
|
||||
} else {
|
||||
this.tooltipElement.style.top = props.top + props.height + 10 + 'px';
|
||||
}
|
||||
|
||||
this.showTooltip();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
@import './_variables-color.scss';
|
||||
@import './_variables-mdl-overrides.scss';
|
||||
@import './_variables-general';
|
||||
@import './_variables-color';
|
||||
@import './_variables-mdl-overrides';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
$ADF: adf;
|
||||
Reference in New Issue
Block a user