[FEATURE] Enable colspan/rowspan sizing options in nested columns (Fl…

…uidTYPO3#1270) Adjusts column sizing so it can be done the exact same way as it is done for a page template. Style attribute is still supported but colspan/rowspan is easier to handle.
dextar47 · Jan 4, 2017 · d30df5e · d30df5e
1 parent 3b65374
commit d30df5e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 40 deletions.
diff --git a/Classes/View/PreviewView.php b/Classes/View/PreviewView.php
@@ -54,17 +54,20 @@ class PreviewView
      * @var array
      */
     protected $templates = [
-        'grid' => '<table cellspacing="0" cellpadding="0" id="content-grid-%s" class="flux-grid%s">
-						<tbody>
-							%s
-						</tbody>
-					</table>',
+        'grid' => '<div class="t3-grid-container">
+                        <table cellspacing="0" cellpadding="0" id="content-grid-%s" class="flux-grid%s" width="100%%" class="t3-page-columns t3-grid-table t3js-page-columns">
+                            <colgroup>
+                                %s
+                            </colgroup>
+                            <tbody>
+                                %s
+                            </tbody>
+					    </table>
+                    </div>
+					',
         'gridColumn' => '<td colspan="%s" rowspan="%s" style="%s">
                             <div data-colpos="%s" class="t3js-sortable t3js-sortable-lang t3js-sortable-lang-%s
                                 t3-page-ce-wrapper ui-sortable" data-language-uid="%s">
-                                <div class="fce-header t3-row-header t3-page-colHeader t3-page-colHeader-label">
-                                    <div>%s</div>
-                                </div>
                                 <div class="t3-page-ce t3js-page-ce" data-page="%s">
                                     <div class="t3js-page-new-ce t3-page-ce-wrapper-new-ce" id="%s"
                                         style="display: block;">
@@ -300,16 +303,26 @@ protected function drawGrid(array $row, Grid $grid, Form $form)
         $collapsedClass = true === $canToggle && true === $isCollapsed ? ' flux-grid-hidden' : '';
         $gridRows = $grid->getRows();
         $content = '';
+        $maximumColumnCount = 0;
         foreach ($gridRows as $gridRow) {
             $content .= '<tr>';
             $columns = $gridRow->getColumns();
+            $columnCount = 0;
             foreach ($columns as $column) {
+                $columnCount += (integer) $column->getColspan();
                 $content .= $this->drawGridColumn($row, $column);
             }
             $content .= '</tr>';
+            $maximumColumnCount = max($maximumColumnCount, $columnCount);
         }
 
-        return sprintf($this->templates['grid'], $row['uid'], $collapsedClass, $content);
+        return sprintf(
+            $this->templates['grid'],
+            $row['uid'],
+            $collapsedClass,
+            str_repeat('<col />', $maximumColumnCount),
+            $content
+        );
     }
 
     /**
@@ -352,7 +365,7 @@ protected function drawGridColumn(array $row, Column $column)
         $id = 'colpos-' . $colPosFluxContent . '-page-' . $row['pid'] . '--top-' . $row['uid'] . '-' . $columnName;
         $target = $this->registerTargetContentAreaInSession($row['uid'], $columnName);
 
-        return $this->parseGridColumnTemplate($row, $column, $colPosFluxContent, $dblist, $target, $id, $content);
+        return $this->parseGridColumnTemplate($row, $column, $target, $id, $content);
     }
 
     /**
@@ -697,33 +710,18 @@ protected function drawPasteIcon(array $row, Column $column, $reference = false,
     /**
      * @param array $row
      * @param Column $column
-     * @param integer $colPosFluxContent
-     * @param PageLayoutView $dblist
-     * @param integer $target
+     * @param string $target
      * @param string $id
      * @param string $content
      * @return string
      */
     protected function parseGridColumnTemplate(
         array $row,
         Column $column,
-        $colPosFluxContent,
-        $dblist,
         $target,
         $id,
         $content
     ) {
-        $label = $column->getLabel();
-        if (strpos($label, 'LLL:') === 0) {
-            $label = LocalizationUtility::translate(
-                $label,
-                ExtensionNamingUtility::getExtensionName($column->getExtensionName())
-            );
-            if (empty($label)) {
-                $label = $column->getLabel();
-            }
-        }
-
         // this variable defines if this drop-area gets activated on drag action
         // of a ce with the same data-language_uid
         $templateClassJsSortableLanguageId = $row['sys_language_uid'];
@@ -762,7 +760,6 @@ protected function parseGridColumnTemplate(
             $target,
             $templateClassJsSortableLanguageId,
             $templateDataLanguageUid,
-            $label,
             $row['pid'],
             $id,
             $this->drawNewIcon($row, $column),

diff --git a/Classes/ViewHelpers/Grid/ColumnViewHelper.php b/Classes/ViewHelpers/Grid/ColumnViewHelper.php
@@ -70,8 +70,8 @@ public function initializeArguments()
             false,
             -1
         );
-        $this->registerArgument('colspan', 'integer', 'Column span');
-        $this->registerArgument('rowspan', 'integer', 'Row span');
+        $this->registerArgument('colspan', 'integer', 'Column span', false, 1);
+        $this->registerArgument('rowspan', 'integer', 'Row span', false, 1);
         $this->registerArgument('style', 'string', 'Inline style to add when rendering the column');
         $this->registerArgument(
             'variables',

diff --git a/Resources/Public/css/grid.css b/Resources/Public/css/grid.css
@@ -1,5 +1,3 @@
-.fce-header { margin-top: 8px; background-color: transparent !important; }
-td.spacer { width: 8px !important; max-width: 8px !important; height: 8px; }
 .toggle-content { cursor: pointer; float: right; margin-top: -15px; }
 .flux-grid { width: 100%; }
 .flux-grid td { vertical-align: top; }
@@ -12,13 +10,7 @@ td.spacer { width: 8px !important; max-width: 8px !important; height: 8px; }
 	width: 100%;
 }
 .flux-grid tr:first-child:last-child td {
-	box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	display: inline-block;
 	min-width: 174px;
-	margin-left: -4px;
-	padding-left: 4px;
 }
 @media (max-width: 750px) {
 	.flux-grid tr:first-child:last-child td {

diff --git a/Tests/Unit/View/PreviewViewTest.php b/Tests/Unit/View/PreviewViewTest.php
@@ -263,14 +263,13 @@ public function configurePageLayoutViewForLanguageModeSetsSpecialVariablesInLang
      */
     public function testParseGridColumnTemplate()
     {
-        $column = $this->getMockBuilder('FluidTYPO3\\Flux\\Form\\Container\\Column')->setMethods(array('getColspan', 'getRowspan', 'getStyle', 'getLabel'))->getMock();
+        $column = $this->getMockBuilder('FluidTYPO3\\Flux\\Form\\Container\\Column')->setMethods(array('getColspan', 'getRowspan', 'getStyle'))->getMock();
         $column->expects($this->once())->method('getColSpan')->willReturn('foobar-colSpan');
         $column->expects($this->once())->method('getRowSpan')->willReturn('foobar-rowSpan');
         $column->expects($this->once())->method('getStyle')->willReturn('foobar-style');
-        $column->expects($this->once())->method('getLabel')->willReturn('foobar-label');
         $subject = $this->getMockBuilder('FluidTYPO3\\Flux\\View\\PreviewView')->setMethods(array('drawNewIcon', 'drawPasteIcon'))->getMock();
         $subject->expects($this->once())->method('drawNewIcon');
         $mockPageLayoutView = $this->getMockBuilder('TYPO3\\CMS\\Backend\\View\\PageLayoutView')->getMock();
-        $this->callInaccessibleMethod($subject, 'parseGridColumnTemplate', array(), $column, 1, $mockPageLayoutView, 'f-target', 2, 'f-content');
+        $this->callInaccessibleMethod($subject, 'parseGridColumnTemplate', array(), $column, 'f-target', 2, 'f-content');
     }
 }