[FEATURE] Allow row highlight in table.t3-table 77/33677/3
authorFelix Kopp <felix-source@phorax.com>
Sat, 1 Nov 2014 00:38:23 +0000 (01:38 +0100)
committerFrank Nägler <typo3@naegler.net>
Sat, 1 Nov 2014 10:06:43 +0000 (11:06 +0100)
<table class="t3-table"> is the TYPO3 standard class. Allows
success / danger / warning / info and active on table rows
and table cells.

Also makes use of new table row markup in Report>Services.
This preceedes #62580 since FlashMessages can't be changed.

Test run this patch with EXT: styleguide Table demo markup.

Resolves: #62592
Releases: master
Change-Id: I36b4977ab1c412b4f29e4c6a1b958f498304048f
Reviewed-on: http://review.typo3.org/33677
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/sysext/sv/Classes/Report/ServicesListReport.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_table.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 767663c..266edeb 100644 (file)
@@ -85,24 +85,29 @@ class ServicesListReport implements \TYPO3\CMS\Reports\ReportInterface {
         * @return string Service list as HTML for one service type
         */
        protected function renderServiceTypeList($serviceType, $services) {
-               $header = '<h3 class="divider">' . sprintf($GLOBALS['LANG']->getLL('service_type'), $serviceType) . '</h3>';
+               $header = '<h3>' . sprintf($GLOBALS['LANG']->getLL('service_type'), $serviceType) . '</h3>';
                $serviceList = '
-               <table class="t3-table tx_sv_reportlist">
-                       <thead><tr class="t3-row-header">
-                               <td style="width: 35%">' . $GLOBALS['LANG']->getLL('service') . '</td>
-                               <td>' . $GLOBALS['LANG']->getLL('priority') . '</td>
-                               <td>' . $GLOBALS['LANG']->getLL('quality') . '</td>
-                               <td style="width: 35%">' . $GLOBALS['LANG']->getLL('subtypes') . '</td>
-                               <td>' . $GLOBALS['LANG']->getLL('os') . '</td>
-                               <td>' . $GLOBALS['LANG']->getLL('externals') . '</td>
-                               <td>' . $GLOBALS['LANG']->getLL('available') . '</td>
-                       </tr></thead><tbody>';
+                       <table class="t3-table table tx_sv_reportlist">
+                               <thead>
+                                       <tr>
+                                               <td style="width: 35%">' . $GLOBALS['LANG']->getLL('service') . '</td>
+                                               <td>' . $GLOBALS['LANG']->getLL('priority') . '</td>
+                                               <td>' . $GLOBALS['LANG']->getLL('quality') . '</td>
+                                               <td style="width: 35%">' . $GLOBALS['LANG']->getLL('subtypes') . '</td>
+                                               <td>' . $GLOBALS['LANG']->getLL('os') . '</td>
+                                               <td>' . $GLOBALS['LANG']->getLL('externals') . '</td>
+                                               <td>' . $GLOBALS['LANG']->getLL('available') . '</td>
+                                       </tr>
+                               </thead>
+                       <tbody>';
+
                foreach ($services as $serviceKey => $serviceInformation) {
                        $serviceList .= $this->renderServiceRow($serviceKey, $serviceInformation);
                }
+
                $serviceList .= '
-               </tbody>
-               </table>
+                       </tbody>
+                       </table>
                ';
                return $header . $serviceList;
        }
@@ -125,27 +130,27 @@ class ServicesListReport implements \TYPO3\CMS\Reports\ReportInterface {
                $serviceSubtypes = $serviceInformation['serviceSubTypes'] ? implode(', ', $serviceInformation['serviceSubTypes']) : '-';
                $serviceOperatingSystem = $serviceInformation['os'] ?: $GLOBALS['LANG']->getLL('any');
                $serviceRequiredExecutables = $serviceInformation['exec'] ?: '-';
-               $serviceAvailabilityClass = 'alert alert-danger';
+               $serviceAvailabilityClass = 'danger';
                $serviceAvailable = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_common.xlf:no');
                try {
                        $serviceDetails = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::findServiceByKey($serviceKey);
                        if ($serviceDetails['available']) {
-                               $serviceAvailabilityClass = 'alert alert-success';
+                               $serviceAvailabilityClass = 'success';
                                $serviceAvailable = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_common.xlf:yes');
                        }
                } catch (\TYPO3\CMS\Core\Exception $e) {
 
                }
                $serviceRow = '
-               <tr class="service">
-                       <td class="first-cell ' . $serviceAvailabilityClass . '">' . $serviceDescription . '</td>
-                       <td class="cell ' . $serviceAvailabilityClass . '">' . $serviceInformation['priority'] . '</td>
-                       <td class="cell ' . $serviceAvailabilityClass . '">' . $serviceInformation['quality'] . '</td>
-                       <td class="cell ' . $serviceAvailabilityClass . '">' . $serviceSubtypes . '</td>
-                       <td class="cell ' . $serviceAvailabilityClass . '">' . $serviceOperatingSystem . '</td>
-                       <td class="cell ' . $serviceAvailabilityClass . '">' . $serviceRequiredExecutables . '</td>
-                       <td class="last-cell ' . $serviceAvailabilityClass . '">' . $serviceAvailable . '</td>
-               </tr>';
+                       <tr class="service ' . $serviceAvailabilityClass . '">
+                               <td class="first-cell">' . $serviceDescription . '</td>
+                               <td class="cell">' . $serviceInformation['priority'] . '</td>
+                               <td class="cell">' . $serviceInformation['quality'] . '</td>
+                               <td class="cell">' . $serviceSubtypes . '</td>
+                               <td class="cell">' . $serviceOperatingSystem . '</td>
+                               <td class="cell">' . $serviceRequiredExecutables . '</td>
+                               <td class="last-cell">' . $serviceAvailable . '</td>
+                       </tr>';
                return $serviceRow;
        }
 
@@ -163,23 +168,23 @@ class ServicesListReport implements \TYPO3\CMS\Reports\ReportInterface {
                        $content .= '
                        <table class="t3-table tx_sv_reportlist">
                                <thead>
-                                       <tr class="t3-row-header">
+                                       <tr>
                                                <td>' . $GLOBALS['LANG']->getLL('path') . '</td>
                                                <td>' . $GLOBALS['LANG']->getLL('valid') . '</td>
                                        </tr>
                                </thead>
                                <tbody>';
                        foreach ($searchPaths as $path => $isValid) {
-                               $pathAccessibleClass = 'alert alert-danger';
+                               $pathAccessibleClass = 'danger';
                                $pathAccessible = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_common.xlf:no');
                                if ($isValid) {
-                                       $pathAccessibleClass = 'alert alert-success';
+                                       $pathAccessibleClass = 'success';
                                        $pathAccessible = $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_common.xlf:yes');
                                }
                                $content .= '
-                                       <tr>
-                                               <td class="first-cell ' . $pathAccessibleClass . '">' . \TYPO3\CMS\Core\Utility\GeneralUtility::fixWindowsFilePath($path) . '</td>
-                                               <td class="last-cell ' . $pathAccessibleClass . '">' . $pathAccessible . '</td>
+                                       <tr class="' . $pathAccessibleClass . '">
+                                               <td class="first-cell">' . \TYPO3\CMS\Core\Utility\GeneralUtility::fixWindowsFilePath($path) . '</td>
+                                               <td class="last-cell">' . $pathAccessible . '</td>
                                        </tr>';
                        }
                        $content .= '
index 9a355f3..0638d8a 100644 (file)
@@ -97,4 +97,115 @@ table.t3-table {
        .table;
        .table-striped;
        .table-hover;
+
+       // .active
+       > thead > tr,
+       > tbody > tr,
+       > tfoot > tr {
+               > td.active,
+               > th.active,
+               &.active > td,
+               &.active > th {
+                       background-color: @table-bg-active;
+               }
+       }
+
+       > tbody > tr {
+               > td.active:hover,
+               > th.active:hover,
+               &.active:hover > td,
+               &:hover > .active,
+               &.active:hover > th {
+                       background-color: darken(@table-bg-active, 5%);
+               }
+       }
+
+       // .success
+       > thead > tr,
+       > tbody > tr,
+       > tfoot > tr {
+               > td.success,
+               > th.success,
+               &.success > td,
+               &.success > th {
+                       background-color: @state-success-bg;
+               }
+       }
+
+       > tbody > tr {
+               > td.success:hover,
+               > th.success:hover,
+               &.success:hover > td,
+               &:hover > .success,
+               &.success:hover > th {
+                       background-color: darken(@state-success-bg, 5%);
+               }
+       }
+
+       // .info
+       > thead > tr,
+       > tbody > tr,
+       > tfoot > tr {
+               > td.info,
+               > th.info,
+               &.info > td,
+               &.info > th {
+                       background-color: @state-info-bg;
+               }
+       }
+
+       > tbody > tr {
+               > td.info:hover,
+               > th.info:hover,
+               &.info:hover > td,
+               &:hover > .info,
+               &.info:hover > th {
+                       background-color: darken(@state-info-bg, 5%);
+               }
+       }
+
+       // .warning
+       > thead > tr,
+       > tbody > tr,
+       > tfoot > tr {
+               > td.warning,
+               > th.warning,
+               &.warning > td,
+               &.warning > th {
+                       background-color: @state-warning-bg;
+               }
+       }
+
+       > tbody > tr {
+               > td.warning:hover,
+               > th.warning:hover,
+               &.warning:hover > td,
+               &:hover > .warning,
+               &.warning:hover > th {
+                       background-color: darken(@state-warning-bg, 5%);
+               }
+       }
+
+       // .danger
+       > thead > tr,
+       > tbody > tr,
+       > tfoot > tr {
+               > td.danger,
+               > th.danger,
+               &.danger > td,
+               &.danger > th {
+                       background-color: @state-danger-bg;
+               }
+       }
+
+       > tbody > tr {
+               > td.danger:hover,
+               > th.danger:hover,
+               &.danger:hover > td,
+               &:hover > .danger,
+               &.danger:hover > th {
+                       background-color: darken(@state-danger-bg, 5%);
+               }
+       }
+
 }
\ No newline at end of file
index 15e277e..c1bb653 100644 (file)
@@ -8754,6 +8754,111 @@ table.t3-table > tbody > tr:nth-child(odd) {
 table.t3-table > tbody > tr:hover {
   background-color: #e0e0e0;
 }
+table.t3-table > thead > tr > td.active,
+table.t3-table > tbody > tr > td.active,
+table.t3-table > tfoot > tr > td.active,
+table.t3-table > thead > tr > th.active,
+table.t3-table > tbody > tr > th.active,
+table.t3-table > tfoot > tr > th.active,
+table.t3-table > thead > tr.active > td,
+table.t3-table > tbody > tr.active > td,
+table.t3-table > tfoot > tr.active > td,
+table.t3-table > thead > tr.active > th,
+table.t3-table > tbody > tr.active > th,
+table.t3-table > tfoot > tr.active > th {
+  background-color: #e0e0e0;
+}
+table.t3-table > tbody > tr > td.active:hover,
+table.t3-table > tbody > tr > th.active:hover,
+table.t3-table > tbody > tr.active:hover > td,
+table.t3-table > tbody > tr:hover > .active,
+table.t3-table > tbody > tr.active:hover > th {
+  background-color: #d3d3d3;
+}
+table.t3-table > thead > tr > td.success,
+table.t3-table > tbody > tr > td.success,
+table.t3-table > tfoot > tr > td.success,
+table.t3-table > thead > tr > th.success,
+table.t3-table > tbody > tr > th.success,
+table.t3-table > tfoot > tr > th.success,
+table.t3-table > thead > tr.success > td,
+table.t3-table > tbody > tr.success > td,
+table.t3-table > tfoot > tr.success > td,
+table.t3-table > thead > tr.success > th,
+table.t3-table > tbody > tr.success > th,
+table.t3-table > tfoot > tr.success > th {
+  background-color: #dff0d8;
+}
+table.t3-table > tbody > tr > td.success:hover,
+table.t3-table > tbody > tr > th.success:hover,
+table.t3-table > tbody > tr.success:hover > td,
+table.t3-table > tbody > tr:hover > .success,
+table.t3-table > tbody > tr.success:hover > th {
+  background-color: #d0e9c6;
+}
+table.t3-table > thead > tr > td.info,
+table.t3-table > tbody > tr > td.info,
+table.t3-table > tfoot > tr > td.info,
+table.t3-table > thead > tr > th.info,
+table.t3-table > tbody > tr > th.info,
+table.t3-table > tfoot > tr > th.info,
+table.t3-table > thead > tr.info > td,
+table.t3-table > tbody > tr.info > td,
+table.t3-table > tfoot > tr.info > td,
+table.t3-table > thead > tr.info > th,
+table.t3-table > tbody > tr.info > th,
+table.t3-table > tfoot > tr.info > th {
+  background-color: #d9edf7;
+}
+table.t3-table > tbody > tr > td.info:hover,
+table.t3-table > tbody > tr > th.info:hover,
+table.t3-table > tbody > tr.info:hover > td,
+table.t3-table > tbody > tr:hover > .info,
+table.t3-table > tbody > tr.info:hover > th {
+  background-color: #c4e3f3;
+}
+table.t3-table > thead > tr > td.warning,
+table.t3-table > tbody > tr > td.warning,
+table.t3-table > tfoot > tr > td.warning,
+table.t3-table > thead > tr > th.warning,
+table.t3-table > tbody > tr > th.warning,
+table.t3-table > tfoot > tr > th.warning,
+table.t3-table > thead > tr.warning > td,
+table.t3-table > tbody > tr.warning > td,
+table.t3-table > tfoot > tr.warning > td,
+table.t3-table > thead > tr.warning > th,
+table.t3-table > tbody > tr.warning > th,
+table.t3-table > tfoot > tr.warning > th {
+  background-color: #fcf8e3;
+}
+table.t3-table > tbody > tr > td.warning:hover,
+table.t3-table > tbody > tr > th.warning:hover,
+table.t3-table > tbody > tr.warning:hover > td,
+table.t3-table > tbody > tr:hover > .warning,
+table.t3-table > tbody > tr.warning:hover > th {
+  background-color: #faf2cc;
+}
+table.t3-table > thead > tr > td.danger,
+table.t3-table > tbody > tr > td.danger,
+table.t3-table > tfoot > tr > td.danger,
+table.t3-table > thead > tr > th.danger,
+table.t3-table > tbody > tr > th.danger,
+table.t3-table > tfoot > tr > th.danger,
+table.t3-table > thead > tr.danger > td,
+table.t3-table > tbody > tr.danger > td,
+table.t3-table > tfoot > tr.danger > td,
+table.t3-table > thead > tr.danger > th,
+table.t3-table > tbody > tr.danger > th,
+table.t3-table > tfoot > tr.danger > th {
+  background-color: #f2dede;
+}
+table.t3-table > tbody > tr > td.danger:hover,
+table.t3-table > tbody > tr > th.danger:hover,
+table.t3-table > tbody > tr.danger:hover > td,
+table.t3-table > tbody > tr:hover > .danger,
+table.t3-table > tbody > tr.danger:hover > th {
+  background-color: #ebcccc;
+}
 /**
  * This file is part of the TYPO3 CMS project.
  *