[FEATURE] Refactor toolbar / topbar HTML5 & layout 64/33564/4
authorFelix Kopp <felix-source@phorax.com>
Sun, 26 Oct 2014 23:09:11 +0000 (00:09 +0100)
committerBenjamin Mack <benni@typo3.org>
Mon, 27 Oct 2014 13:46:14 +0000 (14:46 +0100)
First step for Toolbar/Topbar refactoring. This is a first step
to refactor HTML5 output - the path to gain HTML5 viewport
without ExtJS and based on jQuery and Bootstrap.

Migrates HTML from topbar to .navbar - keeps ids.
Makes use of .dropdown and .dropdown-menu.
Therefore removes duplicated CSS.
Also increase size to fit our fingers & touch.

This issue is not breaking since common css classes
and interfaces are kept.

Next step #62166: introduce "ToolbarItemInterface" and
remove toolbar-item css and layouts.

Resolves: #62481
Related: #62166
Releases: master
Change-Id: I8c215b19da4a99ad81e53b000b281849991d8deb
Reviewed-on: http://review.typo3.org/33564
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
15 files changed:
typo3/sysext/backend/Classes/Controller/BackendController.php
typo3/sysext/backend/Resources/Public/JavaScript/shortcutmenu.js
typo3/sysext/opendocs/Classes/Controller/OpendocsController.php
typo3/sysext/opendocs/Resources/Public/Css/opendocs.css
typo3/sysext/sys_action/toolbarmenu/tx_sysactions.css
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css
typo3/sysext/t3skin/ext_tables.php
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png [changed mode: 0644->0755]
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png [changed mode: 0644->0755]
typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif [changed mode: 0644->0755]
typo3/sysext/workspaces/Classes/ExtDirect/WorkspaceSelectorToolbarItem.php

index f17b165..e7b89c2 100644 (file)
@@ -166,11 +166,20 @@ class BackendController {
 
                // Create backend scaffolding
                $backendScaffolding = '
-               <div id="typo3-top-container" class="x-hide-display">
-                       <div id="typo3-logo">' . $logo->render() . '</div>
-                       <div id="typo3-top" class="typo3-top-toolbar">' . $this->renderToolbar() . '</div>
-               </div>
-               ' . $this->generateModuleMenu();
+                       <div class="navbar navbar-inverse x-hide-display" role="navigation" id="typo3-top-container">
+                               <div class="container-fluid">
+                                       <div class="navbar-header" id="typo3-logo">' .
+                                               $logo->render() .
+                                       '</div>
+                                       <div id="typo3-top">
+                                               <ul class="nav navbar-nav navbar-right typo3-top-toolbar" id="typo3-toolbar">' .
+                                                       $this->renderToolbar() .
+                                               '</ul>
+                                       </div>
+                               </div>
+                       </div>' .
+                       $this->generateModuleMenu();
+
                /******************************************************
                 * Now put the complete backend document together
                 ******************************************************/
@@ -283,9 +292,9 @@ class BackendController {
                        unset($this->toolbarItems['liveSearch']);
                        $this->toolbarItems['liveSearch'] = $search;
                }
-               $toolbar = '<ul id="typo3-toolbar">';
-               $toolbar .= '<li>' . $this->getLoggedInUserLabel() . '</li>';
-               $toolbar .= '<li class="separator"><div id="logout-button" class="toolbar-item no-separator">' . $this->renderLogoutButton() . '</div></li>';
+               $toolbar = $this->getLoggedInUserLabel();
+               $toolbar .= '<li class="toolbar-item" id="logout-button">' . $this->renderLogoutButton() . '</li>';
+
                $i = 0;
                $numberOfToolbarItems = count($this->toolbarItems);
                foreach ($this->toolbarItems as $key => $toolbarItem) {
@@ -303,10 +312,10 @@ class BackendController {
                                if ($additionalAttributes !== '') {
                                        $additionalAttributes = ' ' . $additionalAttributes;
                                }
-                               $toolbar .= '<li' . $additionalAttributes . '>' . $menu . '</li>';
+                               $toolbar .= '<li' . $additionalAttributes . ' role="menu">' . $menu . '</li>';
                        }
                }
-               return $toolbar . '</ul>';
+               return $toolbar;
        }
 
        /**
@@ -315,24 +324,31 @@ class BackendController {
         * @return string Html code snippet displaying the currently logged in user
         */
        protected function getLoggedInUserLabel() {
-               $css = 'toolbar-item';
+               $css = '';
                $icon = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('status-user-' . ($GLOBALS['BE_USER']->isAdmin() ? 'admin' : 'backend'));
                $realName = $GLOBALS['BE_USER']->user['realName'];
                $username = $GLOBALS['BE_USER']->user['username'];
                $label = $realName ?: $username;
                $title = $username;
+
                // Link to user setup if it's loaded and user has access
                $link = '';
                if (ExtensionManagementUtility::isLoaded('setup') && $GLOBALS['BE_USER']->check('modules', 'user_setup')) {
                        $link = '<a href="#" onclick="top.goToModule(\'user_setup\'); this.blur(); return false;">';
+               } else {
+                       $link = '<a name="username">';
                }
+
                // Superuser mode
                if ($GLOBALS['BE_USER']->user['ses_backuserid']) {
                        $css .= ' su-user';
                        $title = $GLOBALS['LANG']->getLL('switchtouser') . ': ' . $username;
                        $label = $GLOBALS['LANG']->getLL('switchtousershort') . ' ' . ($realName ? $realName . ' (' . $username . ')' : $username);
                }
-               return '<div id="username" class="' . $css . '">' . $link . $icon . '<span title="' . htmlspecialchars($title) . '">' . htmlspecialchars($label) . '</span>' . ($link ? '</a>' : '') . '</div>';
+
+               return '<li id="username" class="' . $css . '">' .
+                       $link . $icon . '<span title="' . htmlspecialchars($title) . '">' . htmlspecialchars($label) . '</span></a>' .
+               '</li>';
        }
 
        /**
index 62dbb47..45c4be2 100644 (file)
@@ -48,8 +48,8 @@ var ShortcutMenu = Class.create({
                        var edit = new Ajax.InPlaceEditor('shortcut-label-' + shortcutId, TYPO3.settings.ajaxUrls['ShortcutMenu::saveShortcut'], {
                                externalControl     : 'shortcut-edit-' + shortcutId,
                                externalControlOnly : true,
-                               highlightcolor      : '#f9f9f9',
-                               highlightendcolor   : '#f9f9f9',
+                               highlightcolor      : 'transparent',
+                               highlightendcolor   : 'transparent',
                                onFormCustomization : this.addGroupSelect,
                                onComplete          : this.reRenderMenu.bind(this),
                                callback            : function(form, nameInputFieldValue) {
index b342a86..9c3db9a 100644 (file)
@@ -157,7 +157,7 @@ class OpendocsController implements \TYPO3\CMS\Backend\Toolbar\ToolbarItemHookIn
                        $entry = '
                                <tr class="opendoc' . $firstRow . '">
                                        <td class="icon">' . $icon . '</td>
-                                       <td class="label"><a href="#" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . '); TYPO3BackendOpenDocs.toggleMenu(); return false;" target="content">' . $label . '</a></td>
+                                       <td><a href="#" onclick="jump(unescape(\'' . htmlspecialchars($link) . '\'), \'web_list\', \'web\', ' . $pageId . '); TYPO3BackendOpenDocs.toggleMenu(); return false;" target="content">' . $label . '</a></td>
                                        <td class="close" onclick="return TYPO3BackendOpenDocs.closeDocument(\'' . $md5sum . '\');">' . $closeIcon . '</td>
                                </tr>';
                } else {
index d1bbcdf..9cbd947 100644 (file)
@@ -9,55 +9,15 @@ Description : styles the Open Documents toolbar item
 
 - - - - - - - - - - - - - - - - - - - - - */
 
