[TASK] Pagetrees: adopt open/close icons and align items of same level 45/42145/4
authorJosef Glatz <jousch@gmail.com>
Thu, 30 Jul 2015 17:42:45 +0000 (19:42 +0200)
committerHelmut Hummel <helmut.hummel@typo3.org>
Thu, 30 Jul 2015 22:13:57 +0000 (00:13 +0200)
Adopt open/close icons for pagetrees (except for the main TYPO3 pagetree).
Fix width of last-child li's before-pseudo-element. Slightly adjust the
left padding for the filelist navigation frame. Introduce new open/close icons
for module configuration and module template "TS Object Browser".

Resolves: #68649
Related: #68507
Releases: master
Change-Id: I4d8edf7345ca77e1f36426ed90e975df5016cc0c
Reviewed-on: http://review.typo3.org/42145
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Helmut Hummel <helmut.hummel@typo3.org>
Tested-by: Helmut Hummel <helmut.hummel@typo3.org>
Build/Resources/Public/Less/TYPO3/_element_tree.less
typo3/sysext/lowlevel/Resources/Private/Templates/Backend/Configuration.html
typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 926d905..39ec19d 100644 (file)
@@ -9,16 +9,21 @@
 //
 // Trees Variables
 //
-@tree-indentation: 0.5em;
+@tree-indentation: 16px;
+@tree-intendation-space: 5px;
+@tree-line-height: 23px;
 @tree-border: #666666;
+@tree-bg: white;
+@tree-control-size: 20px;
+@tree-control-icon-size: 12px;
 
 
 //
-// Trees
+// Tree
 //
 .list-tree,
 .list-tree ul {
-       margin-left: @tree-indentation;
+       margin-left: (@tree-indentation / 2);
        padding: 0;
        list-style: none;
        position: relative;
@@ -28,7 +33,7 @@
                width: 0;
                position: absolute;
                top: 0;
-               bottom: 1em;
+               bottom: ceil(@tree-line-height / 2);
                left: 0;
                margin-bottom: -2px;
                border-left: 1px dotted @tree-border;
                        }
                }
                &:before {
-                       content: "";
+                       content: '';
                        display: block;
-                       width: @tree-indentation * 1.6;
+                       width: ceil(@tree-indentation - @tree-intendation-space);
                        height: 0;
                        border-top: 1px dotted @tree-border;
                        margin-top: -2px;
                        position: absolute;
-                       top: 1em;
+                       top: ceil(@tree-line-height / 2) + 1;
                        left: 2px;
                }
                &:last-child:before {
-                       background: white;
+                       background: @tree-bg;
                        height: auto;
-                       top: 1em;
                        left: 0;
+                       width: ceil(@tree-indentation - @tree-intendation-space) + 2;
                        bottom: 0;
                }
                margin: 0;
-               padding-left: @tree-indentation * 2.5;
-               line-height: 1.75em;
+               padding-left: @tree-indentation;
+               line-height: @tree-line-height;
                position: relative;
        }
 }
        font-weight: bold;
 }
 .list-tree-control {
+       .user-select(none);
+       position: relative;
+       display: block;
+       float: left;
+       margin-top: ceil(@tree-line-height / 2) - ceil(@tree-control-size / 2);
+       margin-left: -(@tree-indentation + ceil(@tree-control-size / 2));
+       text-align: center;
+       line-height: @tree-control-size;
+       width: @tree-control-size;
+       height: @tree-control-size;
+       &:before {
+               content: '';
+               position: absolute;
+               top: 50%;
+               left: 50%;
+               margin-top: -(@tree-control-icon-size / 2);
+               margin-left: -(@tree-control-icon-size / 2);
+               width: @tree-control-icon-size;
+               height: @tree-control-icon-size;
+               background-color: @tree-bg;
+       }
        &:active,
        &:focus,
        &:hover {
+               outline: none;
                text-decoration: none;
        }
        > .fa {
-               font-size: 1.1em;
                display: inline-block;
                text-align: center;
-               width: @tree-indentation * 2;
+               cursor: pointer;
        }
        &.list-tree-control-open > .fa:before {
                content: "\f0d7";
                content: "\f0da";
        }
 }
