[TASK] Replace treeline GFX icons with CSS icons 55/41255/2
authorBenjamin Kott <benjamin.kott@wfp2.com>
Tue, 14 Jul 2015 22:23:41 +0000 (00:23 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Wed, 15 Jul 2015 08:00:53 +0000 (10:00 +0200)
Releases: master
Resolves: #68143
Change-Id: Ia65629c68098c781bee6ece263db8a09e6da613f
Reviewed-on: http://review.typo3.org/41255
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
20 files changed:
Build/Resources/Public/Less/TYPO3/_element_tree.less
typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
typo3/sysext/core/ext_tables.php
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/t3skin/images/icons/treeline/blank.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/join.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/joinbottom.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/jointop.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/line.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/minus.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/minusbottom.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/minusonly.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/minustop.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/plus.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/plusbottom.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/plusonly.gif [deleted file]
typo3/sysext/t3skin/images/icons/treeline/stopper.gif [deleted file]
typo3/sysext/t3skin/images/sprites/t3skin.png
typo3/sysext/t3skin/images/sprites/t3skin@x2.png
typo3/sysext/t3skin/stylesheets/sprites/t3skin.css

index 72d3992..704a8eb 100644 (file)
@@ -10,7 +10,7 @@
 // Trees Variables
 //
 @tree-indentation: 0.5em;
-@tree-border: @navigation-border;
+@tree-border: #666666;
 
 
 //
 }
 
 
+//
+// Treeline Icons
+//
+.treeline-icon {
+       position: relative;
+       display: block;
+       float: left;
+       margin-top: -6px;
+       margin-bottom: -6px;
+       margin-right: 2px;
+       padding: 0;
+       height: 31px;
+       width: 16px;
+       white-space: nowrap;
+       overflow: hidden;
+       &:after,
+       &:before {
+               position: absolute;
+               content: '';
+               left: 50%;
+       }
+       &:before {
+               top: 0;
+               height: 100%;
+               width: 2px;
+               margin-left: -1px;
+               border-left: 1px dotted @tree-border;
+       }
+       &:after {
+               border-top: 1px dotted @tree-border;
+               height: 2px;
+               width: 100%;
+               top: 50%;
+               margin-top: -1px;
+       }
+}
+.treeline-icon-jointop:before {
+       top: 50%;
+}
+.treeline-icon-joinbottom:before {
+       top: -50%;
+}
+.treeline-icon-line:after {
+       display: none;
+}
+.treeline-icon-blank {
+       display: none;
+}
+.treeline-icon-clear {
+       &:before,
+       &:after {
+               display: none;
+       }
+}
+
+
 table#typo3-tree {
        margin: 10px 0 20px 10px;
        width: 95%;
@@ -345,18 +401,6 @@ ul.tree div.treeLinkItem span.dragIcon {
        margin: 2px;
 }
 
-// Sprite icons for tree lines. Single lines need 6px padding. Can also be used directly inside .table
-
-.t3-icon-treeline {
-       display: block;
-       float: left;
-       margin-top: -6px;
-       margin-bottom: -6px;
-       padding: 0;
-       height: 30px;
-       white-space: nowrap;
-       overflow: hidden;
-}
 
 //
 // Tree