-#tx-opendocs-menu .toolbar-item {
-       padding-left: 8px;
-       padding-right: 7px;
-}
-
-#tx-opendocs-menu .toolbar-item-active {
-       background-image: url('../Images/toolbar_item_active_bg.png');
-}
-
-#tx-opendocs-menu span.t3-icon {
-
-}
-
-#tx-opendocs-menu .toolbar-item-menu {
-       position: absolute;
-       list-style: none;
-       padding: 2px 0px 0px;
-       margin: 0px;
-       background-color: #f9f9f9;
-       border: 1px solid #abb2bc;
-       border-top: none;
-       width: 200px;
-}
-
-#tx-opendocs-menu .toolbar-item-menu .list {
-       width: 100%;
-}
-
 #tx-opendocs-menu .toolbar-item-menu .list th {
-       border-top: 1px solid #a5a5a5;
-       border-bottom: 1px solid #a5a5a5;
-       background-color: #dbdbdb;
-
        text-align: left;
        font-weight: normal;
        line-height: 16px;
        padding-left: 7px;
 }
 
-#tx-opendocs-menu .toolbar-item-menu .list  td {
-       padding: 2px 1px;
-       line-height: 16px;
-}
-
-#tx-opendocs-menu .toolbar-item-menu .list tr.opendoc.first-row td,
-#tx-opendocs-menu .toolbar-item-menu .list tr.recentdoc.first-row td {
-       background-image: url('../../../../../../gfx/shortcutgroups-bg.png');
-       background-repeat: repeat-x;
-       padding-top: 4px;
+#tx-opendocs-menu .toolbar-item-menu td.label {
+       font-size: 100%;
 }
 
 #tx-opendocs-menu .toolbar-item-menu .list .opendoc .icon,
@@ -75,5 +35,4 @@ Description : styles the Open Documents toolbar item
 
 #tx-opendocs-menu .toolbar-item-menu .list .opendoc .close span {
        cursor: pointer;
