[TASK] Page module styling
authorNicole Cordes <nicole@cordes.co>
Sat, 17 Nov 2012 00:28:40 +0000 (01:28 +0100)
committerHelmut Hummel <helmut.hummel@typo3.org>
Mon, 26 Nov 2012 21:32:43 +0000 (22:32 +0100)
* styling for the BE layout (grid element)

Resolves: #43208
Releases: 6.0

Change-Id: I80637c5fc49b3f612399f4c42d863520b39b008b
Reviewed-on: http://review.typo3.org/16752
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter
Reviewed-by: Helmut Hummel
Tested-by: Helmut Hummel
typo3/sysext/backend/Classes/View/PageLayoutView.php
typo3/sysext/t3skin/images/backgrounds/layout-not-assigned.png [new file with mode: 0644]
typo3/sysext/t3skin/stylesheets/structure/module_web_page.css
typo3/sysext/t3skin/stylesheets/visual/module_web_page.css

index 813ee45..0e4194c 100644 (file)
@@ -545,6 +545,8 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                if (!isset($rowConfig)) {
                                                        continue;
                                                }
+
+                                               // grid header
                                                $grid .= '<tr>';
                                                for ($col = 1; $col <= $colCount; $col++) {
                                                        $columnConfig = $rowConfig['columns.'][$col . '.'];
@@ -556,11 +558,12 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        // Render the grid cell
                                                        $colSpan = intval($columnConfig['colspan']);
                                                        $rowSpan = intval($columnConfig['rowspan']);
-                                                       $grid .= '<td valign="top"' . ($colSpan > 0 ? ' colspan="' . $colSpan . '"' : '') . ($rowSpan > 0 ? ' rowspan="' . $rowSpan . '"' : '') . ' class="t3-gridCell t3-page-column t3-page-column-' . $columnKey . (!isset($columnConfig['colPos']) ? ' t3-gridCell-unassigned' : '') . (isset($columnConfig['colPos']) && !$head[$columnKey] ? ' t3-gridCell-restricted' : '') . ($colSpan > 0 ? ' t3-gridCell-width' . $colSpan : '') . ($rowSpan > 0 ? ' t3-gridCell-height' . $rowSpan : '') . '">';
+
+                                                       $grid .= '<td valign="top"' . ($colSpan > 0 ? ' colspan="' . $colSpan . '"' : '') . ($rowSpan > 0 ? ' rowspan="' . $rowSpan . '"' : '') . ' class="t3-gridCell t3-gridCell-header t3-page-column t3-page-column-' . $columnKey . (!isset($columnConfig['colPos']) ? ' t3-gridCell-unassigned' : '') . (isset($columnConfig['colPos']) && !$head[$columnKey] ? ' t3-gridCell-restricted' : '') . ($colSpan > 0 ? ' t3-gridCell-width' . $colSpan : '') . ($rowSpan > 0 ? ' t3-gridCell-height' . $rowSpan : '') . '">';
                                                        // Draw the pre-generated header with edit and new buttons if a colPos is assigned.
                                                        // If not, a new header without any buttons will be generated.
                                                        if (isset($columnConfig['colPos']) && $head[$columnKey]) {
-                                                               $grid .= $head[$columnKey] . $content[$columnKey];
+                                                               $grid .= $head[$columnKey];
                                                        } elseif ($columnConfig['colPos']) {
                                                                $grid .= $this->tt_content_drawColHeader($GLOBALS['LANG']->getLL('noAccess'), '', '');
                                                        } else {
@@ -569,6 +572,28 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                                        $grid .= '</td>';
                                                }
                                                $grid .= '</tr>';
+
+                                               // grid content
+                                               $grid .= '<tr>';
+                                               for ($col = 1; $col <= $colCount; $col++) {
+                                                       $columnConfig = $rowConfig['columns.'][$col . '.'];
+                                                       if (!isset($columnConfig)) {
+                                                               continue;
+                                                       }
+                                                       // Which tt_content colPos should be displayed inside this cell
+                                                       $columnKey = intval($columnConfig['colPos']);
+                                                       // Render the grid cell
+                                                       $colSpan = intval($columnConfig['colspan']);
+                                                       $rowSpan = intval($columnConfig['rowspan']);
+                                                       // grid content
+                                                       $grid .= '<td valign="top"' . ($colSpan > 0 ? ' colspan="' . $colSpan . '"' : '') . ($rowSpan > 0 ? ' rowspan="' . $rowSpan . '"' : '') . ' class="t3-gridCell t3-gridCell-content t3-page-column t3-page-column-' . $columnKey . (!isset($columnConfig['colPos']) ? ' t3-gridCell-unassigned' : '') . (isset($columnConfig['colPos']) && !$head[$columnKey] ? ' t3-gridCell-restricted' : '') . ($colSpan > 0 ? ' t3-gridCell-width' . $colSpan : '') . ($rowSpan > 0 ? ' t3-gridCell-height' . $rowSpan : '') . '">';
+                                                       if (isset($columnConfig['colPos']) && $head[$columnKey]) {
+                                                               $grid .=  $content[$columnKey];
+                                                       }
+                                                       $grid .= '</td>';
+                                               }
+                                               $grid .= '</tr>';
+
                                        }
                                        $out .= $grid . '</table></div>';
                                }
