[!!!][TASK] Make the TYPO3 Backend responsive and remove ExtJS Viewport 37/47637/55
authorKay Strobach <info@kay-strobach.de>
Tue, 12 Apr 2016 15:13:10 +0000 (17:13 +0200)
committerBenni Mack <benni@typo3.org>
Mon, 10 Oct 2016 20:43:27 +0000 (22:43 +0200)
A responsive CSS viewport replaces the legacy the ExtJS
component TYPO3.Viewport.

Resolves: #52877
Releases: master
Change-Id: I6d9c6c4e32cf67df3eeb072448e6b4322853d10c
Reviewed-on: https://review.typo3.org/47637
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
57 files changed:
Build/Resources/Public/Less/Component/avatar.less
Build/Resources/Public/Less/Component/dropdown.less [new file with mode: 0644]
Build/Resources/Public/Less/Component/module.less
Build/Resources/Public/Less/Scaffold/_modulemenu.less [new file with mode: 0644]
Build/Resources/Public/Less/Scaffold/_toolbar.less [new file with mode: 0644]
Build/Resources/Public/Less/Scaffold/_topbar.less [new file with mode: 0644]
Build/Resources/Public/Less/Scaffold/scaffold.less [new file with mode: 0644]
Build/Resources/Public/Less/TYPO3/_element_docheader.less
Build/Resources/Public/Less/TYPO3/_element_pagetree.less
Build/Resources/Public/Less/TYPO3/_main_body.less
Build/Resources/Public/Less/TYPO3/_main_form.less
Build/Resources/Public/Less/TYPO3/_main_scaffolding.less [deleted file]
Build/Resources/Public/Less/TYPO3/_module_menu.less [deleted file]
Build/Resources/Public/Less/TYPO3/_module_viewpage.less
Build/Resources/Public/Less/TYPO3/_topbar.less [deleted file]
Build/Resources/Public/Less/_minimal.less
Build/Resources/Public/Less/_variables.less
Build/Resources/Public/Less/backend.less
Build/Resources/Public/Less/nprogress/nprogress.less
typo3/sysext/about/Resources/Private/Templates/About/Index.html
typo3/sysext/about/Resources/Private/Templates/Modules/Index.html
typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/SystemInformationToolbarItem.php
typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
typo3/sysext/backend/Classes/Controller/BackendController.php
typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html
typo3/sysext/backend/Resources/Private/Templates/ToolbarMenu/SystemInformation.html
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js
typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/Utility.js
typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/actions.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/iframepanel.js
typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst [new file with mode: 0644]
typo3/sysext/core/Tests/Acceptance/Support/Helper/Topbar.php
typo3/sysext/install/Resources/Public/Css/install.css
typo3/sysext/lang/locallang_core.xlf
typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
typo3/sysext/sys_action/Classes/Backend/ToolbarItems/ActionToolbarItem.php
typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php
typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js

index 0d1d67f..82254c0 100644 (file)
        height: @avatar-size / 2;
        width: @avatar-size / 2;
 }
-
-
-//
-// Avatar in dropdowns
-//
-.dropdown-toggle {
-       > .avatar {
-               height: @avatar-dropdown-size;
-               width: @avatar-dropdown-size;
-               float: left;
-               margin-right: 0.5em;
-               margin-top: -@avatar-dropdown-correction;
-       }
-       .avatar-image {
-               height: @avatar-dropdown-size;
-               width: @avatar-dropdown-size;
-       }
-}
\ No newline at end of file
diff --git a/Build/Resources/Public/Less/Component/dropdown.less b/Build/Resources/Public/Less/Component/dropdown.less
new file mode 100644 (file)
index 0000000..5ad19a0
--- /dev/null
@@ -0,0 +1,125 @@
+//
+// Dropdowns
+//
+.dropdown-menu {
+       line-height: 1.45em;
+       border: 0;
+       margin: 0;
+       border-radius: 0;
+       a {
+               display: block;
+               &:hover {
+                       text-decoration: none;
+               }
+       }
+       hr {
+               border-top: 1px solid rgba(0,0,0,0.25);
+               margin: 1.25em -15px;
+       }
+       > *:last-child {
+               margin-bottom: 0;
+       }
+       .form-group {
+               margin-bottom: 0.75em;
+       }
+       .form-control {
+               border-color: #aaaaaa;
+               color: inherit;
+               border-radius: 0;
+               background-color: #333333;
+               &:focus {
+                       box-shadow: none;
+                       border-color: #bbbbbb;
+               }
+       }
+       .btn  {
+               border: none;
+               border-radius: 0;
+               padding: 6px 10px;
+       }
+}
+.dropdown-headline {
+       font-size: 1.15em;
+       margin-top: 0;
+       margin-bottom: 0.5em;
+}
+.dropdown-text {
+       a {
+               display: inline-block;
+       }
+}
+div.dropdown-menu {
+       padding: 1.5em;
+}
+.dropdown-list {
+       .list-unstyled();
+       > li {
+               &:extend(.clearfix all);
+               position: relative;
+       }
+       > li + li {
+               margin-top: 0.5em;
+       }
+}
+.dropdown-list-link {
+       display: block;
+       text-decoration: none;
+       &:hover,
+       &:focus {
+               text-decoration: none;
+       }
+}
+
+//
+// Dropdown Table
+//
+.dropdown-table {
+       display: table;
+       width: 100%;
+}
+.dropdown-table-row {
+       display: table-row;
+}
+.dropdown-table-column {
+       display: table-cell;
+       padding-top: 0.25em;
+       padding-bottom: 0.25em;
+       vertical-align: middle;
+}
+.dropdown-table-column-top {
+       vertical-align: top;
+}
+.dropdown-table-icon {
+       width: 16px;
+       padding-right: 0.5em;
+}
+.dropdown-table-title {
+       white-space: nowrap;
+       padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+       max-width: 230px;
+       overflow: hidden;
+       display: block;
+       white-space: nowrap;
+       text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+       white-space: nowrap;
+       text-align: right;
+}
+.dropdown-table-actions-btn {
+       text-align: center;
+       display: inline-block!important;
+       margin-top: -4px;
+       margin-bottom: -4px;
+       padding: 4px;
+       vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+       background-color: @brand-notice;
+}
+.dropdown-table-actions-btn-delete:hover {
+       background-color: @brand-danger;
+}
index ce64d25..e033e4a 100644 (file)
        }
        .container-small {
                max-width: 768px;
+               margin: 0 auto;
        }
 }
 .module-docheader + .module-body {
diff --git a/Build/Resources/Public/Less/Scaffold/_modulemenu.less b/Build/Resources/Public/Less/Scaffold/_modulemenu.less
new file mode 100644 (file)
index 0000000..3953cee
--- /dev/null
@@ -0,0 +1,103 @@
+//
+// Module menu
+//
+
+// Module links
+@modulemenu-item-padding-vertical: 2px;
+@modulemenu-item-padding-horizontal: 4px;
+
+// Module menu wrapper
+.module-wrapper {
+       position: relative;
+       iframe {
+               border: none;
+       }
+}
+
+// Module menu styling
+.modulemenu {
+
+       /// Module menu group
+       .modulemenu-group-container {
+               clear: both;
+               &:extend(.list-unstyled all);
+       }
+       .modulemenu-group {
+               position: relative;
+               padding: 5px 0;
+               border-bottom: 1px solid rgba(0,0,0,0.2);
+       }
+       .modulemenu-group-header,
+       .modulemenu-item-link {
+               &:extend(.clearfix all);
+               position: relative;
+               display: block;
+               cursor: pointer;
+               padding: @modulemenu-item-padding-vertical @modulemenu-item-padding-horizontal;
+               text-decoration: none;
+       }
+       .modulemenu-group-header {
+               user-select: none;
+               text-transform: uppercase;
+       }
+       .modulemenu-item-link {
+               &:focus,
+               &:hover {
+                       outline: none;
+                       background-color: rgba(0,0,0,0.1);
+               }
+       }
+       .modulemenu-item.active {
+               .modulemenu-item-link {
+                       background-color: rgba(0,0,0,0.15);
+               }
+       }
+
+       // Module menu icons
+       .modulemenu-icon {
+               float: left;
+               margin-right: @modulemenu-item-padding-horizontal;
+               .fa {
+                       font-size: 0.5em;
+               }
+       }
+
+       // Module menu group and item titles
+       .modulemenu-group-title,
+       .modulemenu-item-title {
+               white-space: nowrap;
+               text-overflow: ellipsis;
+               padding-top: 7px;
+               padding-left: @modulemenu-item-padding-horizontal;
+               display: none;
+               overflow: hidden;
+               *zoom: 1;
+       }
+       .modulemenu-group-title {
+               padding-right: 20px;
+               .caret {
+                       .rotate(90deg);
+                       position: absolute;
+                       top: 17px;
+                       right: 18px;
+               }
+       }
+
+       // Module Group Expanded
+       .expanded {
+               .modulemenu-group-title {
+                       .caret {
+                               .rotate(0deg);
+                       }
+               }
+       }
+}
+
+
+// Module menu snapped
+.scaffold-modulemenu-expanded {
+       .modulemenu-group-title,
+       .modulemenu-item-title {
+               display: block;
+       }
+}
diff --git a/Build/Resources/Public/Less/Scaffold/_toolbar.less b/Build/Resources/Public/Less/Scaffold/_toolbar.less
new file mode 100644 (file)
index 0000000..73a104c
--- /dev/null
@@ -0,0 +1,216 @@
+//
+// Toolbar
+//
+@toolbar-item-padding-vertical: 9px;
+@toolbar-item-padding-horizontal: 10px;
+
+@toolbar-color: #ddd;
+@toolbar-height: 45px;
+@toolbar-zindex: @zindex-navbar;
+@toolbar-bg: @navbar-inverse-bg;
+
+@toolbar-navigation-color: @toolbar-color;
+@toolbar-navigation-bg: #2f2f2f;
+@toolbar-navigation-border-color: #111;
+
+@toolbar-dropdown-padding: 16px;
+@toolbar-dropdown-color: @toolbar-navigation-color;
+@toolbar-dropdown-bg: @toolbar-navigation-bg;
+
+@toolbar-dropdown-link-bg: @toolbar-navigation-bg;
+@toolbar-dropdown-link-color: #ddd;
+@toolbar-dropdown-link-hover-bg: #333;
+@toolbar-dropdown-link-hover-color: #fff;
+@toolbar-dropdown-link-active-bg: lighten(@toolbar-dropdown-bg, 15%);
+@toolbar-dropdown-link-active-color: #fff;
+
+@toolbar-navigation-search-bg: @toolbar-navigation-bg;
+@toolbar-navigation-search-hover-bg: @toolbar-dropdown-link-hover-bg;
+@toolbar-navigation-search-focus-bg: @toolbar-dropdown-link-active-bg;
+
+
+.toolbar {
+       padding: 8px;
+       @media (min-width: @scaffold-breakpoint) {
+               padding: 0;
+       }
+       &:after {
+               clear: both;
+               display: table;
+               content: '';
+       }
+}
+
+.toolbar-list {
+       list-style: none;
+       padding: 0;
+       margin: 0;
+}
+
+// Toolbar Item
+.toolbar-item {
+       padding: 4px;
+       position: relative;
+       display: block;
+       float: left;
+       width: 100%;
+       @media (min-width: 600px) {
+               width: 50%;
+       }
+       @media (min-width: 750px) {
+               width: 33.33%;
+       }
+       @media (min-width: @scaffold-breakpoint) {
+               padding: 0;
+               width: auto;
+               margin-left: 1px;
+       }
+}
+
+// Dropdown Menu
+.toolbar-item {
+       .dropdown-menu {
+               width: 350px;
+       }
+       @media (max-width: @scaffold-breakpoint-max) {
+               .dropdown-menu {
+                       overflow: auto;
+                       padding: @grid-gutter-width / 2;
+                       position: fixed;
+                       max-height: 90%;
+                       max-width: 90%;
+                       top: 50%;
+                       left: 50%;
+                       transform: translate(-50%, -50%);
+               }
+               .dropdown-backdrop {
+                       background: rgba(0,0,0,0.65);
+               }
+       }
+
+}
+
+// Toolbar Item
+.toolbar-item-avatar {
+       width: 32px;
+       display: inline-block;
+       .avatar {
+               position: absolute;
+               top: 50%;
+               left: 10px;
+               transform: translate(0,-50%);
+       }
+}
+.toolbar-item-badge {
+       position: absolute;
+       bottom: 4px;
+       right: 4px;
+       padding: 3px 4px;
+       border-radius: 0;
+       font-size: 10px;
+       font-weight: normal;
+       min-width: 16px;
+
+}
+
+// Toolbar Item Link
+.toolbar-item-link {
+       white-space: nowrap;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       border: 1px solid rgba(0,0,0,0.5);
+       position: relative;
+       display: block;
+       text-decoration: none;
+       padding: @toolbar-item-padding-vertical @toolbar-item-padding-horizontal;
+       height: @toolbar-height;
+       line-height: @toolbar-height - (@toolbar-item-padding-vertical * 2);
+       &:hover,
+       &:focus {
+               text-decoration: none;
+       }
+       @media (min-width: @scaffold-breakpoint) {
+               border: none;
+       }
+}
+.open {
+       .toolbar-item-link {
+               background-color: #424242;
+       }
+}
+@media (min-width: @scaffold-breakpoint) {
+       .toolbar-item-title {
+               display: none;
+       }
+}
+
+// Search
+.toolbar-item-search {
+       @media (min-width: @scaffold-breakpoint) {
+               width: 300px;
+       }
+       form {
+               padding: 0;
+               margin: 0;
+       }
+       .toolbar-item-link {
+               padding: 0;
+               margin: 0;
+               height: 0;
+       }
+       .form-group {
+               margin: 0;
+       }
+       .close {
+               color: #ffffff;
+               text-shadow: none;
+               opacity: 1;
+       }
+       .dropdown-menu {
+               @media (max-width: @scaffold-breakpoint-max) {
+                       top: 114px;
+                       left: 14px;
+                       right: 14px;
+                       width: auto;
+                       max-width: none;
+                       max-height: none;
+                       transform: none;
+                       bottom: 14px;
+               }
+               @media (min-width: @scaffold-breakpoint) {
+                       left: auto;
+                       right: 0;
+               }
+       }
+       .autocomplete-suggestions {
+               position: static!important;
+       }
+       .autocomplete-suggestion {
+               border: none;
+       }
+       &.open {
+               .toolbar-item-search-form {
+                       position: relative;
+                       z-index: 991;
+               }
+       }
+}
+.toolbar-item-search-field {
+       color: inherit;
+       background-color: @toolbar-navigation-search-bg;
+       margin: 0;
+       border-radius: 0;
+       border: 1px solid rgba(0,0,0,0.5);
+       @media (min-width: @scaffold-breakpoint) {
+               border: none;
+       }
+       height: @toolbar-height;
+       box-shadow: none;
+       &:hover {
+               background-color: @toolbar-navigation-search-hover-bg;
+       }
+       &:focus {
+               box-shadow: none;
+               background-color: @toolbar-navigation-search-focus-bg;
+       }
+}
diff --git a/Build/Resources/Public/Less/Scaffold/_topbar.less b/Build/Resources/Public/Less/Scaffold/_topbar.less
new file mode 100644 (file)
index 0000000..fb5d404
--- /dev/null
@@ -0,0 +1,187 @@
+//
+// Topbar
+// ======
+//
+
+//
+// Variables
+//
+@topbar-bg: @scaffold-topbar-bg;
+@topbar-color: @scaffold-topbar-color;
+@topbar-height: @scaffold-topbar-height;
+@topbar-zindex: @scaffold-topbar-zindex;
+
+@topbar-workspace-bg: #6d860d;
+
+@topbar-toolbar-bg: @scaffold-topbar-toolbar-bg;
+@topbar-toolbar-color: @scaffold-topbar-toolbar-color;
+
+@topbar-button-bg: @topbar-toolbar-bg;
+@topbar-button-hover-bg: lighten(@topbar-button-bg, 3%);
+@topbar-button-active-bg: @scaffold-modulemenu-bg;
+@topbar-button-width: 40px;
+
+@toolbar-item-padding-vertical: 9px;
+@toolbar-item-padding-horizontal: 15px;
+
+
+//
+// Component
+//
+.topbar {
+       background-color: inherit;
+       position: relative;
+       height: @topbar-height;
+       a {
+               color: inherit;
+               text-decoration: none;
+       }
+}
+
+
+//
+// Buttons
+//
+.topbar-button {
+       position: absolute;
+       top: 0;
+       display: inline-block;
+       border: 0;
+       background-color: @topbar-button-bg;
+       height: @topbar-height;
+       width: @topbar-button-width;
+       &:hover {
+               background-color: @topbar-button-hover-bg;
+       }
+       &.topbar-button-modulemenu {
+               left: 0;
+               @media (min-width: @scaffold-breakpoint) {
+                       background-color: @topbar-button-active-bg;
+               }
+       }
+       &.topbar-button-navigationcomponent {
+               left: @topbar-button-width;
+       }
+       &.topbar-button-toolbar {
+               right: @topbar-button-width;
+       }
+       &.topbar-button-search {
+               right: 0;
+       }
+}
+.scaffold-modulemenu-expanded {
+       .topbar-button.topbar-button-modulemenu {
+               background-color: @topbar-button-active-bg;
+       }
+}
+.scaffold-content-navigation-expanded {
+       .topbar-button-navigationcomponent {
+               background-color: @topbar-button-active-bg;
+       }
+}
+.scaffold-toolbar-expanded {
+       @media (max-width: @scaffold-breakpoint-max) {
+               .toolbar-item-search {
+                       display: none;
+               }
+       }
+       .topbar-button-toolbar {
+               background-color: @topbar-button-active-bg;
+       }
+}
+.scaffold-search-expanded {
+       @media (max-width: @scaffold-breakpoint-max) {
+               .toolbar-item {
+                       display: none;
+               }
+               .toolbar-item-search {
+                       display: block;
+                       width: 100%;
+               }
+       }
+       .topbar-button-search {
+               background-color: @topbar-button-active-bg;
+       }
+}
+
+
+.topbar-button-toolbar,
+.topbar-button-search {
+       display: block;
+}
+@media (min-width: @scaffold-breakpoint) {
+       .topbar-button-toolbar,
+       .topbar-button-search {
+               display: none;
+       }
+}
+
+
+
+//
+// Header
+//
+.topbar-header {
+       padding-left: @topbar-button-width * 2;
+       padding-right: @topbar-button-width * 2;
+}
+.topbar-header-site {
+       position: relative;
+       display: block;
+       @media (min-width: @scaffold-breakpoint) {
+               display: inline-block;
+       }
+       max-width: 100%;
+       height: @topbar-height;
+       line-height: @topbar-height;
+       padding-left: 1em;
+       padding-right: 1em;
+       white-space: nowrap;
+       &:before,
+       &:after {
+               display: block;
+               content: '';
+               position: absolute;
+               top: 0;
+               bottom: 0;
+               width: 1em;
+       }
+       &:before {
+               left: 0;
+               background: linear-gradient(to right, fade(@topbar-bg, 100%) 0%, fade(@topbar-bg, 0%) 100%);
+       }
+       &:after {
+               right: 0;
+               background: linear-gradient(to right, fade(@topbar-bg, 0%) 0%, fade(@topbar-bg, 100%) 100%);
+       }
+}
+.typo3-in-workspace {
+       .topbar-header-site {
+               background-color: @topbar-workspace-bg;
+               &:before {
+                       background: linear-gradient(to right, fade(@topbar-workspace-bg, 100%) 0%, fade(@topbar-workspace-bg, 0%) 100%);
+               }
+               &:after {
+                       background: linear-gradient(to right, fade(@topbar-workspace-bg, 0%) 0%, fade(@topbar-workspace-bg, 100%) 100%);
+               }
+       }
+}
+.topbar-header-site-logo {
+       height: @topbar-height;
+       display: none;
+       padding-right: 0.5em;
+       @media (min-width: 320px) {
+               display: inline-block;
+       }
+}
+.topbar-header-site-title {
+       line-height: 1.2em;
+       display: inline-block;
+       vertical-align: middle;
+}
+.topbar-header-site-name {
+       display: block;
+}
+.topbar-header-site-version {
+       opacity: 0.5;
+}
diff --git a/Build/Resources/Public/Less/Scaffold/scaffold.less b/Build/Resources/Public/Less/Scaffold/scaffold.less
new file mode 100644 (file)
index 0000000..e77834d
--- /dev/null
@@ -0,0 +1,276 @@
+//
+// Scaffold
+// ========
+//
+
+
+//
+// Variables
+//
+@scaffold-breakpoint-max: (@screen-md - 1);
+@scaffold-breakpoint: @screen-md;
+
+@scaffold-overlay-bg: rgba(0,0,0,0.65);
+@scaffold-overlay-zindex: @zindex-modal-background;
+
+@scaffold-bg: #f5f5f5;
+@scaffold-color: #333333;
+@scaffold-secondary-bg: #1f1f1e;
+@scaffold-secondary-color: #f5f5f5;
+
+@scaffold-topbar-bg: @scaffold-secondary-bg;
+@scaffold-topbar-color: @scaffold-secondary-color;
+@scaffold-topbar-height: 45px;
+@scaffold-topbar-zindex: @zindex-navbar;
+
+@scaffold-topbar-toolbar-bg: #222;
+@scaffold-topbar-toolbar-color: #fff;
+
+@scaffold-modulemenu-bg: #424242;
+@scaffold-modulemenu-color: #fff;
+@scaffold-modulemenu-snapped-width: 40px;
+@scaffold-modulemenu-expanded-width: 230px;
+@scaffold-modulemenu-zindex: @zindex-navbar;
+
+@scaffold-toolbar-bg: #424242;
+@scaffold-toolbar-color: #fff;
+@scaffold-toolbar-zindex: @zindex-navbar;
+
+@scaffold-content-navigation-width: 300px;
+
+@scaffold-content-toggle-bg: #333;
+@scaffold-content-toggle-color: #fff;
+
+
+//
+// Prevent Browser Rebounce
+//
+html {
+       height: 100%;
+       overflow: hidden;
+}
+body {
+       height: 100%;
+       overflow: auto;
+}
+
+
+//
+// Component
+//
+.scaffold {
+       background-color: @scaffold-bg;
+       color: @scaffold-color;
+       position: relative;
+       padding-top: @scaffold-topbar-height;
+       height: 100vh;
+}
+
+
+//
+// Topbar
+//
+.scaffold-topbar {
+       background-color: @scaffold-topbar-bg;
+       color: @scaffold-topbar-color;
+       height: @scaffold-topbar-height;
+       position: absolute;
+       top: 0;
+       right: 0;
+       left: 0;
+}
+
+
+//
+// ModuleMenu
+//
+.scaffold-modulemenu {
+       background-color: @scaffold-modulemenu-bg;
+       color: @scaffold-modulemenu-color;
+       position: fixed;
+       top: @scaffold-topbar-height;
+       left: 0;
+       bottom: 0;
+       width: @scaffold-modulemenu-snapped-width;
+       max-width: 100%;
+       z-index: @scaffold-modulemenu-zindex;
+       overflow: hidden;
+       a {
+               color: fade(@scaffold-modulemenu-color, 70%);
+               &:hover {
+                       color: @scaffold-modulemenu-color;
+               }
+       }
+       .active > a {
+               color: @scaffold-modulemenu-color;
+       }
+}
+
+
+//
+// Toolbar
+//
+.scaffold-toolbar {
+       overflow: auto;
+       background-color: @scaffold-toolbar-bg;
+       color: @scaffold-toolbar-color;
+       z-index: @scaffold-toolbar-zindex;
+       position: fixed;
+       top: @scaffold-topbar-height;
+       left: 0;
+       right: 0;
+       bottom: 0;
+       display: none;
+       a {
+               color: fade(@scaffold-toolbar-color, 70%);
+               &:hover {
+                       color: @scaffold-toolbar-color;
+               }
+       }
+       .active > a {
+               color: @scaffold-toolbar-color;
+       }
+       @media (min-width: @scaffold-breakpoint) {
+               overflow: visible;
+               background-color: transparent;
+               height: @scaffold-topbar-height;
+               top: 0;
+               left: auto;
+               bottom: auto;
+               display: block;
+       }
+}
+.scaffold-toolbar-expanded,
+.scaffold-search-expanded {
+        .scaffold-toolbar {
+               @media (max-width: @scaffold-breakpoint-max) {
+                       display: block;
+               }
+        }
+}
+
+
+//
+// Content
+//
+.scaffold-content {
+       position: fixed!important;
+       top: @scaffold-topbar-height;
+       left: 0;
+       right: 0;
+       bottom: 0;
+       @media (max-width: @scaffold-breakpoint-max) {
+               left: 0!important;
+       }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+       display: block;
+       border: none;
+       height: 100%;
+       width: 100%;
+}
+.scaffold-content-navigation {
+       display: none;
+       position: absolute!important;
+       left: 0;
+       top: 0;
+       bottom: 0;
+       width: @scaffold-content-navigation-width;
+}
+.scaffold-content-navigation-component {
+       position: absolute;
+       top: 0;
+       bottom: 0;
+       left: 0;
+       right: 0;
+       // EXTJS PAGETREE FIXES START
+       #typo3-pagetree-treeContainer > div > .x-panel-body {
+               overflow: auto;
+       }
+       // EXTJS PAGETREE FIXES END
+}
+.scaffold-content-module {
+       @media (max-width: @screen-xs-max) {
+               width: 100%;
+       }
+       position: absolute!important;
+       top: 0;
+       left: 0;
+       bottom: 0;
+       right: 0;
+}
+
+
+//
+// Content Overlay
+//
+.scaffold-content-overlay {
+       display: none;
+       position: absolute;
+       z-index: @scaffold-overlay-zindex;
+       top: 0;
+       left: 0;
+       right: 0;
+       bottom: 0;
+       background-color: @scaffold-overlay-bg;
+}
+.scaffold-modulemenu-expanded {
+       .scaffold-content-overlay {
+               display: block;
+               @media (min-width: @scaffold-breakpoint) {
+                       display: none;
+               }
+       }
+}
+
+
+//
+// Medium Screen
+//
+.scaffold {
+       @media (min-width: @scaffold-breakpoint) {
+               padding-left: @scaffold-modulemenu-snapped-width;
+       }
+       .scaffold-modulemenu {
+               width: @scaffold-modulemenu-snapped-width;
+               @media (max-width: @scaffold-breakpoint-max) {
+                       display: none;
+               }
+       }
+}
+.scaffold-modulemenu-expanded {
+       display: block;
+       padding-left: @scaffold-modulemenu-expanded-width;
+       .scaffold-modulemenu {
+               width: @scaffold-modulemenu-expanded-width;
+               @media (max-width: @scaffold-breakpoint-max){
+                       display: block;
+               }
+       }
+       .scaffold-content {
+               transform: translate(@scaffold-modulemenu-expanded-width, 0);
+       }
+}
+.scaffold-content-navigation-expanded {
+       .scaffold-content-navigation {
+               display: block;
+       }
+       .scaffold-content-module {
+               left: @scaffold-content-navigation-width;
+       }
+}
+
+@media (min-width: @scaffold-breakpoint){
+       .scaffold {
+               .scaffold-content {
+                       left: @scaffold-modulemenu-snapped-width;
+               }
+       }
+       .scaffold-modulemenu-expanded {
+               .scaffold-content {
+                       left: @scaffold-modulemenu-expanded-width;
+                       transform: none;
+               }
+       }
+}
index 60fb41f..4e8154a 100644 (file)
                border-bottom: 1px solid #C3C3C3;
        }
 }