-}
-
+}
\ No newline at end of file
index b91707f..9105491 100644 (file)
@@ -1,35 +1,4 @@
-#tx-sys-action-menu {
-       width: 30px;
-}
-
-#tx-sys-action-menu ul {
-       position: absolute;
-       list-style: none;
-       padding: 2px 0 0;
-       margin: 0;
-       background-color: #f9f9f9;
-       border: 1px solid #abb2bc;
-       border-top: none;
-       width: 180px;
-}
-
-#tx-sys-action-menu li {
-       padding-top: 2px;
-       text-align: left;
-       float: none;
-       vertical-align: middle;
-       min-height: 19px;
-}
-
 #tx-sys-action-menu li img {
        float: left;
        padding-right: 3px;
-}
-
-#tx-sys-action-menu li a {
-       text-decoration: none;
-       vertical-align: middle;
-       display: block;
-       padding-bottom: 2px;
-       padding-left: 3px;
 }
\ No newline at end of file
index 3e8d2a1..d0817ee 100644 (file)
@@ -58,6 +58,9 @@ div.hr {
 .divider {
        padding-bottom: 12px;
 }
+li.divider {
+       padding: 0;
+}
 
 a span {
        cursor: pointer;
index 9863f3c..b8b5667 100644 (file)
 Module menu
 - - - - - - - - - - - - - - - - - - - - - */
 
+@module-menu-height: 32px;
+@module-menu-padding-horizontal: @navbar-padding-horizontal;
+@module-menu-padding-vertical: floor((@module-menu-height - @line-height-computed) / 2);
+
 #typo3-module-menu {
        background: @navbar-inverse-bg;
        color: @navbar-inverse-color;
-       padding-bottom: ceil(@navbar-padding-vertical * 2);
+       padding-bottom: ceil(@module-menu-padding-vertical * 2);
 
        .x-panel-body {
                background-color: transparent;
@@ -39,7 +43,7 @@ Module menu
                                font-weight: bold;
                                text-transform: uppercase;
                                font-size: 0.9em;
-                               padding: @navbar-padding-vertical @navbar-padding-horizontal;
+                               padding: @module-menu-padding-vertical @module-menu-padding-horizontal;
                        }
 
                        ul {
@@ -49,7 +53,7 @@ Module menu
                                        a {
                                                .text-nowrap;
                                                color: @navbar-inverse-link-color;
-                                               padding: @navbar-padding-vertical @navbar-padding-horizontal;
+                                               padding: @module-menu-padding-vertical @module-menu-padding-horizontal;
                                                position: relative;
                                                display: block;
                                                text-decoration: none;
index 24f344a..bd08058 100644 (file)
@@ -16,6 +16,7 @@ Topbar
 - - - - - - - - - - - - - - - - - - - - - */
 
 #typo3-topbar {
+       background-color: @navbar-inverse-bg;
        z-index: 200;
 
        div {
@@ -23,11 +24,7 @@ Topbar
        }
 
        #typo3-top-container {
-               background: #000;
-               color: @navbar-inverse-color;
-
-               height: 100%;
-               padding: 0 24px;
+               margin-bottom: 0;
 
                #typo3-logo {
                        margin: 8px 0 0 0;
@@ -35,99 +32,60 @@ Topbar
                        width: 159px;
                }
 
-               .typo3-top-toolbar {
-                       margin-top: 6px;
-                       padding-right: 24px;
-                       position: absolute;
-                       right: 0px;
+               #typo3-toolbar {
+                       list-style: none;
+                       display: inline;
 
-                       .separator {
-                               border-right: 1px solid #000;
-                               box-shadow: 1px 0 #585858;
+                       div {
+                               overflow: visible !important;
                        }
 
-                       #typo3-toolbar {
-                               list-style: none;
-                               display: inline;
-                               margin: 0px;
-                               padding: 0px;
-
-                               div {
-                                       overflow: visible !important;
-                               }
-
-                               span.spinner {
-                                       background-image: url('../../../../images/spinner/3f3f3f.gif');
-                               }
-
-                               >li {
-                                       display: inline;
-                                       float: left;
-                               }
-
-                               li {
-                                       padding-top: 3px;
-                                       position: relative;
-                                       padding-bottom: 2px;
-                               }
+                       span.spinner {
+                               background-image: url('../../../../images/spinner/3f3f3f.gif');
+                       }
 
-                               .separator {
-                                       padding-right: 12px;
-                                       margin-right: 13px;
+                       > li {
+                               .dropdown;
+                       }
 
-                                       .toolbar-item-menu {
-                                               right: 12px;
-                                       }
+                       .toolbar-item {
+                               .badge {
+                                       position: absolute;
+                                       top: 6px;
+                                       right: 4px;
+                                       font-size: 7px;
                                }
+                       }
 
-                               .toolbar-item {
-                                       display: block;
-                                       padding-bottom: 4px;
-                                       padding-top: 2px;
-                                       text-align: center;
-                                       color: #fff;
-
-                                       .badge {
-                                               position: absolute;
-                                               top: -3px;
-                                               right: -3px;
-                                               font-size: 7px;
-                                       }
-                               }
+                       .toolbar-item-active {
+                               background-color: @navbar-inverse-link-active-bg;
+                               color: @navbar-inverse-link-active-color;
+                       }
 
-                               .toolbar-item-active {
-                                       background-image: url('../../../../icons/gfx/toolbar_item_active_bg.png');
-                                       height: 25px;
-                                       color: #000;
-                               }
+                       .toolbar-item-menu {
+                               .dropdown-menu;
 
-                               .toolbar-item-menu {
-                                       background-color: #f9f9f9;
-                                       border: 1px solid #abb2bc;
-                                       border-top: none;
-                                       list-style: none;
-                                       position: absolute;
-                                       top: 28px;
-                                       z-index: 100;
-                                       right: 0;
-                                       margin: 0;
-                                       padding: 2px 0 0;
-                                       width: 180px;
-
-                                       li {
-                                               padding-top: 0;
-                                               padding-bottom: 0;
-
-                                               a {
-                                                       float: none;
-                                                       min-height: 19px;
-                                                       padding-left: 2px;
-                                                       padding-top: 1px;
-                                                       vertical-align: middle;
-                                                       display: block;
-                                                       padding-bottom: 2px;
-                                                       padding-left: 3px;
-                                                       vertical-align: middle;
+                               // Migration between Toolbaritem -> Bootstrap
+                               display: block;
+                               visiblity: hidden;
+                               left: auto;
+                               right: 0;
+
+                               background-color: @navbar-inverse-link-active-bg;
+                               color: @navbar-inverse-link-active-color;
+                               border: 0;
+                               margin: 0;
+
+                               li,
+                               td {
+                                       a {
+                                               color: @navbar-inverse-link-active-color;
+                                               text-decoration: none;
+
+                                               &:hover {
+                                                       background-color: darken(@navbar-inverse-link-active-bg, 10%);
+                                                       color: @navbar-inverse-link-active-color;
+                                                       text-decoration: none;
                                                }
                                        }
                                }
@@ -136,20 +94,11 @@ Topbar
        }
 }
 
-#typo3-toolbar * li:hover,
-tr.shortcut:hover,
-tr.recentdoc:hover,
-tr.opendoc:hover {
-       background: #eee;
-}
-
 /* - - - - - - - - - - - - - - - - - - - - -
 Clear cache
 - - - - - - - - - - - - - - - - - - - - - */
 
 #clear-cache-actions-menu {
-       width: 30px;
-
        li {
                text-align: left;
 
@@ -172,24 +121,9 @@ Shortcuts menu
 - - - - - - - - - - - - - - - - - - - - - */
 
 #shortcut-menu {
-       width: 30px;
-
-       .toolbar-item-menu {
-               margin: 0px;
-               padding: 2px 0px 0px;
-               position: absolute;
-               width: 220px;
-       }
-
        .shortcut-list {
                width: 100%;
 
-               tr.shortcut.first-row td {
-                       background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
-                       background-repeat: repeat-x;
-                       padding-top: 4px;
-               }
-
                tr.shortcut td {
                        line-height: 16px;
                        padding: 2px 1px;
@@ -214,6 +148,7 @@ Shortcuts menu
 
 #shortcut-menu .shortcut-list .shortcut-group td {
        background-color: #dbdbdb;
+       color: #000;
        border-bottom: 1px solid #a5a5a5;
        border-top: 1px solid #a5a5a5;
 }
@@ -252,8 +187,7 @@ Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 
 #username {
-       font-weight: bold;
-       margin-right: 12px;
+       color: #fff;
 
        a {
                color: #ffffff;
@@ -281,6 +215,11 @@ Username inside the toolbar
        }
 }
 
+#logout-button {
+       margin-top: (@navbar-padding-vertical - 2);
+       padding: 0 @navbar-padding-horizontal;
+}
+
 /* - - - - - - - - - - - - - - - - - - - - -
 Logon / Logout
 - - - - - - - - - - - - - - - - - - - - - */
@@ -319,83 +258,43 @@ Logon / Logout
 Workspace Selector
 - - - - - - - - - - - - - - - - - - - - - */
 #workspace-selector-menu  {
-       width: 30px;
-
        ul {
-               position: static;
-               list-style: none;
-               margin: 0px;
-               padding: 2px 0px 0px;
-               width: 180px;
-
                li {
-                       text-align: left;
-                       float: none;
-                       min-height: 19px;
-                       vertical-align: middle;
-
                        span.t3-icon {
                                float: left;
                                margin-top: 0;
                                margin-right: 2px;
                        }
 
-                       a {
-                               text-decoration: none;
-                               display: block;
-                               padding-bottom: 2px;
-                               padding-left: 3px;
-                               vertical-align: middle;
-                       }
-
                        img {
                                float: left;
                                position: relative;
                                margin-right: 2px;
                        }
                }
-
-               li.divider {
-                       border: 0;
-                       background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
-                       background-repeat: repeat-x;
-                       min-height: 10px;
-                       padding-right: 0;
-                       padding-top: 4px;
-
-                       &:hover {
-                               background-color: transparent;
-                       }
-               }
-
        }
 
        .items {
                list-style: none;
-               background-color: #f9f9f9;
                overflow-y: auto;
                max-height: 300px;
        }
 }
 
-body.typo3-in-workspace #typo3-top-container {
-       background: none;
-}
-
-body.typo3-in-workspace #typo3-topbar .x-panel-bwrap {
-       background: url('../../../../images/backgrounds/topbar-in-workspace-background-left.png') no-repeat;
-}
-
-body.typo3-in-workspace #typo3-topbar .x-panel-body {
-       background: url('../../../../images/backgrounds/topbar-in-workspace-background-right.png') no-repeat right 0;
-}
 
-body.typo3-in-workspace #typo3-topbar {
-       background: url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
-}
-
-body.typo3-in-workspace #typo3-topbar #username {
-       text-shadow: 0 0 5px #000000;
+body.typo3-in-workspace {
+       #typo3-top-container {
+               background-image:
+                       url('../../../../images/backgrounds/topbar-in-workspace-background-left.png'),
+                       url('../../../../images/backgrounds/topbar-in-workspace-background-right.png'),
+                       url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
+               background-repeat: no-repeat, no-repeat, repeat-x;
+               background-position: left top, right top, left top;
+
+               #username {
+                       text-shadow: 0 0 5px #000000;
+               }
+       }
 }
 
 /* - - - - - - - - - - - - - - - - - - - - -
@@ -403,13 +302,15 @@ Live Search
 - - - - - - - - - - - - - - - - - - - - - */
 
 #typo3-toolbar #live-search-menu {
-       padding-top: 4px;
+       padding-top: 13px;
+       padding-left: @navbar-padding-horizontal;
+       padding-right: @navbar-padding-horizontal;
 }
 
 .live-search-results .t3-icon-toolbar-menu-search {
        position: absolute;
        z-index: 3000;
-       top: 3px;
+       top: 13px;
        margin: 3px;
 }
 
