EZP-31236: Added bootstrap tooltip for all nodes with attribute title (…

…#246)
ezsystems · Feb 24, 2020 · 3ef29b1 · 3ef29b1
1 parent 4dda573
commit 3ef29b1
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 7 deletions.
diff --git a/Resources/public/scss/modules/sub-items-list/_table.view.item.scss b/Resources/public/scss/modules/sub-items-list/_table.view.item.scss
@@ -1,4 +1,13 @@
 .c-table-view-item {
+    &__tooltip {
+        top: calculateRem(-5px) !important;
+        left: calculateRem(40px) !important;
+
+        .ez-tooltip__arrow {
+            left: calc(50% - 0.4rem) !important;
+        }
+    }
+
     &__translation {
         display: block;
     }
@@ -183,7 +192,7 @@
     }
 
     &__link {
-        display: block;
+        display: inline-block;
         color: $ez-color-hyperlink;
         text-decoration: none;
         cursor: pointer;

diff --git a/Resources/translations/sub_items.en.xliff b/Resources/translations/sub_items.en.xliff
@@ -216,6 +216,11 @@
         <target state="new">Creator</target>
         <note>key: items_table.header.creator</note>
       </trans-unit>
+      <trans-unit id="1cb1922ab4f684747ddabe1a1b1277893e31006d" resname="items_table.header.filters">
+        <source>Filters</source>
+        <target state="new">Filters</target>
+        <note>key: items_table.header.filters</note>
+      </trans-unit>
       <trans-unit id="fdb8e418a944ccd7b2b8575c09abf1838589d51b" resname="items_table.header.location_id">
         <source>Location ID</source>
         <target state="new">Location ID</target>

diff --git a/src/modules/sub-items/components/action-btn/action.btn.js b/src/modules/sub-items/components/action-btn/action.btn.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../../../common/icon/icon';
+import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
 const ActionButton = (props) => {
     const { disabled, onClick, label, type } = props;
@@ -11,19 +12,23 @@ const ActionButton = (props) => {
         }
     };
     const attrs = {
-        className: `${baseClassName}`,
+        type: 'button',
         title: label,
         tabIndex: '-1',
         onClick: handleClick,
     };
 
-    attrs.className = disabled ? `${attrs.className} ${baseClassName}--disabled` : attrs.className;
-    attrs.className = type ? `${attrs.className} ${baseClassName}--${type}` : attrs.className;
+    attrs.disabled = disabled ? 'disabled' : false;
+    attrs.className = createCssClassNames({
+        [baseClassName]: true,
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--${type}`]: !!type,
+    });
 
     return (
-        <div {...attrs}>
+        <button {...attrs}>
             <Icon name={type} extraClasses="ez-icon--light ez-icon--medium" />
-        </div>
+        </button>
     );
 };
 

diff --git a/src/modules/sub-items/components/table-view/table.view.columns.toggler.js b/src/modules/sub-items/components/table-view/table.view.columns.toggler.js
@@ -108,11 +108,14 @@ export default class TableViewColumnsTogglerComponent extends Component {
     }
 
     render() {
+        const filterLabel = Translator.trans(/*@Desc("Filters")*/ 'items_table.header.filters', {}, 'sub_items');
+
         return (
             <div className="c-table-view-columns-toggler">
                 <button
                     ref={this._refTogglerButton}
                     type="button"
+                    title={filterLabel}
                     className="btn btn-dark c-table-view-columns-toggler__btn"
                     onClick={this.togglePanel}>
                     <Icon name="filters" extraClasses="ez-icon--small ez-icon--light" />

diff --git a/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/modules/sub-items/components/table-view/table.view.item.component.js
@@ -352,6 +352,7 @@ export default class TableViewItemComponent extends PureComponent {
                 <td className="c-table-view-item__cell c-table-view-item__cell--actions">
                     <span
                         title={editLabel}
+                        data-extra-classes="c-table-view-item__tooltip"
                         onClick={this.handleEdit}
                         className="c-table-view-item__btn c-table-view-item__btn--edit"
                         tabIndex={-1}>

diff --git a/src/modules/sub-items/sub.items.module.js b/src/modules/sub-items/sub.items.module.js
@@ -104,6 +104,8 @@ export default class SubItemsModule extends Component {
         if (shouldLoadPage) {
             this.loadPage(activePageIndex);
         }
+
+        eZ.helpers.tooltips.parse();
     }
 
     componentWillUnmount() {
@@ -241,7 +243,10 @@ export default class SubItemsModule extends Component {
      * @memberof SubItemsModule
      */
     switchView(activeView) {
-        this.setState(() => ({ activeView }));
+        this.setState(
+            () => ({ activeView }),
+            () => eZ.helpers.tooltips.hideAll()
+        );
     }
 
     toggleItemSelection(item, isSelected) {