-
-//
-// ExtJS Viewport
-//
-
-
-// override the ExtJS collapse page tree button
-// -------------------------
-
-@module-menu-border-color-lighter: #F5F5F5;
-@module-menu-border-color-light: #C3C3C3;
-
-#typo3-navigationContainer-xcollapsed {
-       &:before {
-               content: "";
-               position: absolute;
-               top: 0;
-               width: 8px;
-               height: 100%;
-               background-color: lighten(@module-menu-bg,25%);
-               border-right: 1px solid lighten(@module-menu-border-color,20%);
-               border-left: 1px solid @module-menu-border-color;
-               .box-shadow(3px 0 0 rgba(0,0,0,0.15));
-       }
-}
-
-// center collapse button vertical
-.x-panel-body {
-       .x-layout-cmini-west .x-layout-mini,
-       .x-layout-split-west .x-layout-mini {
-               top: 50%;
-               margin-top: -40px;
-       }
-}
-
-
-// styling for the page tree collapse button
-// this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
-.typo3-btn-collapse-page-tree {
-       height: 80px;
-       width: 14px;
-       border-top-right-radius: 3px;
-       border-bottom-right-radius: 3px;
-       background: none;
-       border: 1px solid @module-menu-border-color-light;
-       border-left: 1px solid @module-menu-border-color-lighter;
-       display: block;
-       font-size: 0;
-       .opacity(1);
-       &:after {
-               font-family: 'FontAwesome';
-               content: "\f0d9";
-               position: absolute;
-               top: 50%;
-               display: block;
-               width: 100%;
-               margin-top: -1px;
-               color: #000;
-               font-size: 12px;
-               vertical-align: middle;
-               text-align: center;
-       }
-}
-
-// close page tree button
-.x-layout-split-west .x-layout-mini {
-       &:extend(.typo3-btn-collapse-page-tree all);
-       background-color: @module-menu-border-color-lighter;
-       &:hover {
-               background-color: darken(@module-menu-border-color-lighter,5%);
-       }
-}
-
-// open page tree button
-.x-layout-cmini-west .x-layout-mini {
-       &:extend(.typo3-btn-collapse-page-tree all);
-       background-color: lighten(@module-menu-bg, 25%);
-       margin-left: 7px;
-       border: 1px solid lighten(@module-menu-border-color, 20%);
-       border-left: 0;
-
-       &:hover {
-               .opacity(1);
-               background-color: lighten(@module-menu-bg,30%);
-       }
-       &:after {
-               margin-top: -9px;
-               color: #fff;
-               content: "\f0da";
-       }
-}
index 59c472b..943f811 100644 (file)
@@ -1,6 +1,9 @@
 //
 // Pagetree
 //
+#typo3-pagetree-topPanelItems {
+       background-color: #eee;
+}
 
 #typo3-pagetree {
        height: 100%;
index 92c092c..b150be3 100644 (file)
@@ -1,8 +1,4 @@
 //
-// Body
-//
-
-//
 // specific wrappers
 //
 // The "template" class is usually instantiated as either
index e997567..054a6ab 100644 (file)
@@ -104,6 +104,22 @@ fieldset[disabled] .form-control {
 
 
 //
+// Form control icon
+//
+.form-control-icon {
+       position: absolute;
+       top: 50%;
+       left: 15px;
+       transform: translate(0, -50%);
+       z-index: 1;
+       + .form-control,
+       + .form-control-clearable .form-control {
+               padding-left: 3.25em;
+       }
+}
+
+
+//
 // Form group validation states
 //
 .form-group.has-error {
diff --git a/Build/Resources/Public/Less/TYPO3/_main_scaffolding.less b/Build/Resources/Public/Less/TYPO3/_main_scaffolding.less
deleted file mode 100644 (file)
index 2cb66c6..0000000
+++ /dev/null
@@ -1,26 +0,0 @@
-//
-// TYPO3 backend scaffolding
-//
-
-body#typo3-backend-php {
-       margin: 0;
-       padding: 0;
-}
-
-#typo3-main-container {
-       clear: both;
-}
-
-#typo3-top {
-       margin-left: 160px;
-}
-
-iframe {
-       width: 100%;
-}
-
-#typo3-side-menu,
-iframe {
-       height: 100%;
-       overflow: auto;
-}
\ No newline at end of file
diff --git a/Build/Resources/Public/Less/TYPO3/_module_menu.less b/Build/Resources/Public/Less/TYPO3/_module_menu.less
deleted file mode 100644 (file)
index 2964bfe..0000000
+++ /dev/null
@@ -1,172 +0,0 @@
-//
-// Module menu
-//
-
-// Module base
-@module-menu-color: #fff;
-@module-menu-bg: #222;
-@module-menu-border-color: #111;
-
-// Module group
-@module-menu-group-color: @module-menu-color;
-@module-menu-group-bg: @module-menu-bg;
-@module-menu-group-expanded-bg: @module-menu-bg;
-
-// Module links
-@module-menu-link-border-radius: 0 @border-radius-small @border-radius-small 0;
-@module-menu-link-color: #aaa;
-@module-menu-link-hover-color: @module-menu-color;
-@module-menu-link-hover-bg: lighten(@module-menu-bg,3%);
-@module-menu-link-active-color: #fff;
-@module-menu-link-active-bg: lighten(@module-menu-bg,15%);
-@module-menu-item-padding-vertical: 4px;
-@module-menu-item-padding-horizontal: 9px;
-
-// Module menu container
-[id="typo3-module-menu"] {
-       background: @module-menu-bg;
-       color: @module-menu-color;
-}
-
-// Invisible module menu drag handler
-[id="typo3-module-menu-xsplit"] {
-       z-index: 10;
-       width: 1px;
-       background-color: lighten(@module-menu-border-color,10%);
-       .box-shadow(2px 0px 3px rgba(0,0,0,0.5));
-       &:hover {
-               .box-shadow(2px 0px 3px rgba(0,0,0,0.9));
-       }
-       .x-layout-mini-wrapper {
-               left: -7px;
-               width: 15px;
-       }
-}
-
-// Module menu styling
-[id="typo3-menu"] {
-       .list-unstyled();
-
-       /// Module menu group
-       .typo3-module-menu-group-container {
-               clear: both;
-               .list-unstyled();
-               padding-right: 15px;
-       }
-       .typo3-module-menu-group {
-               .transition(background-color 0.4s ease-in-out);
-               position: relative;
-               color: @module-menu-group-color;
-               background-color: @module-menu-group-bg;
-               border-top: 1px solid lighten(@module-menu-border-color,10%);
-               border-bottom: 1px solid @module-menu-border-color;
-               padding: 5px 0;
-       }
-       .typo3-module-menu-group.expanded {
-               background-color: @module-menu-group-expanded-bg;
-       }
-       .typo3-module-menu-group-header {
-               &:extend(.clearfix all);
-               position: relative;
-               cursor: pointer;
-               display: block;
-               padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
-               text-transform: uppercase;
-       }
-
-       // Module menu item
-       .typo3-module-menu-item {
-               margin: 1px 0;
-       }
-
-       // Module menu links
-       .typo3-module-menu-item-link {
-               &:extend(.clearfix all);
-               position: relative;
-               cursor: pointer;
-               display: block;
-               padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
-               color: @module-menu-link-color;
-               border-radius: @module-menu-link-border-radius;
-               text-decoration: none;
-               &:focus,
-               &:hover {
-                       outline: none;
-                       color: @module-menu-link-hover-color;
-                       background-color: @module-menu-link-hover-bg;
-               }
-       }
-       .typo3-module-menu-item.active {
-               .typo3-module-menu-item-link {
-                       color: @module-menu-link-active-color;
-                       background-color: @module-menu-link-active-bg;
-               }
-       }
-
-       // Module menu icons
-       .typo3-module-menu-group-icon,
-       .typo3-module-menu-item-icon {
-               float: left;
-               margin-right: 10px;
-       }
-       .typo3-module-menu-group-icon {
-               background-color: transparent;
-               > span {
-                       line-height: @app-icon-height;
-                       > .t3-icon {
-                               width: @app-icon-width;
-                               height: @app-icon-height;
-                               &:before {
-                                       line-height: @app-icon-height;
-                               }
-                       }
-               }
-               &:after {
-                       display: none;
-               }
-       }
-
-       // Module menu group and item titles
-       .typo3-module-menu-group-title,
-       .typo3-module-menu-item-title {
-               white-space: nowrap;
-               text-overflow: ellipsis;
-               padding-top: 7px;
-               display: block;
-               overflow: hidden;
-               *zoom: 1;
-       }
-       .typo3-module-menu-group-title {
-               padding-right: 20px;
-               .caret {
-                       .transition(all 0.25s ease-in-out);
-                       .rotate(90deg);
-                       position: absolute;
-                       top: 15px;
-                       right: 18px;
-               }
-       }
-
-       // Module Group Expanded
-       .expanded {
-               .typo3-module-menu-group-title {
-                       .caret {
-                               .rotate(0deg);
-                       }
-               }
-       }
-}
-
-// Module menu snapped
-.typo3-module-menu-snapped {
-       .typo3-module-menu-group-container {
-               padding-right: 0;
-       }
-       .typo3-module-menu-item-link {
-               border-radius: 0;
-       }
-       .typo3-module-menu-group-title,
-       .typo3-module-menu-item-title {
-               display: none;
-       }
-}
index 705f812..3651fec 100644 (file)
@@ -2,56 +2,66 @@
  * Style definitions for the whole viewpage module
  */
 #typo3-inner-docbody  {
-    display: block;
-    position: absolute;
-    height: auto;
-    bottom: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 30px;
+       display: block;
+       position: absolute;
+       height: auto;
+       bottom: 0;
+       top: 0;
+       left: 0;
+       right: 0;
+       padding: 30px;
 }
 #resizeable {
-    height: 100%;
+       height: 100%;
 }
 #tx_viewpage_iframe {
-    -webkit-box-shadow: 0px 0px 15px 0px #888888;
-    -moz-box-shadow: 0px 0px  15px 0px #888888;
-    box-shadow:0px 0px 15px 0px #888888;
+       -webkit-box-shadow: 0px 0px 15px 0px #888888;
+       -moz-box-shadow: 0px 0px  15px 0px #888888;
+       box-shadow:0px 0px 15px 0px #888888;
 }
 
 /**
  * adjust jquery-ui resize handles
  */
 .ui-resizable-handle {
-    border: solid #dadada;
+       border: solid #dadada;
+       position: absolute;
+       font-size: 0.1px;
+       display: block;
+       -ms-touch-action: none;
+       touch-action: none;
+       -webkit-transform: translateX(50%);
+       -moz-transform: translateX(50%);
+       -ms-transform: translateX(50%);
+       -o-transform: translateX(50%);
+       transform: translateX(50%);
 }
 .ui-resizable-handle:hover {
-    border-color: #585858;
+       border-color: #585858;
 }
 
 .ui-resizable-s {
-    cursor: row-resize;
-    height: 2px;
-    width: 40%;
-    bottom: -15px;
-    left: 30%;
-    border-width: 2px 0;
+       cursor: row-resize;
+       height: 2px;
+       width: 40%;
+       bottom: -15px;
+       left: 30%;
+       border-width: 2px 0;
 }
 .ui-resizable-e {
-    cursor: col-resize;
-    width: 2px;
-    right: -15px;
-    top: 30%;
-    height: 40%;
-    border-width: 0 2px;
+       cursor: e-resize;
+       width: 25px;
+       right: -5px;
+       top: 0;
+       height: 100%;
+       border-width: 0 2px;
 }
 .ui-resizable-se {
-    cursor: nwse-resize;
-    width: 12px;
-    height: 12px;
-    right: -15px;
-    bottom: -15px;
-    background-position: -80px -224px;
-    border-width: 0;
+       cursor: nwse-resize;
+       width: 12px;
+       height: 12px;
+       right: -15px;
+       bottom: -15px;
+       background-position: -80px -224px;
+       border-width: 0;
 }
diff --git a/Build/Resources/Public/Less/TYPO3/_topbar.less b/Build/Resources/Public/Less/TYPO3/_topbar.less
deleted file mode 100644 (file)
index 988f38d..0000000
+++ /dev/null
@@ -1,415 +0,0 @@
-//
-// Topbar
-//
-
-@topbar-color: #ddd;
-@topbar-height: 45px;
-@topbar-zindex: @zindex-navbar;
-@topbar-bg: @navbar-inverse-bg;
-
-@topbar-navigation-color: @topbar-color;
-@topbar-navigation-bg: #222;
-@topbar-navigation-border-color: #111;
-
-@topbar-dropdown-padding: 16px;
-@topbar-dropdown-color: @topbar-navigation-color;
-@topbar-dropdown-bg: @topbar-navigation-bg;
-
-@topbar-dropdown-link-bg: @topbar-navigation-bg;
-@topbar-dropdown-link-color: #ddd;
-@topbar-dropdown-link-hover-bg: #333;
-@topbar-dropdown-link-hover-color: #fff;
-@topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
-@topbar-dropdown-link-active-color: #fff;
-
-@tobar-navigation-search-bg: @topbar-navigation-bg;
-@tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
-@tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;
-
-
-// HOTFIX SCAFFOLDING
-[id="typo3-topbar"],
-[id="typo3-topbar"] .x-panel-body {
-       min-width: 1000px;
-}
-
-// Topbar
-[id="typo3-topbar"]{
-       height: @topbar-height;
-       position: relative;
-       background-color: @topbar-bg;
-       color: @topbar-color;
-       .x-panel-bwrap,
-       .x-panel-body {
-               overflow: visible;
-       }
-}
-.typo3-in-workspace [id="typo3-topbar"] {
-       background-color: #6d860d;
-       .typo3-topbar-site-name {
-               color: #fff;
-       }
-}
-
-// Container
-.typo3-topbar-container {
-       .user-select(none);
-       height: @topbar-height;
-       position: relative;
-}
-
-// Site
-.typo3-topbar-site {
-       display: table;
-       padding: 0;
-       height: @navbar-height;
-       float: left;
-}
-.typo3-topbar-site-logo,
-.typo3-topbar-site-name {
-       display: table-cell;
-       vertical-align: middle;
-       text-align: center;
-}
-.typo3-topbar-site-logo {
-       background-color: @topbar-bg;
-       width: 51px;
-       .box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
-       &:hover {
-               background-color: @tobar-navigation-search-hover-bg;
-       }
-       > img {
-               max-height: 50px;
-       }
-}
-.typo3-topbar-site-name {
-       cursor: default;
-       padding: 0 (@grid-gutter-width / 2);
-}
-
-
-// Shared
-.typo3-topbar-navigation {
-       color: @topbar-navigation-color;
-       background-color: @topbar-navigation-bg;
-       float: right;
-       // Shortcut
-       .shortcut {
-               min-width: 180px;
-       }
-       .shortcut-form {
-               padding: @topbar-dropdown-padding;
-               margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
-               border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
-               background-color: lighten(@topbar-navigation-border-color,10%);
-               border-bottom: 1px solid @topbar-navigation-border-color;
-       }
-}
-
-
-// Navigation Items
-.typo3-topbar-navigation-items {
-       height: @topbar-height;
-       margin-bottom: 0;
-       padding-left: 0;
-       list-style: none;
-       float: left;
-       .icon-color {
-               fill: @topbar-navigation-color;
-       }
-       a {
-               color: @topbar-navigation-color;
-               text-decoration: none;
-       }
-       > li {
-               float: left;
-               height: @topbar-height;
-               > a {
-                       position: relative;
-                       display: block;
-                       padding: @navbar-padding-vertical 10px;
-                       border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
-                       border-right: 1px solid @topbar-navigation-border-color;
-                       &:hover,
-                       &:focus,
-                       &:active {
-                               color: @topbar-dropdown-link-hover-color;
-                               background-color: @topbar-dropdown-link-hover-bg;
-                               border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
-                       }
-               }
-       }
-       > li.open {
-               > a {
-                       color: @topbar-dropdown-link-active-color;
-                       background-color: @topbar-dropdown-link-active-bg;
-                       border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
-               }
-       }
-}
-
-// Dropdown
-.typo3-topbar-navigation-items {
-       .dropdown {
-               min-width: @topbar-height;
-               text-align: center;
-               > a > .fa {
-                       font-size: 16px;
-                       margin: 0;
-                       display: inline-block;
-                       position: relative;
-                       vertical-align: middle;
-                       width: auto;
-                       height: auto;
-               }
-               > a .icon-size-default .icon-unify,
-               > a .icon-size-small .icon-unify {
-                       line-height: 16px;
-                       font-size: 16px;
-               }
-       }
-       .dropdown-toggle {
-               position: relative;
-               .badge {
-                       display: none;
-                       font-size: 10px;
-                       min-width: 15px;
-                       height: 15px;
-                       position: absolute;
-                       padding: 0;
-                       border-radius: @border-radius-small;
-                       line-height: 15px;
-                       bottom: 5px;
-                       right: 5px;
-               }
-       }
-       .live-search-wrapper {
-               &+ .dropdown-menu {
-                       width: 100%;
-                       .dropdown-list {
-                               position: relative!important; // Needs to be important to override inline styles of autocomplete
-                       }
-               }
-       }
-       .dropdown-menu {
-               left: auto;
-               right: 0;
-               margin: 0;
-               z-index: 2000;
-               padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
-               color: @topbar-dropdown-color;
-               background-color: @topbar-dropdown-bg;
-               border-color: @topbar-navigation-border-color;
-               border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
-               border-left: 0;
-               border-right: 0;
-               border-radius: 0 0 @border-radius-small @border-radius-small;
-               .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
-               a {
-                       color: @topbar-dropdown-link-color;
-                       white-space: nowrap;
-               }
-               > *:last-child {
-                       margin-bottom: 0;
-               }
-       }
-       .dropdown-list {
-               .list-unstyled();
-               > li {
-                       &:extend(.clearfix all);
-                       position: relative;
-                       &.active .dropdown-list-link {
-                               background-color: @topbar-dropdown-link-active-bg;
-                               color: @topbar-dropdown-link-active-color;
-                       }
-               }
-               > li + li {
-                       margin-top: 1px;
-               }
-               > li.divider + li {
-                       margin-top: 0;
-               }
-               .divider {
-                       border-top: 1px solid @topbar-navigation-border-color;
-                       background-color: lighten(@topbar-navigation-border-color, 10%);
-                       margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
-                       padding: 1px 0 0;
-               }
-               .modlink {
-                       &:extend(.clearfix all);
-                       width: 210px;
-                       .submodule-icon {
-                               float: left;
-                               margin-right: 10px;
-                       }
-                       .submodule-label {
-                               white-space: nowrap;
-                               text-overflow: ellipsis;
-                               padding-top: 7px;
-                               display: block;
-                               overflow: hidden;
-                               *zoom: 1;
-                       }
-               }
-               .dropdown-header {
-                       font-size: 1em;
-                       margin-left: -@topbar-dropdown-padding;
-                       margin-right: -@topbar-dropdown-padding;
-                       padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
-               }
-               .dropdown-intro,
-               .dropdown-info {
-                       color: darken(@topbar-color, 20%);
-                       margin-left: -@topbar-dropdown-padding;
-                       margin-right: -@topbar-dropdown-padding;
-                       padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
-               }
-               .dl-horizontal {
-                       dt {
-                               width: 140px;
-                               text-align: left;
-                               font-weight: normal;
-                       }
-                       dd {
-                               margin-left: 150px;
-                               width: 170px;
-                               word-wrap: break-word;
-                       }
-               }
-       }
-       .dropdown-list-link {
-               max-width: 300px;
-               overflow: hidden;
-               text-overflow: ellipsis;
-               display: block;
-               text-decoration: none;
-               cursor: pointer;
-               white-space: nowrap;
-               color: @topbar-dropdown-link-color;
-               margin-left: -@topbar-dropdown-padding;
-               margin-right: -@topbar-dropdown-padding;
-               padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
-               &:hover {
-                       color: @topbar-dropdown-link-hover-color;
-                       background-color: @topbar-dropdown-link-hover-bg;
-               }
-               .badge {
-                       background-color: @brand-danger;
-                       color: @btn-danger-color;
-               }
-               small {
-                       white-space: normal;
-                       width: 270px;
-                       display: block;
-                       padding-left: 21px;
-               }
-       }
-       .dropdown-list-link-edit,
-       .dropdown-list-link-delete,
-       .dropdown-list-link-close {
-               position: absolute;
-               top: 0;
-               bottom: 0;
-               right: -(@topbar-dropdown-padding / 2);
-               padding: 0;
-               text-align: center;
-               line-height: 26px;
-               width: 26px;
-               height: 26px;
-               &:hover {
-                       background-color: @topbar-dropdown-link-hover-bg;
-               }
-       }
-       .dropdown-list-link-edit {
-               right: 18px;
-       }
-       .dropdown-list-link-delete,
-       .dropdown-list-link-close {
-               &:hover {
-                       background-color: @btn-danger-bg;
-               }
-       }
-       .dropdown-link-list-add-close {
-               padding-right: 50px;
-       }
-       .dropdown-link-list-add-editdelete {
-               padding-right: 85px;
-       }
-       .topbar-workspaces-title {
-               margin-left: 3px;
-       }
-}
-
-// Navigation Search
-.typo3-topbar-navigation-search {
-       position: relative;
-       padding: 0;
-       margin: 0;
-       .form-group {
-               margin-top: 0;
-               margin-bottom: 0;
-               &:before {
-                       content: "\f002";
-                       font: normal normal normal 14px/1 FontAwesome;
-                       position: absolute;
-                       top: 50%;
-                       left: 15px;
-                       margin-top: -8px;
-                       z-index: 1;
-               }
-
-               button.close {
-                       opacity: 1;
-                       color: @topbar-navigation-color;
-                       text-shadow: none;
-               }
-       }
-       .form-control {
-               background-color: @tobar-navigation-search-bg;
-               color: @topbar-navigation-color;
-               height: @topbar-height;
-               width: 300px;
-               padding: 14px 30px 13px 35px;
-               border: none;
-               border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
-               border-radius: 0;
-               &:hover {
-                       border-left-color: lighten(@topbar-navigation-border-color, 15%);
-                       background-color: @tobar-navigation-search-hover-bg;
-               }
-               &:focus {
-                       outline: none;
-                       border-left-color: lighten(@topbar-navigation-border-color, 25%);
-                       background-color: @tobar-navigation-search-focus-bg;
-                       .box-shadow(none);
-               }
-               + .t3-icon {
-                       text-align: center;
-                       position: absolute;
-                       top: 50%;
-                       right: 15px;
-                       margin-right: 0;
-                       margin-top: -8px;
-               }
-       }
-       .dropdown-menu {
-               left: auto!important; // Needs to be important to override inline styes of typeahead
-               width: 350px;
-       }
-       .dropdown-list-link {
-               max-width: none;
-               .typeahead-highlight {
-                       font-weight: normal;
-               }
-       }
-}
-
-// Bookmark dropdown menu
-#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem {
-  .dropdown-list {
-       max-height: (10 * (18px + (@topbar-dropdown-padding / 2) + 1px)); // 18px=12px font with line-height 1.5; 1px margin-top for padding; 10 rows
-       overflow: hidden;
-       overflow-y: auto;
-       padding-right: 10px;
-  }
-}
index 1b7681d..0a40d76 100644 (file)
 @import "@{path-bower}/bootstrap/less/carousel.less";
 
 //
+// Scaffold
+//
+@import "Scaffold/scaffold.less";
+@import "Scaffold/_topbar.less";
+@import "Scaffold/_toolbar.less";
+@import "Scaffold/_modulemenu.less";
+
+//
 // Custom Components
 //
 @import "Component/autocomplete.less";
+@import "Component/dropdown.less";
 @import "Component/avatar.less";
 @import "Component/callout.less";
 @import "Component/icon.less";
index 709322c..5223524 100644 (file)
 
 // Modal
 @zindex-modal: 5000;
+
+@dropdown-bg:                    #424242;
+@dropdown-border:                rgba(0,0,0,.15);
+@dropdown-fallback-border:       #ccc;
+@dropdown-divider-bg:            #525252;
+@dropdown-link-color:            #fff;
+@dropdown-link-hover-color:      #fff;
+@dropdown-link-hover-bg:         #525252;
+@dropdown-link-active-color:     #fff;
+@dropdown-link-active-bg:        #525252;
+@dropdown-link-disabled-color:   @gray-light;
+@dropdown-header-color:          @gray-light;
+@dropdown-caret-color:           #000;
index 9327210..fe0151d 100644 (file)
@@ -69,8 +69,6 @@
 @import "TYPO3/_main_backend_layout_wizard";
 @import "TYPO3/_main_form.less";
 @import "TYPO3/_main_linkbrowser.less";
-@import "TYPO3/_main_scaffolding.less";
-@import "TYPO3/_module_menu.less";
 @import "TYPO3/_module_database.less";
 @import "TYPO3/_module_recycler.less";
 @import "TYPO3/_module_scheduler.less";
@@ -78,7 +76,6 @@
 @import "TYPO3/_module_web_page.less";
 @import "TYPO3/_module_viewpage.less";
 @import "TYPO3/_module_workspaces.less";
-@import "TYPO3/_topbar.less";
 @import "TYPO3/_debugconsole.less";
 
 @import "TYPO3/_module_web_list_sysnote.less";
index 871e5e5..a6aa3b5 100644 (file)
@@ -20,7 +20,7 @@
   left: 0;
 
   width: 100%;
-  height: 4px;
+  height: 2px;
 }
 
 /* Fancy blur effect */
index fa438b4..226e61e 100644 (file)
@@ -1,7 +1,7 @@
 <f:layout name="Default" />
 
 <f:section name="Content">
-       <div class="container container-small">
+       <div class="container-small">
                <f:render partial="Logo" arguments="{_all}" />
                <f:render partial="About" arguments="{_all}" />
                <f:render partial="Donation" arguments="{_all}" />
index 5bbdd19..703b0e5 100644 (file)
@@ -2,7 +2,7 @@
 <f:layout name="Default" />
 <f:section name="Content">
 
-       <div class="container container-small">
+       <div class="container-small">
                <f:render partial="Logo" arguments="{_all}" />
                <p>
                        <f:translate key="LLL:EXT:lang/locallang_alt_intro.xlf:introtext2" />