@@ -458,7 +359,6 @@ Live Search
                margin-left: 110px;
                color: #ddd;
        }
-
 }
 
 .search-list-help-content {
index 68a2ada..0b657a0 100644 (file)
 //##
 
 // Basics of a navbar
-@navbar-height:                    32px;
+@navbar-height:                    45px;
 @navbar-margin-bottom:             @line-height-computed;
 @navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 
 // Inverted navbar
 // Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
+@navbar-inverse-color:                      #999;
 @navbar-inverse-bg:                         #222;
-@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-border:                     none;
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-color:                 @navbar-inverse-color;
 
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              darken(@navbar-inverse-bg, 5%);
+@navbar-inverse-link-hover-color:           rgb(200, 200, 200);
+@navbar-inverse-link-hover-bg:              rgb(50, 50, 50);
 
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             rgb(60, 60, 60);
+@navbar-inverse-link-active-color:          rgb(255, 255, 255);
+@navbar-inverse-link-active-bg:             rgb(78, 78, 78);
 
 @navbar-inverse-link-disabled-color:        darken(@navbar-inverse-color, 30%);
 @navbar-inverse-link-disabled-bg:           darken(@navbar-inverse-bg, 20%);
index 03c051a..2fd35b6 100644 (file)
@@ -3582,7 +3582,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar {
   position: relative;
-  min-height: 32px;
+  min-height: 45px;
   margin-bottom: 18px;
   border: 1px solid transparent;
 }
@@ -3690,10 +3690,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand {
   float: left;
-  padding: 7px 15px;
+  padding: 13.5px 15px;
   font-size: 15px;
   line-height: 18px;
-  height: 32px;
+  height: 45px;
 }
 .navbar-brand:hover,
 .navbar-brand:focus {
@@ -3710,8 +3710,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   float: right;
   margin-right: 15px;
   padding: 9px 10px;
-  margin-top: -1px;
-  margin-bottom: -1px;
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
@@ -3735,7 +3735,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-nav {
-  margin: 3.5px -15px;
+  margin: 6.75px -15px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
@@ -3773,8 +3773,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     float: left;
   }
   .navbar-nav > li > a {
-    padding-top: 7px;
-    padding-bottom: 7px;
+    padding-top: 13.5px;
+    padding-bottom: 13.5px;
   }
   .navbar-nav.navbar-right:last-child {
     margin-right: -15px;
@@ -3798,8 +3798,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 6.5px;
+  margin-bottom: 6.5px;
 }
 @media (min-width: 768px) {
   .navbar-form .form-group {
@@ -3878,20 +3878,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-bottom-left-radius: 0;
 }
 .navbar-btn {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 6.5px;
+  margin-bottom: 6.5px;
 }
 .navbar-btn.btn-sm {
-  margin-top: 3px;
-  margin-bottom: 3px;
+  margin-top: 9.5px;
+  margin-bottom: 9.5px;
 }
 .navbar-btn.btn-xs {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 11.5px;
+  margin-bottom: 11.5px;
 }
 .navbar-text {
-  margin-top: 7px;
-  margin-bottom: 7px;
+  margin-top: 13.5px;
+  margin-bottom: 13.5px;
 }
 @media (min-width: 768px) {
   .navbar-text {
@@ -4001,10 +4001,10 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 }
 .navbar-inverse {
   background-color: #222222;
-  border-color: #080808;
+  border-color: none;
 }
 .navbar-inverse .navbar-brand {
-  color: #d7d7d7;
+  color: #999999;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
@@ -4012,26 +4012,26 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: transparent;
 }
 .navbar-inverse .navbar-text {
-  color: #d7d7d7;
+  color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a {
-  color: #d7d7d7;
+  color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
-  color: #ffffff;
-  background-color: #151515;
+  color: #c8c8c8;
+  background-color: #323232;
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #3c3c3c;
+  background-color: #4e4e4e;
 }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
 .navbar-inverse .navbar-nav > .disabled > a:focus {
-  color: #8b8b8b;
+  color: #4d4d4d;
   background-color: #000000;
 }
 .navbar-inverse .navbar-toggle {
@@ -4051,55 +4051,55 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #3c3c3c;
+  background-color: #4e4e4e;
   color: #ffffff;
 }
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
-    border-color: #080808;
+    border-color: none;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
-    background-color: #080808;
+    background-color: none;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: #d7d7d7;
+    color: #999999;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #ffffff;
-    background-color: #151515;
+    color: #c8c8c8;
+    background-color: #323232;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #3c3c3c;
+    background-color: #4e4e4e;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-    color: #8b8b8b;
+    color: #4d4d4d;
     background-color: #000000;
   }
 }
 .navbar-inverse .navbar-link {
-  color: #d7d7d7;
+  color: #999999;
 }
 .navbar-inverse .navbar-link:hover {
-  color: #ffffff;
+  color: #c8c8c8;
 }
 .navbar-inverse .btn-link {
-  color: #d7d7d7;
+  color: #999999;
 }
 .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link:focus {
-  color: #ffffff;
+  color: #c8c8c8;
 }
 .navbar-inverse .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-inverse .btn-link:focus {
-  color: #8b8b8b;
+  color: #4d4d4d;
 }
 .breadcrumb {
   padding: 8px 15px;
@@ -9958,6 +9958,9 @@ div.hr {
 .divider {
   padding-bottom: 12px;
 }
+li.divider {
+  padding: 0;
+}
 a span {
   cursor: pointer;
 }
@@ -10519,7 +10522,7 @@ Module menu
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-module-menu {
   background: #222222;
-  color: #d7d7d7;
+  color: #999999;
   padding-bottom: 14px;
 }
 #typo3-module-menu .x-panel-body {
@@ -10536,7 +10539,7 @@ Module menu
 #typo3-module-menu #typo3-menu > li div.modgroup {
   white-space: nowrap;
   background-color: #000000;
-  color: #8b8b8b;
+  color: #4d4d4d;
   cursor: pointer;
   font-weight: bold;
   text-transform: uppercase;
@@ -10549,7 +10552,7 @@ Module menu
 }
 #typo3-module-menu #typo3-menu > li ul li a {
   white-space: nowrap;
-  color: #d7d7d7;
+  color: #999999;
   padding: 7px 15px;
   position: relative;
   display: block;
@@ -10557,8 +10560,8 @@ Module menu
   overflow: hidden;
 }
 #typo3-module-menu #typo3-menu > li ul li a:hover {
-  background-color: #151515;
-  color: #ffffff;
+  background-color: #323232;
+  color: #c8c8c8;
 }
 #typo3-module-menu #typo3-menu > li ul li a span.submodule-icon {
   position: absolute;
@@ -10571,7 +10574,7 @@ Module menu
   font-weight: bold;
 }
 #typo3-module-menu #typo3-menu > li ul li.highlighted a {
-  background-color: #3c3c3c;
+  background-color: #4e4e4e;
   color: #ffffff;
 }
 #typo3-module-menu #typo3-menu > li ul li.highlighted a:after {