index 414432e..4dd3b9e 100644 (file)
@@ -667,7 +667,6 @@ class ExtendedTemplateService extends TemplateService {
                        $row = $arr[$key];
                        $LN = $a == $c ? 'blank' : 'line';
                        $BTM = $a == $c ? 'top' : '';
-                       $PM = 'join';
                        $HTML .= $depthData;
                        $alttext = '[' . $row['templateID'] . ']';
                        $alttext .= $row['pid'] ? ' - ' . BackendUtility::getRecordPath($row['pid'], $GLOBALS['SOBE']->perms_clause, 20) : '';
@@ -690,7 +689,7 @@ class ExtendedTemplateService extends TemplateService {
                                $A_B = '';
                                $A_E = '';
                        }
-                       $HTML .= ($first ? '' : IconUtility::getSpriteIcon('treeline-' . $PM . $BTM)) . $icon . $A_B
+                       $HTML .= ($first ? '' : '<span class="treeline-icon treeline-icon-join' . $BTM . '"></span>') . $icon . $A_B
                                . htmlspecialchars(GeneralUtility::fixed_lgd_cs($row['title'], $GLOBALS['BE_USER']->uc['titleLen']))
                                . $A_E . '&nbsp;&nbsp;';
                        $RL = $this->ext_getRootlineNumber($row['pid']);
@@ -704,7 +703,7 @@ class ExtendedTemplateService extends TemplateService {
                                                        <td>' . ($row['next'] ? '&nbsp;' . $row['next'] . '&nbsp;&nbsp;' : '') . '</td>
                                                </tr>';
                        if ($deeper) {
-                               $keyArray = $this->ext_getTemplateHierarchyArr($arr[$key . '.'], $depthData . ($first ? '' : IconUtility::getSpriteIcon('treeline-' . $LN)), $keyArray);
+                               $keyArray = $this->ext_getTemplateHierarchyArr($arr[$key . '.'], $depthData . ($first ? '' : '<span class="treeline-icon treeline-icon-' . $LN . '"></span>'), $keyArray);
                        }
                }
                return $keyArray;
index a4c8d8f..6a05bdb 100644 (file)
@@ -496,26 +496,7 @@ $GLOBALS['TBE_STYLES']['spriteIconApi']['coreSpriteImageNames'] = array(
        'status-version-50',
        'status-version-no-version',
        'status-warning-in-use',
-       'status-warning-lock',
-       'treeline-blank',
-       'treeline-join',
-       'treeline-joinbottom',
-       'treeline-jointop',
-       'treeline-line',
-       'treeline-minus',
-       'treeline-minusbottom',
-       'treeline-minusonly',
-       'treeline-minustop',
-       'treeline-plus',
-       'treeline-plusbottom',
-       'treeline-plusonly',
-       'treeline-stopper',
-       'module-web',
-       'module-file',
-       'module-system',
-       'module-tools',
-       'module-user',
-       'module-help',
+       'status-warning-lock'
 );
 
 
index 064a040..509fa4c 100644 (file)
@@ -10740,7 +10740,7 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
   bottom: 1em;
   left: 0;
   margin-bottom: -2px;
-  border-left: 1px dotted #c3c3c3;
+  border-left: 1px dotted #666666;
 }
 .list-tree li {
   margin: 0;
@@ -10763,7 +10763,7 @@ a.list-tree li.active > .list-tree-group a:focus {
   display: block;
   width: 0.8em;
   height: 0;
-  border-top: 1px dotted #c3c3c3;
+  border-top: 1px dotted #666666;
   margin-top: -2px;
   position: absolute;
   top: 1em;
@@ -10796,6 +10796,55 @@ a.list-tree li.active > .list-tree-group a:focus {
 .list-tree-control.list-tree-control-closed > .fa:before {
   content: "\f0da";
 }
+.treeline-icon {
+  position: relative;
+  display: block;
+  float: left;
+  margin-top: -6px;
+  margin-bottom: -6px;
+  margin-right: 2px;
+  padding: 0;
+  height: 31px;
+  width: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.treeline-icon:after,
+.treeline-icon:before {
+  position: absolute;
+  content: '';
+  left: 50%;
+}
+.treeline-icon:before {
+  top: 0;
+  height: 100%;
+  width: 2px;
+  margin-left: -1px;
+  border-left: 1px dotted #666666;
+}
+.treeline-icon:after {
+  border-top: 1px dotted #666666;
+  height: 2px;
+  width: 100%;
+  top: 50%;
+  margin-top: -1px;
+}
+.treeline-icon-jointop:before {
+  top: 50%;
+}
+.treeline-icon-joinbottom:before {
+  top: -50%;
+}
+.treeline-icon-line:after {
+  display: none;
+}
+.treeline-icon-blank {
+  display: none;
+}
+.treeline-icon-clear:before,
+.treeline-icon-clear:after {
+  display: none;
+}
 table#typo3-tree {
   margin: 10px 0 20px 10px;
   width: 95%;
@@ -10980,16 +11029,6 @@ ul.tree div.treeLinkItem span.dragIcon {
 #typo3-pagetree #typo3-docheader img {
   margin: 2px;
 }
-.t3-icon-treeline {
-  display: block;
-  float: left;
-  margin-top: -6px;
-  margin-bottom: -6px;
-  padding: 0;
-  height: 30px;
-  white-space: nowrap;
-  overflow: hidden;
-}
 body#typo3-pagetree,
 body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
   background: #ebebeb;
diff --git a/typo3/sysext/t3skin/images/icons/treeline/blank.gif b/typo3/sysext/t3skin/images/icons/treeline/blank.gif
deleted file mode 100644 (file)
index e1d2d83..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/blank.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/join.gif b/typo3/sysext/t3skin/images/icons/treeline/join.gif
deleted file mode 100644 (file)
index 539de0b..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/join.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/joinbottom.gif b/typo3/sysext/t3skin/images/icons/treeline/joinbottom.gif
deleted file mode 100644 (file)
index 2263299..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/joinbottom.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/jointop.gif b/typo3/sysext/t3skin/images/icons/treeline/jointop.gif
deleted file mode 100644 (file)
index 98f6cd7..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/jointop.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/line.gif b/typo3/sysext/t3skin/images/icons/treeline/line.gif
deleted file mode 100644 (file)
index 3be2d47..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/line.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/minus.gif b/typo3/sysext/t3skin/images/icons/treeline/minus.gif
deleted file mode 100644 (file)
index 6a663de..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/minus.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/minusbottom.gif b/typo3/sysext/t3skin/images/icons/treeline/minusbottom.gif
deleted file mode 100644 (file)
index e9eeaa9..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/minusbottom.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/minusonly.gif b/typo3/sysext/t3skin/images/icons/treeline/minusonly.gif
deleted file mode 100644 (file)
index 4556a10..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/minusonly.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/minustop.gif b/typo3/sysext/t3skin/images/icons/treeline/minustop.gif
deleted file mode 100644 (file)
index 4161dcf..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/minustop.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/plus.gif b/typo3/sysext/t3skin/images/icons/treeline/plus.gif
deleted file mode 100644 (file)
index 666e05c..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/plus.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/plusbottom.gif b/typo3/sysext/t3skin/images/icons/treeline/plusbottom.gif
deleted file mode 100644 (file)
index 4b975b2..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/plusbottom.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/plusonly.gif b/typo3/sysext/t3skin/images/icons/treeline/plusonly.gif
deleted file mode 100644 (file)
index 74d154a..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/plusonly.gif and /dev/null differ
diff --git a/typo3/sysext/t3skin/images/icons/treeline/stopper.gif b/typo3/sysext/t3skin/images/icons/treeline/stopper.gif
deleted file mode 100644 (file)
index ddb37da..0000000
Binary files a/typo3/sysext/t3skin/images/icons/treeline/stopper.gif and /dev/null differ
index d75a31f..3d15d22 100644 (file)
Binary files a/typo3/sysext/t3skin/images/sprites/t3skin.png and b/typo3/sysext/t3skin/images/sprites/t3skin.png differ
index d1e4513..1e53625 100644 (file)
Binary files a/typo3/sysext/t3skin/images/sprites/t3skin@x2.png and b/typo3/sysext/t3skin/images/sprites/t3skin@x2.png differ
index 985a470..a855ddc 100644 (file)
@@ -1,57 +1,46 @@
 
 .t3-icon-actions {
-       background-image: url('../../images/sprites/t3skin.png?1427061024') !important;
+       background-image: url('../../images/sprites/t3skin.png?1436912180') !important;
        height: 16px;
        width: 16px;
 }
 
 .backgroundsize .t3-icon-actions {
-       background-image: url('../../images/sprites/t3skin@x2.png?1427061024') !important;
-       background-size:322px 534px;
+       background-image: url('../../images/sprites/t3skin@x2.png?1436912180') !important;
+       background-size:322px 435px;
 }
 
 .t3-icon-apps {
-       background-image: url('../../images/sprites/t3skin.png?1427061024') !important;
+       background-image: url('../../images/sprites/t3skin.png?1436912180') !important;
        height: 16px;
        width: 16px;
 }
 
 .backgroundsize .t3-icon-apps {
-       background-image: url('../../images/sprites/t3skin@x2.png?1427061024') !important;
-       background-size:322px 534px;
+       background-image: url('../../images/sprites/t3skin@x2.png?1436912180') !important;
+       background-size:322px 435px;
 }
 
 .t3-icon-mimetypes {
-       background-image: url('../../images/sprites/t3skin.png?1427061024') !important;
+       background-image: url('../../images/sprites/t3skin.png?1436912180') !important;
        height: 16px;
        width: 16px;
 }
 
 .backgroundsize .t3-icon-mimetypes {
-       background-image: url('../../images/sprites/t3skin@x2.png?1427061024') !important;
-       background-size:322px 534px;
+       background-image: url('../../images/sprites/t3skin@x2.png?1436912180') !important;
+       background-size:322px 435px;
 }
 
 .t3-icon-status {
-       background-image: url('../../images/sprites/t3skin.png?1427061024') !important;
+       background-image: url('../../images/sprites/t3skin.png?1436912180') !important;
        height: 16px;
        width: 16px;
 }
 
 .backgroundsize .t3-icon-status {
-       background-image: url('../../images/sprites/t3skin@x2.png?1427061024') !important;
-       background-size:322px 534px;
-}
-
-.t3-icon-treeline {
-       background-image: url('../../images/sprites/t3skin.png?1427061024') !important;
-       height: 16px;
-       width: 16px;
-}
-
-.backgroundsize .t3-icon-treeline {
-       background-image: url('../../images/sprites/t3skin@x2.png?1427061024') !important;
-       background-size:322px 534px;
+       background-image: url('../../images/sprites/t3skin@x2.png?1436912180') !important;
+       background-size:322px 435px;
 }
 .t3-icon-document-close {
        background-position: -0px -0px !important;
 
 }
 .t3-icon-input-clear {
-       background-position: -0px -516px !important;
+       background-position: -0px -420px !important;
        height: 13px;
        width: 13px;
 
 
 }
 .t3-icon-markstate {
-       background-position: -0px -476px !important;
+       background-position: -0px -380px !important;
        height: 14px;
        width: 14px;
 
 
 }
 .t3-icon-move-move {
-       background-position: -0px -503px !important;
+       background-position: -0px -407px !important;
        height: 11px;
 
 }
 
 }
 .t3-icon-unmarkstate {
-       background-position: -16px -476px !important;
+       background-position: -16px -380px !important;
        height: 14px;
        width: 14px;
 
 
 }
 .t3-icon-irre-collapsed {
-       background-position: -0px -492px !important;
+       background-position: -0px -396px !important;
        height: 9px;
        width: 9px;
 
 }
 .t3-icon-irre-expanded {
-       background-position: -11px -492px !important;
+       background-position: -11px -396px !important;
        height: 9px;
        width: 9px;
 
 
 }
 .t3-icon-pagetree-folder-contains-shop {
-       background-position: -0px -440px !important;
+       background-position: -0px -344px !important;
        width: 18px;
 
 }
 
 }
 .t3-icon-x-sys_category {
-       background-position: -20px -440px !important;
+       background-position: -20px -344px !important;
        width: 18px;
 
 }
 .t3-icon-x-sys_language {
-       background-position: -0px -458px !important;
+       background-position: -0px -362px !important;
        width: 18px;
 
 }
        background-position: -18px -306px !important;
 
 }
-.t3-icon-blank {
-       background-position: -0px -531px !important;
-       height: 1px;
-       width: 1px;
-
-}
-.t3-icon-join {
-       background-position: -0px -344px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-joinbottom {
-       background-position: -20px -344px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-jointop {
-       background-position: -40px -344px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-line {
-       background-position: -60px -344px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-minus {
-       background-position: -0px -376px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-minusbottom {
-       background-position: -20px -376px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-minusonly {
-       background-position: -40px -376px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-minustop {
-       background-position: -60px -376px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-plus {
-       background-position: -0px -408px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-plusbottom {
-       background-position: -20px -408px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-plusonly {
-       background-position: -40px -408px !important;
-       height: 30px;
-       width: 18px;
-
-}
-.t3-icon-stopper {
-       background-position: -60px -408px !important;
-       height: 30px;
-       width: 18px;
-
-}