@@ -1944,4 +1969,4 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
 }
 
 
-?>
\ No newline at end of file
+?>
diff --git a/typo3/sysext/t3skin/images/backgrounds/layout-not-assigned.png b/typo3/sysext/t3skin/images/backgrounds/layout-not-assigned.png
new file mode 100644 (file)
index 0000000..6902b1d
Binary files /dev/null and b/typo3/sysext/t3skin/images/backgrounds/layout-not-assigned.png differ
index f4b0114..43860b3 100644 (file)
@@ -6,7 +6,16 @@ Web > Page
 td.t3-page-column {
        min-width: 150px;
        max-width: 300px;
-       padding: 0 12px;
+       border-left: 12px solid #F8F8F8;
+       border-right: 12px solid #F8F8F8;
+}
+
+td.t3-page-column:first-child {
+       border-left: none;
+}
+
+td.t3-page-column:last-child {
+       border-right: none;
 }
 
 .t3-page-colHeader {
@@ -105,4 +114,11 @@ td.t3-gridCell div.t3-page-ce {
 
 .t3-page-ce.active .t3-page-ce-body {
        margin: 0;
+}
+
+#ext-cms-layout-db-layout-php h2 {
+       margin-bottom: 0px;
+}
+td.t3-page-column.t3-gridCell-header {
+       padding-top: 36px;
 }
\ No newline at end of file
index 0c51f75..a804c5f 100644 (file)
@@ -138,8 +138,8 @@ td.t3-gridCell-restricted {
        background-color: #e8e0e0;
 }
 
-td.t3-gridCell-unassigned {
-       background-color: #e5e5e5;
+td.t3-gridCell-content.t3-gridCell-unassigned {
+       background: url('../../images/backgrounds/layout-not-assigned.png') repeat;
 }
 
 .t3-gridContainer .t3-page-ce-wrapper .t3-row-header {
@@ -147,20 +147,6 @@ td.t3-gridCell-unassigned {
        background-color: #cacaca;
 }
 
-td.t3-gridCell-restricted div.t3-row-header,
-td.t3-gridCell-unassigned div.t3-row-header {
-       -moz-opacity: 0.4;
-       opacity: .40;
-       filter: alpha(opacity = 40);
-}
-
-td.t3-gridCell-restricted div.t3-row-header div,
-td.t3-gridCell-unassigned div.t3-row-header div {
-       -moz-opacity: 0.6;
-       opacity: .60;
-       filter: alpha(opacity = 60);
-}
-
 .t3-page-ce .t3-row-header .ce-icons,
 .t3-page-ce .t3-row-header .ce-icons-left{
        visibility: hidden;
@@ -196,4 +182,4 @@ td.t3-gridCell-unassigned div.t3-row-header div {
        background-image: -moz-linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #7f7f7f), color-stop(1, #5b5b5b));
        background-repeat: repeat-x;
-}
\ No newline at end of file
+}