@@ -10603,117 +10606,105 @@ Module menu
 Topbar
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-topbar {
+  background-color: #222222;
   z-index: 200;
 }
 #typo3-topbar div {
   overflow: visible !important;
 }
 #typo3-topbar #typo3-top-container {
-  background: #000;
-  color: #d7d7d7;
-  height: 100%;
-  padding: 0 24px;
+  margin-bottom: 0;
 }
 #typo3-topbar #typo3-top-container #typo3-logo {
   margin: 8px 0 0 0;
   padding: 1px 0 0 0;
   width: 159px;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar {
-  margin-top: 6px;
-  padding-right: 24px;
-  position: absolute;
-  right: 0px;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar .separator {
-  border-right: 1px solid #000;
-  box-shadow: 1px 0 #585858;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar {
+#typo3-topbar #typo3-top-container #typo3-toolbar {
   list-style: none;
   display: inline;
-  margin: 0px;
-  padding: 0px;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar div {
+#typo3-topbar #typo3-top-container #typo3-toolbar div {
   overflow: visible !important;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar span.spinner {
+#typo3-topbar #typo3-top-container #typo3-toolbar span.spinner {
   background-image: url('../../../../images/spinner/3f3f3f.gif');
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar > li {
-  display: inline;
-  float: left;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar li {
-  padding-top: 3px;
+#typo3-topbar #typo3-top-container #typo3-toolbar > li {
   position: relative;
-  padding-bottom: 2px;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .separator {
-  padding-right: 12px;
-  margin-right: 13px;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .separator .toolbar-item-menu {
-  right: 12px;
-}
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item {
-  display: block;
-  padding-bottom: 4px;
-  padding-top: 2px;
-  text-align: center;
-  color: #fff;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item .badge {
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item .badge {
   position: absolute;
-  top: -3px;
-  right: -3px;
+  top: 6px;
+  right: 4px;
   font-size: 7px;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-active {
-  background-image: url('../../../../icons/gfx/toolbar_item_active_bg.png');
-  height: 25px;
-  color: #000;
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-active {
+  background-color: #4e4e4e;
+  color: #ffffff;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-menu {
-  background-color: #f9f9f9;
-  border: 1px solid #abb2bc;
-  border-top: none;
-  list-style: none;
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu {
   position: absolute;
-  top: 28px;
-  z-index: 100;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 12px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+  display: block;
+  visiblity: hidden;
+  left: auto;
   right: 0;
+  background-color: #4e4e4e;
+  color: #ffffff;
+  border: 0;
   margin: 0;
-  padding: 2px 0 0;
-  width: 180px;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-menu li {
-  padding-top: 0;
-  padding-bottom: 0;
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu.pull-right {
+  right: 0;
+  left: auto;
 }
-#typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-menu li a {
-  float: none;
-  min-height: 19px;
-  padding-left: 2px;
-  padding-top: 1px;
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu .divider {
+  height: 1px;
+  margin: 8px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu > li > a {
   display: block;
-  padding-bottom: 2px;
-  padding-left: 3px;
-  vertical-align: middle;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.5;
+  color: #5a5a5a;
+  white-space: nowrap;
 }
-#typo3-toolbar * li:hover,
-tr.shortcut:hover,
-tr.recentdoc:hover,
-tr.opendoc:hover {
-  background: #eee;
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu li a,
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu td a {
+  color: #ffffff;
+  text-decoration: none;
+}
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu li a:hover,
+#typo3-topbar #typo3-top-container #typo3-toolbar .toolbar-item-menu td a:hover {
+  background-color: #353535;
+  color: #ffffff;
+  text-decoration: none;
 }
 /* - - - - - - - - - - - - - - - - - - - - -
 Clear cache
 - - - - - - - - - - - - - - - - - - - - - */
-#clear-cache-actions-menu {
-  width: 30px;
-}
 #clear-cache-actions-menu li {
   text-align: left;
 }
@@ -10730,23 +10721,9 @@ Clear cache
 /* - - - - - - - - - - - - - - - - - - - - -
 Shortcuts menu
 - - - - - - - - - - - - - - - - - - - - - */
-#shortcut-menu {
-  width: 30px;
-}
-#shortcut-menu .toolbar-item-menu {
-  margin: 0px;
-  padding: 2px 0px 0px;
-  position: absolute;
-  width: 220px;
-}
 #shortcut-menu .shortcut-list {
   width: 100%;
 }
-#shortcut-menu .shortcut-list tr.shortcut.first-row td {
-  background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
-  background-repeat: repeat-x;
-  padding-top: 4px;
-}
 #shortcut-menu .shortcut-list tr.shortcut td {
   line-height: 16px;
   padding: 2px 1px;
@@ -10764,6 +10741,7 @@ Shortcuts menu
 }
 #shortcut-menu .shortcut-list .shortcut-group td {
   background-color: #dbdbdb;
+  color: #000;
   border-bottom: 1px solid #a5a5a5;
   border-top: 1px solid #a5a5a5;
 }
@@ -10794,8 +10772,7 @@ Shortcuts menu
 Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 #username {
-  font-weight: bold;
-  margin-right: 12px;
+  color: #fff;
 }
 #username a {
   color: #ffffff;
@@ -10814,6 +10791,10 @@ Username inside the toolbar
 #username.su-user a {
   color: #eb6e5a;
 }
+#logout-button {
+  margin-top: 11.5px;
+  padding: 0 15px;
+}
 /* - - - - - - - - - - - - - - - - - - - - -
 Logon / Logout
 - - - - - - - - - - - - - - - - - - - - - */
@@ -10846,81 +10827,41 @@ Logon / Logout
 /* - - - - - - - - - - - - - - - - - - - - -
 Workspace Selector
 - - - - - - - - - - - - - - - - - - - - - */
-#workspace-selector-menu {
-  width: 30px;
-}
-#workspace-selector-menu ul {
-  position: static;
-  list-style: none;
-  margin: 0px;
-  padding: 2px 0px 0px;
-  width: 180px;
-}
-#workspace-selector-menu ul li {
-  text-align: left;
-  float: none;
-  min-height: 19px;
-  vertical-align: middle;
-}
 #workspace-selector-menu ul li span.t3-icon {
   float: left;
   margin-top: 0;
   margin-right: 2px;
 }
