[FEATURE] Toolbar Separator
authorFelix Kopp <felix-source@phorax.com>
Sun, 12 Feb 2012 00:52:08 +0000 (01:52 +0100)
committerTolleiv Nietsch <info@tolleiv.de>
Sun, 12 Feb 2012 19:45:57 +0000 (20:45 +0100)
Adds separator style to toolbar items. Also the positioning of fly-out menus is
reworked and does not rely on JavaScript anymore.

Change-Id: Ie3b1dab2af211ad161703fcf92b10bd9ec889acc
Fixes: #32450
Releases: 4.7
Reviewed-on: http://review.typo3.org/8987
Reviewed-by: Tolleiv Nietsch
Tested-by: Tolleiv Nietsch
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter
typo3/backend.php
typo3/js/toolbarmanager.js
typo3/sysext/opendocs/opendocs.css
typo3/sysext/t3skin/stylesheets/structure/toolbar.css
typo3/sysext/t3skin/stylesheets/structure/toolbar_logout.css
typo3/sysext/t3skin/stylesheets/structure/toolbar_username.css
typo3/sysext/t3skin/stylesheets/visual/toolbar.css

index 4409105..589aaeb 100644 (file)
@@ -347,13 +347,21 @@ class TYPO3backend {
                }
 
                $toolbar = '<ul id="typo3-toolbar">';
-               $toolbar.= '<li>'.$this->getLoggedInUserLabel().'</li>
-                                       <li><div id="logout-button" class="toolbar-item no-separator">'.$this->moduleMenu->renderLogoutButton().'</div></li>';
+               $toolbar .= '<li>' . $this->getLoggedInUserLabel() . '</li>';
+               $toolbar .= '<li class="separator"><div id="logout-button" class="toolbar-item no-separator">' . $this->moduleMenu->renderLogoutButton() . '</div></li>';
 
-               foreach($this->toolbarItems as $toolbarItem) {
+               $i = 0;
+               foreach($this->toolbarItems as $key => $toolbarItem) {
+                       $i++;
                        $menu = $toolbarItem->render();
                        if ($menu) {
                                $additionalAttributes = $toolbarItem->getAdditionalAttributes();
+                               if (sizeof($this->toolbarItems) > 1 && $i == sizeof($this->toolbarItems) -1) {
+                                       if (strpos($additionalAttributes, 'class="'))
+                                               str_replace('class="', 'class="separator ', $additionalAttributes);
+                                       else
+                                               $additionalAttributes .= 'class="separator"';
+                               }
                                $toolbar .= '<li' . $additionalAttributes . '>' .$menu. '</li>';
                        }
                }
@@ -367,7 +375,7 @@ class TYPO3backend {
         * @return      string          html code snippet displaying the currently logged in user
         */
        protected function getLoggedInUserLabel() {
-               $css = 'toolbar-item no-separator';
+               $css = 'toolbar-item';
                $icon = t3lib_iconWorks::getSpriteIcon('status-user-' . ($GLOBALS['BE_USER']->isAdmin() ? 'admin' : 'backend'));
                $realName = $GLOBALS['BE_USER']->user['realName'];
                $username = $GLOBALS['BE_USER']->user['username'];
index 41fe2d2..5047480 100644 (file)
@@ -50,10 +50,6 @@ var ToolbarManager = Class.create({
         * refreshs positioning of all submenus
         */
        refreshAll: function() {
-               $$('.toolbar-item-menu').each(function(element) {
-                       menuParent = Ext.get(element);
-                       TYPO3BackendToolbarManager.positionMenu(menuParent.findParentNode('[id$="-menu"]').id);
-               });
        },
 
        /**
@@ -61,31 +57,6 @@ var ToolbarManager = Class.create({
         * @param elementId The parent element ofthe menu to be positioned
         */
        positionMenu: function(elementId) {
-               var calculatedOffset = 0;
-               var parentWidth = $(elementId).getWidth();
-               var currentToolbarItemLayer = $$('#' + elementId + ' .toolbar-item-menu')[0];
-               var ownWidth = currentToolbarItemLayer.getWidth();
-               var parentSiblings = $(elementId).previousSiblings();
-
-               parentSiblings.each(function(toolbarItem) {
-                       calculatedOffset += toolbarItem.getWidth() - 1;
-                       // -1 to compensate for the margin-right -1px of the list items,
-                       // which itself is necessary for overlaying the separator with the active state background
-
-                       if (toolbarItem.down().hasClassName('no-separator')) {
-                               calculatedOffset -= 1;
-                       }
-               });
-               calculatedOffset = calculatedOffset - ownWidth + parentWidth;
-
-               // border correction
-               if (currentToolbarItemLayer.getStyle('display') !== 'none') {
-                       calculatedOffset += 2;
-               }
-
-               $$('#' + elementId + ' .toolbar-item-menu')[0].setStyle({
-                       left: calculatedOffset + 'px'
-               });
        }
 
 });
index 8315c6d..e0a8eb3 100644 (file)
@@ -23,7 +23,7 @@ Description : styles the Open Documents toolbar item
        height: 12px;
        width: 14px;
        text-align: right;
-       border: 1px dashed #999;
+       border: 1px solid #999;
        padding: 1px 2px;
 }
 
index 21f4fa5..1af2449 100644 (file)
@@ -16,16 +16,24 @@ Toolbar inside the Topbar
        padding: 0px;
 }
 
+#typo3-toolbar li {
+       position: relative;
+}
+
 #typo3-toolbar>li {
        display: inline;
        float: left;
