Fixes #5355, add plus/minus icons to left of rows w/ subtables that c…

…hange when tables expand/contract. Also add tooltip to rows w/ subtables.
matomo-org · Sep 9, 2014 · c2446bb · c2446bb
1 parent ae31705
commit c2446bb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
@@ -1512,6 +1512,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 }
 
                 $(this).next().toggle();
+                $(this).toggleClass('expanded');
                 self.repositionRowActions($(this));
             }
         ).size();

diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
@@ -58,6 +58,7 @@
         "UnFlattenDataTable": "The report is flat %s Make it hierarchical",
         "ViewAllPiwikVideoTutorials": "View all Piwik Video Tutorials",
         "WebAnalyticsReports": "Web Analytics Reports",
-        "YouAreUsingTheLatestVersion": "You are using the latest version of Piwik!"
+        "YouAreUsingTheLatestVersion": "You are using the latest version of Piwik!",
+        "ClickRowToExpandOrContract": "Click this row to expand or contract the subtable."
     }
 }
diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
@@ -28,7 +28,8 @@
 
                 {% if showRow %}
                 <tr {% if rowHasSubtable %}id="{{ row.getIdSubDataTable() }}"{% endif %}
-                    class="{{ row.getMetadata('css_class') }} {% if rowHasSubtable %}subDataTable{% endif %}{% if shouldHighlightRow %} highlight{% endif %}">
+                    class="{{ row.getMetadata('css_class') }} {% if rowHasSubtable %}subDataTable{% endif %}{% if shouldHighlightRow %} highlight{% endif %}"
+                    title="{{ 'CoreHome_ClickRowToExpandOrContract'|translate }}">
                     {% for column in properties.columns_to_display %}
                         <td>
                             {% include "@CoreHome/_dataTableCell.twig" with properties %}

diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
@@ -454,6 +454,24 @@ table.dataTable {
     &.dataTableVizVisitorLog {
 
     }
+
+    tr.subDataTable > td:first-child:before {
+        display: inline-block;
+        float: left;
+        top: 0;
+        width: 1.25em;
+        font-size: .8em;
+        font-style: italic;
+        color:#888;
+    }
+
+    tr.subDataTable:not(.expanded) > td:first-child:before {
+        content: '+';
+    }
+
+    tr.subDataTable.expanded > td:first-child:before {
+        content: '-';
+    }
 }
 
 table.dataTable tr.subDataTable:hover > td, table.dataTable tr.subDataTable:hover > td .dataTableRowActions {