[TASK] Styling of Page module

Overwork the styling of the Page module:

* New style for columns
* Hide new icons by default, show on hover
* Style Drag & Drop

Thanks to Lars Zimmermann and Jens Hoffmann

Change-Id: I7f06382c51561e8c9855af0ef15afea1a8dd6acb
Resolves: #43208
Releases: 6.0
Reviewed-on: http://review.typo3.org/16700
Reviewed-by: Steffen Gebert
Tested-by: Steffen Gebert
Reviewed-by: Philipp Gampe
Tested-by: Philipp Gampe
Reviewed-by: Jigal van Hemert
Tested-by: Jigal van Hemert
Reviewed-by: Helmut Hummel
Tested-by: Helmut Hummel

diff --git a/typo3/sysext/backend/Classes/View/PageLayoutView.php b/typo3/sysext/backend/Classes/View/PageLayoutView.php
index 1e4073c..0ab664a 100644 (file)
--- a/typo3/sysext/backend/Classes/View/PageLayoutView.php
+++ b/typo3/sysext/backend/Classes/View/PageLayoutView.php
@@ -441,6 +441,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        $result = $GLOBALS['TYPO3_DB']->exec_SELECT_queryArray($queryParts);
                                        // Traverse any selected elements and render their display code:
                                        $rowArr = $this->getResult($result);
