[TASK] Toolbar drop down menu style 99/34099/12
authorThorsten Griebenow <griebenow@alltagsaesthetisierung.de>
Thu, 27 Nov 2014 13:12:54 +0000 (14:12 +0100)
committerFelix Kopp <felix-source@phorax.com>
Sat, 29 Nov 2014 20:10:59 +0000 (21:10 +0100)
Fix styling of toolbar drop down menu:
* p
* table
* ul-li

Intermediate Patch - bridge to https://review.typo3.org/#/c/34776/

Resolves: #62927
Releases: master
Change-Id: Ie5105e00b3e84c9982e17893122d89c6c9628466
Reviewed-on: http://review.typo3.org/34099
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Felix Kopp <felix-source@phorax.com>
Tested-by: Felix Kopp <felix-source@phorax.com>
typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 7cddfd8..16b08e3 100644 (file)
@@ -122,33 +122,34 @@ class ShortcutToolbarItem implements ToolbarItemInterface {
                $shortcutEdit = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit', TRUE);
                $shortcutDelete = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksDelete', TRUE);
                $groupIcon = IconUtility::getSpriteIcon('apps-pagetree-folder-default', array('title' => $shortcutGroup));
-               $editIcon = IconUtility::getSpriteIcon('actions-document-open', array('title' => $shortcutEdit));
-               $deleteIcon = IconUtility::getSpriteIcon('actions-edit-delete', array('title' => $shortcutDelete));
-               $shortcutMenu[] = '<table border="0" class="shortcut-list">';
+               $editIcon = '<a href="#">' . IconUtility::getSpriteIcon('actions-document-open', array('title' => $shortcutEdit)) . '</a>';
+               $deleteIcon = '<a href="#">' . IconUtility::getSpriteIcon('actions-edit-delete', array('title' => $shortcutDelete)) . '</a>';
+
+               $shortcutMenu[] = '<table><tbody>';
+
                // Render shortcuts with no group (group id = 0) first
                $noGroupShortcuts = $this->getShortcutsByGroup(0);
                foreach ($noGroupShortcuts as $shortcut) {
                        $shortcutMenu[] = '
-                       <tr class="shortcut" data-shortcutid="' . $shortcut['raw']['uid'] . '">
-                               <td class="shortcut-icon">' . $shortcut['icon'] . '</td>
-                               <td class="shortcut-label">
-                                       <a href="#" onclick="' . $shortcut['action'] . '; return false;">' . htmlspecialchars($shortcut['label']) . '</a>
-                               </td>
-                               <td class="shortcut-edit">' . $editIcon . '</td>
-                               <td class="shortcut-delete">' . $deleteIcon . '</td>
-                       </tr>';
+                               <tr class="shortcut" data-shortcutid="' . $shortcut['raw']['uid'] . '">
+                                       <td class="shortcut-label">
+                                               <a href="#" onclick="' . $shortcut['action'] . '; return false;">' .
+                                                       $shortcut['icon'] . ' ' .
+                                                       htmlspecialchars($shortcut['label']) .
+                                               '</a>
+                                       </td>
+                                       <td class="shortcut-edit">' . $editIcon . '</td>
+                                       <td class="shortcut-delete"' . $deleteIcon . '</td>
+                               </tr>';
                }
                // Now render groups and the contained shortcuts
                $groups = $this->getGroupsFromShortcuts();
                krsort($groups, SORT_NUMERIC);
                foreach ($groups as $groupId => $groupLabel) {
                        if ($groupId != 0) {
-                               $shortcutGroup = '
-                               <tr class="shortcut-group" id="shortcut-group-' . $groupId . '">
-                                       <td class="shortcut-group-icon">' . $groupIcon . '</td>
-                                       <td class="shortcut-group-label">' . $groupLabel . '</td>
-                                       <td colspan="2">&nbsp;</td>
-                               </tr>';
+                               $shortcutGroup = '<tr><td class="dropdown-header shortcut-group typo3-module-menu-item" id="shortcut-group-' . $groupId . '" colspan="3">' .
+                                       $groupIcon . ' ' . $groupLabel .
+                                       '</td></tr>';
                                $shortcuts = $this->getShortcutsByGroup($groupId);
                                $i = 0;
                                foreach ($shortcuts as $shortcut) {
@@ -159,9 +160,11 @@ class ShortcutToolbarItem implements ToolbarItemInterface {
                                        }
                                        $shortcutGroup .= '
                                        <tr class="shortcut' . $firstRow . '" data-shortcutid="' . $shortcut['raw']['uid'] . '" data-shortcutgroup="' . $groupId . '">
-                                               <td class="shortcut-icon">' . $shortcut['icon'] . '</td>
                                                <td class="shortcut-label">
-                                                       <a href="#" onclick="' . $shortcut['action'] . '; return false;">' . htmlspecialchars($shortcut['label']) . '</a>
+                                                       <a href="#" onclick="' . $shortcut['action'] . '; return false;">' .
+                                                               $shortcut['icon'] . ' ' .
+                                                               htmlspecialchars($shortcut['label']) .
+                                                       '</a>
                                                </td>
                                                <td class="shortcut-edit">' . $editIcon . '</td>
                                                <td class="shortcut-delete">' . $deleteIcon . '</td>
@@ -170,17 +173,20 @@ class ShortcutToolbarItem implements ToolbarItemInterface {
                                $shortcutMenu[] = $shortcutGroup;
                        }
                }
-               if (count($shortcutMenu) == 1) {
+               $shortcutMenu[] = '</tbody></table>';
+
+               if (count($shortcutMenu) == 2) {
                        // No shortcuts added yet, show a small help message how to add shortcuts
                        $title = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks', TRUE);
                        $icon = IconUtility::getSpriteIcon('actions-system-shortcut-new', array(
                                'title' => $title
                        ));
                        $label = str_replace('%icon%', $icon, $languageService->sL('LLL:EXT:lang/locallang_misc.xlf:bookmarkDescription'));
-                       $shortcutMenu[] = '<tr><td style="padding:1px 2px; color: #838383;">' . $label . '</td></tr>';
+                       $compiledShortcutMenu = '<p>' . $label . '</p>';
+               } else {
+                       $compiledShortcutMenu = implode(LF, $shortcutMenu);
                }
-               $shortcutMenu[] = '</table>';
-               $compiledShortcutMenu = implode(LF, $shortcutMenu);
+
                return $compiledShortcutMenu;
        }
 
index b9284eb..16b07cd 100644 (file)
@@ -94,7 +94,7 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                $recentDocuments = $this->recentDocs;
                $entries = array();
                if (count($openDocuments)) {
-                       $entries[] = '<li class="dropdown-header">' . $languageService->getLL('open_docs', TRUE) . '</li>';
+                       $entries[] = '<tr><td class="dropdown-header">' . $languageService->getLL('open_docs', TRUE) . '</td></tr>';
                        $i = 0;
                        foreach ($openDocuments as $md5sum => $openDocument) {
                                $i++;
@@ -103,7 +103,7 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                }
                // If there are "recent documents" in the list, add them
                if (count($recentDocuments)) {
-                       $entries[] = '<li class="dropdown-header">' . $languageService->getLL('recent_docs', TRUE) . '</li>';
+                       $entries[] = '<tr><td class="dropdown-header">' . $languageService->getLL('recent_docs', TRUE) . '</td></tr>';
                        $i = 0;
                        foreach ($recentDocuments as $md5sum => $recentDocument) {
                                $i++;
@@ -111,9 +111,9 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                        }
                }
                if (count($entries)) {
-                       $content = '<ul>' . implode('', $entries) . '</ul>';
+                       $content = '<table><tbody>' . implode('', $entries) . '</tbody></table>';
                } else {
-                       $content = '<ul><li class="noOpenDocs">' . $languageService->getLL('no_docs', TRUE) . '</li></ul>';
+                       $content = '<p>' . $languageService->getLL('no_docs', TRUE) . '</p>';
                }
                return $content;
        }
@@ -151,18 +151,22 @@ class OpendocsToolbarItem implements ToolbarItemInterface {
                        // Open document
                        $closeIcon = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('actions-document-close');
                        $entry = '
-                               <li class="opendoc' . $firstRow . '">
-                                       <div class="linkWrap">
-                                               <a href="#" class="opendocLink" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . ');TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . $label . '</a>
-                                               <a href="#" class="close" data-opendocsidentifier="' . $md5sum . '">' . $closeIcon . '</a>
-                                       </div>
-                               </li>';
+                               <tr class="opendoc' . $firstRow . '">
+                                       <td>
+                                               <a href="#" class="opendocLink pull-left" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . ');TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . ' ' . $label . '</a>
+                                       </td>
+                                       <td>
+                                               <a href="#" class="close pull-right" data-opendocsidentifier="' . $md5sum . '">' . $closeIcon . '</a>
+                                       </td>
+                               </tr>';
                } else {
                        // Recently used document
                        $entry = '
-                               <li class="recentdoc' . $firstRow . '">
-                                       <a href="#" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . '); TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . $label . '</a>
-                               </li>';
+                               <tr class="recentdoc' . $firstRow . '">
+                                       <td colspan="2">
+                                               <a href="#" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . '); TYPO3.OpendocsMenu.toggleMenu(); return false;" target="content">' . $icon . ' ' . $label . '</a>
+                                       </td>
+                               </tr>';
                }
                return $entry;
        }
index abb59ef..713aefc 100644 (file)
@@ -28,7 +28,7 @@ define('TYPO3/CMS/Opendocs/Toolbar/OpendocsMenu', ['jquery'], function($) {
                        menuContainerSelector: '.dropdown-menu',
                        menuItemSelector: '.dropdown-menu li a',
                        toolbarIconSelector: '.dropdown-toggle span.t3-icon',
-                       openDocumentsItemsSelector: 'li.opendoc',
+                       openDocumentsItemsSelector: 'tr.opendoc',
                        counterSelector: '#tx-opendocs-counter'
                }
        };
@@ -116,4 +116,4 @@ define('TYPO3/CMS/Opendocs/Toolbar/OpendocsMenu', ['jquery'], function($) {
                TYPO3.OpendocsMenu = OpendocsMenu;
                return OpendocsMenu;
        }();
-});
\ No newline at end of file
+});
index c762bfe..137f045 100644 (file)
@@ -76,7 +76,7 @@ Topbar
                                color: @navbar-inverse-link-active-color;
                                border: none;
 