-#workspace-selector-menu ul li a {
-  text-decoration: none;
-  display: block;
-  padding-bottom: 2px;
-  padding-left: 3px;
-  vertical-align: middle;
-}
 #workspace-selector-menu ul li img {
   float: left;
   position: relative;
   margin-right: 2px;
 }
-#workspace-selector-menu ul li.divider {
-  border: 0;
-  background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
-  background-repeat: repeat-x;
-  min-height: 10px;
-  padding-right: 0;
-  padding-top: 4px;
-}
-#workspace-selector-menu ul li.divider:hover {
-  background-color: transparent;
-}
 #workspace-selector-menu .items {
   list-style: none;
-  background-color: #f9f9f9;
   overflow-y: auto;
   max-height: 300px;
 }
 body.typo3-in-workspace #typo3-top-container {
-  background: none;
-}
-body.typo3-in-workspace #typo3-topbar .x-panel-bwrap {
-  background: url('../../../../images/backgrounds/topbar-in-workspace-background-left.png') no-repeat;
+  background-image: url('../../../../images/backgrounds/topbar-in-workspace-background-left.png'), url('../../../../images/backgrounds/topbar-in-workspace-background-right.png'), url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: left top, right top, left top;
 }
-body.typo3-in-workspace #typo3-topbar .x-panel-body {
-  background: url('../../../../images/backgrounds/topbar-in-workspace-background-right.png') no-repeat right 0;
-}
-body.typo3-in-workspace #typo3-topbar {
-  background: url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
-}
-body.typo3-in-workspace #typo3-topbar #username {
+body.typo3-in-workspace #typo3-top-container #username {
   text-shadow: 0 0 5px #000000;
 }
 /* - - - - - - - - - - - - - - - - - - - - -
 Live Search
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-toolbar #live-search-menu {
-  padding-top: 4px;
+  padding-top: 13px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 .live-search-results .t3-icon-toolbar-menu-search {
   position: absolute;
   z-index: 3000;
-  top: 3px;
+  top: 13px;
   margin: 3px;
 }
 .t3-icon-input-clear {
index 8007b88..443f233 100644 (file)
@@ -21,7 +21,7 @@ if (TYPO3_MODE === 'BE' || TYPO3_MODE === 'FE' && isset($GLOBALS['BE_USER'])) {
        $TBE_STYLES['dims']['leftMenuFrameW'] = 190;
 
        // Top frame height
-       $TBE_STYLES['dims']['topFrameH'] = 42;
+       $TBE_STYLES['dims']['topFrameH'] = 45;
 
        // Default navigation frame width
        $TBE_STYLES['dims']['navFrameWidth'] = 280;
old mode 100644 (file)
new mode 100755 (executable)
index 6be2aac..75f1ff1
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png and b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-left.png differ
old mode 100644 (file)
new mode 100755 (executable)
index 55d5b9d..e46c225
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png and b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background-right.png differ
old mode 100644 (file)
new mode 100755 (executable)
index df712f6..b36584d
Binary files a/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif and b/typo3/sysext/t3skin/images/backgrounds/topbar-in-workspace-background.gif differ
index cb14006..20587e5 100644 (file)
@@ -115,10 +115,10 @@ class WorkspaceSelectorToolbarItem implements \TYPO3\CMS\Backend\Toolbar\Toolbar
                $workspaceMenu = array(
                        '<a href="#" class="toolbar-item">' . \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('apps-toolbar-menu-workspace', array('title' => $title)) . '</a>',
                        '<div class="toolbar-item-menu" style="display: none">' ,
-                               '<ul class="top">',
+                               '<ul class="top list-unstyled">',
                                        implode(LF, $workspaceSections['top']),
                                '</ul>',
-                               '<ul class="items">',
+                               '<ul class="items list-unstyled">',
                                        implode(LF, $workspaceSections['items']),
                                '</ul>',
                        '</div>'