index 38af537..4742950 100644 (file)
@@ -122,9 +122,11 @@ class ClearCacheToolbarItem implements ToolbarItemInterface
     public function getItem()
     {
         $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.clearCache_clearCache'));
-        return '<span title="' . $title . '">'
-            . $this->iconFactory->getIcon('apps-toolbar-menu-cache', Icon::SIZE_SMALL)->render('inline')
-            . '</span>';
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-cache', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            ';
     }
 
     /**
@@ -135,17 +137,30 @@ class ClearCacheToolbarItem implements ToolbarItemInterface
     public function getDropDown()
     {
         $result = [];
-        $result[] = '<ul class="dropdown-list">';
+        $result[] = '<h3 class="dropdown-headline">';
+        $result[] = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.clearCache_clearCache'));
+        $result[] = '</h3>';
+        $result[] = '<hr>';
+        $result[] = '<div class="dropdown-table">';
         foreach ($this->cacheActions as $cacheAction) {
             $title = $cacheAction['description'] ?: $cacheAction['title'];
-            $result[] = '<li>';
-            $result[] = '<a class="dropdown-list-link" href="' . htmlspecialchars($cacheAction['href']) . '">';
-            $result[] = $cacheAction['icon'] . ' ' . htmlspecialchars($cacheAction['title']);
-            $result[] = '<br/><small>' . htmlspecialchars($title) . '</small>';
+
+            $result[] = '<div class="dropdown-table-row">';
+
+            $result[] = '<div class="dropdown-table-column dropdown-table-column-top dropdown-table-icon">';
+            $result[] = $cacheAction['icon'];
+            $result[] = '</div>';
+
+            $result[] = '<div class="dropdown-table-column dropdown-table-column-top dropdown-table-text">';
+            $result[] = '<a href="' . htmlspecialchars($cacheAction['href']) . '">';
+            $result[] = htmlspecialchars($cacheAction['title']);
+            $result[] = '<br><small class="text-muted">' . htmlspecialchars($title) . '</small>';
             $result[] = '</a>';
-            $result[] = '</li>';
+            $result[] = '</div>';
+
+            $result[] = '</div>';
         }
-        $result[] = '</ul>';
+        $result[] = '</div>';
         return implode(LF, $result);
     }
 
index bb624a9..cbbfc86 100644 (file)
@@ -69,7 +69,12 @@ class HelpToolbarItem implements ToolbarItemInterface
      */
     public function getItem()
     {
-        return $this->iconFactory->getIcon('apps-toolbar-menu-help', Icon::SIZE_SMALL)->render('inline');
+        $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.help'));
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-help', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            ';
     }
 
     /**
@@ -80,25 +85,28 @@ class HelpToolbarItem implements ToolbarItemInterface
     public function getDropDown()
     {
         $dropdown = [];
-        $dropdown[] = '<ul class="dropdown-list">';
+        $dropdown[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.help')) . '</h3>';
+        $dropdown[] = '<hr>';
+        $dropdown[] = '<div class="dropdown-table">';
         foreach ($this->helpModuleMenu->getChildren() as $module) {
             /** @var BackendModule $module */
-            $moduleIcon = $module->getIcon();
-            $dropdown[] ='<li'
+            $dropdown[] = '<div'
+                . ' class="dropdown-table-row"'
                 . ' id="' . htmlspecialchars($module->getName()) . '"'
-                . ' class="typo3-module-menu-item submodule mod-' . htmlspecialchars($module->getName()) . '" '
                 . ' data-modulename="' . htmlspecialchars($module->getName()) . '"'
                 . ' data-navigationcomponentid="' . htmlspecialchars($module->getNavigationComponentId()) . '"'
                 . ' data-navigationframescript="' . htmlspecialchars($module->getNavigationFrameScript()) . '"'
                 . ' data-navigationframescriptparameters="' . htmlspecialchars($module->getNavigationFrameScriptParameters()) . '"'
                 . '>';
-            $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="dropdown-list-link modlink">';
-            $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . $moduleIcon . '</span></span></span>';
-            $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
+            $dropdown[] = '<div class="dropdown-table-column dropdown-table-icon">' . $module->getIcon() . '</div>';
+            $dropdown[] = '<div class="dropdown-table-column dropdown-table-title">';
+            $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="modlink">';
+            $dropdown[] = htmlspecialchars($module->getTitle());
             $dropdown[] = '</a>';
-            $dropdown[] = '</li>';
+            $dropdown[] = '</div>';
+            $dropdown[] = '</div>';
         }
-        $dropdown[] = '</ul>';
+        $dropdown[] = '</div>';
         return implode(LF, $dropdown);
     }
 
@@ -109,7 +117,7 @@ class HelpToolbarItem implements ToolbarItemInterface
      */
     public function getAdditionalAttributes()
     {
-        return ['class' => 'typo3-module-menu-group'];
+        return [];
     }
 
     /**
@@ -131,4 +139,14 @@ class HelpToolbarItem implements ToolbarItemInterface
     {
         return 70;
     }
+
+    /**
+     * Returns LanguageService
+     *
+     * @return \TYPO3\CMS\Lang\LanguageService
+     */
+    protected function getLanguageService()
+    {
+        return $GLOBALS['LANG'];
+    }
 }
index 644fca9..de040e0 100644 (file)
@@ -16,6 +16,8 @@ namespace TYPO3\CMS\Backend\Backend\ToolbarItems;
 
 use TYPO3\CMS\Backend\Domain\Repository\Module\BackendModuleRepository;
 use TYPO3\CMS\Backend\Toolbar\ToolbarItemInterface;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Lang\LanguageService;
@@ -26,11 +28,17 @@ use TYPO3\CMS\Lang\LanguageService;
 class LiveSearchToolbarItem implements ToolbarItemInterface
 {
     /**
+     * @var IconFactory
+     */
+    protected $iconFactory;
+
+    /**
      * Constructor
      */
     public function __construct()
     {
         $this->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/LiveSearch');
+        $this->iconFactory = GeneralUtility::makeInstance(IconFactory::class);
     }
 
     /**
@@ -58,11 +66,17 @@ class LiveSearchToolbarItem implements ToolbarItemInterface
     public function getItem()
     {
         return '
-                       <form class="typo3-topbar-navigation-search t3js-topbar-navigation-search live-search-wrapper" role="search">
+                       <form class="t3js-topbar-navigation-search toolbar-item-search-form live-search-wrapper" role="search">
                                <div class="form-group">
-                                       <input type="text" class="form-control t3js-topbar-navigation-search-field" placeholder="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.search')) . '" id="live-search-box" autocomplete="off">
+                    <div class="form-control-holder">
+                        <div class="form-control-icon">
+                            ' . $this->iconFactory->getIcon('apps-toolbar-menu-search', Icon::SIZE_SMALL)->render('inline') . '
+                        </div>
+                                           <input type="text" class="form-control toolbar-item-search-field t3js-topbar-navigation-search-field" placeholder="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.search')) . '" id="live-search-box" autocomplete="off">
+                    </div>
                                </div>
                        </form>
+            <a href="#" class="dropdown-toggle t3js-toolbar-search-dropdowntoggle" data-toggle="dropdown" aria-expanded="false"></a>
                        <div class="dropdown-menu" role="menu"></div>
                ';
     }
@@ -74,7 +88,7 @@ class LiveSearchToolbarItem implements ToolbarItemInterface
      */
     public function getAdditionalAttributes()
     {
-        return ['class' => 'dropdown'];
+        return ['class' => 'toolbar-item-search t3js-toolbar-item-search'];
     }
 
     /**
index 9eabf97..1f297f2 100644 (file)
@@ -130,7 +130,11 @@ class ShortcutToolbarItem implements ToolbarItemInterface
     public function getItem()
     {
         $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks'));
-        return '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-shortcut', Icon::SIZE_SMALL)->render('inline') . '</span>';
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-shortcut', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            ';
     }
 
     /**
@@ -141,67 +145,57 @@ class ShortcutToolbarItem implements ToolbarItemInterface
     public function getDropDown()
     {
         $languageService = $this->getLanguageService();
-        $shortcutGroup = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksGroup'));
         $shortcutEdit = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit'));
         $shortcutDelete = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksDelete'));
-        $editIcon = '<a href="#" class="dropdown-list-link-edit shortcut-edit" ' . $shortcutEdit . '>'
+        $editIcon = '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-edit t3js-shortcut-edit" title="' . $shortcutEdit . '">'
             . $this->iconFactory->getIcon('actions-open', Icon::SIZE_SMALL)->render('inline') . '</a>';
-        $deleteIcon = '<a href="#" class="dropdown-list-link-delete shortcut-delete" title="' . $shortcutDelete . '">'
+        $deleteIcon = '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-delete t3js-shortcut-delete" title="' . $shortcutDelete . '">'
             . $this->iconFactory->getIcon('actions-delete', Icon::SIZE_SMALL)->render('inline') . '</a>';
 
-        $shortcutMenu[] = '<ul class="dropdown-list">';
-
-        // Render shortcuts with no group (group id = 0) first
-        $noGroupShortcuts = $this->getShortcutsByGroup(0);
-        foreach ($noGroupShortcuts as $shortcut) {
-            $shortcutMenu[] = '
-                               <li class="shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '">
-                                       <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">' .
-                        $shortcut['icon'] . ' ' .
-                        htmlspecialchars($shortcut['label']) .
-                    '</a>
-                                       ' . $editIcon . $deleteIcon . '
-                               </li>';
-        }
-        // Now render groups and the contained shortcuts
+        $shortcutMenu = [];
+        $shortcutMenu[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks')) . '</h3>';
+        $shortcutMenu[] = '<hr>';
+
+        // Render groups and the contained shortcuts
         $groups = $this->getGroupsFromShortcuts();
-        krsort($groups, SORT_NUMERIC);
+        $groupCount = 0;
+        arsort($groups, SORT_NUMERIC);
         foreach ($groups as $groupId => $groupLabel) {
-            if ($groupId != 0) {
-                $shortcutGroup = '';
-                if (count($shortcutMenu) > 1) {
-                    $shortcutGroup .= '<li class="divider"></li>';
+            $shortcuts = $this->getShortcutsByGroup($groupId);
+            if (count($shortcuts) > 0) {
+                if ($groupCount !== 0) {
+                    $shortcutMenu[] = '<hr>';
+                }
+                $groupCount++;
+                if ($groupLabel) {
+                    $shortcutMenu[] = '<h3 class="dropdown-headline" id="shortcut-group-' . (int)$groupId . '">' . $groupLabel . '</h3>';
                 }
-                $shortcutGroup .= '
-                                       <li class="dropdown-header" id="shortcut-group-' . (int)$groupId . '">
-                                               ' . $groupLabel . '
-                                       </li>';
-                $shortcuts = $this->getShortcutsByGroup($groupId);
-                $i = 0;
+                $shortcutMenu[] = '<div class="dropdown-table" data-shortcutgroup="' . (int)$groupId . '">';
                 foreach ($shortcuts as $shortcut) {
-                    $i++;
-                    $shortcutGroup .= '
-                                       <li class="shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '" data-shortcutgroup="' . (int)$groupId . '">
-                                               <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">' .
-                            $shortcut['icon'] . ' ' .
-                            htmlspecialchars($shortcut['label']) .
-                        '</a>
-                                               ' . $editIcon . $deleteIcon . '
-                                       </li>';
+                    $shortcutItem  = '<div class="dropdown-table-row t3js-topbar-shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '" data-shortcutgroup="' . (int)$groupId . '">';
+                    $shortcutItem .= '<div class="dropdown-table-column dropdown-table-icon">';
+                    $shortcutItem .= $shortcut['icon'];
+                    $shortcutItem .= '</div>';
+                    $shortcutItem .= '<div class="dropdown-table-column dropdown-table-title">';
+                    $shortcutItem .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">';
+                    $shortcutItem .= htmlspecialchars($shortcut['label']);
+                    $shortcutItem .= '</a>';
+                    $shortcutItem .= '</div>';
+                    $shortcutItem .= '<div class="dropdown-table-column dropdown-table-actions">' . $editIcon . $deleteIcon . '</div>';
+                    $shortcutItem .= '</div>';
+                    $shortcutMenu[] = $shortcutItem;
                 }
-                $shortcutMenu[] = $shortcutGroup;
+                $shortcutMenu[] = '</div>';
             }
         }
-        $shortcutMenu[] = '</ul>';
 
+        $compiledShortcutMenu = implode(LF, $shortcutMenu);
         if (count($shortcutMenu) === 2) {
             // No shortcuts added yet, show a small help message how to add shortcuts
             $title = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks'));
             $icon = '<span title="' . $title . '">' . $this->iconFactory->getIcon('actions-system-shortcut-new', Icon::SIZE_SMALL)->render('inline') . '</span>';
             $label = str_replace('%icon%', $icon, htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_misc.xlf:bookmarkDescription')));
-            $compiledShortcutMenu = '<p>' . $label . '</p>';
-        } else {
-            $compiledShortcutMenu = implode(LF, $shortcutMenu);
+            $compiledShortcutMenu .= '<p>' . $label . '</p>';
         }
 
         return $compiledShortcutMenu;
@@ -477,6 +471,7 @@ class ShortcutToolbarItem implements ToolbarItemInterface
      */
     public function editFormAction(ServerRequestInterface $request, ResponseInterface $response)
     {
+        $languageService = $this->getLanguageService();
         $parsedBody = $request->getParsedBody();
         $queryParams = $request->getQueryParams();
 
@@ -495,11 +490,14 @@ class ShortcutToolbarItem implements ToolbarItemInterface
 
         // build the form
         $content = '
-                       <form class="shortcut-form" role="form">
+                       <form class="shortcut-form" role="form" data-shortcutid="' . (int)$selectedShortcutId . '">
+                <h3 class="dropdown-headline">
+                    ' . htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit')) . '
+                </h3>
+                <hr>
                                <div class="form-group">
                                        <input type="text" class="form-control" name="shortcut-title" value="' . htmlspecialchars($selectedShortcut['label']) . '">
                                </div>';
-
         $content .= '
                                <div class="form-group">
                                        <select class="form-control" name="shortcut-group">';
@@ -509,6 +507,7 @@ class ShortcutToolbarItem implements ToolbarItemInterface
         $content .= '
                                        </select>
                                </div>
+                <hr>
                                <input type="button" class="btn btn-default shortcut-form-cancel" value="Cancel">
                                <input type="button" class="btn btn-success shortcut-form-save" value="Save">
                        </form>';
index 3c9de23..55c66f8 100644 (file)
@@ -376,7 +376,11 @@ class SystemInformationToolbarItem implements ToolbarItemInterface
     {
         $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.sysinfo'));
         $icon = $this->iconFactory->getIcon('actions-system-list-open', Icon::SIZE_SMALL)->render('inline');
-        return '<span title="' . $title . '">' . $icon . '<span id="t3js-systeminformation-counter" class="badge"></span></span>';
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            <span class="toolbar-item-badge t3js-systeminformation-counter badge"></span>
+            ';
     }
 
     /**
index c6f7fa8..7a38a23 100644 (file)
@@ -77,10 +77,10 @@ class UserToolbarItem implements ToolbarItemInterface
         }
 
         $html = [];
-        $html[] = $icon;
-        $html[] = '<span title="' . htmlspecialchars($title) . '">';
+        $html[] = '<span class="toolbar-item-avatar">' . $icon . '</span>';
+        $html[] = '<span class="toolbar-item-name" title="' . htmlspecialchars($title) . '">';
         $html[] = htmlspecialchars($label);
-        $html[] = '<span class="caret"></span></span>';
+        $html[] = '</span>';
 
         return implode(LF, $html);
     }
@@ -96,7 +96,7 @@ class UserToolbarItem implements ToolbarItemInterface
         $languageService = $this->getLanguageService();
 
         $dropdown = [];
-        $dropdown[] = '<ul class="dropdown-list">';
+        $dropdown[] = '<div class="dropdown-table">';
 
         /** @var BackendModuleRepository $backendModuleRepository */
         $backendModuleRepository = GeneralUtility::makeInstance(BackendModuleRepository::class);
@@ -105,33 +105,32 @@ class UserToolbarItem implements ToolbarItemInterface
         if ($userModuleMenu != false && $userModuleMenu->getChildren()->count() > 0) {
             foreach ($userModuleMenu->getChildren() as $module) {
                 /** @var BackendModule $module */
-                $dropdown[] ='<li'
+                $dropdown[] = '<div'
+                    . ' class="dropdown-table-row"'
                     . ' id="' . htmlspecialchars($module->getName()) . '"'
-                    . ' class="typo3-module-menu-item submodule mod-' . htmlspecialchars($module->getName()) . '" '
                     . ' data-modulename="' . htmlspecialchars($module->getName()) . '"'
                     . ' data-navigationcomponentid="' . htmlspecialchars($module->getNavigationComponentId()) . '"'
                     . ' data-navigationframescript="' . htmlspecialchars($module->getNavigationFrameScript()) . '"'
                     . ' data-navigationframescriptparameters="' . htmlspecialchars($module->getNavigationFrameScriptParameters()) . '"'
                     . '>';
-                $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="dropdown-list-link modlink">';
-                $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . $module->getIcon() . '</span></span></span>';
-                $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
+                $dropdown[] = '<div class="dropdown-table-column dropdown-table-icon">' . $module->getIcon() . '</div>';
+                $dropdown[] = '<div class="dropdown-table-column dropdown-table-title">';
+                $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="modlink">';
+                $dropdown[] = htmlspecialchars($module->getTitle());
                 $dropdown[] = '</a>';
-                $dropdown[] = '</li>';
+                $dropdown[] = '</div>';
+                $dropdown[] = '</div>';
             }
-            $dropdown[] = '<li class="divider"></li>';
         }
+        $dropdown[] = '</div>';
 
+        $dropdown[] = '<hr>';
         // Logout button
         $buttonLabel = 'LLL:EXT:lang/locallang_core.xlf:' . ($backendUser->user['ses_backuserid'] ? 'buttons.exit' : 'buttons.logout');
-        $dropdown[] = '<li class="reset-dropdown">';
         $dropdown[] = '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('logout')) . '" class="btn btn-danger pull-right" target="_top">';
         $dropdown[] = $this->iconFactory->getIcon('actions-logout', Icon::SIZE_SMALL)->render('inline') . ' ';
         $dropdown[] = htmlspecialchars($languageService->sL($buttonLabel));
         $dropdown[] = '</a>';
-        $dropdown[] = '</li>';
-
-        $dropdown[] = '</ul>';
 
         return implode(LF, $dropdown);
     }
@@ -144,8 +143,9 @@ class UserToolbarItem implements ToolbarItemInterface
     public function getAdditionalAttributes()
     {
         $result = [];
+        $result['class'] = 'toolbar-item-user';
         if ($this->getBackendUser()->user['ses_backuserid']) {
-            $result['class'] = 'su-user';
+            $result['class'] .= ' su-user';
         }
         return $result;
     }
index a0861a6..b1a3bfa 100644 (file)
@@ -20,6 +20,7 @@ use TYPO3\CMS\Backend\Domain\Repository\Module\BackendModuleRepository;
 use TYPO3\CMS\Backend\Module\ModuleLoader;
 use TYPO3\CMS\Backend\Toolbar\ToolbarItemInterface;
 use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -94,12 +95,18 @@ class BackendController
     protected $pageRenderer;
 
     /**
+     * @var IconFactory
+     */
+    protected $iconFactory;
+
+    /**
      * Constructor
      */
     public function __construct()
     {
         $this->getLanguageService()->includeLLFile('EXT:lang/locallang_misc.xlf');
         $this->backendModuleRepository = GeneralUtility::makeInstance(BackendModuleRepository::class);
+        $this->iconFactory = GeneralUtility::makeInstance(IconFactory::class);
 
         // Set debug flag for BE development only
         $this->debug = (int)$GLOBALS['TYPO3_CONF_VARS']['BE']['debug'] === 1;
@@ -119,10 +126,7 @@ class BackendController
             'modulemenu' => 'EXT:backend/Resources/Public/JavaScript/modulemenu.js',
             'evalfield' => 'EXT:backend/Resources/Public/JavaScript/jsfunc.evalfield.js',
             'backend' => 'EXT:backend/Resources/Public/JavaScript/backend.js',
-            'viewport' => 'EXT:backend/Resources/Public/JavaScript/extjs/viewport.js',
             'iframepanel' => 'EXT:backend/Resources/Public/JavaScript/iframepanel.js',
-            'backendcontentiframe' => 'EXT:backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js',
-            'viewportConfiguration' => 'EXT:backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js',
         ];
         $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/LoginRefresh', 'function(LoginRefresh) {
                        LoginRefresh.setIntervalTime(' . MathUtility::forceIntegerInRange((int)$GLOBALS['TYPO3_CONF_VARS']['BE']['sessionTimeout'] - 60, 60) . ');
@@ -131,6 +135,9 @@ class BackendController
                        LoginRefresh.initialize();
                }');
 
+        // load Toolbar class
+        $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/Toolbar');
+
         // load Utility class
         $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/Utility');
 
@@ -327,9 +334,8 @@ class BackendController
             $extOnReadyCode .= 'Ext.state.Manager.getProvider().initState(' . json_encode($states) . ');';
         }
 
-        $extOnReadyCode .= '
-                       TYPO3.Backend = new TYPO3.Viewport(TYPO3.Viewport.configuration)';
         $this->pageRenderer->addExtOnReadyCode($extOnReadyCode);
+
         // Set document title:
         $title = $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename'] ? $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename'] . ' [TYPO3 CMS ' . TYPO3_version . ']' : 'TYPO3 CMS ' . TYPO3_version;
         // Renders the module page
@@ -406,9 +412,8 @@ class BackendController
 
                 // Merge class: Add dropdown class if hasDropDown, add classes from additonal attributes
                 $classes = [];