-                               // Dropdown-menu with UL
+                               // dropdown-menu > ul
                                > ul {
                                        .list-unstyled;
 
@@ -94,9 +94,7 @@ Topbar
                                                &.active {
                                                        > a {
                                                                background-color: darken(@navbar-inverse-link-active-bg, 15%);
-
                                                        }
-
                                                }
                                        }
 
@@ -121,6 +119,35 @@ Topbar
                                        }
                                }
 
+                               // dropdown-menu > p
+                               > p {
+                                       padding: 3px 20px;
+                               }
+
+                               // dropdown-menu > table > tr > td
+                               > table {
+                                       width: 100%;
+
+                                       > thead > tr > td {
+                                               .dropdown-header;
+                                       }
+                                       > tbody > tr > td > a {
+                                               color: @navbar-inverse-link-active-color;
+                                               display: block;
+                                               padding: 3px 20px;
+                                               clear: both;
+                                               font-weight: normal;
+                                               line-height: @line-height-base;
+                                               white-space: nowrap;
+
+                                               &.active {
+                                                       > a {
+                                                               background-color: darken(@navbar-inverse-link-active-bg, 15%);
+                                                       }
+                                               }
+                                       }
+                               }
+
                                li,
                                td {
                                        a {
index 4c4e865..ef00508 100644 (file)
@@ -11496,6 +11496,32 @@ Topbar
   padding-left: 42px;
   padding-top: 8px;
 }
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > p {
+  padding: 3px 20px;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table {
+  width: 100%;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > thead > tr > td {
+  display: block;
+  padding: 3px 20px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #d7d7d7;
+  white-space: nowrap;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td > a {
+  color: #ffffff;
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu > table > tbody > tr > td > a.active > a {
+  background-color: #282828;
+}
 #typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu li a,
 #typo3-topbar #typo3-top-container #typo3-toolbar .dropdown-menu td a {
   color: #ffffff;