+.list-tree-root {
+       margin-left: 0;
+       &:before {
+               display: none;
+       }
+       > li {
+               padding-left: 0;
+               &:before {
+                       display: none;
+               }
+               > .list-tree-group {
+                       > .list-tree-control {
+                               display: none;
+                       }
+               }
+       }
+}
+
+
+//
+// Tree Variations
+//
+#imp-exp-mod {
+       .list-tree li:last-child:before,
+       .list-tree-control:before {
+               background-color: #f1f1f1;
+       }
+}
+#typo3-browse-links-php {
+       .list-tree li:last-child:before,
+       .list-tree-control:before {
+               background-color: #ececec;
+       }
+}
+#ext-backend-Modules-FileSystemNavigationFrame-index-php {
+       .list-tree li:last-child:before,
+       .list-tree-control:before {
+               background-color: #f5f5f5;
+       }
+       .list-tree-root {
+               margin-left: (@tree-indentation / 2);
+       }
+}
 
 
 //
@@ -163,57 +232,6 @@ body#typo3-alt-db-navframe-php div.c-notice {
        width: 95%;
 }
 
-/** CSS-based tree for Foldertree */
-ul.list-tree-root {
-       li:last-child:before {
-               background-color: #ececec;
-       }
-
-       &:before {
-               border: 0;
-       }
-
-       > li:before {
-               border: 0;
-       }
-
-       > li {
-               border-left: 0;
-       }
-}
-
-// change background color for folder nav frame
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php ul.list-tree-root li:last-child:before {
-       background-color: #f5f5f5;
-}
-
-body#imp-exp-mod ul.list-tree-root {
-       > li:first-child {
-               padding-left: 0;
-       }
-       ul li:last-child:before {
-               background-color: #f1f1f1;
-       }
-}
-
-ul.flat-tree-root li:last-child:before {
-       background-color: #f1f1f1;
-}
-
-//
-// Configuration trees, used in Admin Tools => Configuration
-//
-
-table.t3-tree-config {
-       background: #ececec;
-       background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
-       border: 1px solid #adadad;
-       min-width: 500px;
-
-       .t3-tree-config-header {
-               text-align: left;
-       }
-}
 
 //
 // AJAX Page Tree
@@ -227,7 +245,7 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
 
 body#typo3-pagetree #typo3-inner-docbody,
 body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