-                if ($hasDropDown) {
-                    $classes[] = 'dropdown';
-                }
+                $classes[] = 'toolbar-item';
+                $classes[] = 't3js-toolbar-item';
                 if (isset($additionalAttributes['class'])) {
                     $classes[] = $additionalAttributes['class'];
                     unset($additionalAttributes['class']);
@@ -430,7 +435,7 @@ class BackendController
                 $toolbar[] = '<li ' . implode(' ', $liAttributes) . '>';
 
                 if ($hasDropDown) {
-                    $toolbar[] = '<a href="#" class="dropdown-toggle" data-toggle="dropdown">';
+                    $toolbar[] = '<a href="#" class="toolbar-item-link dropdown-toggle" data-toggle="dropdown">';
                     $toolbar[] = $toolbarItem->getItem();
                     $toolbar[] = '</a>';
                     $toolbar[] = '<div class="dropdown-menu" role="menu">';
index c82fc33..4300e71 100644 (file)
@@ -1,14 +1,55 @@
-<div class="typo3-topbar-container" role="navigation" id="typo3-top-container">
-       <div class="typo3-topbar-site">
-               <a class="typo3-topbar-site-logo" href="{logoLink}" target="_blank">
-                       <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" title="TYPO3 Content Management System" alt="" />
-               </a>
-               <span class="typo3-topbar-site-name">{siteName} [{applicationVersion}]</span>
-       </div>
-       <div class="typo3-topbar-navigation" id="typo3-topbar-navigation">
-               <ul class="typo3-topbar-navigation-items" data-typo3-role="typo3-module-menu">
-                       <f:format.raw>{toolbar}</f:format.raw>
-               </ul>
+{namespace core = TYPO3\CMS\Core\ViewHelpers}
+<div class="scaffold t3js-scaffold scaffold-modulemenu-expanded">
+       <div class="scaffold-topbar t3js-scaffold-topbar">
+
+               <div class="topbar">
+                       <div class="topbar-header">
+                               <button class="topbar-button topbar-button-modulemenu t3js-topbar-button-modulemenu">
+                                       <core:icon identifier="actions-move-move" alternativeMarkupIdentifier="inline" />
+                               </button>
+                               <button class="topbar-button topbar-button-navigationcomponent t3js-topbar-button-navigationcomponent">
+                                       <core:icon identifier="apps-pagetree-category-collapse-all" alternativeMarkupIdentifier="inline" />
+                               </button>
+                               <a href="{logoLink}" class="topbar-header-site" target="_blank">
+                                       <span class="topbar-header-site-logo">
+                                               <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" title="TYPO3 Content Management System" alt="" />
+                                       </span>
+                                       <span class="topbar-header-site-title">
+                                               <span class="topbar-header-site-name">{siteName}</span>
+                                               <span class="topbar-header-site-version">{applicationVersion}</span>
+                                       </span>
+                               </a>
+                               <button class="topbar-button topbar-button-toolbar t3js-topbar-button-toolbar">
+                                       <core:icon identifier="actions-system-extension-configure" alternativeMarkupIdentifier="inline" />
+                               </button>
+                               <button class="topbar-button topbar-button-search t3js-topbar-button-search">
+                                       <core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />
+                               </button>
+                       </div>
+               </div>
+
+       </div>
+       <div class="scaffold-modulemenu t3js-scaffold-modulemenu">
+               <div class="modulemenu t3js-modulemenu">
+                       <f:format.raw>{moduleMenu}</f:format.raw>
+               </div>
+       </div>
+       <div class="scaffold-toolbar t3js-scaffold-toolbar">
+               <div class="toolbar t3js-topbar-toolbar">
+                       <ul class="toolbar-list" data-typo3-role="typo3-module-menu">
+                               <f:format.raw>{toolbar}</f:format.raw>
+                       </ul>
+               </div>
+       </div>
+       <div class="scaffold-content t3js-scaffold-content">
+               <div class="scaffold-content-navigation t3js-scaffold-content-navigation">
+                       <div class="scaffold-content-navigation-component" data-component="typo3-navigationIframe">
+                               <iframe src="about:blank" id="typo3-navigationContainerIframe" class="scaffold-content-navigation-iframe t3js-scaffold-content-navigation-iframe"></iframe>
+                       </div>
+               </div>
+               <div class="scaffold-content-module t3js-scaffold-content-module">
+                       <iframe name="contentIframe" id="typo3-contentIframe" class="scaffold-content-module-iframe t3js-scaffold-content-module-iframe"></iframe>
+               </div>
+               <div class="scaffold-content-overlay t3js-scaffold-content-overlay"></div>
        </div>
 </div>
-<f:format.raw>{moduleMenu}</f:format.raw>
index 4ac7d05..2fc216a 100644 (file)
@@ -1,35 +1,30 @@
-<ul class="nav nav-modules" data-typo3-role="typo3-module-menu" id="typo3-menu">
+{namespace core = TYPO3\CMS\Core\ViewHelpers}
+<ul class="nav nav-modules" data-role="modulemenu" id="menu">
        <f:for each="{modules}" as="mainModule">
-               <li class="typo3-module-menu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
-                       <div class="typo3-module-menu-group-header">
-                               <span class="typo3-app-icon typo3-module-menu-group-icon">
-                                       <span>
+               <li class="modulemenu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
+                       <div class="modulemenu-group-header">
+                               <span class="modulemenu-icon modulemenu-group-icon">
                                                <f:if condition="{mainModule.icon}">
                                                        <f:then>
                                                                <f:format.raw>{mainModule.icon}</f:format.raw>
                                                        </f:then>
                                                        <f:else>
-                                                               <span><i class="fa fa-bars"></i></span>
+                                                               <core:icon identifier="actions-move-move" size="default" alternativeMarkupIdentifier="inline" />
                                                        </f:else>
                                                </f:if>
-                                       </span>
                                </span>
-                               <span class="typo3-module-menu-group-title">
+                               <span class="modulemenu-group-title">
                                        {mainModule.title} <span class="caret"></span>
                                </span>
                        </div>
-                       <ul class="typo3-module-menu-group-container">
+                       <ul class="modulemenu-group-container">
                                <f:for each="{mainModule.children}" as="subModule">
-                                       <li id="{subModule.name}" class="typo3-module-menu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
-                                               <a title="{subModule.description}" href="{subModule.link}" class="typo3-module-menu-item-link">
-                                                       <span class="typo3-app-icon typo3-module-menu-item-icon">
-                                                               <span>
-                                                                       <span>
-                                                                               <f:format.raw>{subModule.icon}</f:format.raw>
-                                                                       </span>
-                                                               </span>
+                                       <li id="{subModule.name}" class="modulemenu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
+                                               <a title="{subModule.description}" href="{subModule.link}" class="modulemenu-item-link">
+                                                       <span class="modulemenu-icon modulemenu-item-icon">
+                                <f:format.raw>{subModule.icon}</f:format.raw>
                                                        </span>
-                                                       <span class="typo3-module-menu-item-title">
+                                                       <span class="modulemenu-item-title">
                                                                {subModule.title}
                                                        </span>
                                                </a>
index 1273283..fd481b4 100644 (file)
@@ -1,43 +1,45 @@
-<ul class="dropdown-list" data-count="{count}" data-severityclass="{severityBadgeClass}">
-       <li class="dropdown-header"><f:translate key="systemmessage.header" /></li>
-       <li id="systeminformation_installtool" class="dropdown-intro typo3-module-menu-item submodule mod-system_extinstall" data-modulename="system_extinstall">
-               <f:format.raw><f:translate key="systemmessage.intro" arguments="{0: '{installToolUrl}'}" /></f:format.raw>
-       </li>
-       <li>
-               <dl class="dl-horizontal">
-                       <f:for each="{systemInformation}" as="info">
-                               <dt title="{info.title}"><f:format.raw>{info.icon}</f:format.raw> {info.title}</dt>
-                               <dd><f:if condition="{info.status}">
-                                       <f:then>
-                                               <span class="text-{info.status}">{info.value}</span>
-                                       </f:then>
-                                       <f:else>
-                                               {info.value}
-                                       </f:else>
-                               </f:if></dd>
-                       </f:for>
-               </dl>
-       </li>
-       <li class="divider"></li>
-       <f:if condition="{messages -> f:count()} > 0">
-               <f:then>
-                       <f:for each="{messages}" as="message">
-                               <f:if condition="{message.module}">
-                                       <f:then>
-                                               <li id="systeminformation_{message.module}" class="t3js-systeminformation-module dropdown-intro typo3-module-menu-item submodule mod-{message.module}" data-modulename="{message.module}">
-                                                       <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
-                                               </li>
-                                       </f:then>
-                                       <f:else>
-                                               <li>
-                                                       <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
-                                               </li>
-                                       </f:else>
-                               </f:if>
-                       </f:for>
-               </f:then>
-               <f:else>
-                       <li><span class="text-success"><f:format.nl2br><f:translate key="systemmessage.allgood" /></f:format.nl2br></span></li>
-               </f:else>
-       </f:if>
-</ul>
+<span class="systeminformationtoolbaritem-container t3js-systeminformation-container" data-count="{count}" data-severityclass="{severityBadgeClass}"></span>
+
+<h3 class="dropdown-headline">
+       <f:translate key="systemmessage.header" />
+</h3>
+<p class="dropdown-text typo3-module-menu-item submodule mod-system_extinstall" data-modulename="system_extinstall">
+       <f:format.raw><f:translate key="systemmessage.intro" arguments="{0: '{installToolUrl}'}" /></f:format.raw>
+</p>
+
+<f:if condition="{systemInformation}">
+       <hr>
+       <div class="dropdown-table">
+               <f:for each="{systemInformation}" as="info">
+                       <div class="dropdown-table-row">
+                               <div class="dropdown-table-column dropdown-table-icon"><f:format.raw>{info.icon}</f:format.raw></div>
+                               <div class="dropdown-table-column dropdown-table-title">{info.title}</div>
+                               <div class="dropdown-table-column dropdown-table-value {f:if(condition: info.status, then: 'text-{info.status}')}">{info.value}</div>
+                       </div>
+               </f:for>
+       </div>
+</f:if>
+
+<hr>
+
+<f:if condition="{messages -> f:count()} > 0">
+       <f:then>
+               <f:for each="{messages}" as="message">
+                       <f:if condition="{message.module}">
+                               <f:then>
+                                       <p id="systeminformation_{message.module}" class="dropdown-text t3js-systeminformation-module typo3-module-menu-item submodule mod-{message.module}" data-modulename="{message.module}">
+                                               <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
+                                       </p>
+                               </f:then>
+                               <f:else>
+                                       <p class="dropdown-text text-{message.status}">
+                                               <f:format.raw>{message.text}</f:format.raw>
+                                       </p>
+                               </f:else>
+                       </f:if>
+               </f:for>
+       </f:then>
+       <f:else>
+               <p class="dropdown-text text-success"><f:format.nl2br><f:translate key="systemmessage.allgood" /></f:format.nl2br></p>
+       </f:else>
+</f:if>
index fa1a510..cc0751d 100644 (file)
@@ -2754,7 +2754,8 @@ ul ol,
 ol ol {
   margin-bottom: 0;
 }
-.list-unstyled {
+.list-unstyled,
+.modulemenu .modulemenu-group-container {
   padding-left: 0;
   list-style: none;
 }
@@ -4836,7 +4837,7 @@ tbody.collapse.in {
   list-style: none;
   font-size: 12px;
   text-align: left;
-  background-color: #fff;
+  background-color: #424242;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 2px;
@@ -4851,7 +4852,7 @@ tbody.collapse.in {
   height: 1px;
   margin: 8px 0;
   overflow: hidden;
-  background-color: #e5e5e5;
+  background-color: #525252;
 }
 .dropdown-menu > li > a {
   display: block;
@@ -4859,14 +4860,14 @@ tbody.collapse.in {
   clear: both;
   font-weight: normal;
   line-height: 1.5;
-  color: #5a5a5a;
+  color: #fff;
   white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #4d4d4d;
-  background-color: #f5f5f5;
+  color: #fff;
+  background-color: #525252;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
@@ -4874,7 +4875,7 @@ tbody.collapse.in {
   color: #fff;
   text-decoration: none;
   outline: 0;
-  background-color: #0078e6;
+  background-color: #525252;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -7074,210 +7075,898 @@ button.close {
     bottom: 20px;
   }
 }
-.autocomplete {
+html {
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  height: 100%;
+  overflow: auto;
+}
+.scaffold {
+  background-color: #f5f5f5;
+  color: #333333;
   position: relative;
+  padding-top: 45px;
+  height: 100vh;
 }
-.autocomplete-results {
-  z-index: 1000;
+.scaffold-topbar {
+  background-color: #1f1f1e;
+  color: #f5f5f5;
+  height: 45px;
   position: absolute;
-  margin: 5px 0;
-  top: 100%;
+  top: 0;
   right: 0;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  background-color: #fff;
+  left: 0;
+}
+.scaffold-modulemenu {
+  background-color: #424242;
+  color: #fff;
+  position: fixed;
+  top: 45px;
+  left: 0;
+  bottom: 0;
+  width: 40px;
+  max-width: 100%;
+  z-index: 1000;
   overflow: hidden;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
 }
-.autocomplete-suggestion {
-  border-top: 1px solid #ddd;
+.scaffold-modulemenu a {
+  color: rgba(255, 255, 255, 0.7);
 }
-.autocomplete-suggestion:first-child {
-  border-top: none;
+.scaffold-modulemenu a:hover {
+  color: #fff;
 }
-.autocomplete-suggestion-link {
-  padding: 5px 13px 5px 28px;
-  display: block;
-  text-decoration: none;
+.scaffold-modulemenu .active > a {
+  color: #fff;
 }
-.autocomplete-selected .autocomplete-suggestion-link,
-.autocomplete-suggestion-link:hover {
-  background-color: #fafafa;
-  text-decoration: none;
+.scaffold-toolbar {
+  overflow: auto;
+  background-color: #424242;
+  color: #fff;
+  z-index: 1000;
+  position: fixed;
+  top: 45px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
 }
-.autocomplete-info {
-  padding: 5px 15px;
+.scaffold-toolbar a {
+  color: rgba(255, 255, 255, 0.7);
 }
-.avatar {
-  position: relative;
-  display: inline-block;
-  height: 32px;
-  width: 32px;
-  vertical-align: middle;
+.scaffold-toolbar a:hover {
+  color: #fff;
 }
-.avatar-image {
-  display: block;
-  height: 32px;
-  width: 32px;
-  overflow: hidden;
-  border-radius: 50%;
+.scaffold-toolbar .active > a {
+  color: #fff;
 }
-.avatar-image:after {
-  display: block;
-  content: '';
-  position: absolute;
-  top: 0;
+@media (min-width: 992px) {
+  .scaffold-toolbar {
+    overflow: visible;
+    background-color: transparent;
+    height: 45px;
+    top: 0;
+    left: auto;
+    bottom: auto;
+    display: block;
+  }
+}
+@media (max-width: 991px) {
+  .scaffold-toolbar-expanded .scaffold-toolbar,
+  .scaffold-search-expanded .scaffold-toolbar {
+    display: block;
+  }
+}
+.scaffold-content {
+  position: fixed!important;
+  top: 45px;
   left: 0;
+  right: 0;
+  bottom: 0;
+}
+@media (max-width: 991px) {
+  .scaffold-content {
+    left: 0!important;
+  }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+  display: block;
+  border: none;
   height: 100%;
   width: 100%;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.1);
 }
-.avatar-image > img {
-  width: 100% !important;
-  height: auto !important;
+.scaffold-content-navigation {
+  display: none;
+  position: absolute!important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
 }
-.avatar-icon {
+.scaffold-content-navigation-component {
   position: absolute;
+  top: 0;
   bottom: 0;
+  left: 0;
   right: 0;
-  height: 16px;
-  width: 16px;
 }
-.dropdown-toggle > .avatar {
-  height: 28px;
-  width: 28px;
-  float: left;
-  margin-right: 0.5em;
-  margin-top: -5px;
+.scaffold-content-navigation-component #typo3-pagetree-treeContainer > div > .x-panel-body {
+  overflow: auto;
 }
-.dropdown-toggle .avatar-image {
-  height: 28px;
-  width: 28px;
+.scaffold-content-module {
+  position: absolute!important;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.callout {
-  background-color: #f0f0f0;
-  border-left: 3px solid #ccc;
-  margin: 20px 0;
-  padding: 20px;
-  color: #333;
+@media (max-width: 767px) {
+  .scaffold-content-module {
+    width: 100%;
+  }
 }
-.callout .media {
-  margin: 0;
+.scaffold-content-overlay {
+  display: none;
+  position: absolute;
+  z-index: 1040;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.65);
 }
-.callout .media .fa-stack {
-  color: #fff;
+.scaffold-modulemenu-expanded .scaffold-content-overlay {
+  display: block;
 }
-.callout .media .fa-stack > .fa:first-child {
-  color: #ccc;
+@media (min-width: 992px) {
+  .scaffold-modulemenu-expanded .scaffold-content-overlay {
+    display: none;
+  }
 }
-.callout .media-body {
-  vertical-align: middle;
+@media (min-width: 992px) {
+  .scaffold {
+    padding-left: 40px;
+  }
 }
-.callout-icon {
-  margin-top: -2px;
+.scaffold .scaffold-modulemenu {
+  width: 40px;
 }
-.callout-title {
-  font-size: 1.3em;
-  margin: 0 0 0.5em;
+@media (max-width: 991px) {
+  .scaffold .scaffold-modulemenu {
+    display: none;
+  }
 }
-.callout-body > *:last-child {
-  margin-bottom: 0;
+.scaffold-modulemenu-expanded {
+  display: block;
+  padding-left: 230px;
 }
-.callout-success {
-  background-color: #d1e2bd;
-  border-color: #79a548;
-  color: #333;
+.scaffold-modulemenu-expanded .scaffold-modulemenu {
+  width: 230px;
 }
-.callout-success .media {
-  margin: 0;
+@media (max-width: 991px) {
+  .scaffold-modulemenu-expanded .scaffold-modulemenu {
+    display: block;
+  }
 }
-.callout-success .media .fa-stack {
-  color: #fff;
+.scaffold-modulemenu-expanded .scaffold-content {
+  transform: translate(230px, 0);
 }
-.callout-success .media .fa-stack > .fa:first-child {
-  color: #79a548;
+.scaffold-content-navigation-expanded .scaffold-content-navigation {
+  display: block;
 }
-.callout-info {
-  background-color: #ebf3fb;
-  border-color: #6daae0;
-  color: #333;
+.scaffold-content-navigation-expanded .scaffold-content-module {
+  left: 300px;
 }
-.callout-info .media {
-  margin: 0;
+@media (min-width: 992px) {
+  .scaffold .scaffold-content {
+    left: 40px;
+  }
+  .scaffold-modulemenu-expanded .scaffold-content {
+    left: 230px;
+    transform: none;
+  }
 }
-.callout-info .media .fa-stack {
-  color: #fff;
+.topbar {
+  background-color: inherit;
+  position: relative;
+  height: 45px;
 }
-.callout-info .media .fa-stack > .fa:first-child {
-  color: #6daae0;
+.topbar a {
+  color: inherit;
+  text-decoration: none;
 }
-.callout-warning {
-  background-color: #fbefdd;
-  border-color: #e8a33d;
-  color: #333;
+.topbar-button {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  border: 0;
+  background-color: #222;
+  height: 45px;
+  width: 40px;
 }
-.callout-warning .media {
-  margin: 0;
+.topbar-button:hover {
+  background-color: #2a2a2a;
 }
-.callout-warning .media .fa-stack {
-  color: #fff;
+.topbar-button.topbar-button-modulemenu {
+  left: 0;
 }
-.callout-warning .media .fa-stack > .fa:first-child {
-  color: #e8a33d;
+@media (min-width: 992px) {
+  .topbar-button.topbar-button-modulemenu {
+    background-color: #424242;
+  }
 }
-.callout-danger {
-  background-color: #efc7c7;
-  border-color: #c83c3c;
-  color: #333;
+.topbar-button.topbar-button-navigationcomponent {
+  left: 40px;
 }
-.callout-danger .media {
-  margin: 0;
+.topbar-button.topbar-button-toolbar {
+  right: 40px;
 }
-.callout-danger .media .fa-stack {
-  color: #fff;
+.topbar-button.topbar-button-search {
+  right: 0;
 }
-.callout-danger .media .fa-stack > .fa:first-child {
-  color: #c83c3c;
+.scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
+  background-color: #424242;
 }
-.callout-notice {
-  background-color: #f9f9f9;
-  border-color: #a0a0a0;
-  color: #333;
+.scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
+  background-color: #424242;
 }
-.callout-notice .media {
-  margin: 0;
+@media (max-width: 991px) {
+  .scaffold-toolbar-expanded .toolbar-item-search {
+    display: none;
+  }
 }
-.callout-notice .media .fa-stack {
-  color: #fff;
+.scaffold-toolbar-expanded .topbar-button-toolbar {
+  background-color: #424242;
 }
-.callout-notice .media .fa-stack > .fa:first-child {
-  color: #a0a0a0;
+@media (max-width: 991px) {
+  .scaffold-search-expanded .toolbar-item {
+    display: none;
+  }
+  .scaffold-search-expanded .toolbar-item-search {
+    display: block;
+    width: 100%;
+  }
 }
-.icon {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  vertical-align: -22%;
+.scaffold-search-expanded .topbar-button-search {
+  background-color: #424242;
 }
-.icon svg,
-.icon img {
+.topbar-button-toolbar,
+.topbar-button-search {
   display: block;
-  height: 100%;
-  width: 100%;
-  transform: translate3d(0, 0, 0);
 }
-.icon * {
-  display: block;
-  line-height: inherit;
+@media (min-width: 992px) {
+  .topbar-button-toolbar,
+  .topbar-button-search {
+    display: none;
+  }
 }
-.icon-markup {
-  position: absolute;
+.topbar-header {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.topbar-header-site {
+  position: relative;
   display: block;
-  text-align: center;
-  top: 0;
-  left: 0;
+  max-width: 100%;
+  height: 45px;
+  line-height: 45px;
+  padding-left: 1em;
+  padding-right: 1em;
+  white-space: nowrap;
+}
+@media (min-width: 992px) {
+  .topbar-header-site {
+    display: inline-block;
+  }
+}
+.topbar-header-site:before,
+.topbar-header-site:after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1em;
+}
+.topbar-header-site:before {
+  left: 0;
+  background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+}
+.topbar-header-site:after {
+  right: 0;
+  background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
+}
+.typo3-in-workspace .topbar-header-site {
+  background-color: #6d860d;
+}
+.typo3-in-workspace .topbar-header-site:before {
+  background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+}
+.typo3-in-workspace .topbar-header-site:after {
+  background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
+}
+.topbar-header-site-logo {
+  height: 45px;
+  display: none;
+  padding-right: 0.5em;
+}
+@media (min-width: 320px) {
+  .topbar-header-site-logo {
+    display: inline-block;
+  }
+}
+.topbar-header-site-title {
+  line-height: 1.2em;
+  display: inline-block;
+  vertical-align: middle;
+}
+.topbar-header-site-name {
+  display: block;
+}
+.topbar-header-site-version {
+  opacity: 0.5;
+}
+.toolbar {
+  padding: 8px;
+}
+@media (min-width: 992px) {
+  .toolbar {
+    padding: 0;
+  }
+}
+.toolbar:after {
+  clear: both;
+  display: table;
+  content: '';
+}
+.toolbar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.toolbar-item {
+  padding: 4px;
+  position: relative;
+  display: block;
+  float: left;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .toolbar-item {
+    width: 50%;
+  }
+}
+@media (min-width: 750px) {
+  .toolbar-item {
+    width: 33.33%;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item {
+    padding: 0;
+    width: auto;
+    margin-left: 1px;
+  }
+}
+.toolbar-item .dropdown-menu {
+  width: 350px;
+}
+@media (max-width: 991px) {
+  .toolbar-item .dropdown-menu {
+    overflow: auto;
+    padding: 15px;
+    position: fixed;
+    max-height: 90%;
+    max-width: 90%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .toolbar-item .dropdown-backdrop {
+    background: rgba(0, 0, 0, 0.65);
+  }
+}
+.toolbar-item-avatar {
+  width: 32px;
+  display: inline-block;
+}
+.toolbar-item-avatar .avatar {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translate(0, -50%);
+}
+.toolbar-item-badge {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  padding: 3px 4px;
+  border-radius: 0;
+  font-size: 10px;
+  font-weight: normal;
+  min-width: 16px;
+}
+.toolbar-item-link {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  position: relative;
+  display: block;
+  text-decoration: none;
+  padding: 9px 10px;
+  height: 45px;
+  line-height: 27px;
+}
+.toolbar-item-link:hover,
+.toolbar-item-link:focus {
+  text-decoration: none;
+}
+@media (min-width: 992px) {
+  .toolbar-item-link {
+    border: none;
+  }
+}
+.open .toolbar-item-link {
+  background-color: #424242;
+}
+@media (min-width: 992px) {
+  .toolbar-item-title {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item-search {
+    width: 300px;
+  }
+}
+.toolbar-item-search form {
+  padding: 0;
+  margin: 0;
+}
+.toolbar-item-search .toolbar-item-link {
+  padding: 0;
+  margin: 0;
+  height: 0;
+}
+.toolbar-item-search .form-group {
+  margin: 0;
+}
+.toolbar-item-search .close {
+  color: #ffffff;
+  text-shadow: none;
+  opacity: 1;
+}
+@media (max-width: 991px) {
+  .toolbar-item-search .dropdown-menu {
+    top: 114px;
+    left: 14px;
+    right: 14px;
+    width: auto;
+    max-width: none;
+    max-height: none;
+    transform: none;
+    bottom: 14px;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item-search .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+}
+.toolbar-item-search .autocomplete-suggestions {
+  position: static!important;
+}
+.toolbar-item-search .autocomplete-suggestion {
+  border: none;
+}
+.toolbar-item-search.open .toolbar-item-search-form {
+  position: relative;
+  z-index: 991;
+}
+.toolbar-item-search-field {
+  color: inherit;
+  background-color: #2f2f2f;
+  margin: 0;
+  border-radius: 0;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  height: 45px;
+  box-shadow: none;
+}
+@media (min-width: 992px) {
+  .toolbar-item-search-field {
+    border: none;
+  }
+}
+.toolbar-item-search-field:hover {
+  background-color: #333;
+}
+.toolbar-item-search-field:focus {
+  box-shadow: none;
+  background-color: #555555;
+}
+.module-wrapper {
+  position: relative;
+}
+.module-wrapper iframe {
+  border: none;
+}
+.modulemenu .modulemenu-group-container {
+  clear: both;
+}
+.modulemenu .modulemenu-group {
+  position: relative;
+  padding: 5px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.modulemenu .modulemenu-group-header,
+.modulemenu .modulemenu-item-link {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  padding: 2px 4px;
+  text-decoration: none;
+}
+.modulemenu .modulemenu-group-header {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-transform: uppercase;
+}
+.modulemenu .modulemenu-item-link:focus,
+.modulemenu .modulemenu-item-link:hover {
+  outline: none;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.modulemenu .modulemenu-item.active .modulemenu-item-link {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.modulemenu .modulemenu-icon {
+  float: left;
+  margin-right: 4px;
+}
+.modulemenu .modulemenu-icon .fa {
+  font-size: 0.5em;
+}
+.modulemenu .modulemenu-group-title,
+.modulemenu .modulemenu-item-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-top: 7px;
+  padding-left: 4px;
+  display: none;
+  overflow: hidden;
+  *zoom: 1;
+}
+.modulemenu .modulemenu-group-title {
+  padding-right: 20px;
+}
+.modulemenu .modulemenu-group-title .caret {
+  transform: rotate(90deg);
+  position: absolute;
+  top: 17px;
+  right: 18px;
+}
+.modulemenu .expanded .modulemenu-group-title .caret {
+  transform: rotate(0deg);
+}
+.scaffold-modulemenu-expanded .modulemenu-group-title,
+.scaffold-modulemenu-expanded .modulemenu-item-title {
+  display: block;
+}
+.autocomplete {
+  position: relative;
+}
+.autocomplete-results {
+  z-index: 1000;
+  position: absolute;
+  margin: 5px 0;
+  top: 100%;
+  right: 0;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  background-color: #fff;
+  overflow: hidden;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
+}
+.autocomplete-suggestion {
+  border-top: 1px solid #ddd;
+}
+.autocomplete-suggestion:first-child {
+  border-top: none;
+}
+.autocomplete-suggestion-link {
+  padding: 5px 13px 5px 28px;
+  display: block;
+  text-decoration: none;
+}
+.autocomplete-selected .autocomplete-suggestion-link,
+.autocomplete-suggestion-link:hover {
+  background-color: #fafafa;
+  text-decoration: none;
+}
+.autocomplete-info {
+  padding: 5px 15px;
+}
+.dropdown-menu {
+  line-height: 1.45em;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+}
+.dropdown-menu a {
+  display: block;
+}
+.dropdown-menu a:hover {
+  text-decoration: none;
+}
+.dropdown-menu hr {
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+  margin: 1.25em -15px;
+}
+.dropdown-menu > *:last-child {
+  margin-bottom: 0;
+}
+.dropdown-menu .form-group {
+  margin-bottom: 0.75em;
+}
+.dropdown-menu .form-control {
+  border-color: #aaaaaa;
+  color: inherit;
+  border-radius: 0;
+  background-color: #333333;
+}
+.dropdown-menu .form-control:focus {
+  box-shadow: none;
+  border-color: #bbbbbb;
+}
+.dropdown-menu .btn {
+  border: none;
+  border-radius: 0;
+  padding: 6px 10px;
+}
+.dropdown-headline {
+  font-size: 1.15em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+.dropdown-text a {
+  display: inline-block;
+}
+div.dropdown-menu {
+  padding: 1.5em;
+}
+.dropdown-list {
+  padding-left: 0;
+  list-style: none;
+}
+.dropdown-list > li {
+  position: relative;
+}
+.dropdown-list > li + li {
+  margin-top: 0.5em;
+}
+.dropdown-list-link {
+  display: block;
+  text-decoration: none;
+}
+.dropdown-list-link:hover,
+.dropdown-list-link:focus {
+  text-decoration: none;
+}
+.dropdown-table {
+  display: table;
+  width: 100%;
+}
+.dropdown-table-row {
+  display: table-row;
+}
+.dropdown-table-column {
+  display: table-cell;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  vertical-align: middle;
+}
+.dropdown-table-column-top {
+  vertical-align: top;
+}
+.dropdown-table-icon {
+  width: 16px;
+  padding-right: 0.5em;
+}
+.dropdown-table-title {
+  white-space: nowrap;
+  padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+  max-width: 230px;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+  white-space: nowrap;
+  text-align: right;
+}
+.dropdown-table-actions-btn {
+  text-align: center;
+  display: inline-block !important;
+  margin-top: -4px;
+  margin-bottom: -4px;
+  padding: 4px;
+  vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+  background-color: #333;
+}
+.dropdown-table-actions-btn-delete:hover {
+  background-color: #c83c3c;
+}
+.avatar {
+  position: relative;
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+  vertical-align: middle;
+}
+.avatar-image {
+  display: block;
+  height: 32px;
+  width: 32px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+.avatar-image:after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.avatar-image > img {
+  width: 100% !important;
+  height: auto !important;
+}
+.avatar-icon {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 16px;
+  width: 16px;
+}
+.callout {
+  background-color: #f0f0f0;
+  border-left: 3px solid #ccc;
+  margin: 20px 0;
+  padding: 20px;
+  color: #333;
+}
+.callout .media {
+  margin: 0;
+}
+.callout .media .fa-stack {
+  color: #fff;
+}
+.callout .media .fa-stack > .fa:first-child {
+  color: #ccc;
+}
+.callout .media-body {
+  vertical-align: middle;
+}
+.callout-icon {
+  margin-top: -2px;
+}
+.callout-title {
+  font-size: 1.3em;
+  margin: 0 0 0.5em;
+}
+.callout-body > *:last-child {
+  margin-bottom: 0;
+}
+.callout-success {
+  background-color: #d1e2bd;
+  border-color: #79a548;
+  color: #333;
+}
+.callout-success .media {
+  margin: 0;
+}
+.callout-success .media .fa-stack {
+  color: #fff;
+}
+.callout-success .media .fa-stack > .fa:first-child {
+  color: #79a548;
+}
+.callout-info {
+  background-color: #ebf3fb;
+  border-color: #6daae0;
+  color: #333;
+}
+.callout-info .media {
+  margin: 0;
+}
+.callout-info .media .fa-stack {
+  color: #fff;
+}
+.callout-info .media .fa-stack > .fa:first-child {
+  color: #6daae0;
+}
+.callout-warning {
+  background-color: #fbefdd;
+  border-color: #e8a33d;
+  color: #333;
+}
+.callout-warning .media {
+  margin: 0;
+}
+.callout-warning .media .fa-stack {
+  color: #fff;
+}
+.callout-warning .media .fa-stack > .fa:first-child {
+  color: #e8a33d;
+}
+.callout-danger {
+  background-color: #efc7c7;
+  border-color: #c83c3c;
+  color: #333;
+}
+.callout-danger .media {
+  margin: 0;
+}
+.callout-danger .media .fa-stack {
+  color: #fff;
+}
+.callout-danger .media .fa-stack > .fa:first-child {
+  color: #c83c3c;
+}
+.callout-notice {
+  background-color: #f9f9f9;
+  border-color: #a0a0a0;
+  color: #333;
+}
+.callout-notice .media {
+  margin: 0;
+}
+.callout-notice .media .fa-stack {
+  color: #fff;
+}
+.callout-notice .media .fa-stack > .fa:first-child {
+  color: #a0a0a0;
+}
+.icon {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: -22%;
+}
+.icon svg,
+.icon img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  transform: translate3d(0, 0, 0);
+}
+.icon * {
+  display: block;
+  line-height: inherit;
+}
+.icon-markup {
+  position: absolute;
+  display: block;
+  text-align: center;
+  top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
 }
@@ -7501,6 +8190,7 @@ button.close {
 }
 .module-body .container-small {
   max-width: 768px;
+  margin: 0 auto;
 }
 .module-docheader + .module-body {
   padding-top: 89px;
@@ -7579,17 +8269,16 @@ button.close {
 .panel-body:after,
 .modal-header:after,
 .modal-footer:after,
+.modulemenu .modulemenu-group-header:after,
+.modulemenu .modulemenu-item-link:after,
+.dropdown-list > li:after,
 .module-docheader:after,
 .module-docheader .module-docheader-bar:after,
 .panel-heading:after,
 .pagination-block:after,
 .typo3-login-copyright-link:after,
 .form-irre-header-body dl dd:after,
-[id="typo3-menu"] .typo3-module-menu-group-header:after,
-[id="typo3-menu"] .typo3-module-menu-item-link:after,
 .t3-page-ce .t3-page-ce-header:after,
-.typo3-topbar-navigation-items .dropdown-list > li:after,
-.typo3-topbar-navigation-items .dropdown-list .modlink:after,
 #typo3-debug-console .topbar:after,
 .distribution-holder:after,
 .distribution-detail:after {
@@ -8125,7 +8814,8 @@ button.close {
   left: auto;
   right: 7px;
 }
-.bootstrap-datetimepicker-widget .list-unstyled {
+.bootstrap-datetimepicker-widget .list-unstyled,
+.bootstrap-datetimepicker-widget .modulemenu .modulemenu-group-container {
   margin: 0;
 }
 .bootstrap-datetimepicker-widget a[data-action] {
@@ -8679,7 +9369,7 @@ button.close {
   top: 0;
   left: 0;
   width: 100%;
-  height: 4px;
+  height: 2px;
 }
 /* Fancy blur effect */
 #nprogress .peg {
@@ -9142,74 +9832,6 @@ div#contentMenu1 {
   padding-bottom: 3px;
   border-bottom: 1px solid #C3C3C3;
 }
-#typo3-navigationContainer-xcollapsed:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  width: 8px;
-  height: 100%;
-  background-color: #626262;
-  border-right: 1px solid #444444;
-  border-left: 1px solid #111;
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15);
-}
-.x-panel-body .x-layout-cmini-west .x-layout-mini,
-.x-panel-body .x-layout-split-west .x-layout-mini {
-  top: 50%;
-  margin-top: -40px;
-}
-.typo3-btn-collapse-page-tree,
-.x-layout-split-west .x-layout-mini,
-.x-layout-cmini-west .x-layout-mini {
-  height: 80px;
-  width: 14px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  background: none;
-  border: 1px solid #C3C3C3;
-  border-left: 1px solid #F5F5F5;
-  display: block;
-  font-size: 0;
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-.typo3-btn-collapse-page-tree:after,
-.x-layout-split-west .x-layout-mini:after,
-.x-layout-cmini-west .x-layout-mini:after {
-  font-family: 'FontAwesome';
-  content: "\f0d9";
-  position: absolute;
-  top: 50%;
-  display: block;
-  width: 100%;
-  margin-top: -1px;
-  color: #000;
-  font-size: 12px;
-  vertical-align: middle;
-  text-align: center;
-}
-.x-layout-split-west .x-layout-mini {
-  background-color: #F5F5F5;
-}
-.x-layout-split-west .x-layout-mini:hover {
-  background-color: #e8e8e8;
-}
-.x-layout-cmini-west .x-layout-mini {
-  background-color: #626262;
-  margin-left: 7px;
-  border: 1px solid #444444;
-  border-left: 0;
-}
-.x-layout-cmini-west .x-layout-mini:hover {
-  opacity: 1;
-  filter: alpha(opacity=100);
-  background-color: #6f6f6f;
-}
-.x-layout-cmini-west .x-layout-mini:after {
-  margin-top: -9px;
-  color: #fff;
-  content: "\f0da";
-}
 .alert-notice {
   background-color: #333;
   border-color: transparent;
@@ -9398,6 +10020,9 @@ div#contentMenu1 {
 .modal-image-manipulation .modal-panel-body img {
   max-width: 100%;
 }
+#typo3-pagetree-topPanelItems {
+  background-color: #eee;
+}
 #typo3-pagetree {
   height: 100%;
 }
@@ -11874,6 +12499,17 @@ label .icon img {
 fieldset[disabled] .form-control {
   color: #737373;
 }
+.form-control-icon {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  transform: translate(0, -50%);
+  z-index: 1;
+}
+.form-control-icon + .form-control,
+.form-control-icon + .form-control-clearable .form-control {
+  padding-left: 3.25em;
+}
 .form-group.has-error label:before {
   font-family: FontAwesome;
   font-size: 12px;
@@ -12165,167 +12801,28 @@ select.icon-select option {
   .checkbox-inline.radio label,
   .radio-inline.checkbox label,
   .checkbox-inline.checkbox label {
-    white-space: nowrap;
-  }
-}
-textarea.formengine-textarea {
-  resize: none;
-}
-.link-browser-section {
-  border-bottom: 1px solid #d7d7d7;
-  margin: 0 15px 15px 15px;
-}
-.link-browser-section.link-browser-current-link,
-.link-browser-section.link-browser-tabs {
-  padding-bottom: 0;
-  border-bottom: none;
-}
-.link-browser-section.link-browser-pagetree h3,
-.link-browser-section.link-browser-filetree h3 {
-  margin-top: 0;
-}
-.link-browser-section:last-child {
-  padding-bottom: 0;
-  border: none;
-}
-body#typo3-backend-php {
-  margin: 0;
-  padding: 0;
-}
-#typo3-main-container {
-  clear: both;
-}
-#typo3-top {
-  margin-left: 160px;
-}
-iframe {
-  width: 100%;
-}
-#typo3-side-menu,
-iframe {
-  height: 100%;
-  overflow: auto;
-}
-[id="typo3-module-menu"] {
-  background: #222;
-  color: #fff;
-}
-[id="typo3-module-menu-xsplit"] {
-  z-index: 10;
-  width: 1px;
-  background-color: #2b2b2b;
-  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
-}
-[id="typo3-module-menu-xsplit"]:hover {
-  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.9);
-}
-[id="typo3-module-menu-xsplit"] .x-layout-mini-wrapper {
-  left: -7px;
-  width: 15px;
-}
-[id="typo3-menu"] {
-  padding-left: 0;
-  list-style: none;
-}
-[id="typo3-menu"] .typo3-module-menu-group-container {
-  clear: both;
-  padding-left: 0;
-  list-style: none;
-  padding-right: 15px;
-}
-[id="typo3-menu"] .typo3-module-menu-group {
-  transition: background-color 0.4s ease-in-out;
-  position: relative;
-  color: #fff;
-  background-color: #222;
-  border-top: 1px solid #2b2b2b;
-  border-bottom: 1px solid #111;
-  padding: 5px 0;
-}
-[id="typo3-menu"] .typo3-module-menu-group.expanded {
-  background-color: #222;
-}
-[id="typo3-menu"] .typo3-module-menu-group-header {
-  position: relative;
-  cursor: pointer;
-  display: block;
-  padding: 4px 9px;
-  text-transform: uppercase;
-}
-[id="typo3-menu"] .typo3-module-menu-item {
-  margin: 1px 0;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link {
-  position: relative;
-  cursor: pointer;
-  display: block;
-  padding: 4px 9px;
-  color: #aaa;
-  border-radius: 0 2px 2px 0;
-  text-decoration: none;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link:focus,
-[id="typo3-menu"] .typo3-module-menu-item-link:hover {
-  outline: none;
-  color: #fff;
-  background-color: #2a2a2a;
-}
-[id="typo3-menu"] .typo3-module-menu-item.active .typo3-module-menu-item-link {
-  color: #fff;
-  background-color: #484848;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon,
-[id="typo3-menu"] .typo3-module-menu-item-icon {
-  float: left;
-  margin-right: 10px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon {
-  background-color: transparent;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span {
-  line-height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span > .t3-icon {
-  width: 32px;
-  height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span > .t3-icon:before {
-  line-height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon:after {
-  display: none;
-}
-[id="typo3-menu"] .typo3-module-menu-group-title,
-[id="typo3-menu"] .typo3-module-menu-item-title {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-top: 7px;
-  display: block;
-  overflow: hidden;
-  *zoom: 1;
-}
-[id="typo3-menu"] .typo3-module-menu-group-title {
-  padding-right: 20px;
+    white-space: nowrap;
+  }
 }
-[id="typo3-menu"] .typo3-module-menu-group-title .caret {
-  transition: all 0.25s ease-in-out;
-  transform: rotate(90deg);
-  position: absolute;
-  top: 15px;
-  right: 18px;
+textarea.formengine-textarea {
+  resize: none;
 }
-[id="typo3-menu"] .expanded .typo3-module-menu-group-title .caret {
-  transform: rotate(0deg);
+.link-browser-section {
+  border-bottom: 1px solid #d7d7d7;
+  margin: 0 15px 15px 15px;
 }
-.typo3-module-menu-snapped .typo3-module-menu-group-container {
-  padding-right: 0;
+.link-browser-section.link-browser-current-link,
+.link-browser-section.link-browser-tabs {
+  padding-bottom: 0;
+  border-bottom: none;
 }
-.typo3-module-menu-snapped .typo3-module-menu-item-link {
-  border-radius: 0;
+.link-browser-section.link-browser-pagetree h3,
+.link-browser-section.link-browser-filetree h3 {
+  margin-top: 0;
 }
-.typo3-module-menu-snapped .typo3-module-menu-group-title,
-.typo3-module-menu-snapped .typo3-module-menu-item-title {
-  display: none;
+.link-browser-section:last-child {
+  padding-bottom: 0;
+  border: none;
 }
 .query-builder .form-inline > .form-control-clearable {
   display: inline;
@@ -12582,6 +13079,12 @@ iframe {
  */
 .ui-resizable-handle {
   border: solid #dadada;
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+  transform: translateX(50%);
 }
 .ui-resizable-handle:hover {
   border-color: #585858;
@@ -12595,11 +13098,11 @@ iframe {
   border-width: 2px 0;
 }
 .ui-resizable-e {
-  cursor: col-resize;
-  width: 2px;
-  right: -15px;
-  top: 30%;
-  height: 40%;
+  cursor: e-resize;
+  width: 25px;
+  right: -5px;
+  top: 0;
+  height: 100%;
   border-width: 0 2px;
 }
 .ui-resizable-se {
@@ -12650,363 +13153,6 @@ span.item-state-deleted {
   display: inline-block;
   padding: 4px 4px;
 }
-[id="typo3-topbar"],
-[id="typo3-topbar"] .x-panel-body {
-  min-width: 1000px;
-}
-[id="typo3-topbar"] {
-  height: 45px;
-  position: relative;
-  background-color: #111;
-  color: #ddd;
-}
-[id="typo3-topbar"] .x-panel-bwrap,
-[id="typo3-topbar"] .x-panel-body {
-  overflow: visible;
-}
-.typo3-in-workspace [id="typo3-topbar"] {
-  background-color: #6d860d;
-}
-.typo3-in-workspace [id="typo3-topbar"] .typo3-topbar-site-name {
-  color: #fff;
-}
-.typo3-topbar-container {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  height: 45px;
-  position: relative;
-}
-.typo3-topbar-site {
-  display: table;
-  padding: 0;
-  height: 45px;
-  float: left;
-}
-.typo3-topbar-site-logo,
-.typo3-topbar-site-name {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
-}
-.typo3-topbar-site-logo {
-  background-color: #111;
-  width: 51px;
-  box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
-}
-.typo3-topbar-site-logo:hover {
-  background-color: #333;
-}
-.typo3-topbar-site-logo > img {
-  max-height: 50px;
-}
-.typo3-topbar-site-name {
-  cursor: default;
-  padding: 0 15px;
-}
-.typo3-topbar-navigation {
-  color: #ddd;
-  background-color: #222;
-  float: right;
-}
-.typo3-topbar-navigation .shortcut {
-  min-width: 180px;
-}
-.typo3-topbar-navigation .shortcut-form {
-  padding: 16px;
-  margin: 4px -16px;
-  border-top: 1px solid #373737;
-  background-color: #2b2b2b;
-  border-bottom: 1px solid #111;
-}
-.typo3-topbar-navigation-items {
-  height: 45px;
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-  float: left;
-}
-.typo3-topbar-navigation-items .icon-color {
-  fill: #ddd;
-}
-.typo3-topbar-navigation-items a {
-  color: #ddd;
-  text-decoration: none;
-}
-.typo3-topbar-navigation-items > li {
-  float: left;
-  height: 45px;
-}
-.typo3-topbar-navigation-items > li > a {
-  position: relative;
-  display: block;
-  padding: 13.5px 10px;
-  border-left: 1px solid #2b2b2b;
-  border-right: 1px solid #111;
-}
-.typo3-topbar-navigation-items > li > a:hover,
-.typo3-topbar-navigation-items > li > a:focus,
-.typo3-topbar-navigation-items > li > a:active {
-  color: #fff;
-  background-color: #333;
-  border-left-color: #3b3b3b;
-}
-.typo3-topbar-navigation-items > li.open > a {
-  color: #fff;
-  background-color: #484848;
-  border-left-color: #505050;
-}
-.typo3-topbar-navigation-items .dropdown {
-  min-width: 45px;
-  text-align: center;
-}
-.typo3-topbar-navigation-items .dropdown > a > .fa {
-  font-size: 16px;
-  margin: 0;
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  width: auto;
-  height: auto;
-}
-.typo3-topbar-navigation-items .dropdown > a .icon-size-default .icon-unify,
-.typo3-topbar-navigation-items .dropdown > a .icon-size-small .icon-unify {
-  line-height: 16px;
-  font-size: 16px;
-}
-.typo3-topbar-navigation-items .dropdown-toggle {
-  position: relative;
-}
-.typo3-topbar-navigation-items .dropdown-toggle .badge {
-  display: none;
-  font-size: 10px;
-  min-width: 15px;
-  height: 15px;
-  position: absolute;
-  padding: 0;
-  border-radius: 2px;
-  line-height: 15px;
-  bottom: 5px;
-  right: 5px;
-}
-.typo3-topbar-navigation-items .live-search-wrapper + .dropdown-menu {
-  width: 100%;
-}
-.typo3-topbar-navigation-items .live-search-wrapper + .dropdown-menu .dropdown-list {
-  position: relative!important;
-}
-.typo3-topbar-navigation-items .dropdown-menu {
-  left: auto;
-  right: 0;
-  margin: 0;
-  z-index: 2000;
-  padding: 8px 16px;
-  color: #ddd;
-  background-color: #222;
-  border-color: #111;
-  border-top: 1px solid #444444;
-  border-left: 0;
-  border-right: 0;
-  border-radius: 0 0 2px 2px;
-  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
-}
-.typo3-topbar-navigation-items .dropdown-menu a {
-  color: #ddd;
-  white-space: nowrap;
-}
-.typo3-topbar-navigation-items .dropdown-menu > *:last-child {
-  margin-bottom: 0;
-}
-.typo3-topbar-navigation-items .dropdown-list {
-  padding-left: 0;
-  list-style: none;
-}
-.typo3-topbar-navigation-items .dropdown-list > li {
-  position: relative;
-}
-.typo3-topbar-navigation-items .dropdown-list > li.active .dropdown-list-link {
-  background-color: #484848;
-  color: #fff;
-}
-.typo3-topbar-navigation-items .dropdown-list > li + li {
-  margin-top: 1px;
-}
-.typo3-topbar-navigation-items .dropdown-list > li.divider + li {
-  margin-top: 0;
-}
-.typo3-topbar-navigation-items .dropdown-list .divider {
-  border-top: 1px solid #111;
-  background-color: #2b2b2b;
-  margin: 8px -16px;
-  padding: 1px 0 0;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink {
-  width: 210px;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-icon {
-  float: left;
-  margin-right: 10px;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-label {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-top: 7px;
-  display: block;
-  overflow: hidden;
-  *zoom: 1;
-}
-.typo3-topbar-navigation-items .dropdown-list .dropdown-header {
-  font-size: 1em;
-  margin-left: -16px;
-  margin-right: -16px;
-  padding: 8px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list .dropdown-intro,
-.typo3-topbar-navigation-items .dropdown-list .dropdown-info {
-  color: #aaaaaa;
-  margin-left: -16px;
-  margin-right: -16px;
-  padding: 8px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list .dl-horizontal dt {
-  width: 140px;
-  text-align: left;
-  font-weight: normal;
-}
-.typo3-topbar-navigation-items .dropdown-list .dl-horizontal dd {
-  margin-left: 150px;
-  width: 170px;
-  word-wrap: break-word;
-}
-.typo3-topbar-navigation-items .dropdown-list-link {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  color: #ddd;
-  margin-left: -16px;
-  margin-right: -16px;
-  padding: 4px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link:hover {
-  color: #fff;
-  background-color: #333;
-}
-.typo3-topbar-navigation-items .dropdown-list-link .badge {
-  background-color: #c83c3c;
-  color: #fff;
-}
-.typo3-topbar-navigation-items .dropdown-list-link small {
-  white-space: normal;
-  width: 270px;
-  display: block;
-  padding-left: 21px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit,
-.typo3-topbar-navigation-items .dropdown-list-link-delete,
-.typo3-topbar-navigation-items .dropdown-list-link-close {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -8px;
-  padding: 0;
-  text-align: center;
-  line-height: 26px;
-  width: 26px;
-  height: 26px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
-  background-color: #333;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit {
-  right: 18px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
-  background-color: #c83c3c;
-}
-.typo3-topbar-navigation-items .dropdown-link-list-add-close {
-  padding-right: 50px;
-}
-.typo3-topbar-navigation-items .dropdown-link-list-add-editdelete {
-  padding-right: 85px;
-}
-.typo3-topbar-navigation-items .topbar-workspaces-title {
-  margin-left: 3px;
-}
-.typo3-topbar-navigation-search {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}
-.typo3-topbar-navigation-search .form-group {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.typo3-topbar-navigation-search .form-group:before {
-  content: "\f002";
-  font: normal normal normal 14px/1 FontAwesome;
-  position: absolute;
-  top: 50%;
-  left: 15px;
-  margin-top: -8px;
-  z-index: 1;
-}
-.typo3-topbar-navigation-search .form-group button.close {
-  opacity: 1;
-  color: #ddd;
-  text-shadow: none;
-}
-.typo3-topbar-navigation-search .form-control {
-  background-color: #222;
-  color: #ddd;
-  height: 45px;
-  width: 300px;
-  padding: 14px 30px 13px 35px;
-  border: none;
-  border-left: 1px solid #2b2b2b;
-  border-radius: 0;
-}
-.typo3-topbar-navigation-search .form-control:hover {
-  border-left-color: #373737;
-  background-color: #333;
-}
-.typo3-topbar-navigation-search .form-control:focus {
-  outline: none;
-  border-left-color: #515151;
-  background-color: #484848;
-  box-shadow: none;
-}
-.typo3-topbar-navigation-search .form-control + .t3-icon {
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  margin-right: 0;
-  margin-top: -8px;
-}
-.typo3-topbar-navigation-search .dropdown-menu {
-  left: auto!important;
-  width: 350px;
-}
-.typo3-topbar-navigation-search .dropdown-list-link {
-  max-width: none;
-}
-.typo3-topbar-navigation-search .dropdown-list-link .typeahead-highlight {
-  font-weight: normal;
-}
-#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem .dropdown-list {
-  max-height: 270px;
-  overflow: hidden;
-  overflow-y: auto;
-  padding-right: 10px;
-}
 #typo3-debug-console {
   background-color: #f5f5f5;
   width: 100%;
index ae7c1e6..7ef7c11 100644 (file)
@@ -122,7 +122,7 @@ define(['jquery'], function ($) {
         * Attach the Debugger Console to the viewport
         */
        DebugConsole.attachToViewport = function() {
-               var $viewport = $('#typo3-contentContainer');
+               var $viewport = $('.t3js-scaffold-content');
                if ($viewport.has(DebugConsole.$consoleDom).length === 0) {
                        $viewport.append(DebugConsole.$consoleDom);
                }
index c7f2cf7..32d8cee 100644 (file)
@@ -20,8 +20,11 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
        'use strict';
 
        var containerSelector = '#typo3-cms-backend-backend-toolbaritems-livesearchtoolbaritem';
+       var toolbarItem = '.t3js-toolbar-item-search';
+       var dropdownToggle = '.t3js-toolbar-search-dropdowntoggle';
        var searchFieldSelector = '.t3js-topbar-navigation-search-field';
        var formSelector = '.t3js-topbar-navigation-search';
+       var autocompleteContainer = '.t3js-toolbar-search-autocomplete';
        var url = TYPO3.settings.ajaxUrls['livesearch'];
        var category = '';
 
@@ -32,18 +35,19 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
                        paramName: 'q',
                        dataType: 'json',
                        minChars: 2,
+                       width: '100%',
                        groupBy: 'typeLabel',
-                       containerClass: 'dropdown-list',
+                       containerClass: 'autocomplete-suggestions ' + autocompleteContainer.substr(1, autocompleteContainer.length),
                        appendTo: containerSelector + ' .dropdown-menu',
                        forceFixPosition: false,
                        preserveInput: true,
                        showNoSuggestionNotice: true,
                        triggerSelectOnValidInput: false,
                        preventBadQueries: false,
-                       noSuggestionNotice: '<div class="dropdown-info">' + TYPO3.LLL.liveSearch.listEmptyText + '</div>'
-                                       + '<div class="search-list-help-content"><strong>' + TYPO3.LLL.liveSearch.helpTitle + '</strong>'
-                                       + '<p>' + TYPO3.LLL.liveSearch.helpDescription + '<br>' + TYPO3.LLL.liveSearch.helpDescriptionPages + '</p>'
-                                       + '</div>',
+                       noSuggestionNotice: '<h3 class="dropdown-headline">' + TYPO3.LLL.liveSearch.listEmptyText + '</h3>'
+                                       + '<p>' + TYPO3.LLL.liveSearch.helpTitle + '</p>'
+                                       + '<hr>'
+                                       + '<p>' + TYPO3.LLL.liveSearch.helpDescription + '<br>' + TYPO3.LLL.liveSearch.helpDescriptionPages + '</p>',
                        // put the AJAX results in the right format
                        transformResult: function(response) {
                                return {
@@ -62,30 +66,47 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
                                var html = '';
                                // add a divider if it's not the first group
                                if (i > 0) {
-                                       html = '<div class="divider"></div>';
+                                       html = '<hr>';
                                }
-                               return html + '<div class="dropdown-header">' + category + '</div>';
+                               return html + '<h3 class="dropdown-headline">' + category + '</h3>';
                        },
                        // Rendering of each item
                        formatResult: function(suggestion, value) {
-                               return '<a class="dropdown-list-link" href="#" data-pageid="' + suggestion.data.pageId + '" data-target="' + suggestion.data.editLink + '">' +
-                                               suggestion.data.iconHTML + ' ' + suggestion.data.title +
-                                       '</a>';
+                               return ''
+                                       + '<div class="dropdown-table">'
+                                       + '<div class="dropdown-table-row">'
+                                       + '<div class="dropdown-table-column dropdown-table-icon">' + suggestion.data.iconHTML + '</div>'
+                                       + '<div class="dropdown-table-column dropdown-table-title">'
+                                       + '<a class="dropdown-table-title-ellipsis dropdown-list-link" href="#" data-pageid="' + suggestion.data.pageId + '" data-target="' + suggestion.data.editLink + '">'
+                                       + suggestion.data.title
+                                       + '</a>'
+                                       + '</div>'
+                                       + '</div>'
+                                       + '</div>'
+                                       + '';
                        },
-                       onSearchComplete: function() {
-                               $(containerSelector).addClass('open');
+                       onSearchComplete: function(query, suggestions) {
+                               if (!$(toolbarItem).hasClass('open') && $(searchFieldSelector).val().length > 1) {
+                                       $(dropdownToggle).dropdown('toggle');
+                                       $(searchFieldSelector).focus();
+                               }
                        },
                        beforeRender: function(container) {
                                // Unset height, width and z-index again, should be fixed by the plugin at a later point
-                               container.attr('style', '').append('<div class="divider"></div><div>' +
+                               container.attr('style', '').append('<hr><div>' +
                                        '<a href="#" class="btn btn-primary pull-right t3js-live-search-show-all">' +
                                                TYPO3.LLL.liveSearch.showAllResults +
                                        '</a>' +
                                '</div>');
-                               $(containerSelector).addClass('open');
+                               if (!$(toolbarItem).hasClass('open')) {
+                                       $(dropdownToggle).dropdown('toggle');
+                                       $(searchFieldSelector).focus();
+                               }
                        },
                        onHide: function() {
-                               $(containerSelector).removeClass('open');
+                               if ($(toolbarItem).hasClass('open')) {
+                                       $(dropdownToggle).dropdown('toggle');
+                               }
                        }
                });
 
@@ -93,15 +114,19 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
                $(containerSelector).on('click', '.t3js-live-search-show-all', function(evt) {
                        evt.preventDefault();
                        TYPO3.ModuleMenu.App.showModule('web_list', 'id=0&search_levels=-1&search_field=' + encodeURIComponent($(searchFieldSelector).val()));
+                       $(searchFieldSelector).val('').trigger('change');
                });
                $(containerSelector).on('click', '.dropdown-list-link', function(evt) {
                        evt.preventDefault();
                        jump($(this).data('target'), 'web_list', 'web', $(this).data('pageid'));
+                       $(searchFieldSelector).val('').trigger('change');
                });
 
                $(searchFieldSelector).clearable({
                        onClear: function() {
-                               $(containerSelector).removeClass('open');
+                               if ($(toolbarItem).hasClass('open')) {
+                                       $(dropdownToggle).dropdown('toggle');
+                               }
                        }
                });
 
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js
new file mode 100644 (file)
index 0000000..05340c9
--- /dev/null
@@ -0,0 +1,60 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/Toolbar
+ * Toolbar component of the TYPO3 backend
+ * @exports TYPO3/CMS/Backend/Toolbar
+ */
+require(
+       [
+               'jquery',
+               'TYPO3/CMS/Backend/Icons',
+               'TYPO3/CMS/Backend/modulemenu'
+       ],
+       function ($) {
+
+               TYPO3.Toolbar = {};
+               TYPO3.Toolbar.App = {
+                       initialize: function () {
+                               this.initializeEvents();
+                       },
+                       initializeEvents: function () {
+                               $('.t3js-toolbar-item').parent().on('hidden.bs.dropdown', function () {
+                                       $('.scaffold')
+                                               .removeClass('scaffold-toolbar-expanded')
+                                               .removeClass('scaffold-search-expanded');
+                               });
+                               $(document).on('click', '.toolbar-item [data-modulename]', function (evt) {
+                                       var moduleName = $(this).data('modulename');
+                                       TYPO3.ModuleMenu.App.showModule(moduleName);
+                                       evt.preventDefault();
+                               });
+                               $(document).on('click', '.t3js-topbar-button-toolbar', function () {
+                                       $('.scaffold')
+                                               .removeClass('scaffold-modulemenu-expanded')
+                                               .removeClass('scaffold-search-expanded')
+                                               .toggleClass('scaffold-toolbar-expanded');
+                               });
+                               $(document).on('click', '.t3js-topbar-button-search', function () {
+                                       $('.scaffold')
+                                               .removeClass('scaffold-modulemenu-expanded')
+                                               .removeClass('scaffold-toolbar-expanded')
+                                               .toggleClass('scaffold-search-expanded');
+                               });
+                       }
+               };
+               // start the module menu app
+               TYPO3.Toolbar.App.initialize();
+       }
+);
index 55158a8..b3ff39b 100644 (file)
@@ -28,7 +28,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Notification'],
                options: {
                        containerSelector: '#typo3-cms-backend-backend-toolbaritems-clearcachetoolbaritem',
                        menuItemSelector: '.dropdown-menu a',
-                       toolbarIconSelector: '.dropdown-toggle span.icon'
+                       toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
                }
        };
 
index b2ff220..91145a9 100644 (file)
@@ -33,9 +33,11 @@ define(['jquery',
                        containerSelector: '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
                        toolbarIconSelector: '.dropdown-toggle span.icon',
                        toolbarMenuSelector: '.dropdown-menu',
-                       shortcutItemSelector: '.dropdown-menu .shortcut',
-                       shortcutDeleteSelector: '.shortcut-delete',
-                       shortcutEditSelector: '.shortcut-edit',
+
+                       shortcutItemSelector: '.t3js-topbar-shortcut',
+                       shortcutDeleteSelector: '.t3js-shortcut-delete',
+                       shortcutEditSelector: '.t3js-shortcut-edit',
+
                        shortcutFormTitleSelector: 'input[name="shortcut-title"]',
                        shortcutFormGroupSelector: 'select[name="shortcut-group"]',
                        shortcutFormSaveSelector: '.shortcut-form-save',
@@ -59,22 +61,22 @@ define(['jquery',
                        },
                        cache: false
                }).done(function(data) {
-                       $shortcutRecord.html(data);
+                       $(ShortcutMenu.options.containerSelector).find(ShortcutMenu.options.toolbarMenuSelector).html(data);
                });
        };
 
        /**
         * Save the data from the in-place-editor for a shortcut
         *
-        * @param {Object} $shortcutRecord
+        * @param {Object} $shortcutForm
         */
-       ShortcutMenu.saveShortcutForm = function($shortcutRecord) {
+       ShortcutMenu.saveShortcutForm = function($shortcutForm) {
                $.ajax({
                        url: TYPO3.settings.ajaxUrls['shortcut_saveform'],
                        data: {
-                               shortcutId: $shortcutRecord.data('shortcutid'),
-                               shortcutTitle: $shortcutRecord.find(ShortcutMenu.options.shortcutFormTitleSelector).val(),
-                               shortcutGroup: $shortcutRecord.find(ShortcutMenu.options.shortcutFormGroupSelector).val()
+                               shortcutId: $shortcutForm.data('shortcutid'),
+                               shortcutTitle: $shortcutForm.find(ShortcutMenu.options.shortcutFormTitleSelector).val(),
+                               shortcutGroup: $shortcutForm.find(ShortcutMenu.options.shortcutFormGroupSelector).val()
                        },
                        type: 'post',
                        cache: false
@@ -186,18 +188,24 @@ define(['jquery',
                        evt.preventDefault();
                        evt.stopImmediatePropagation();
                        ShortcutMenu.deleteShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
+               }).on('click', ShortcutMenu.options.shortcutFormGroupSelector, function(evt) {
+                       evt.preventDefault();
+                       evt.stopImmediatePropagation();
                }).on('click', ShortcutMenu.options.shortcutEditSelector, function(evt) {
                        evt.preventDefault();
                        evt.stopImmediatePropagation();
                        ShortcutMenu.editShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
                }).on('click', ShortcutMenu.options.shortcutFormSaveSelector, function(evt) {
-                       ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutItemSelector));
+                       evt.preventDefault();
+                       evt.stopImmediatePropagation();
+                       ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
                }).on('submit', ShortcutMenu.options.shortcutFormSelector, function(evt) {
                        evt.preventDefault();
                        evt.stopImmediatePropagation();
-                       ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutItemSelector));
-               }).on('click', ShortcutMenu.options.shortcutFormCancelSelector, function() {
-                       // re-render the menu on canceling the update of a shortcut
+                       ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
+               }).on('click', ShortcutMenu.options.shortcutFormCancelSelector, function(evt) {
+                       evt.preventDefault();
+                       evt.stopImmediatePropagation();
                        ShortcutMenu.refreshMenu();
                });
        };
index 9db9605..bf03794 100644 (file)
@@ -26,12 +26,12 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Storage'], funct
        var SystemInformationMenu = {
                identifier: {
                        containerSelector: '#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem',
-                       toolbarIconSelector: '.dropdown-toggle span.icon',
+                       toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
                        menuContainerSelector: '.dropdown-menu',
                        moduleLinks: '.t3js-systeminformation-module'
                },
                elements: {
-                       $counter: $('#t3js-systeminformation-counter')
+                       $counter: $('.t3js-systeminformation-counter')
                }
        };
 
@@ -77,15 +77,15 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Storage'], funct
         * Updates the counter
         */
        SystemInformationMenu.updateCounter = function() {
-               var $ul = $(SystemInformationMenu.identifier.containerSelector).find(SystemInformationMenu.identifier.menuContainerSelector).find('ul'),
-                       count = $ul.data('count'),
-                       badgeClass = $ul.data('severityclass');
+               var $container = $(SystemInformationMenu.identifier.containerSelector).find(SystemInformationMenu.identifier.menuContainerSelector).find('.t3js-systeminformation-container'),
+                       count = $container.data('count'),
+                       badgeClass = $container.data('severityclass');
 
                SystemInformationMenu.elements.$counter.text(count).toggle(parseInt(count) > 0);
                SystemInformationMenu.elements.$counter.removeClass();
 
                if (badgeClass !== '') {
-                       SystemInformationMenu.elements.$counter.addClass('badge ' + badgeClass);
+                       SystemInformationMenu.elements.$counter.addClass('toolbar-item-badge badge ' + badgeClass);
                }
        };
 
index 9575765..bc69091 100644 (file)
@@ -46,6 +46,9 @@ define(['jquery'], function($) {
         * @returns {String}
         */
        Utility.getParameterFromUrl = function(url, parameter) {
+               if (typeof url.split !== 'function') {
+                       return '';
+               }
                var parts = url.split('?'),
                        value = '';
 
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js b/typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js
new file mode 100644 (file)
index 0000000..49a7db5
--- /dev/null
@@ -0,0 +1,138 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/Viewport
+ * Handles the main logic of the TYPO3 backend viewport
+ * @exports TYPO3/CMS/Backend/Viewport
+ */
+define(
+       'TYPO3/CMS/Backend/Viewport',
+       [
+               'jquery'
+       ],
+       function ($) {
+               'use strict';
+
+               TYPO3.Backend = {
+                       initialize: function() {
+                               TYPO3.Backend.doLayout();
+                               $(document).on('resize', TYPO3.Backend.doLayout);
+                       },
+                       /**
+                        * This function is triggered whenever a re-layouting of component is needed
+                        */
+                       doLayout: function () {
+                               TYPO3.Backend.NavigationContainer.cleanup();
+                               TYPO3.Backend.NavigationContainer.calculateScrollbar();
+                               if (Ext.getCmp('typo3-pagetree') !== undefined) {
+                                       Ext.getCmp('typo3-pagetree').doLayout();
+                               }
+                       },
+                       Loader: {
+                               start: function() {
+                                       require(['nprogress'], function(NProgress) {
+                                               NProgress.configure({parent: '.t3js-scaffold-content-module', showSpinner: false});
+                                               NProgress.start();
+                                       });
+                               },
+                               finish: function() {
+                                       require(['nprogress'], function(NProgress) {
+                                               NProgress.done();
+                                       });
+                               }
+                       },
+                       NavigationContainer: {
+                               toggle: function () {
+                                       $('.t3js-scaffold').toggleClass('scaffold-content-navigation-expanded')
+                               },
+                               cleanup: function() {
+                                       $('.t3js-scaffold-modulemenu').removeAttr('style');
+                                       $('t3js-scaffold-content').removeAttr('style');
+                               },
+                               hide: function () {
+                                       $('.t3js-scaffold').removeClass('scaffold-content-navigation-expanded');
+                                       $('.t3js-scaffold-content-module').removeAttr('style');
+                               },
+                               show: function (component) {
+                                       if(component !== undefined) {
+                                               $('.t3js-scaffold').addClass('scaffold-content-navigation-expanded');
+                                       }
+                                       $('.t3js-scaffold-content-navigation [data-component]').hide();
+                                       $('.t3js-scaffold-content-navigation [data-component=' + component + ']').show();
+                               },
+                               setUrl: function(urlToLoad) {
+                                       $('.t3js-scaffold').addClass('scaffold-content-navigation-expanded');
+                                       $('.t3js-scaffold-content-navigation-iframe').attr('src', urlToLoad);
+                               },
+                               getUrl: function() {
+                                       return $('.t3js-scaffold-content-navigation-iframe').attr('src');
+                               },
+                               refresh: function() {
+                                       console.log('refresh navi');
+                               },
+                               calculateScrollbar: function (){
+                                       TYPO3.Backend.NavigationContainer.cleanup();
+                                       var $scaffold = $('.t3js-scaffold');
+                                       var $moduleMenuContainer = $('.t3js-scaffold-modulemenu');
+                                       var $contentContainer = $('.t3js-scaffold-content');
+                                       var $moduleMenu = $('.t3js-modulemenu');
+                                       $moduleMenuContainer.css('overflow', 'auto');
+                                       var moduleMenuContainerWidth = $moduleMenuContainer.outerWidth();
+                                       var moduleMenuWidth = $moduleMenu.outerWidth();
+                                       $moduleMenuContainer.removeAttr('style').css('overflow', 'hidden');
+                                       if ($scaffold.hasClass('scaffold-modulemenu-expanded') === false) {
+                                               $moduleMenuContainer.width(moduleMenuContainerWidth + (moduleMenuContainerWidth - moduleMenuWidth));
+                                               $contentContainer.css('left', moduleMenuContainerWidth + (moduleMenuContainerWidth - moduleMenuWidth))
+                                       } else {
+                                               $moduleMenuContainer.removeAttr('style');
+                                               $contentContainer.removeAttr('style');
+                                       }
+                                       $moduleMenuContainer.css('overflow', 'auto');
+                               }
+                       },
+                       /**
+                        * Contentcontainer
+                        */
+                       ContentContainer: {
+                               setUrl: function (urlToLoad) {
+                                       TYPO3.Backend.Loader.start();
+                                       $('.t3js-scaffold-content-module-iframe')
+                                               .attr('src', urlToLoad)
+                                               .one('load', function() {
+                                                       TYPO3.Backend.Loader.finish();
+                                               });
+                               },
+                               getUrl: function() {
+                                       return $('.t3js-scaffold-content-navigation-iframe').attr('src');
+                               },
+                               refresh: function() {
+                                       console.log('refresh content');
+                               },
+                               getIdFromUrl: function() {
+                                       if(this.getUrl) {
+                                               return TYPO3.Utility.getParameterFromUrl(this.getUrl, 'id');
+                                       } else {
+                                               return 0;
+                                       }
+                               }
+                       }
+               };
+
+               // start the module menu app
+               TYPO3.Backend.initialize();
+               return TYPO3.Backend;
+       }
+);
+
+
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js
deleted file mode 100644 (file)
index a2557e6..0000000
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-Ext.ns('TYPO3');
-
-TYPO3.backendContentIframePanel = Ext.extend(TYPO3.iframePanel ,{
-       setUrl: function(source) {
-               var card;
-               var wrapper;
-               wrapper = Ext.getCmp('typo3-contentContainerWrapper');
-               this.url = source;
-               if(wrapper) {
-                       card = Ext.getCmp('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
-                       if((card != undefined) && (source.search('extjspaneldummy.html') > -1)) {
-                               wrapper.getLayout().setActiveItem('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
-                               if (typeof wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl === 'function') {
-                                       wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl(source);
-                               }
-                       } else {
-                               wrapper.getLayout().setActiveItem(this.id);
-                               this.body.dom.src = source;
-                               this.startLoader();
-                       }
-               }
-       },
-
-       getUrl: function () {
-               var wrapper;
-               var card;
-               wrapper = Ext.getCmp('typo3-contentContainerWrapper');
-
-               if(wrapper) {
-                       card = wrapper.getLayout().activeItem;
-                       if(card.id == this.id) {
-                               return this.body.dom.src;
-                       } else if(typeof card.getUrl == 'function') {
-                               return card.getUrl();
-                       } else {
-                               return this.url;
-                       }
-               }
-       }
-});
-Ext.reg('backendContentIframePanel', TYPO3.backendContentIframePanel);
\ No newline at end of file
index 75ad1c0..b74bb2c 100644 (file)
@@ -282,9 +282,9 @@ TYPO3.Components.PageTree.Actions = {
                                }
 
                                TYPO3.Components.PageTree.Configuration.temporaryMountPoint = response;
-                               TYPO3.Backend.NavigationContainer.PageTree.addTemporaryMountPointIndicator();
+                               Ext.getCmp('typo3-pagetree-tree').app.addTemporaryMountPointIndicator();
 
-                               var selectedNode = TYPO3.Backend.NavigationContainer.PageTree.getSelected();
+                               var selectedNode = Ext.getCmp('typo3-pagetree-tree').app.getSelected();
                                tree.stateId = 'Pagetree' + TYPO3.Components.PageTree.Configuration.temporaryMountPoint;
                                tree.refreshTree(function() {
                                        var nodeIsSelected = false;
@@ -314,7 +314,7 @@ TYPO3.Components.PageTree.Actions = {
         */
        editPageProperties: function(node) {
                node.select();
-               var returnUrl = TYPO3.Backend.ContentContainer.src;
+               var returnUrl = TYPO3.Backend.ContentContainer.getUrl();
                if (returnUrl.indexOf('returnUrl') !== -1) {
                        returnUrl = TYPO3.Utility.getParameterFromUrl(returnUrl, 'returnUrl');
                } else {
@@ -719,14 +719,6 @@ TYPO3.Components.PageTree.Actions = {
                node.select();
                if (tree.stateHash) {
                        tree.stateHash.lastSelectedNode = node.id;
-               } else {
-                       TYPO3.Components.PageTree.Commands.addRootlineOfNodeToStateHash(
-                               TYPO3.Backend.NavigationContainer.PageTree.mainTree.stateId,
-                               node.attributes.nodeData.id, function(stateHash) {
-                                       TYPO3.Backend.NavigationContainer.PageTree.mainTree.stateHash = stateHash;
-                                       TYPO3.Backend.NavigationContainer.PageTree.mainTree.refreshTree();
-                               }
-                       );
                }
 
                fsMod.recentIds['web'] = node.attributes.nodeData.id;
index 19844e8..bb9970d 100644 (file)
@@ -43,6 +43,13 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
        layout:'fit',
 
        /**
+        * Monitor resize
+        *
+        * @type {Boolean}
+        */
+       monitorResize: true,
+
+       /**
         * Active tree
         *
         * @type {TYPO3.Components.PageTree.Tree}
@@ -85,18 +92,19 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                                stateId: 'Pagetree' + TYPO3.Components.PageTree.Configuration.temporaryMountPoint,
                                stateEvents: [],
                                autoScroll: true,
-                               autoHeight: false,
-                               plugins: new Ext.ux.state.TreePanel(),
+                               autoHeight: true,
+                               autoWidth: true,
+                               plugins: [new Ext.ux.state.TreePanel()],
                                commandProvider: TYPO3.Components.PageTree.Actions,
                                contextMenuProvider: TYPO3.Components.PageTree.ContextMenuDataProvider,
                                treeDataProvider: TYPO3.Components.PageTree.DataProvider,
+                               monitorResize: true,
                                app: this,
                                listeners: {
                                        resize: {
                                                fn: function() {
-                                                       var treeContainer = Ext.getCmp(this.id + '-treeContainer');
-                                                       Ext.getCmp(this.id + '-filteringTree').setSize(treeContainer.getSize());
-                                                       treeContainer.doLayout();
+                                                       this.doLayout(true);
+                                                       TYPO3.Backend.doLayout();
                                                },
                                                scope: this,
                                                buffer: 250
@@ -151,6 +159,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                        this.add({
                                layout: 'border',
                                border: false,
+                               monitorResize: true,
                                items: [
                                        topPanelItems,
                                        {
@@ -158,6 +167,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                                                id: this.id + '-treeContainer',
                                                region: 'center',
                                                layout: 'fit',
+                                               monitorResize: true,
                                                items: [this.mainTree, filteringTree]
                                        },
                                        deletionDropZone
@@ -175,9 +185,6 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                        }
                        this.doLayout();
 
-                       this.ownerCt.on('resize', function() {
-                               this.doLayout();
-                       });
                }, this);
 
                TYPO3.Components.PageTree.App.superclass.initComponent.apply(this, arguments);
@@ -207,7 +214,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                        border: false,
                        id: this.id + '-indicatorBar-temporaryMountPoint',
                        cls: this.id + '-indicatorBar-item',
-
+                       scope: this,
                        listeners: {
                                afterrender: {
                                        fn: function() {
@@ -411,16 +418,19 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
  *
  * @return {TYPO3.Components.PageTree.App}
  */
-TYPO3.ModuleMenu.App.registerNavigationComponent('typo3-pagetree', function() {
-       TYPO3.Backend.NavigationContainer.PageTree = new TYPO3.Components.PageTree.App();
-
-               // compatibility code
-    top.nav = TYPO3.Backend.NavigationContainer.PageTree;
-    top.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
-    top.content.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
-
-       return TYPO3.Backend.NavigationContainer.PageTree;
-});
+require(
+       [
+               'TYPO3/CMS/Backend/modulemenu'
+       ],
+       function () {
+               // extjs loading bugfix
+               window.setTimeout(function() {
+                       TYPO3.ModuleMenu.App.registerNavigationComponent('typo3-pagetree', function () {
+                               return new TYPO3.Components.PageTree.App();
+                       });
+               }, 5000);
+       }
+);
 
 // XTYPE Registration
 Ext.reg('TYPO3.Components.PageTree.App', TYPO3.Components.PageTree.App);
index 1b2c16b..c370693 100644 (file)
@@ -40,7 +40,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
         *
         * @type {Boolean}
         */
-       border: false,
+       border: true,
 
        /**
         * Toolbar Object
@@ -248,14 +248,11 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
 
                        textField.setHideTrigger(false);
                        this.tree.hide();
-                       this.app.ownerCt.getEl().mask('', 'x-mask-loading-message');
-                       this.app.ownerCt.getEl().addClass('t3-mask-loading');
                        this.filteringTree.show().refreshTree(function() {
                                if (selectedNode) {
                                        this.app.select(selectedNode.attributes.nodeData.id, false);
                                }
                                textField.focus();
-                               this.app.ownerCt.getEl().unmask();
                        }, this);
                }
 
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js
deleted file mode 100644 (file)
index fd0c74d..0000000
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-Ext.ns('TYPO3');
-
-       // override splitregion to fit the splitbars in our design
-Ext.override(Ext.layout.BorderLayout.SplitRegion, {
-       render : function(ct, p) {
-               Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
-
-               var ps = this.position;
-
-               this.splitEl = ct.createChild({
-                       cls: "x-layout-split x-layout-split-" + ps, html: " ",
-                       id: this.panel.id + '-xsplit'
-               });
-
-               if (this.enableChildSplit) {
-                       this.splitChildEl = this.splitEl.createChild({
-                               cls: 'x-layout-mini-wrapper'
-                       });
-
-               }
-               if (this.collapseMode == 'mini') {
-                       this.miniSplitEl = this.splitEl.createChild({
-                               cls: "x-layout-mini x-layout-mini-" + ps, html: " "
-                       });
-                       this.miniSplitEl.addClassOnOver('x-layout-mini-over');
-                       this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
-                       this.miniSplitEl.dom.title = this.collapsible ? this.collapsibleSplitClickTip : this.splitTip;
-               }
-
-               var s = this.splitSettings[ps];
-
-               if (this.enableChildSplit) {
-                       this.split = new Ext.SplitBar(this.splitChildEl.dom, p.el, s.orientation);
-               } else {
-                       this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
-               }
-               this.split.tickSize = this.tickSize;
-               this.split.placement = s.placement;
-               this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
-               this.split.minSize = this.minSize || this[s.minProp];
-               this.split.on("beforeapply", this.onSplitMove, this);
-               this.split.useShim = this.useShim === true;
-               this.maxSize = this.maxSize || this[s.maxProp];
-
-               if (p.hidden) {
-                       this.splitEl.hide();
-               }
-
-               if (this.useSplitTips) {
-                       this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
-               }
-               if (this.collapsible) {
-                       this.splitEl.on("dblclick", this.onCollapseClick, this);
-               }
-       }
-});
-/**
- * Extends the viewport with some functionality for TYPO3.
- */
-TYPO3.Viewport = Ext.extend(Ext.Viewport, {
-       /**
-        * Contains the navigation widgets in a simple array and identified by an unique idea
-        *
-        * @see registerNavigationWidget()
-        * @var object
-        */
-       navigationWidgetContainer: {},
-
-       /**
-        * Contains the meta informations of the navigation widgets
-        *
-        * @see registerNavigationWidget()
-        * @var object
-        */
-       navigationWidgetMetaData: {},
-
-       /**
-        * The topbar area
-        *
-        * @var Ext.Panel
-        */
-       Topbar: null,
-
-       /**
-        * The content area
-        *
-        * @var Ext.Panel
-        */
-       ContentContainer: null,
-
-       /**
-        * The navigation frame area
-        *
-        * @var Ext.Panel
-        */
-       NavigationContainer: null,
-
-       /**
-        * The iframe navigation component
-        *
-        * @var TYPO3.iframePanel
-        */
-       NavigationIframe: null,
-
-       /**
-        * The module menu area
-        *
-        * @var Ext.Panel
-        */
-       ModuleMenuContainer: null,
-
-       /**
-        * Initializes the ExtJS viewport with the given configuration.
-        *
-        * @return void
-        */
-       initComponent: function() {
-               // adjust the module menu and the height of the topbar
-               this.initialConfig.items[0].height = TYPO3.configuration.topBarHeight;
-
-               var moduleMenu = this.initialConfig.items[1];
-               moduleMenu.width = TYPO3.configuration.moduleMenuWidth;
-
-               // call parent constructor
-               TYPO3.Viewport.superclass.initComponent.apply(this, arguments);
-
-               this.ContentContainer = Ext.getCmp('typo3-contentContainer');
-               this.NavigationContainer = Ext.getCmp('typo3-navigationContainer');
-               this.NavigationIframe = Ext.getCmp('typo3-navigationIframe');
-               this.Topbar = Ext.getCmp('typo3-topbar');
-               this.ModuleMenuContainer = Ext.getCmp('typo3-module-menu');
-       }
-});
-
-Ext.reg('typo3Viewport', TYPO3.Viewport);
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js
deleted file mode 100644 (file)
index 9c85edf..0000000
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-Ext.ns('TYPO3');
-
-/**
- * The Cards Configuration for the BE Module Cards
- *
- * New items need to be appended here
- * cards id needs to be prepended with typo3-card- the rest of the id is the
- * be module name as passed it is normally in TYPO3
- * Cards shouldn't be simple iframes for performance reasons
- */
-
-TYPO3.Viewport.ContentCards = {
-               // Add a card to either the config or if already rendered to the wrapper
-       addContentCard: function(name,config) {
-               config.id = 'typo3-card-' + name;
-               if (Ext.ready) {
-                       Ext.getCmp('typo3-contentContainerWrapper').add(config);
-               } else {
-                       this.cards.push(config);
-               }
-       },
-       cards: [
-                       // add the old card to be compatible
-               {
-                       id: 'typo3-contentContainer',
-                       border: false,
-                       xtype: 'backendContentIframePanel',
-                       name: 'content'
-               }
-       ]
-};
-
-/**
- * The backend viewport configuration
- */
-TYPO3.Viewport.configuration = {
-       layout: 'border',
-       id: 'typo3-viewport',
-       renderTo: Ext.getBody(),
-       border: false,
-       items: [
-               {
-                       layout: 'absolute',
-                       region: 'north',
-                       id: 'typo3-topbar',
-                       height: 45,
-                       contentEl: 'typo3-top-container',
-                       border: false
-               },
-               {
-                       layout: 'fit',
-                       region: 'west',
-                       id: 'typo3-module-menu',
-                       contentEl: 'typo3-menu',
-                       collapsible: false,
-                       collapseMode: null,
-                       floatable: true,
-                       minWidth: 50,
-                       maxWidth: 250,
-                       hideCollapseTool: true,
-                       split: true,
-                       useSplitTips: true,
-                       splitTip: top.TYPO3.LLL.viewPort.tooltipModuleMenuSplit,
-                       enableChildSplit: true,
-                       border: false,
-                       autoScroll: true,
-                       listeners: {
-                               resize: function(cmp, adjWidth, adjHeight, rawWidth, rawHeight) {
-                                       var containerWidth = adjWidth,
-                                               moduleMenuWidth = document.getElementById('typo3-menu').clientWidth,
-                                               moduleMenuMinWidth = 100,
-                                               moduleMenuSnappedWidth = 50,
-                                               moduleMenuSnappingClass = 'typo3-module-menu-snapped',
-                                               forceSnapMode = (containerWidth <= moduleMenuMinWidth);
-                                       if (forceSnapMode){
-                                               cmp.addClass(moduleMenuSnappingClass);
-                                               snappedWidth =  moduleMenuSnappedWidth + containerWidth - moduleMenuWidth;
-                                               cmp.setWidth(snappedWidth);
-                                               if(snappedWidth !== containerWidth && TYPO3.Backend){
-                                                       TYPO3.Backend.syncSize();
-                                               }
-                                       } else{
-                                               this.removeClass(moduleMenuSnappingClass);
-                                       }
-                               }
-                       }
-               },
-               {
-                       region: 'center',
-                       layout: 'border',
-                       border: false,
-                       items: [
-                               {
-                                       region: 'west',
-                                       layout: 'fit',
-                                       id: 'typo3-navigationContainer',
-                                       width: 300,
-                                       minWidth: 250,
-                                       maxWidth: 500,
-                                       floatable: true,
-                                       animCollapse: false,
-                                       split: true,
-                                       enableChildSplit: true,
-                                       collapsible: true,
-                                       collapseMode: 'mini',
-                                       useSplitTips: true,
-                                       collapsibleSplitTip: top.TYPO3.LLL.viewPort.tooltipNavigationContainerSplitDrag,
-                                       collapsibleSplitClickTip: top.TYPO3.LLL.viewPort.tooltipNavigationContainerSplitClick,
-                                       hideCollapseTool: true,
-                                       hidden: true,
-                                       border: false,
-                                       name: 'navigation',
-                                       autoScroll: true,
-                                       items: [
-                                               {
-                                                       id: 'typo3-navigationIframe',
-                                                       border: false,
-                                                       hidden: true,
-                                                       xtype: 'iframePanel',
-                                                       name: 'navigation'
-                                               }
-                                       ]
-                               },
-                               {
-                                       id: 'typo3-contentContainerWrapper',
-                                       name: 'content',
-                                       border: false,
-                                       xtype: 'panel',
-                                       region: 'center',
-                                       layout: 'card',
-                                       items: TYPO3.Viewport.ContentCards.cards
-                               }
-                       ]
-               }
-       ]
-};
index 5a9a250..4fe35b5 100644 (file)
@@ -86,7 +86,7 @@ TYPO3.iframePanel = Ext.extend(Ext.Panel, {
        startLoader: function() {
                if (this.showLoadingIndicator) {
                        require(['nprogress'], function(NProgress) {
-                               NProgress.configure({parent: '#typo3-contentContainer', showSpinner: false});
+                               NProgress.configure({parent: '.t3js-scaffold-content-module', showSpinner: false});
                                NProgress.start();
                        });
                }
index c01a76c..96e078d 100644 (file)
 /**
  * Class to render the module menu and handle the BE navigation
  */
-
-
-Ext.ns('TYPO3', 'ModuleMenu');
-
-TYPO3.ModuleMenu = {};
-
-TYPO3.ModuleMenu.App = {
-       loadedModule: null,
-       loadedNavigationComponentId: '',
-       availableNavigationComponents: {},
-
-       initialize: function() {
-               var me = this;
-
-               // load the start module
-               if (top.startInModule && top.startInModule[0] && TYPO3.jQuery('#' + top.startInModule[0]).length > 0) {
-                       me.showModule(top.startInModule[0], top.startInModule[1]);
-               } else {
-                       // fetch first module
-                       me.showModule(TYPO3.jQuery('.t3js-mainmodule:first').attr('id'));
+require(
+       [
+               'jquery',
+               'TYPO3/CMS/Backend/Icons',
+               'TYPO3/CMS/Backend/Viewport'
+       ],
+       function ($, Icons) {
+               if (typeof TYPO3.ModuleMenu !== 'undefined') {
+                       return TYPO3.ModuleMenu.App;
                }
+               TYPO3.ModuleMenu = {};
+               TYPO3.ModuleMenu.App = {
+                       loadedModule: null,
+                       loadedNavigationComponentId: '',
+                       availableNavigationComponents: {},
+
+                       initialize: function () {
+                               var me = this;
+
+                               // load the start module
+                               if (top.startInModule && top.startInModule[0] && $('#' + top.startInModule[0]).length > 0) {
+                                       me.showModule(top.startInModule[0], top.startInModule[1]);
+                               } else {
+                                       // fetch first module
+                                       me.showModule($('.t3js-mainmodule:first').attr('id'));
+                               }
 
-               // check if there are collapsed items in the users' configuration
-               require(['TYPO3/CMS/Backend/Storage'], function() {
-                       var collapsedMainMenuItems = me.getCollapsedMainMenuItems();
-                       TYPO3.jQuery.each(collapsedMainMenuItems, function(key, itm) {
-                               if (itm !== true) {
-                                       return;
+                               // check if module menu should be collapsed or not
+                               var state = Ext.state.Manager.getProvider().get('typo3-module-menu');
+                               if (state && state.collapsed) {
+                                       TYPO3.ModuleMenu.App.toggleMenu(state.collapsed);
                                }
-                               var $group = TYPO3.jQuery('#' + key);
-                               if ($group.length > 0) {
-                                       var $groupContainer = $group.find('.typo3-module-menu-group-container');
-                                       $group.addClass('collapsed').removeClass('expanded');
-                                       $groupContainer.hide().promise().done(function() {
-                                               TYPO3.Backend.doLayout();
+
+                               // check if there are collapsed items in the users' configuration
+                               require(['TYPO3/CMS/Backend/Storage'], function () {
+                                       var collapsedMainMenuItems = me.getCollapsedMainMenuItems();
+                                       $.each(collapsedMainMenuItems, function (key, itm) {
+                                               if (itm !== true) {
+                                                       return;
+                                               }
+                                               var $group = $('#' + key);
+                                               if ($group.length > 0) {
+                                                       var $groupContainer = $group.find('.modulemenu-group-container');
+                                                       $group.addClass('collapsed').removeClass('expanded');
+                                                       TYPO3.Backend.NavigationContainer.cleanup();
+                                                       $groupContainer.hide().promise().done(function () {
+                                                               TYPO3.Backend.doLayout();
+                                                       });
+                                               }
                                        });
-                               }
-                       });
-                       me.initializeEvents();
-               });
-       },
-
-       initializeEvents: function() {
-               var me = this;
-               TYPO3.jQuery(document).on('click', '.typo3-module-menu-group .typo3-module-menu-group-header', function() {
-                       var $group = TYPO3.jQuery(this).parent('.typo3-module-menu-group');
-                       var $groupContainer = $group.find('.typo3-module-menu-group-container');
-                       if ($group.hasClass('expanded')) {
-                               me.addCollapsedMainMenuItem($group.attr('id'));
-                               $group.addClass('collapsed').removeClass('expanded');
-                               $groupContainer.stop().slideUp().promise().done(function() {
-                                       TYPO3.Backend.doLayout();
+                                       me.initializeEvents();
                                });
-                       } else {
-                               me.removeCollapseMainMenuItem($group.attr('id'));
-                               $group.addClass('expanded').removeClass('collapsed');
-                               $groupContainer.stop().slideDown().promise().done(function() {
+                       },
+
+                       initializeEvents: function () {
+                               var me = this;
+                               $(document).on('click', '.modulemenu-group .modulemenu-group-header', function () {
+                                       var $group = $(this).parent('.modulemenu-group');
+                                       var $groupContainer = $group.find('.modulemenu-group-container');
+
+                                       TYPO3.Backend.NavigationContainer.cleanup();
+                                       if ($group.hasClass('expanded')) {
+                                               me.addCollapsedMainMenuItem($group.attr('id'));
+                                               $group.addClass('collapsed').removeClass('expanded');
+                                               $groupContainer.stop().slideUp().promise().done(function () {
+                                                       TYPO3.Backend.doLayout();
+                                               });
+                                       } else {
+                                               me.removeCollapseMainMenuItem($group.attr('id'));
+                                               $group.addClass('expanded').removeClass('collapsed');
+                                               $groupContainer.stop().slideDown().promise().done(function () {
+                                                       TYPO3.Backend.doLayout();
+                                               });
+                                       }
+
+                               });
+                               // register clicking on sub modules
+                               $(document).on('click', '.modulemenu-item,.t3-menuitem-submodule', function (evt) {
+                                       evt.preventDefault();
+                                       me.showModule($(this).attr('id'));
                                        TYPO3.Backend.doLayout();
                                });
-                       }
-               });
-               // register clicking on sub modules
-               TYPO3.jQuery(document).on('click', '.typo3-module-menu-item,.t3-menuitem-submodule', function(evt) {
-                       evt.preventDefault();
-                       me.showModule(TYPO3.jQuery(this).attr('id'));
-               });
-       },
-
-       /* fetch the data for a submodule */
-       getRecordFromName: function(name) {
-               var $subModuleElement = TYPO3.jQuery('#' + name);
-               return {
-                       name: name,
-                       navigationComponentId: $subModuleElement.data('navigationcomponentid'),
-                       navigationFrameScript: $subModuleElement.data('navigationframescript'),
-                       navigationFrameScriptParam: $subModuleElement.data('navigationframescriptparameters'),
-                       link: $subModuleElement.find('a').attr('href')
-               };
-       },
-
-       showModule: function(mod, params) {
-               params = params || '';
-               params = this.includeId(mod, params);
-               var record = this.getRecordFromName(mod);
-               this.loadModuleComponents(record, params);
-       },
-
-       loadModuleComponents: function(record, params) {
-               var mod = record.name;
-               if (record.navigationComponentId) {
-                       this.loadNavigationComponent(record.navigationComponentId);
-                       TYPO3.Backend.NavigationIframe.getEl().parent().setStyle('overflow', 'auto');
-               } else if (record.navigationFrameScript) {
-                       TYPO3.Backend.NavigationContainer.show();
-                       this.loadNavigationComponent('typo3-navigationIframe');
-                       this.openInNavFrame(record.navigationFrameScript, record.navigationFrameScriptParam);
-                       TYPO3.Backend.NavigationIframe.getEl().parent().setStyle('overflow', 'hidden');
-               } else {
-                       TYPO3.Backend.NavigationContainer.hide();
-               }
-
-               this.highlightModuleMenuItem(mod);
-               this.loadedModule = mod;
-               this.openInContentFrame(record.link, params);
-
-               // compatibility
-               top.currentSubScript = record.link;
-               top.currentModuleLoaded = mod;
-
-               TYPO3.Backend.doLayout();
-       },
-
-       includeId: function(mod, params) {
-                       //get id
-               var section = mod.split('_')[0];
-               if (top.fsMod.recentIds[section]) {
-                       params = 'id=' + top.fsMod.recentIds[section] + '&' + params;
-               }
-
-               return params;
-       },
-
-       loadNavigationComponent: function(navigationComponentId) {
-               if (navigationComponentId === this.loadedNavigationComponentId) {
-                       if (TYPO3.Backend.NavigationContainer.hidden) {
-                               TYPO3.Backend.NavigationContainer.show();
-                       }
-
-                       return;
-               }
-
-               if (this.loadedNavigationComponentId !== '') {
-                       Ext.getCmp(this.loadedNavigationComponentId).hide();
-               }
+                               $(document).on('click', '.t3js-topbar-button-modulemenu',
+                                       function (evt) {
+                                               evt.preventDefault();
+                                               TYPO3.ModuleMenu.App.toggleMenu();
+                                       }
+                               );
+                               $(document).on('click', '.t3js-scaffold-content-overlay',
+                                       function (evt) {
+                                               evt.preventDefault();
+                                               TYPO3.ModuleMenu.App.toggleMenu(true);
+                                       }
+                               );
+                               $(document).on('click', '.t3js-topbar-button-navigationcomponent',
+                                       function (evt) {
+                                               evt.preventDefault();
+                                               TYPO3.Backend.NavigationContainer.toggle();
+                                       }
+                               );
+
+                       },
+                       toggleMenu: function (collapse) {
+                               TYPO3.Backend.NavigationContainer.cleanup();
+
+                               var $mainContainer = $('.t3js-scaffold');
+                               var expandedClass = 'scaffold-modulemenu-expanded';
+
+                               if (typeof collapse === 'undefined') {
+                                       collapse = $mainContainer.hasClass(expandedClass);
+                               }
+                               if (collapse) {
+                                       $mainContainer.removeClass(expandedClass);
+                               } else {
+                                       $mainContainer.addClass(expandedClass);
+                                       $('.scaffold').removeClass('scaffold-search-expanded');
+                                       $('.scaffold').removeClass('scaffold-toolbar-expanded');
+                               }
 
-               var component = Ext.getCmp(navigationComponentId);
-               if (typeof component !== 'object') {
-                       if (typeof this.availableNavigationComponents[navigationComponentId] !== 'function') {
-                               throw 'The navigation component "' + navigationComponentId + '" is not available ' +
-                                       'or has no valid callback function';
-                       }
+                               // @todo remove once we have a new state manager
+                               Ext.state.Manager.set(
+                                       'typo3-module-menu',
+                                       {
+                                               collapsed: collapse
+                                       }
+                               );
+
+                               TYPO3.Backend.doLayout();
+                       },
+
+                       /* fetch the data for a submodule */
+                       getRecordFromName: function (name) {
+                               var $subModuleElement = $('#' + name);
+                               return {
+                                       name: name,
+                                       navigationComponentId: $subModuleElement.data('navigationcomponentid'),
+                                       navigationFrameScript: $subModuleElement.data('navigationframescript'),
+                                       navigationFrameScriptParam: $subModuleElement.data('navigationframescriptparameters'),
+                                       link: $subModuleElement.find('a').attr('href')
+                               };
+                       },
+
+                       showModule: function (mod, params) {
+                               params = params || '';
+                               params = this.includeId(mod, params);
+                               var record = this.getRecordFromName(mod);
+                               this.loadModuleComponents(record, params);
+                       },
+
+                       loadModuleComponents: function (record, params) {
+                               var mod = record.name;
+                               if (record.navigationComponentId) {
+                                       this.loadNavigationComponent(record.navigationComponentId);
+                               } else if (record.navigationFrameScript) {
+                                       TYPO3.Backend.NavigationContainer.show('typo3-navigationIframe');
+                                       this.openInNavFrame(record.navigationFrameScript, record.navigationFrameScriptParam);
+                               } else {
+                                       TYPO3.Backend.NavigationContainer.hide();
+                               }
 
-                       component = this.availableNavigationComponents[navigationComponentId]();
-                       TYPO3.Backend.NavigationContainer.add(component);
-               }
+                               this.highlightModuleMenuItem(mod);
+                               this.loadedModule = mod;
+                               this.openInContentFrame(record.link, params);
 
-               component.show()
+                               // compatibility
+                               top.currentSubScript = record.link;
+                               top.currentModuleLoaded = mod;
 
-                       // backwards compatibility
-               top.nav = component;
+                               TYPO3.Backend.doLayout();
+                       },
 
-               TYPO3.Backend.NavigationContainer.show();
-               this.loadedNavigationComponentId = navigationComponentId;
-       },
+                       includeId: function (mod, params) {
+                               if (typeof mod === 'undefined') {
+                                       return params;
+                               }
+                               //get id
+                               var section = mod.split('_')[0];
+                               if (top.fsMod.recentIds[section]) {
+                                       params = 'id=' + top.fsMod.recentIds[section] + '&' + params;
+                               }
 
-       registerNavigationComponent: function(componentId, initCallback) {
-               this.availableNavigationComponents[componentId] = initCallback;
-       },
+                               return params;
+                       },
 
-       openInNavFrame: function(url, params) {
-               var navUrl = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
-               var currentUrl = this.relativeUrl(TYPO3.Backend.NavigationIframe.getUrl());
-               if (currentUrl !== navUrl) {
-                       TYPO3.Backend.NavigationIframe.setUrl(navUrl);
-               }
-       },
-
-       openInContentFrame: function(url, params) {
-               if (top.nextLoadModuleUrl) {
-                       TYPO3.Backend.ContentContainer.setUrl(top.nextLoadModuleUrl);
-                       top.nextLoadModuleUrl = '';
-               } else {
-                       var urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '')
-                       TYPO3.Backend.ContentContainer.setUrl(urlToLoad);
-               }
-       },
-
-       highlightModuleMenuItem: function(module, mainModule) {
-               TYPO3.jQuery('.typo3-module-menu-item.active').removeClass('active');
-               TYPO3.jQuery('#' + module).addClass('active');
-       },
-
-       relativeUrl: function(url) {
-               return url.replace(TYPO3.configuration.siteUrl + 'typo3/', '');
-       },
-
-               // refresh the HTML by fetching the menu again
-       refreshMenu: function() {
-               TYPO3.jQuery.ajax(TYPO3.settings.ajaxUrls['modulemenu']).done(function(result) {
-                       TYPO3.jQuery('#typo3-menu').replaceWith(result.menu);
-                       if (top.currentModuleLoaded) {
-                               TYPO3.ModuleMenu.App.highlightModuleMenuItem(top.currentModuleLoaded);
+                       loadNavigationComponent: function (navigationComponentId) {
+                               TYPO3.Backend.NavigationContainer.show(navigationComponentId);
+                               if (navigationComponentId === this.loadedNavigationComponentId) {
+                                       return;
+                               }
+                               if (this.loadedNavigationComponentId !== '') {
+                                       Ext.getCmp(this.loadedNavigationComponentId).hide();
+                               }
+                               if ($('.t3js-scaffold-content-navigation [data-component="' + navigationComponentId + '"]').length < 1) {
+                                       $('.t3js-scaffold-content-navigation')
+                                               .append('<div class="scaffold-content-navigation-component" data-component="' + navigationComponentId + '" id="navigationComponent-' + navigationComponentId + '"></div>');
+                               }
+                               var component = Ext.getCmp(navigationComponentId);
+                               if (typeof component === 'undefined') {
+                                       /** @todo fix hard coded pagetree **/
+                                       component = new TYPO3.Components.PageTree.App();
+                                       component.render('navigationComponent-' + navigationComponentId);
+                               }
+                               TYPO3.Backend.NavigationContainer.show(navigationComponentId);
+                               this.loadedNavigationComponentId = navigationComponentId;
+                       },
+
+                       registerNavigationComponent: function (componentId, initCallback) {
+                               this.availableNavigationComponents[componentId] = initCallback;
+                       },
+
+                       openInNavFrame: function (url, params) {
+                               var navUrl = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+                               var currentUrl = this.relativeUrl(TYPO3.Backend.NavigationContainer.getUrl());
+                               if (currentUrl !== navUrl) {
+                                       TYPO3.Backend.NavigationContainer.refresh();
+                               }
+                               TYPO3.Backend.NavigationContainer.setUrl(url);
+                       },
+
+                       openInContentFrame: function (url, params) {
+                               if (top.nextLoadModuleUrl) {
+                                       TYPO3.Backend.ContentContainer.setUrl(top.nextLoadModuleUrl);
+                                       top.nextLoadModuleUrl = '';
+                               } else {
+                                       var urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+                                       TYPO3.Backend.ContentContainer.setUrl(urlToLoad);
+                               }
+                       },
+
+                       highlightModuleMenuItem: function (module, mainModule) {
+                               $('.modulemenu-item.active').removeClass('active');
+                               $('#' + module).addClass('active');
+                       },
+
+                       relativeUrl: function (url) {
+                               if (url) {
+                                       return url.replace(TYPO3.configuration.siteUrl + 'typo3/', '');
+                               } else {
+                                       return '';
+                               }
+                       },
+
+                       // refresh the HTML by fetching the menu again
+                       refreshMenu: function () {
+                               $.ajax(TYPO3.settings.ajaxUrls['modulemenu']).done(function (result) {
+                                       $('#typo3-menu').replaceWith(result.menu);
+                                       if (top.currentModuleLoaded) {
+                                               TYPO3.ModuleMenu.App.highlightModuleMenuItem(top.currentModuleLoaded);
+                                       }
+                                       TYPO3.Backend.doLayout();
+                               });
+                       },
+
+                       reloadFrames: function () {
+                               TYPO3.Backend.NavigationContainer.refresh();
+                               TYPO3.Backend.ContentContainer.refresh();
+                       },
+
+                       /**
+                        * fetches all module menu elements in the local storage that should be collapsed
+                        * @returns {*}
+                        */
+                       getCollapsedMainMenuItems: function () {
+                               if (TYPO3.Storage.Persistent.isset('modulemenu')) {
+                                       return JSON.parse(TYPO3.Storage.Persistent.get('modulemenu'));
+                               } else {
+                                       return {};
+                               }
+                       },
+
+                       /**
+                        * adds a module menu item to the local storage
+                        * @param item
+                        */
+                       addCollapsedMainMenuItem: function (item) {
+                               var existingItems = this.getCollapsedMainMenuItems();
+                               existingItems[item] = true;
+                               TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
+                       },
+
+                       /**
+                        * removes a module menu item from the local storage
+                        * @param item
+                        */
+                       removeCollapseMainMenuItem: function (item) {
+                               var existingItems = this.getCollapsedMainMenuItems();
+                               delete existingItems[item];
+                               TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
                        }
-                       TYPO3.Backend.doLayout();
-               });
-       },
-
-       reloadFrames: function() {
-               TYPO3.Backend.NavigationIframe.refresh();
-               TYPO3.Backend.ContentContainer.refresh();
-       },
-
-       /**
-        * fetches all module menu elements in the local storage that should be collapsed
-        * @returns {*}
-        */
-       getCollapsedMainMenuItems: function() {
-               if (TYPO3.Storage.Persistent.isset('modulemenu')) {
-                       return JSON.parse(TYPO3.Storage.Persistent.get('modulemenu'));
-               } else {
-                       return {};
-               }
-       },
-
-       /**
-        * adds a module menu item to the local storage
-        * @param item
-        */
-       addCollapsedMainMenuItem: function(item) {
-               var existingItems = this.getCollapsedMainMenuItems();
-               existingItems[item] = true;
-               TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
-       },
-
-       /**
-        * removes a module menu item from the local storage
-        * @param item
-        */
-       removeCollapseMainMenuItem: function(item) {
-               var existingItems = this.getCollapsedMainMenuItems();
-               delete existingItems[item];
-               TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
-       }
-
-};
-
-
 
-Ext.onReady(function() {
-       TYPO3.ModuleMenu.App.initialize();
-
-               // keep backward compatibility
-       top.list = TYPO3.Backend.ContentContainer;
-       top.list_frame = top.list.getIframe();
-       top.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
-
-       // not in use anymore
-       top.TYPO3ModuleMenu = TYPO3.ModuleMenu.App;
-       top.content = {
-               nav_frame: TYPO3.Backend.NavigationContainer.PageTree,
-               list_frame: TYPO3.Backend.ContentContainer.getIframe(),
-               location: TYPO3.Backend.ContentContainer.getIframe().location,
-               document: TYPO3.Backend.ContentContainer.getIframe()
+               };
+               // start the module menu app
+               TYPO3.ModuleMenu.App.initialize();
+               return TYPO3.ModuleMenu;
        }
-});
-
-
-/*******************************************************************************
-*
-* Backwards compatibility handling down here
-*
-******************************************************************************/
-
-/**
-* Highlight module:
-*/
-var currentlyHighLightedId = '';
-var currentlyHighLighted_restoreValue = '';
-var currentlyHighLightedMain = '';
-function highlightModuleMenuItem(trId, mainModule) {
-       TYPO3.ModuleMenu.App.highlightModule(trId, mainModule);
-}
+);
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst b/typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst
new file mode 100644 (file)
index 0000000..6a639fc
--- /dev/null
@@ -0,0 +1,34 @@
+.. include:: ../../Includes.txt
+
+========================================
+Breaking: #52877 - Remove ExtJS Viewport
+========================================
+
+See :forge:`52877`
+
+Description
+===========
+
+The ExtJS component `TYPO3.Viewport` has been removed from the TYPO3 Core, `Ext.layout` and `Ext.Viewport` are no longer
+used in the backend viewport.
+
+
+Impact
+======
+
+- Calling the removed ExtJS components `TYPO3.Viewport` or `TYPO3.backendContentIframePanel` will result in an error
+- The ability to stack content with cards with `TYPO3.Viewport.ContentCards` is no longer supported
+
+
+Affected Installations
+======================
+
+Any TYPO3 installations using custom extensions based on ExtJS which rely on the above mentioned components.
+
+
+Migration
+=========
+
+There is no migration available.
+
+.. index:: Backend, JavaScript
index 4a38aa1..f359591 100644 (file)
@@ -24,7 +24,7 @@ class Topbar
      *
      * @var string
      */
-    public static $containerSelector = '#typo3-top-container';
+    public static $containerSelector = '.t3js-scaffold-topbar';
 
     /**
      * Selector for the dropdown container
index a5c172c..52866a9 100644 (file)
@@ -2752,7 +2752,8 @@ ul ol,
 ol ol {
   margin-bottom: 0;
 }
-.list-unstyled {
+.list-unstyled,
+.modulemenu .modulemenu-group-container {
   padding-left: 0;
   list-style: none;
 }
@@ -4834,7 +4835,7 @@ tbody.collapse.in {
   list-style: none;
   font-size: 12px;
   text-align: left;
-  background-color: #fff;
+  background-color: #424242;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 2px;
@@ -4849,7 +4850,7 @@ tbody.collapse.in {
   height: 1px;
   margin: 8px 0;
   overflow: hidden;
-  background-color: #e5e5e5;
+  background-color: #525252;
 }
 .dropdown-menu > li > a {
   display: block;
@@ -4857,14 +4858,14 @@ tbody.collapse.in {
   clear: both;
   font-weight: normal;
   line-height: 1.5;
-  color: #5a5a5a;
+  color: #fff;
   white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #4d4d4d;
-  background-color: #f5f5f5;
+  color: #fff;
+  background-color: #525252;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
@@ -4872,7 +4873,7 @@ tbody.collapse.in {
   color: #fff;
   text-decoration: none;
   outline: 0;
-  background-color: #0078e6;
+  background-color: #525252;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -7065,6 +7066,589 @@ button.close {
     bottom: 20px;
   }
 }
+html {
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  height: 100%;
+  overflow: auto;
+}
+.scaffold {
+  background-color: #f5f5f5;
+  color: #333333;
+  position: relative;
+  padding-top: 45px;
+  height: 100vh;
+}
+.scaffold-topbar {
+  background-color: #1f1f1e;
+  color: #f5f5f5;
+  height: 45px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.scaffold-modulemenu {
+  background-color: #424242;
+  color: #fff;
+  position: fixed;
+  top: 45px;
+  left: 0;
+  bottom: 0;
+  width: 40px;
+  max-width: 100%;
+  z-index: 1000;
+  overflow: hidden;
+}
+.scaffold-modulemenu a {
+  color: rgba(255, 255, 255, 0.7);
+}
+.scaffold-modulemenu a:hover {
+  color: #fff;
+}
+.scaffold-modulemenu .active > a {
+  color: #fff;
+}
+.scaffold-toolbar {
+  overflow: auto;
+  background-color: #424242;
+  color: #fff;
+  z-index: 1000;
+  position: fixed;
+  top: 45px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
+}
+.scaffold-toolbar a {
+  color: rgba(255, 255, 255, 0.7);
+}
+.scaffold-toolbar a:hover {
+  color: #fff;
+}
+.scaffold-toolbar .active > a {
+  color: #fff;
+}
+@media (min-width: 992px) {
+  .scaffold-toolbar {
+    overflow: visible;
+    background-color: transparent;
+    height: 45px;
+    top: 0;
+    left: auto;
+    bottom: auto;
+    display: block;
+  }
+}
+@media (max-width: 991px) {
+  .scaffold-toolbar-expanded .scaffold-toolbar,
+  .scaffold-search-expanded .scaffold-toolbar {
+    display: block;
+  }
+}
+.scaffold-content {
+  position: fixed!important;
+  top: 45px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+@media (max-width: 991px) {
+  .scaffold-content {
+    left: 0!important;
+  }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+  display: block;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+.scaffold-content-navigation {
+  display: none;
+  position: absolute!important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+}
+.scaffold-content-navigation-component {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.scaffold-content-navigation-component #typo3-pagetree-treeContainer > div > .x-panel-body {
+  overflow: auto;
+}
+.scaffold-content-module {
+  position: absolute!important;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+@media (max-width: 767px) {
+  .scaffold-content-module {
+    width: 100%;
+  }
+}
+.scaffold-content-overlay {
+  display: none;
+  position: absolute;
+  z-index: 1040;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+.scaffold-modulemenu-expanded .scaffold-content-overlay {
+  display: block;
+}
+@media (min-width: 992px) {
+  .scaffold-modulemenu-expanded .scaffold-content-overlay {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  .scaffold {
+    padding-left: 40px;
+  }
+}
+.scaffold .scaffold-modulemenu {
+  width: 40px;
+}
+@media (max-width: 991px) {
+  .scaffold .scaffold-modulemenu {
+    display: none;
+  }
+}
+.scaffold-modulemenu-expanded {
+  display: block;
+  padding-left: 230px;
+}
+.scaffold-modulemenu-expanded .scaffold-modulemenu {
+  width: 230px;
+}
+@media (max-width: 991px) {
+  .scaffold-modulemenu-expanded .scaffold-modulemenu {
+    display: block;
+  }
+}
+.scaffold-modulemenu-expanded .scaffold-content {
+  transform: translate(230px, 0);
+}
+.scaffold-content-navigation-expanded .scaffold-content-navigation {
+  display: block;
+}
+.scaffold-content-navigation-expanded .scaffold-content-module {
+  left: 300px;
+}
+@media (min-width: 992px) {
+  .scaffold .scaffold-content {
+    left: 40px;
+  }
+  .scaffold-modulemenu-expanded .scaffold-content {
+    left: 230px;
+    transform: none;
+  }
+}
+.topbar {
+  background-color: inherit;
+  position: relative;
+  height: 45px;
+}
+.topbar a {
+  color: inherit;
+  text-decoration: none;
+}
+.topbar-button {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  border: 0;
+  background-color: #222;
+  height: 45px;
+  width: 40px;
+}
+.topbar-button:hover {
+  background-color: #2a2a2a;
+}
+.topbar-button.topbar-button-modulemenu {
+  left: 0;
+}
+@media (min-width: 992px) {
+  .topbar-button.topbar-button-modulemenu {
+    background-color: #424242;
+  }
+}
+.topbar-button.topbar-button-navigationcomponent {
+  left: 40px;
+}
+.topbar-button.topbar-button-toolbar {
+  right: 40px;
+}
+.topbar-button.topbar-button-search {
+  right: 0;
+}
+.scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
+  background-color: #424242;
+}
+.scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
+  background-color: #424242;
+}
+@media (max-width: 991px) {
+  .scaffold-toolbar-expanded .toolbar-item-search {
+    display: none;
+  }
+}
+.scaffold-toolbar-expanded .topbar-button-toolbar {
+  background-color: #424242;
+}
+@media (max-width: 991px) {
+  .scaffold-search-expanded .toolbar-item {
+    display: none;
+  }
+  .scaffold-search-expanded .toolbar-item-search {
+    display: block;
+    width: 100%;
+  }
+}
+.scaffold-search-expanded .topbar-button-search {
+  background-color: #424242;
+}
+.topbar-button-toolbar,
+.topbar-button-search {
+  display: block;
+}
+@media (min-width: 992px) {
+  .topbar-button-toolbar,
+  .topbar-button-search {
+    display: none;
+  }
+}
+.topbar-header {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.topbar-header-site {
+  position: relative;
+  display: block;
+  max-width: 100%;
+  height: 45px;
+  line-height: 45px;
+  padding-left: 1em;
+  padding-right: 1em;
+  white-space: nowrap;
+}
+@media (min-width: 992px) {
+  .topbar-header-site {
+    display: inline-block;
+  }
+}
+.topbar-header-site:before,
+.topbar-header-site:after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1em;
+}
+.topbar-header-site:before {
+  left: 0;
+  background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+}
+.topbar-header-site:after {
+  right: 0;
+  background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
+}
+.typo3-in-workspace .topbar-header-site {
+  background-color: #6d860d;
+}
+.typo3-in-workspace .topbar-header-site:before {
+  background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+}
+.typo3-in-workspace .topbar-header-site:after {
+  background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
+}
+.topbar-header-site-logo {
+  height: 45px;
+  display: none;
+  padding-right: 0.5em;
+}
+@media (min-width: 320px) {
+  .topbar-header-site-logo {
+    display: inline-block;
+  }
+}
+.topbar-header-site-title {
+  line-height: 1.2em;
+  display: inline-block;
+  vertical-align: middle;
+}
+.topbar-header-site-name {
+  display: block;
+}
+.topbar-header-site-version {
+  opacity: 0.5;
+}
+.toolbar {
+  padding: 8px;
+}
+@media (min-width: 992px) {
+  .toolbar {
+    padding: 0;
+  }
+}
+.toolbar:after {
+  clear: both;
+  display: table;
+  content: '';
+}
+.toolbar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.toolbar-item {
+  padding: 4px;
+  position: relative;
+  display: block;
+  float: left;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .toolbar-item {
+    width: 50%;
+  }
+}
+@media (min-width: 750px) {
+  .toolbar-item {
+    width: 33.33%;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item {
+    padding: 0;
+    width: auto;
+    margin-left: 1px;
+  }
+}
+.toolbar-item .dropdown-menu {
+  width: 350px;
+}
+@media (max-width: 991px) {
+  .toolbar-item .dropdown-menu {
+    overflow: auto;
+    padding: 15px;
+    position: fixed;
+    max-height: 90%;
+    max-width: 90%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .toolbar-item .dropdown-backdrop {
+    background: rgba(0, 0, 0, 0.65);
+  }
+}
+.toolbar-item-avatar {
+  width: 32px;
+  display: inline-block;
+}
+.toolbar-item-avatar .avatar {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translate(0, -50%);
+}
+.toolbar-item-badge {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  padding: 3px 4px;
+  border-radius: 0;
+  font-size: 10px;
+  font-weight: normal;
+  min-width: 16px;
+}
+.toolbar-item-link {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  position: relative;
+  display: block;
+  text-decoration: none;
+  padding: 9px 10px;
+  height: 45px;
+  line-height: 27px;
+}
+.toolbar-item-link:hover,
+.toolbar-item-link:focus {
+  text-decoration: none;
+}
+@media (min-width: 992px) {
+  .toolbar-item-link {
+    border: none;
+  }
+}
+.open .toolbar-item-link {
+  background-color: #424242;
+}
+@media (min-width: 992px) {
+  .toolbar-item-title {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item-search {
+    width: 300px;
+  }
+}
+.toolbar-item-search form {
+  padding: 0;
+  margin: 0;
+}
+.toolbar-item-search .toolbar-item-link {
+  padding: 0;
+  margin: 0;
+  height: 0;
+}
+.toolbar-item-search .form-group {
+  margin: 0;
+}
+.toolbar-item-search .close {
+  color: #ffffff;
+  text-shadow: none;
+  opacity: 1;
+}
+@media (max-width: 991px) {
+  .toolbar-item-search .dropdown-menu {
+    top: 114px;
+    left: 14px;
+    right: 14px;
+    width: auto;
+    max-width: none;
+    max-height: none;
+    transform: none;
+    bottom: 14px;
+  }
+}
+@media (min-width: 992px) {
+  .toolbar-item-search .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+}
+.toolbar-item-search .autocomplete-suggestions {
+  position: static!important;
+}
+.toolbar-item-search .autocomplete-suggestion {
+  border: none;
+}
+.toolbar-item-search.open .toolbar-item-search-form {
+  position: relative;
+  z-index: 991;
+}
+.toolbar-item-search-field {
+  color: inherit;
+  background-color: #2f2f2f;
+  margin: 0;
+  border-radius: 0;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  height: 45px;
+  box-shadow: none;
+}
+@media (min-width: 992px) {
+  .toolbar-item-search-field {
+    border: none;
+  }
+}
+.toolbar-item-search-field:hover {
+  background-color: #333;
+}
+.toolbar-item-search-field:focus {
+  box-shadow: none;
+  background-color: #555555;
+}
+.module-wrapper {
+  position: relative;
+}
+.module-wrapper iframe {
+  border: none;
+}
+.modulemenu .modulemenu-group-container {
+  clear: both;
+}
+.modulemenu .modulemenu-group {
+  position: relative;
+  padding: 5px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.modulemenu .modulemenu-group-header,
+.modulemenu .modulemenu-item-link {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  padding: 2px 4px;
+  text-decoration: none;
+}
+.modulemenu .modulemenu-group-header {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-transform: uppercase;
+}
+.modulemenu .modulemenu-item-link:focus,
+.modulemenu .modulemenu-item-link:hover {
+  outline: none;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.modulemenu .modulemenu-item.active .modulemenu-item-link {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.modulemenu .modulemenu-icon {
+  float: left;
+  margin-right: 4px;
+}
+.modulemenu .modulemenu-icon .fa {
+  font-size: 0.5em;
+}
+.modulemenu .modulemenu-group-title,
+.modulemenu .modulemenu-item-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-top: 7px;
+  padding-left: 4px;
+  display: none;
+  overflow: hidden;
+  *zoom: 1;
+}
+.modulemenu .modulemenu-group-title {
+  padding-right: 20px;
+}
+.modulemenu .modulemenu-group-title .caret {
+  transform: rotate(90deg);
+  position: absolute;
+  top: 17px;
+  right: 18px;
+}
+.modulemenu .expanded .modulemenu-group-title .caret {
+  transform: rotate(0deg);
+}
+.scaffold-modulemenu-expanded .modulemenu-group-title,
+.scaffold-modulemenu-expanded .modulemenu-item-title {
+  display: block;
+}
 .autocomplete {
   position: relative;
 }
@@ -7099,6 +7683,122 @@ button.close {
 .autocomplete-info {
   padding: 5px 15px;
 }
+.dropdown-menu {
+  line-height: 1.45em;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+}
+.dropdown-menu a {
+  display: block;
+}
+.dropdown-menu a:hover {
+  text-decoration: none;
+}
+.dropdown-menu hr {
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+  margin: 1.25em -15px;
+}
+.dropdown-menu > *:last-child {
+  margin-bottom: 0;
+}
+.dropdown-menu .form-group {
+  margin-bottom: 0.75em;
+}
+.dropdown-menu .form-control {
+  border-color: #aaaaaa;
+  color: inherit;
+  border-radius: 0;
+  background-color: #333333;
+}
+.dropdown-menu .form-control:focus {
+  box-shadow: none;
+  border-color: #bbbbbb;
+}
+.dropdown-menu .btn {
+  border: none;
+  border-radius: 0;
+  padding: 6px 10px;
+}
+.dropdown-headline {
+  font-size: 1.15em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+.dropdown-text a {
+  display: inline-block;
+}
+div.dropdown-menu {
+  padding: 1.5em;
+}
+.dropdown-list {
+  padding-left: 0;
+  list-style: none;
+}
+.dropdown-list > li {
+  position: relative;
+}
+.dropdown-list > li + li {
+  margin-top: 0.5em;
+}
+.dropdown-list-link {
+  display: block;
+  text-decoration: none;
+}
+.dropdown-list-link:hover,
+.dropdown-list-link:focus {
+  text-decoration: none;
+}
+.dropdown-table {
+  display: table;
+  width: 100%;
+}
+.dropdown-table-row {
+  display: table-row;
+}
+.dropdown-table-column {
+  display: table-cell;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  vertical-align: middle;
+}
+.dropdown-table-column-top {
+  vertical-align: top;
+}
+.dropdown-table-icon {
+  width: 16px;
+  padding-right: 0.5em;
+}
+.dropdown-table-title {
+  white-space: nowrap;
+  padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+  max-width: 230px;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+  white-space: nowrap;
+  text-align: right;
+}
+.dropdown-table-actions-btn {
+  text-align: center;
+  display: inline-block !important;
+  margin-top: -4px;
+  margin-bottom: -4px;
+  padding: 4px;
+  vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+  background-color: #333;
+}
+.dropdown-table-actions-btn-delete:hover {
+  background-color: #c83c3c;
+}
 .avatar {
   position: relative;
   display: inline-block;
@@ -7135,17 +7835,6 @@ button.close {
   height: 16px;
   width: 16px;
 }
-.dropdown-toggle > .avatar {
-  height: 28px;
-  width: 28px;
-  float: left;
-  margin-right: 0.5em;
-  margin-top: -5px;
-}
-.dropdown-toggle .avatar-image {
-  height: 28px;
-  width: 28px;
-}
 .callout {
   background-color: #f0f0f0;
   border-left: 3px solid #ccc;
@@ -7492,6 +8181,7 @@ button.close {
 }
 .module-body .container-small {
   max-width: 768px;
+  margin: 0 auto;
 }
 .module-docheader + .module-body {
   padding-top: 89px;
@@ -7570,6 +8260,9 @@ button.close {
 .panel-body:after,
 .modal-header:after,
 .modal-footer:after,
+.modulemenu .modulemenu-group-header:after,
+.modulemenu .modulemenu-item-link:after,
+.dropdown-list > li:after,
 .module-docheader:after,
 .module-docheader .module-docheader-bar:after,
 .panel-heading:after,
index c444481..2a74c61 100644 (file)
@@ -1197,6 +1197,9 @@ Do you want to refresh it now?</source>
                        <trans-unit id="toolbarItems.bookmarkSavedMessage">
                                <source>The bookmark was saved.</source>
                        </trans-unit>
+                       <trans-unit id="toolbarItems.help">
+                               <source>Help</source>
+                       </trans-unit>
                        <trans-unit id="toolbarItems.search">
                                <source>Search</source>
                        </trans-unit>
index 11a822c..4a0e854 100644 (file)
@@ -87,12 +87,12 @@ class OpendocsToolbarItem implements ToolbarItemInterface
     {
         $numDocs = count($this->openDocs);
         $title = htmlspecialchars($this->getLanguageService()->getLL('toolbaritem'));
-
-        $opendocsMenu = [];
-        $opendocsMenu[] = '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-opendocs', Icon::SIZE_SMALL)->render('inline') . '</span>';
-        $opendocsMenu[] = '<span class="badge" id="tx-opendocs-counter">' . $numDocs . '</span>';
-
-        return implode(LF, $opendocsMenu);
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-opendocs', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            <span class="toolbar-item-badge badge" id="tx-opendocs-counter">' . $numDocs . '</span>
+            ';
     }
 
     /**
@@ -106,26 +106,40 @@ class OpendocsToolbarItem implements ToolbarItemInterface
         $openDocuments = $this->openDocs;
         $recentDocuments = $this->recentDocs;
         $entries = [];
+
+        $entries[] = '<h3 class="dropdown-headline">';
+        $entries[] = htmlspecialchars($this->getLanguageService()->getLL('toolbaritem'));
+        $entries[] = '</h3>';
+        $entries[] = '<hr>';
+
         if (!empty($openDocuments)) {
-            $entries[] = '<li class="dropdown-header">' . htmlspecialchars($languageService->getLL('open_docs')) . '</li>';
+            $entries[] = '<h3 class="dropdown-headline">';
+            $entries[] = htmlspecialchars($languageService->getLL('open_docs'));
+            $entries[] = '</h3>';
+            $entries[] = '<div class="dropdown-table">';
             $i = 0;
             foreach ($openDocuments as $md5sum => $openDocument) {
                 $i++;
                 $entries[] = $this->renderMenuEntry($openDocument, $md5sum, false, $i == 1);
             }
-            $entries[] = '<li class="divider"></li>';
+            $entries[] = '</div>';
+            $entries[] = '<hr>';
         }
         // If there are "recent documents" in the list, add them
         if (!empty($recentDocuments)) {
-            $entries[] = '<li class="dropdown-header">' . htmlspecialchars($languageService->getLL('recent_docs')) . '</li>';
+            $entries[] = '<h3 class="dropdown-headline">';
+            $entries[] = htmlspecialchars($languageService->getLL('recent_docs'));
+            $entries[] = '</h3>';
+            $entries[] = '<div class="dropdown-table">';
             $i = 0;
             foreach ($recentDocuments as $md5sum => $recentDocument) {
                 $i++;
                 $entries[] = $this->renderMenuEntry($recentDocument, $md5sum, true, $i == 1);
             }
+            $entries[] = '</div>';
         }
         if (!empty($entries)) {
-            $content = '<ul class="dropdown-list">' . implode('', $entries) . '</ul>';
+            $content = implode('', $entries);
         } else {
             $content = '<p>' . htmlspecialchars($languageService->getLL('no_docs')) . '</p>';
         }
@@ -152,9 +166,7 @@ class OpendocsToolbarItem implements ToolbarItemInterface
         }
         $label = htmlspecialchars(strip_tags(htmlspecialchars_decode($document[0])));
         $icon = $this->iconFactory->getIconForRecord($table, $record, Icon::SIZE_SMALL)->render();
-        $link = BackendUtility::getModuleUrl('record_edit')
-            . '&' . $document[2]
-            . '&returnUrl=' . rawurlencode(BackendUtility::getModuleUrl('web_list') . '&id=' . (int)$document[3]['pid']);
+        $link = BackendUtility::getModuleUrl('record_edit') . '&' . $document[2];
         $pageId = (int)$document[3]['uid'];
         if ($document[3]['table'] !== 'pages') {
             $pageId = (int)$document[3]['pid'];
@@ -163,18 +175,33 @@ class OpendocsToolbarItem implements ToolbarItemInterface
         if (!$isRecentDoc) {
             $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.closeDoc'));
             // Open document
-            $closeIcon = $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render('inline');
-            $entry = '
-                               <li class="opendoc">
-                                       <a href="#" class="dropdown-list-link dropdown-link-list-add-close" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
-                                       <a href="#" class="dropdown-list-link-close" data-opendocsidentifier="' . $md5sum . '" title="' . $title . '">' . $closeIcon . '</a>
-                               </li>';
+            $entry  = '<div class="dropdown-table-row t3js-topbar-opendocs-item">';
+            $entry .= '<div class="dropdown-table-column dropdown-table-icon">';
+            $entry .= $icon;
+            $entry .= '</div>';
+            $entry .= '<div class="dropdown-table-column dropdown-table-title">';
+            $entry .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($onClickCode) . '" target="contentIframe">';
+            $entry .= $label;
+            $entry .= '</a>';
+            $entry .= '</div>';
+            $entry .= '<div class="dropdown-table-column dropdown-table-actions">';
+            $entry .= '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-close t3js-topbar-opendocs-close" data-opendocsidentifier="' . $md5sum . '" title="' . $title . '">';
+            $entry .= $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render('inline');
+            $entry .= '</a>';
+            $entry .= '</div>';
+            $entry .= '</div>';
         } else {
             // Recently used document
-            $entry = '
-                               <li>
-                                       <a href="#" class="dropdown-list-link" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
-                               </li>';
+            $entry  = '<div class="dropdown-table-row t3js-topbar-recentdoc">';
+            $entry .= '<div class="dropdown-table-column dropdown-table-icon">';
+            $entry .= $icon;
+            $entry .= '</div>';
+            $entry .= '<div class="dropdown-table-column dropdown-table-title">';
+            $entry .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($onClickCode) . '" target="contentIframe">';
+            $entry .= $label;
+            $entry .= '</a>';
+            $entry .= '</div>';
+            $entry .= '</div>';
         }
         return $entry;
     }
index 1bd9836..da228a7 100644 (file)
@@ -22,18 +22,17 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
 
        /**
         *
-        * @type {{options: {containerSelector: string, hashDataAttributeName: string, closeSelector: string, menuContainerSelector: string, menuItemSelector: string, toolbarIconSelector: string, openDocumentsItemsSelector: string, counterSelector: string}}}
+        * @type {{options: {containerSelector: string, hashDataAttributeName: string, closeSelector: string, menuContainerSelector: string, toolbarIconSelector: string, openDocumentsItemsSelector: string, counterSelector: string}}}
         * @exports TYPO3/CMS/Opendocs/OpendocsMenu
         */
        var OpendocsMenu = {
                options: {
                        containerSelector: '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
                        hashDataAttributeName: 'opendocsidentifier',
-                       closeSelector: '.dropdown-list-link-close',
+                       closeSelector: '.t3js-topbar-opendocs-close',
                        menuContainerSelector: '.dropdown-menu',
-                       menuItemSelector: '.dropdown-menu li a',
-                       toolbarIconSelector: '.dropdown-toggle span.icon',
-                       openDocumentsItemsSelector: 'li.opendoc',
+                       toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
+                       openDocumentsItemsSelector: '.t3js-topbar-opendocs-item',
                        counterSelector: '#tx-opendocs-counter'
                }
        };
@@ -110,6 +109,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
         * closes the menu (e.g. when clicked on an item)
         */
        OpendocsMenu.toggleMenu = function() {
+               $('.scaffold').removeClass('scaffold-toolbar-expanded');
                $(OpendocsMenu.options.containerSelector).toggleClass('open');
        };
 
index f57d05e..b934fdf 100644 (file)
@@ -57,7 +57,11 @@ class ActionToolbarItem implements ToolbarItemInterface
     public function getItem()
     {
         $title = htmlspecialchars($this->getLanguageService()->getLL('action_toolbaritem'));
-        return '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-actions', Icon::SIZE_SMALL)->render('inline') . '</span>';
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-actions', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+        ';
     }
 
     /**
@@ -68,15 +72,22 @@ class ActionToolbarItem implements ToolbarItemInterface
     public function getDropDown()
     {
         $actionMenu = [];
-        $actionMenu[] = '<ul class="dropdown-list">';
+        $actionMenu[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->getLL('sys_action')) . '</h3>';
+        $actionMenu[] = '<hr>';
+        $actionMenu[] = '<div class="dropdown-table">';
         foreach ($this->actionEntries as $linkConf) {
-            $actionMenu[] = '<li>';
-            $actionMenu[] = '<a href="' . htmlspecialchars($linkConf[1]) . '" target="content" class="dropdown-list-link">';
-            $actionMenu[] = $linkConf[2] . ' ' . htmlspecialchars($linkConf[0]);
+            $actionMenu[] = '<div class="dropdown-table-row">';
+            $actionMenu[] = '<div class="dropdown-table-column dropdown-table-icon">';
+            $actionMenu[] = $linkConf[2];
+            $actionMenu[] = '</div>';
+            $actionMenu[] = '<div class="dropdown-table-column dropdown-table-title">';
+            $actionMenu[] = '<a class="t3js-topbar-link" href="' . htmlspecialchars($linkConf[1]) . '" target="contentIframe">';
+            $actionMenu[] = htmlspecialchars($linkConf[0]);
             $actionMenu[] = '</a>';
-            $actionMenu[] = '</li>';
+            $actionMenu[] = '</div>';
+            $actionMenu[] = '</div>';
         }
-        $actionMenu[] = '</ul>';
+        $actionMenu[] = '</div>';
         return implode(LF, $actionMenu);
     }
 
index 1491053..1e909a5 100644 (file)
@@ -71,9 +71,12 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface
         if (empty($this->availableWorkspaces)) {
             return '';
         }
-
-        return '<span title="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace')) . '">'
-            . $this->iconFactory->getIcon('apps-toolbar-menu-workspace', Icon::SIZE_SMALL)->render('inline') . '</span>';
+        $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace'));
+        $icon = $this->iconFactory->getIcon('apps-toolbar-menu-workspace', Icon::SIZE_SMALL)->render('inline');
+        return '
+            <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+            <span class="toolbar-item-title">' . $title . '</span>
+            ';
     }
 
     /**
@@ -98,33 +101,59 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface
         foreach ($this->availableWorkspaces as $workspaceId => $label) {
             $workspaceId = (int)$workspaceId;
             $iconState = ($workspaceId === $activeWorkspace ? $stateCheckedIcon : $stateUncheckedIcon);
-            $classValue = ($workspaceId === $activeWorkspace ? ' class="selected"' : '');
+            $classValue = ($workspaceId === $activeWorkspace ? 'selected' : '');
             $sectionName = ($index++ === 0 ? 'top' : 'items');
-            $workspaceSections[$sectionName][] = '<li' . $classValue . '>'
-                . '<a href="' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('main', ['changeWorkspace' => $workspaceId])) . '" data-workspaceid="' . $workspaceId . '" class="dropdown-list-link tx-workspaces-switchlink">'
-                . $iconState . ' ' . htmlspecialchars($label)
-                . '</a></li>';
+            $workspaceSections[$sectionName][] = '
+                <div class="dropdown-table-row t3js-workspace-item ' . $classValue . '">
+                    <div class="dropdown-table-column dropdown-table-icon">
+                        ' . $iconState . '
+                    </div>
+                    <div class="dropdown-table-column">
+                        <a href="' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('main', ['changeWorkspace' => $workspaceId])) . '" data-workspaceid="' . $workspaceId . '" class="t3js-workspaces-switchlink">
+                            ' . htmlspecialchars($label) . '
+                        </a>
+                    </div>
+                </div>
+            ';
         }
 
         if (!empty($workspaceSections['top'])) {
             // Add the "Go to workspace module" link
             // if there is at least one icon on top and if the access rights are there
             if ($backendUser->check('modules', 'web_WorkspacesWorkspaces')) {
-                $workspaceSections['top'][] = '<li><a target="content" data-module="web_WorkspacesWorkspaces" class="dropdown-list-link tx-workspaces-modulelink">'
-                    . $stateUncheckedIcon . ' ' . htmlspecialchars($languageService->getLL('bookmark_workspace'))
-                    . '</a></li>';
+                $workspaceSections['top'][] = '
+                    <div class="dropdown-table-row">
+                        <div class="dropdown-table-column dropdown-table-icon">
+                            ' . $stateUncheckedIcon . '
+                        </div>
+                        <div class="dropdown-table-column">
+                            <a href="#" target="contentIframe" data-module="web_WorkspacesWorkspaces" class="t3js-workspaces-modulelink">
+                                ' . htmlspecialchars($languageService->getLL('bookmark_workspace')) . '
+                            </a>
+                        </div>
+                    </div>
+                ';
             }
         } else {
             // no items on top (= no workspace to work in)
-            $workspaceSections['top'][] = '<li>' . $stateUncheckedIcon . ' ' . htmlspecialchars($languageService->getLL('bookmark_noWSfound')) . '</li>';
+            $workspaceSections['top'][] = '
+                <div class="dropdown-table-row">
+                    <div class="dropdown-table-column dropdown-table-icon">
+                        ' . $stateUncheckedIcon . '
+                    </div>
+                    <div class="dropdown-table-column">
+                        ' . htmlspecialchars($languageService->getLL('bookmark_noWSfound')) . '
+                    </div>
+                </div>
+            ';
         }
 
         $workspaceMenu = [
-            '<ul class="dropdown-list">' ,
-                implode(LF, $workspaceSections['top']),
-                (!empty($workspaceSections['items']) ? '<li class="divider"></li>' : ''),
-                implode(LF, $workspaceSections['items']),
-            '</ul>'
+            '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace')) . '</h3>',
+            '<hr>',
+            '<div class="dropdown-table">' . implode(LF, $workspaceSections['top']) . '</div>',
+            (!empty($workspaceSections['items']) ? '<hr>' : ''),
+            '<div class="dropdown-table">' . implode(LF, $workspaceSections['items']) . '</div>',
         ];
 
         return implode(LF, $workspaceMenu);
index 184c85e..bc4e17d 100644 (file)
@@ -27,12 +27,12 @@ define(['jquery'], function($) {
        var WorkspacesMenu = {
                options: {
                        containerSelector: '#typo3-cms-workspaces-backend-toolbaritems-workspaceselectortoolbaritem',
-                       menuItemSelector: '.dropdown-menu li a.tx-workspaces-switchlink',
+                       menuItemSelector: '.t3js-workspaces-switchlink',
                        activeMenuItemSelector: '.dropdown-menu .selected',
                        toolbarItemSelector: '.dropdown-toggle',
                        workspaceBodyClass: 'typo3-in-workspace',       // attached to <body> when in a workspace
-                       workspacesTitleInToolbarClass: 'topbar-workspaces-title',
-                       workspaceModuleLinkSelector: '.tx-workspaces-modulelink'
+                       workspacesTitleInToolbarClass: 'toolbar-item-name',
+                       workspaceModuleLinkSelector: '.t3js-workspaces-modulelink'
                }
        };
 
@@ -123,8 +123,8 @@ define(['jquery'], function($) {
 
                // add "selected" class and checkmark
                var $activeElement = $(WorkspacesMenu.options.menuItemSelector + '[data-workspaceid=' + id + ']', WorkspacesMenu.options.containerSelector);
-               $activeElement.find('i').removeClass(stateInactiveClass).addClass(stateActiveClass);
-               $activeElement.parent().addClass('selected');
+               $activeElement.parent().parent().find('i').removeClass(stateInactiveClass).addClass(stateActiveClass);
+               $activeElement.parent().parent().addClass('selected');
        };
 
        /**