+                                       $editUidList = '';
                                        foreach ($rowArr as $rKey => $row) {
                                                if ($this->tt_contentConfig['languageMode']) {
                                                        $languageColumn[$key][$lP] = $head[$key] . $content[$key];
@@ -529,7 +530,7 @@ class PageLayoutView extends \TYPO3\CMS\Recordlist\RecordList\AbstractDatabaseRe
                                        // Initialize TS parser to parse config to array
                                        $parser = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\TypoScript\\Parser\\TypoScriptParser');
                                        $parser->parse($backendLayoutRecord['config']);
-                                       $grid .= '<div class="t3-gridContainer"><table border="0" cellspacing="6" cellpadding="7" width="100%" height="100%" class="t3-page-columns t3-gridTable">';
+                                       $grid .= '<div class="t3-gridContainer"><table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" class="t3-page-columns t3-gridTable">';
                                        // Add colgroups
                                        $colCount = intval($parser->setup['backend_layout.']['colCount']);
                                        $rowCount = intval($parser->setup['backend_layout.']['rowCount']);

diff --git a/typo3/sysext/cms/layout/js/typo3pageModule.js b/typo3/sysext/cms/layout/js/typo3pageModule.js
index 04bd307..ddde2cb 100644 (file)
--- a/typo3/sysext/cms/layout/js/typo3pageModule.js
+++ b/typo3/sysext/cms/layout/js/typo3pageModule.js
@@ -85,16 +85,32 @@ TYPO3.Components.PageModule = {
                                        this.el = Ext.get(this.getEl());
                                }
 
-                               //Cache the original XY Coordinates of the element, we'll use this later.
+                               // Add css class for the drag shadow
+                               this.el.child('.t3-page-ce-dragitem').addClass('dragitem-shadow');
+                               // Hide create new element button
+                               this.el.child('.t3-icon-document-new').addClass('drag-start');
+
+                               // Cache the original XY Coordinates of the element, we'll use this later.
                                this.originalXY = this.el.getXY();
+
+                               var dropZones = Ext.select('.t3-page-ce-dropzone');
+                               var self = this;
+                               Ext.each(dropZones.elements, function(el) {
+                                       var dropZoneElement = Ext.get(el);
+                                       // Only highlight valid drop targets
+                                       if (dropZoneElement.id != self.el.prev().child('.t3-page-ce-dropzone').id &&
+                                       dropZoneElement.id != self.el.child('.t3-page-ce-dropzone').id) {
+                                               dropZoneElement.addClass('t3-page-ce-dropzone-available');
+                                       }
+                               });
                        },
                        // Called when element is dropped not anything other than a dropzone with the same ddgroup
-                       onInvalidDrop:function () {
+                       onInvalidDrop: function () {
                                // Set a flag to invoke the animated repair
                                this.invalidDrop = true;
                        },
                        // Called when the drag operation completes
-                       endDrag:function () {
+                       endDrag: function () {
                                // Invoke the animation if the invalidDrop flag is set to true
                                if (this.invalidDrop === true) {
                                        // Remove the drop invitation
@@ -105,7 +121,7 @@ TYPO3.Components.PageModule = {
                                                easing:'easeOut',
                                                duration:0.3,
                                                scope:this,
-                                               callback:function () {
+                                               callback: function () {
                                                        // Remove the position attribute
                                                        this.el.dom.style.position = '';
                                                }
@@ -116,9 +132,19 @@ TYPO3.Components.PageModule = {
                                        delete this.invalidDrop;
                                }
 
+                               var dropZones = Ext.select('.t3-page-ce-dropzone');
+                               Ext.each(dropZones.elements, function(el) {
+                                       Ext.get(el).removeClass('t3-page-ce-dropzone-available');
+                               });
+
+                               // Remove dragitem-shadow after dragging
+                               this.el.child('.t3-page-ce-dragitem').removeClass('dragitem-shadow');
+                               // Show create new element button again
+                               this.el.child('.t3-icon-document-new').removeClass('drag-start');
+
                        },
                        // Called upon successful drop of an element on a DDTarget with the same
-                       onDragDrop:function (evtObj, targetElId) {
+                       onDragDrop: function (evtObj, targetElId) {
                                // Wrap the drop target element with Ext.Element
                                var dropEl = Ext.get(targetElId);
 

diff --git a/typo3/sysext/t3skin/stylesheets/structure/module_web_page.css b/typo3/sysext/t3skin/stylesheets/structure/module_web_page.css
index c57fe4c..f4b0114 100644 (file)
--- a/typo3/sysext/t3skin/stylesheets/structure/module_web_page.css
+++ b/typo3/sysext/t3skin/stylesheets/structure/module_web_page.css
@@ -6,11 +6,12 @@ Web > Page
 td.t3-page-column {
        min-width: 150px;
        max-width: 300px;
+       padding: 0 12px;
 }
 
 .t3-page-colHeader {
-       margin-bottom: 10px;
-       padding-left: 20px;
+       margin-bottom: 0;
+       padding-left: 10px;
        padding-right: 20px;
        position: relative;
 }
@@ -21,16 +22,15 @@ td.t3-page-column {
 
 .t3-page-colHeader-icons {
        position: absolute;
-       left: 4px;
+       right: 0;
 }
 
 .t3-page-ce-wrapper {
-       padding: 12px 0 5px 0;
+       padding: 0 0 5px 0;
 }
 
 .t3-page-ce-wrapper-new-ce {
-       margin-bottom: 7px;
-       margin-left: 5px;
+       margin: 0 0 0 5px;
 }
 
 .t3-page-ce-droptarget {
@@ -38,36 +38,29 @@ td.t3-page-column {
 }
 
 .t3-page-ce {
-       margin-bottom: 5px;
        min-width: 150px;
-       opacity: .70;
+}
+
+.t3-page-ce.t3-page-ce-hidden {
+       opacity: .40;
 }
 
 .t3-page-ce:hover {
        opacity: 1;
 }
 
-.t3-page-ce-dragitem:hover {
-    cursor: move;
+.t3-page-ce-dropzone {
+       margin: 12px 0;
 }
 
-.t3-page-ce-wrapper-new-ce {
-    opacity: 1;
-    cursor: default;
+.t3-page-ce-dragitem {
+       margin-bottom: 10px;
 }
 
 .t3-page-ce h4 {
        margin: 0;
 }
 
-.t3-page-ce .t3-row-header .ce-icons{
-       visibility: hidden;
-}
-
-.t3-page-ce.active .t3-row-header .ce-icons {
-       visibility: visible;
-}
-
 .t3-row-header .ce-icons-left {
        float: left;
 }
@@ -103,9 +96,13 @@ td.t3-page-column {
 }
 
 table.typo3-page-columnsMode img.c-divider {
-       margin: 10px 0px 5px 0px;
+       margin: 10px 0 5px 0;
 }
 
 td.t3-gridCell div.t3-page-ce {
-       padding: 1px 5px 5px 5px;
+       padding: 1px 12px 0 12px;
+}
+
+.t3-page-ce.active .t3-page-ce-body {
+       margin: 0;
 }
\ No newline at end of file

diff --git a/typo3/sysext/t3skin/stylesheets/visual/main_content.css b/typo3/sysext/t3skin/stylesheets/visual/main_content.css
index 3c3e630..3fd265a 100644 (file)
--- a/typo3/sysext/t3skin/stylesheets/visual/main_content.css
+++ b/typo3/sysext/t3skin/stylesheets/visual/main_content.css
@@ -133,11 +133,7 @@ table.t3-table-info {
 }
 
 .t3-row-header {
-       background-color: #5b5b5b;
-       background-image: url('../../images/backgrounds/row-header.png');
-       background-image: linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
-       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-color: #cacaca;
        background-repeat: repeat-x;
        color: #fff;
        font-size: 10px;
@@ -145,13 +141,6 @@ table.t3-table-info {
        height: 20px;
 }
 
-.t3-page-ce-icons-move {
-       background-image: linear-gradient(center top , #878788 10%, #707070 100%);
-       background-image: -moz-linear-gradient(center top , #878788 10%, #707070 100%);
-       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #878788), color-stop(1, #707070));
-       background-repeat: repeat-x;
-}
-
 .t3-row-header a {
        color: #fff;
        float: left;

diff --git a/typo3/sysext/t3skin/stylesheets/visual/module_web_page.css b/typo3/sysext/t3skin/stylesheets/visual/module_web_page.css
index 3d935aa..70908bc 100644 (file)
--- a/typo3/sysext/t3skin/stylesheets/visual/module_web_page.css
+++ b/typo3/sysext/t3skin/stylesheets/visual/module_web_page.css
@@ -12,13 +12,23 @@ Web > Page
 }
 
 .t3-page-colHeader {
-       font-weight: bold;
+       background: none;
+       color: #999999;
+       font-family: Verdana, sans-serif;
+       font-size: 13px;
        text-align: left;
-       font-size: 11px;
 }
 
 .t3-page-colHeader-label {
-       text-align: center;
+       text-align: left;
+}
+
+.t3-page-colHeader-icons {
+       visibility: hidden;
+}
+
+.t3-page-colHeader:hover .t3-page-colHeader-icons {
+       visibility: visible;
 }
 
 .t3-page-border {
@@ -27,7 +37,14 @@ Web > Page
 }
 
 .t3-page-ce-wrapper {
-       border-left: 2px solid #c8c8c8;
+       background-color: #f1f1f1;
+       border-top: 1px solid #cdcdcd;
+       border-bottom: 1px solid #cdcdcd;
+}
+
+.t3-page-ce-wrapper-new-ce {
+       cursor: default;
+       opacity: 1;
 }
 
 .t3-page-ce-droptarget {
@@ -42,7 +59,7 @@ Web > Page
 .t3-page-ce .t3-page-ce-body,
 .t3-page-ce.active .t3-page-ce-body {
        background-color: #ffffff;
-       border: 1px solid #e2e2e2;
+       border: 1px solid #ffffff;
        border-top: none;
        font-size: 10px;
 }
@@ -51,6 +68,18 @@ Web > Page
        border-color: #5b5b5b;
 }
 
+.t3-page-ce .t3-icon-document-new {
+       visibility: hidden;
+}
+
+.t3-page-ce.active .t3-icon-document-new {
+       visibility: visible;
+}
+
+.t3-page-ce.active .drag-start {
+       visibility: hidden;
+}
+
 .t3-page-ce-hidden .t3-page-ce-body,
 .t3-page-ce-hidden .t3-page-ce-body a {
        color: #bbbbbb;
@@ -63,7 +92,7 @@ Web > Page
 
 .t3-page-ce-hidden .t3-page-ce-body {
        background-color: transparent;
-       border-style: none dotted dotted;
+       border-style: none;
 }
 
 .t3-page-ce-hidden .t3-page-ce-body .t3-icon ,
@@ -71,10 +100,6 @@ Web > Page
        opacity: 0.4;
 }
 
-.t3-page-ce.active .t3-page-ce-body {
-       background-color: #ffffff;
-}
-
 .t3-page-ce.active .t3-page-ce-body .t3-icon ,
 .t3-page-ce.active .t3-page-ce-body img {
        opacity: inherit;
@@ -97,6 +122,7 @@ table.typo3-page-columnsMode tr td a b {
 }
 
 table.t3-page-columns tr td span.exampleContent a {
+       color: #000000;
        text-decoration: none;
 }
 
@@ -126,11 +152,39 @@ td.t3-gridCell-unassigned div.t3-row-header div {
        filter: alpha(opacity = 60);
 }
 
-.t3-page-ce-dropzone.dropReceiveOK {
-    border: 2px dashed #bb0010;
-    background-color: #e5e5e5;
+.t3-page-ce .t3-row-header .ce-icons,
+.t3-page-ce .t3-row-header .ce-icons-left{
+       visibility: hidden;
+}
+
+.t3-page-ce.active .t3-row-header .ce-icons,
+.t3-page-ce.active .t3-row-header .ce-icons-left{
+       visibility: visible;
+}
+
+.t3-page-ce-dropzone.t3-page-ce-dropzone-available.dropReceiveOK {
+    background-color: #73ab61;
+}
+
+.t3-page-ce-dropzone.t3-page-ce-dropzone-available {
+       background-color: #c8d9c3;
+}
+
+.t3-page-ce-dragitem:hover {
+       cursor: move;
+}
+
+.t3-page-ce-dragitem.dragitem-shadow {
+       -webkit-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
+       -moz-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
+       box-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
 }
 
-.t3-page-ce-dragitem {
-    margin-bottom: 10px;
+.t3-page-ce.active .t3-row-header {
+       background-color: #5b5b5b;
+       background-image: url('../../images/backgrounds/row-header.png');
+       background-image: linear-gradient(center top , #7f7f7f 10%, #5b5b5b 100%);
+       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