-       padding: 10px 0;
+       padding: 10px 0 10px 10px;
 }
 
 ul.tree {
index ee7d52b..f0503cc 100755 (executable)
@@ -1608,7 +1608,7 @@ class ElementBrowser {
                        $db = $this->getDatabaseConnection();
                        $picon = IconUtility::getSpriteIconForRecord('pages', $mainPageRec);
                        $picon .= BackendUtility::getRecordTitle('pages', $mainPageRec, TRUE);
-                       $out .= $picon . '<ul class="list-tree flat-tree-root">';
+                       $out .= $picon . '<ul class="list-tree list-tree-root">';
                        // Look up tt_content elements from the expanded page:
                        $res = $db->exec_SELECTquery(
                                'uid,header,hidden,starttime,endtime,fe_group,CType,colPos,bodytext',
@@ -1795,7 +1795,7 @@ class ElementBrowser {
                $c = 0;
 
                if (!empty($items)) {
-                       $out .= '<ul class="list-tree flat-tree-root">';
+                       $out .= '<ul class="list-tree list-tree-root">';
                        foreach ($items as $fileOrFolderObject) {
                                $c++;
                                if ($renderFolders) {
index 398aa7c..4566c02 100644 (file)
@@ -10846,7 +10846,7 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 }
 .list-tree,
 .list-tree ul {
-  margin-left: 0.5em;
+  margin-left: 8px;
   padding: 0;
   list-style: none;
   position: relative;
@@ -10858,15 +10858,15 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
   width: 0;
   position: absolute;
   top: 0;
-  bottom: 1em;
+  bottom: 12px;
   left: 0;
   margin-bottom: -2px;
   border-left: 1px dotted #666666;
 }
 .list-tree li {
   margin: 0;
-  padding-left: 1.25em;
-  line-height: 1.75em;
+  padding-left: 16px;
+  line-height: 23px;
   position: relative;
 }
 .list-tree li .list-tree-group > .pull-right {
@@ -10883,36 +10883,62 @@ a.list-tree li.active > .list-tree-group a:focus {
   color: #a32e2e;
 }
 .list-tree li:before {
-  content: "";
+  content: '';
   display: block;
-  width: 0.8em;
+  width: 11px;
   height: 0;
   border-top: 1px dotted #666666;
   margin-top: -2px;
   position: absolute;
-  top: 1em;
+  top: 13px;
   left: 2px;
 }
 .list-tree li:last-child:before {
   background: white;
   height: auto;
-  top: 1em;
   left: 0;
+  width: 13px;
   bottom: 0;
 }
 .list-tree-value {
   font-weight: bold;
 }
+.list-tree-control {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: relative;
+  display: block;
+  float: left;
+  margin-top: 2px;
+  margin-left: -26px;
+  text-align: center;
+  line-height: 20px;
+  width: 20px;
+  height: 20px;
+}
+.list-tree-control:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -6px;
+  margin-left: -6px;
+  width: 12px;
+  height: 12px;
+  background-color: white;
+}
 .list-tree-control:active,
 .list-tree-control:focus,
 .list-tree-control:hover {
+  outline: none;
   text-decoration: none;
 }
 .list-tree-control > .fa {
-  font-size: 1.1em;
   display: inline-block;
   text-align: center;
-  width: 1em;
+  cursor: pointer;
 }
 .list-tree-control.list-tree-control-open > .fa:before {
   content: "\f0d7";
@@ -10920,6 +10946,36 @@ a.list-tree li.active > .list-tree-group a:focus {
 .list-tree-control.list-tree-control-closed > .fa:before {
   content: "\f0da";
 }
+.list-tree-root {
+  margin-left: 0;
+}
+.list-tree-root:before {
+  display: none;
+}
+.list-tree-root > li {
+  padding-left: 0;
+}
+.list-tree-root > li:before {
+  display: none;
+}
+.list-tree-root > li > .list-tree-group > .list-tree-control {
+  display: none;
+}
+#imp-exp-mod .list-tree li:last-child:before,
+#imp-exp-mod .list-tree-control:before {
+  background-color: #f1f1f1;
+}
+#typo3-browse-links-php .list-tree li:last-child:before,
+#typo3-browse-links-php .list-tree-control:before {
+  background-color: #ececec;
+}
+#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree li:last-child:before,
+#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree-control:before {
+  background-color: #f5f5f5;
+}
+#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree-root {
+  margin-left: 8px;
+}
 .treeline-icon {
   position: relative;
   display: block;
@@ -10980,40 +11036,6 @@ body#typo3-alt-db-navframe-php div.c-notice {
   padding: 5px 5px 5px 5px;
   width: 95%;
 }
-/** CSS-based tree for Foldertree */
-ul.list-tree-root li:last-child:before {
-  background-color: #ececec;
-}
-ul.list-tree-root:before {
-  border: 0;
-}
-ul.list-tree-root > li:before {
-  border: 0;
-}
-ul.list-tree-root > li {
-  border-left: 0;
-}
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php ul.list-tree-root li:last-child:before {
-  background-color: #f5f5f5;
-}
-body#imp-exp-mod ul.list-tree-root > li:first-child {
-  padding-left: 0;
-}
-body#imp-exp-mod ul.list-tree-root ul li:last-child:before {
-  background-color: #f1f1f1;
-}
-ul.flat-tree-root li:last-child:before {
-  background-color: #f1f1f1;
-}
-table.t3-tree-config {
-  background: #ececec;
-  background-image: linear-gradient(center top, #ffffff 0px, #ececec 100px);
-  border: 1px solid #adadad;
-  min-width: 500px;
-}
-table.t3-tree-config .t3-tree-config-header {
-  text-align: left;
-}
 body#typo3-pagetree,
 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
   margin: 0;
@@ -11021,7 +11043,7 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
 }
 body#typo3-pagetree #typo3-inner-docbody,
 body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
-  padding: 10px 0;
+  padding: 10px 0 10px 10px;
 }
 ul.tree {
   line-height: 12px;