-       margin-right: -1px; /* necessary for overlaying the separators with the active state background */
 }
 
 #typo3-toolbar * li {
        display: list-item;
 }
 
+#typo3-toolbar .separator {
+       padding-right: 10px;
+       margin-right: 10px;
+}
+
 #typo3-toolbar div {
        overflow: visible !important;
 }
@@ -44,6 +52,19 @@ Toolbar inside the Topbar
        position: absolute;
        top: 25px;
        z-index: 100;
+       right: 0;
+}
+
+.separator .toolbar-item-menu {
+       right: 10px;
+}
+
+
+ul.toolbar-item-menu {
+       margin: 0;
+       padding: 2px 0 0;
+       position: absolute;
+       width: 180px;
 }
 
 ul.toolbar-item-menu li a {
@@ -60,10 +81,3 @@ ul.toolbar-item-menu li a {
        padding-left: 3px;
        vertical-align: middle;
 }
-
-ul.toolbar-item-menu {
-       margin: 0;
-       padding: 2px 0 0;
-       position: absolute;
-       width: 180px;
-}
\ No newline at end of file
index ae0d728..456e6d2 100644 (file)
@@ -8,11 +8,6 @@ Logout-Button
        padding-top: 5px;
 }
 
-#logout-button {
-       padding-left: 4px;
-       padding-right: 7px;
-}
-
 #logout-button input {
        height: 20px;
        padding: 0 0 2px 0;
index 0afbe19..ac799fc 100644 (file)
@@ -4,13 +4,11 @@ Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 
 #username {
-       margin-left: 25px;
        margin-right: 10px;
        padding-top: 2px;
 }
 
 #username span {
-       margin-right: 4px;
        vertical-align: bottom;
 }
 
index c877355..4f3f032 100644 (file)
@@ -11,8 +11,9 @@ Toolbar inside the Topbar
        text-align: center;
 }
 
-#typo3-toolbar .no-separator {
-       background-image: none;
+#typo3-toolbar .separator {
+       border-right: 1px solid #000;
+       box-shadow: 1px 0 #585858;
 }
 
 .toolbar-item-active {
@@ -30,5 +31,5 @@ Toolbar inside the Topbar
 tr.shortcut:hover,
 tr.recentdoc:hover,
 tr.opendoc:hover {
-       background:#eee;
+       background: #eee;
 }