From 44446b73c40c1df56fa298676d9e70ab79bb5a6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Popovics=20Andr=C3=A1s?= Date: Wed, 5 Jul 2017 12:38:42 +0100 Subject: [PATCH] [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 --- demo-shell-ng2/public/css/muli-font.css | 21 +++- .../config/webpack.common.js | 15 ++- .../tooltip/diagram-tooltip-style.css | 21 ---- .../tooltip/diagram-tooltip.component.html | 15 ++- .../tooltip/diagram-tooltip.component.scss | 74 ++++++++++++ .../tooltip/diagram-tooltip.component.ts | 112 ++++++++++++++++-- .../ng2-alfresco-core/styles/_theming.scss | 5 +- .../styles/_variables-general.scss | 1 + 8 files changed, 225 insertions(+), 39 deletions(-) delete mode 100644 ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss create mode 100644 ng2-components/ng2-alfresco-core/styles/_variables-general.scss diff --git a/demo-shell-ng2/public/css/muli-font.css b/demo-shell-ng2/public/css/muli-font.css index f4eff966d7..c237bd6952 100644 --- a/demo-shell-ng2/public/css/muli-font.css +++ b/demo-shell-ng2/public/css/muli-font.css @@ -1,6 +1,25 @@ @font-face { - font-family: Muli; + font-family: "Muli"; + src: url(../fonts/Muli-Light.ttf); +} + +@font-face { + font-family: "Muli"; + src: url(../fonts/Muli-LightItalic.ttf); + font-style: italic; +} + +@font-face { + font-family: "Muli"; src: url(../fonts/Muli-Regular.ttf); + font-weight: bold; +} + +@font-face { + font-family: "Muli"; + src: url(../fonts/Muli-Italic.ttf); + font-weight: bold; + font-style: italic; } html, body { diff --git a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js index af0ca38ed7..1aede1ee8c 100644 --- a/ng2-components/ng2-activiti-diagrams/config/webpack.common.js +++ b/ng2-components/ng2-activiti-diagrams/config/webpack.common.js @@ -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/] }, { diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css deleted file mode 100644 index 93868ce92c..0000000000 --- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip-style.css +++ /dev/null @@ -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; -} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html index c39f931559..844d45a436 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html @@ -1,6 +1,13 @@ -
-
-
{{getTooltipHeader(data)}}
- {{getTooltipMessage(data)}} +
+
{{ data.type }} {{ data.name || data.id }}
+
+
+ Name: + {{ data.name }} +
+
+ {{ property.name }}: + {{ property.value }} +
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss new file mode 100644 index 0000000000..0717a0f0c5 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss @@ -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; + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts index bc0f1777bc..b5f0ba4c89 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts @@ -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(); } } diff --git a/ng2-components/ng2-alfresco-core/styles/_theming.scss b/ng2-components/ng2-alfresco-core/styles/_theming.scss index fc73a4d0db..4f758d6cc0 100644 --- a/ng2-components/ng2-alfresco-core/styles/_theming.scss +++ b/ng2-components/ng2-alfresco-core/styles/_theming.scss @@ -1,2 +1,3 @@ -@import './_variables-color.scss'; -@import './_variables-mdl-overrides.scss'; +@import './_variables-general'; +@import './_variables-color'; +@import './_variables-mdl-overrides'; diff --git a/ng2-components/ng2-alfresco-core/styles/_variables-general.scss b/ng2-components/ng2-alfresco-core/styles/_variables-general.scss new file mode 100644 index 0000000000..db17d1e0dd --- /dev/null +++ b/ng2-components/ng2-alfresco-core/styles/_variables-general.scss @@ -0,0 +1 @@ +$ADF: adf; \ No newline at end of file